【Webデザインの独学・模写】NIKEオンラインストアのWebデザインについて【購買欲が出るデザイン方法3選】

Thumb-NIKE-Clone ぷろぐらみんぐ🏫

 こんにちはー!ぐんたろです!

 Webデザインを少しかじったら、今まで自然と触っていたWebページがすごすぎて当たり前のWebサービスが異次元の技術力の高さコーディングの難しさを感じたことがありませんか?

 今回は「NIKEオンラインストア」Webデザイン・UI・UX作成していくことで、「技術力の高さ」「UI・UXのについて」、そして「購買意欲の出るデザイン」をプログラミングをやったことのない方にもわかりやすく説明していきます!

これからWebデザインを勉強していこう!

NIKEのオンラインストア便利でよく使っています!

 これからWebデザインを学習しようと思っている方も、普段NIKEオンラインストアを利用しいている方も、NIKEオンラインストアのWebデザインの「購買意欲が出るデザイン」を知ることで、NIKEオンラインストアの「便利さ」「使いやすさ」「デザイン」を他の友人に語るときに、しっかり「マウント」を取れるように解説していきますので、ぜひご覧ください!

この記事でわかること
  • NIKEオンラインストアのデザインについて
  • NIKEオンラインストアのUI・UXについて
  • NIKEオンラインストアの機能について
  • NIKEオンラインストアの「購買意が出るデザイン」について

今回作成いたしました、NIKEオンラインストアのクローンがこちらになります。

https://clone-nike.vercel.app/

 NIKEオンラインストアの「購買欲がでるデザイン方法」の3つが下記になります。

購買意欲が出るデザイン 3つの方法
  • 顧客目線で多機能な【インデックス機能】
  • 「整列」・「反復」による洗礼された、【写真とWebデザイン】
  • 顧客を満足させる【無限スクロール機能】

NIKEオンラインストアのWebページを見てみよう

 まずは実際の「NIKEオンラインストア」のWebページをみていきましょう!

【NIKE公式】 メンズ スニーカー【ナイキ公式通販】
ナイキのメンズ スニーカーをお探しなら【NIKE公式】オンラインストア(通販サイト)でどうぞ。

 今回クローンを作成していく「NIKEオンラインストア」のWebサイトは「ヘッダー」と「サイドバー」「メインコンテンツ(商品一覧)」となっています。

 

 意外とよく見かけるWebサイトのデザイン構成かなと思います。

 シンプルで見やすいオンラインショップであることは確かです。

 このシンプルなデザインも意外と難しいレイアウトになってます。

 例えば、「商品一覧の画面の大きさ」と「サイドバーの画面の大きさ」の比率が逆でしたらどうでしょうか?

 商品見づらくなることは言うまでもありません。もはやどちらが商品なのかもわからなくなってしまいます。Webデザインにおいて、サイドバーとメインコンテンツの見せ方も重要な要素です。このレイアウトを作るのも意外と難易度・技術力・デザイン力は高いです。

 「写真の大きさ」「写真の並び方」「スマホサイズの時の見せ方」「パソコンサイズのときの見せ方」など、Webデザインは見てくれる「ユーザーを思いやる心」が重要になります。

 NIKEオンラインストアの商品の見せ方は非常に綺麗です。お店に陳列されているかのように写真も洗練されたものになっており、NIKEの「ブランド」を感じることができるものになっております。

 下記の画像はパソコン版のNIKEオンラインストアの画像スマホ版の画像になります。二つを見比べて見ましょう。

PCサイズの画面
スマホサイズの画面

 上記の写真のように、パソコンから見てもスマホから見ても完璧なデザイン。商品を選ぶのが楽しくなります。

 「模写」をしていたら危うく、「NIKEのエアーフォース」を購入しそうになるくらいの完璧なデザイン「購買欲」を高めるデザインには統一感のある「写真選び」「Webデザイン」の掛け算から生まれるものなのでしょう。

