Nikeのサイトを開いたとき、最初に目に入ってきたのは写真より短い言葉でした。「スポーツブランドなのに、文字で攻めているな」と思ったのがきっかけです。見ていくと、言葉と映像がしっかり役割を分けていることが分かってきました。
はじめに
この記事でわかること
- 短い言葉と、長めの動画の役割分担
- 白と黒だけで写真と映像を引き立てる配色
- サイトがアプリと会員サービスの「入り口」になっている作り
- 動画だけでは伝わりにくい所について、私が考えたこと
結論
Nike公式サイトは、白と黒にしぼった画面に、短い言葉と迫力のある写真・動画をのせて、スポーツブランドの世界観を強く伝えるサイトです。そのうえで、会員サービスやアプリへの入り口、商品を買うまでの流れも分かりやすく整理されています。
サイトの基本情報
- サイト名：Nike 日本公式サイト
- 運営会社：Nike, Inc.
- ジャンル：スポーツ用品・アパレルブランド
- 目的：ブランドの世界観を伝えることと、商品の販売
- 基礎知識：Nikeは1964年に「Blue Ribbon Sports」として創業し、1971年に現在の社名とスウォッシュロゴを採用しました。
短い言葉と、長めの動画
最初に目に入るのは「Just Do It」のような短い言葉です。言葉が少ないぶん、一言の重みが強く、ブランドの考え方がすぐに伝わります。
その言葉を支えているのが、写真と動画です。印象に残ったのは動画の長さで、一般的なWebサイトと比べても長めに作られていて、思わず見入ってしまいました。まず短い言葉と映像で世界観に引き込み、そのあとに商品を見せる。だから商品の魅力がより強く感じられるのだと思います。
白と黒だけで、写真を引き立てる
色は白と黒が中心で、ほかの色はほとんど使われていません。申し込みのボタンも黒のシンプルなものです。色を使わないぶん、写真や動画の色と動きが際立ち、スポーツの躍動感が伝わってきます。余白も大胆にとられていて、迫力がありながら見やすい画面でした。
アプリと会員サービスへの入り口
最初の画面でブランドの言葉を見せ、特集や新商品、カテゴリ別の商品へと続き、購入のページへ進める作りです。情報は多いのですが、優先順位がはっきりしています。
また、サイトのあちこちに「ナイキメンバー」への登録の入り口が置かれていました。会員限定の商品、先行販売、送料無料、誕生日の特典などがアプリと連動して用意されていて、サイトは単なる通販ではなく、Nikeアプリを中心にした会員サービスへの入り口として作られていると感じました。
このサイトから取り入れたいこと
- 言葉は短く、映像に語らせる：一言をしぼると、写真や動画の力が強くなります。
- 色を使わないことで、写真を主役にする：白と黒の画面は、どんな写真もきれいに見せてくれます。
- サイトの役割を「入り口」と考える：会員サービスやアプリへ案内することで、関係を長く続けられます。
自分のサイトでまねするなら、最初の画面の言葉を「10文字以内」と決めて考えてみたいと思います。言いたいことをしぼる練習にもなり、写真の印象も強くなりそうです。
ほかのサイトと比べると
同じアパレルのユニクロ（「No.004 ユニクロのデザイン分析」）は、値段や期限を写真にのせ、性別や年齢でサイト全体を切り替えるなど、「早く見つけて買える」ことを優先していました。Nikeは、短い言葉と長めの動画でまず世界観に引き込みます。同じ白と黒の画面でも、「探しやすさ」と「あこがれ」のどちらを先に届けるかで、作りが大きく変わるのだと感じました。
また、Apple（「No.011 Appleのデザイン分析」）も余白と写真で製品を主役にしていますが、Appleは製品の形を、Nikeは体を動かす躍動感を見せています。何を主役にするかで、写真の選び方も変わります。自分のサイトでも、まず「主役は何か」を決めてから写真を選びたいと思います。
Nike公式サイトを見て、私が気づいたこと
このサイトから学んだこと
スポーツブランドならではの、迫力ある動画の見せ方がとても印象的でした。一般的なWebサイトと比べても動画が長めで、思わず見入ってしまいます。まず映像でブランドの世界観に引き込み、そのあとに商品を見せることで、商品の魅力をより強く感じられる作りになっていると感じました。
自分ならこう作る
ブランドの世界観を伝える演出はとても優れている一方で、動画だけでは商品の特徴が伝わりにくい場面もあるように感じました。また、写真は雰囲気を重視したものが多く、実際に着たときのイメージがしにくいこともあるかもしれません。ブランドの見せ方は保ちながら、商品の細かい部分や、着たときの様子が分かる写真を組み合わせる方法も考えられます。
これから学ぶ人へ
このサイトは、商品を売るだけでなく、Nikeのファンをさらに引きつけることを大切にしているように感じました。今はいろいろな通販サイトで商品を買えるからこそ、公式サイトはブランドの価値や世界観を伝える役割を担っているのだと思います。サイトの目的をはっきりさせ、それに合わせて作ることの大切さを学べる例です。
※本記事はWebデザイン学習の一環として、実際の公開サイトを観察・分析した記録です。
同じ「お店・サービス」のサイトとして、「No.004 ユニクロ公式サイトのデザイン分析」も分析しています。見比べると、それぞれの工夫の違いがよく分かります。
この記事のまとめ
Nike公式サイトは、白と黒にしぼった画面に、短い言葉と長めの動画をのせて、スポーツブランドの世界観を強く伝えるサイトです。会員サービスやアプリへの入り口を随所に置き、商品を買うまでの流れも整理されています。商品の細部が伝わる写真を足せば、さらに選びやすくなりそうです。
よくある質問（FAQ）
Q. Nikeのサイトが「言葉で攻めている」とはどういう意味ですか？
A. 最初に開いたときは「Just Do It」のような短い言葉が目に入りました。見ていくと、大きな写真や動画と短い言葉を組み合わせて、ブランドの考え方を伝えているのだと分かりました。
Q. スポーツブランドのサイトで大切なことは何ですか？
A. 「挑戦・行動・エネルギー」を目で見て伝えることだと思います。写真の角度や、動きのある映像が効果的です。
Q. 公式サイトと通販サイトの役割の違いは何ですか？
A. 通販サイトでも商品は買えるので、公式サイトはブランドの世界観を伝え、会員サービスなどで長いつきあいを作る役割が大きいと感じました。実際の画面はNike 日本公式サイトで見られます。