NIKEオンラインストアの【ヘッダー】デザインについて

 ヘッダーのデザインについて見ていきましょう。

 ヘッダーのデザインも非常にシンプル。「模写」をこれからする私にとってもありがたく色で部分分けされいるので非常にわかりやすいです。

 上の写真のように上から「赤」「青」「緑」のエリアで三分割されており、情報が多く記載されているのがわかるでしょう!

 それぞれのエリアにロゴがありますので「赤」はジョーダンエリア「青」はナイキエリア「緑」は広告エリアと読んでいきましょう。

 ジョーダンエリアには「ログイン・ログアウト機能」、「ヘルプリンク」

 ナイキエリアには「カテゴリーのリンク」

 広告エリアにはもちろん「広告」がスライドショーで表示されております

 ヘッダーにはWebページを司る機能が集結しており、クリックするだけで、ログイン・ログアウト、商品のインデックス機能を使うことができます。

 ユーザーはWebページを斜め読みをしていきますので、ユーザーはNIKEオンラインストアに訪れた瞬間に

ヘッダーを使えば商品を検索できるんだ…!

無意識に判断することができ目的にあった商品を検索することができます。

 NIKEオンラインストアを訪れたお客様は迷子にならず、そして店員に、

NIKEのAirマックスはどこにありますか?

と聞くことなく、商品を探すことができます。

 次に、パソコン版の画面スマホ版の画面を見比べてみましょう。

パソコン画面
スマホ画面

 パソコン画面スマホ画面のヘッダーのレイアウトがかなり違うことにお気づきいただけたでしょうか?

スマホの画面の方が小さいから、レイアウトが変わるのも当たり前だよ。

 このように思う方もいるかもしれませんが、レイアウトをスマホ用とパソコン用に変更することもエンジニアは行っているのです。

 NIKEのエンジニアのお客様を思う気持ち」は超一流です。

 スマホサイズでも、カテゴリーが検索できるよう、商品名で検索できるように設計されていることがお分かりいただけるでしょう。

 スマホサイズパソコンサイズで見れることは当たり前のように思われるかもしれませんが、この作業が非常に地道な作業であり、技術が必要になるポイントです。

 正直、「模写」している私はだれからも期待されていませんので、ただただ、だるい作業でした。

 「スマホサイズ」でも綺麗に見せる。の時代から

 「スマホサイズ」は当たり前、「パソコン」は当然に綺麗に見える。

 このようにWebデザインは進化しているのかもしれません。

 ちなみに私のブログもスマホでご覧になってる方7割を超えております。※PV/日は0〜1くらいなことはみなさんがお察しの通りです。

NIKEオンラインストアの【サイドバー】のデザインについて

 続いてサイドバーについてです。

 サイドバーには商品を探しやすくするためのインデックス機能がついております。NIKEオンラインストアには数多くの商品が掲載されておりますので、インデックス機能超強力です。

 実際に触れて見ると分かると思いますが、インデックスの機能万歳で、カテゴリーだけでなく、ブランドや履き心地、素材などで検索を行うことができます。この機能が優秀すぎて感動します。

NIKEのインデックス機能半端ないって…

 このインデックス機能があればもはや、Googleで「履きやすい NIKE スニーカー 口コミ」などと検索しなくても自分に合う靴に出逢えます。

NIKEのエンジニアの技術力半端ね〜…

 ちなみに、インデックス機能つければつけるほど複雑な処理が必要になってきます。Twitterのように、

タグづけしとけば大丈夫っしょ。まじ卍↑↑

 という感覚ではないので、ご注意ください。※Twitterのタグ機能もエグいです。

 ここで一旦、画像でサイドバーレイアウトを確認しましょう。

多機能なインデックス機能でも、使いづらければ意味ないよね…

 と思う方もいるでしょう。NIKEオンランストアのサイドバーのデザインは完璧です。

 多機能なサイドバーは機能を「アコーディオン」というデザイン方式で綺麗にレイアウトを作成しております。「アコーディオン」というのは楽器の「アコーディオン」のように閉じたり開いたりすることができます。※アコーディオンがわからない方はこちらのリンクを参考にしてください。(アマゾンの高級なアコーディオンの商品が見れます。よかったら買ってね。)

アコーディオン開く前
アコーディオン開いた後

 「アコーディオン」で開閉することにより、ユーザーが求めている検索機能をいち早く見つけることができるデザインになっております。

 NIKEオンラインストアですぐに買い物をすることができるのは、

NIKEが大好き〜

NIKE愛している〜

スニーカー選びなら私は一流だからね〜卍

 というわけではありません。NIKEエンジニアが死ぬ気で努力して、作り上げたデザインとインデックス機能のおかげということです。

 「顧客目線のインデックス機能」は顧客の満足度向上に繋がり、NIKEオンラインストアの滞在時間を増やすきっかけとなります。

 また、このサイドバーだけを下にスクロールすることができることを無意識にやっていると思いますが、このデザインも少し癖があり、デザインの難易度が少し高いです。サイドバーだけスクロールできることで、商品の一覧ページもみやすいデザインになっております。

NIKEオンラインストアの【サイドバー】のデザインについて

 最後にメインボディー(商品一覧画面)についてです。

 ぱっと見はどうでしょう?

綺麗に大きさも揃っていて見やすい!商品画像が揃っていて比較もしやすいです!

 こんな印象を受けるのではないでしょうか?

 デザインの4原則「整列」「近接」「対比」「反復」、この原理をうまく使用した綺麗なデザインになっているのではないでしょうか?

 商品を紹介する1枚のカードが縦と横に綺麗に「整列」され「反復しております。

 Webデザインにおいて、商品や写真を説明するカードを並べていくデザインは現在の主流のデザイン技法になっております。

 カードを作成することで、デザイン4原則の「近接」をユーザーにイメージさせ、どの商品の説明を記載した「文章」かをユーザーにわかりやすく明示することができます。

 もちろんここでイメージするカードは遊戯王カードでも、ポケモンカードでも構いません。

 ※遊戯王であれば、「死者蘇生」、ポケモンカードであれば「ピカチュウ」をイメージすれば問題ありません。(何言っているかわからない方は読み飛ばしてください。)

 さらに、商品一覧の画面には素晴らしい機能がついており、下にスクロールすると新しい商品が読み込まれていく機能が標準機能として搭載されております。

 「Twitter」「instagram」「Youtube」にもこの機能は標準装備されております。この機能はユーザーが永遠とアイテムを探せるようになっており、下にスクロールすることがやめられなくなります。よくこのスクロール機能を「無限スクロール」と呼んでおります。※中二病っぽくいうと「∞スクロール」です。

 NIKEオンラインストアでは「無限スクロール」機能を使い、ユーザーが満足するような商品を永遠と表示し続けます

 要するにNIKEオンラインストアにきたユーザーはNIKEの商品を買って、満足するまで、お望みの商品をおすすめし続けてくれます

 「整列」・「反復」を繰り返されたデザインにすることで顧客に親しみやすさを提供し「無限スクロール」で顧客が満足できるまで、とことん「商品」をおすすめし続けてくれるNIKEオンラインショップ。

 ここまでお客様を思って商品をおすすめしてくれる店員はいたでしょうか?いやいないでしょう。もはやオンラインストア以外でお買い物をすることがやめられなくなってしまいます。

NIKEオンラインストアにきてしまったらなんか買っちゃう…

 要するにNIKEオンランストアに訪れてしまうと、NIKEのスタイリッシュで、スポーティーな商品を買い物カゴに入れてしまいたくなってしまいます。新作のNIKEのランニングシューズはまじでおしゃれで、ランニングなんてしない私も買い物をしたくなってしまうオンラインショップです。

 商品の写真の取り方Webデザインにより、より商品の良さが浮き彫りになります。そしてなにより、商品が見やすいことはユーザーが比較して商品を選ぶことができるので、最終的にクレーム・返品対応が少なくなり、ユーザーの満足度の向上に繋がってきます

 NIKEオンラインショップで何時間も商品を見ていられるのは、あなたが「NIKEを愛している」わけでもなく、「ウィンドウショッピングが好き」というわけでもなく、NIKEのエンジニア・Webデザイナーたちが永遠とショッピングを楽しめるサイトを作っていると言うことです。

コメント

タイトルとURLをコピーしました