資生堂のサイトを見ていたら、おしゃれな雑誌をめくっているような感じがしました。ところが調べてみると、このサイトは化粧品を買うためのサイトではなく、「会社の案内」のサイトでした。その意外さから分析を始めました。
はじめに
サイトの基本情報
基礎知識：資生堂は1872年創業で、日本最古級の化粧品会社の一つ。本社は東京・銀座にあります。
この記事でわかること
- 買い物のサイトではなく「会社案内」のサイトだと分かる理由
- 20以上のブランドや事業を並べる「ブランドの一覧」の見せ方
- 色を少なくして、赤に意味を持たせる配色
- ロゴとパッケージの見せ方について、私が考えたこと
結論
資生堂の公式サイト（corp.shiseido.com）は、化粧品を買うためのサイトではなく、投資家や就職を考える人、取引先に向けた会社案内のサイトです。白を土台に赤をしぼって使い、余白と控えめな動きで、20以上のブランドを持つ会社としての上品さと信頼感を伝えています。
実は「買い物」のサイトではない
分析したcorp.shiseido.comは、化粧品を買うサイトではありませんでした。サイトの一覧を見ると、会社の運営の仕組み、品質への取り組み、環境や社会への取り組み、採用情報といった、会社案内の項目が並んでいます。
その中に「ブランド」の一覧があり、SHISEIDOやNARSはもちろん、Drunk Elephant、ISSEY MIYAKE PARFUMS、さらにレストランの資生堂パーラーまで、20以上のブランドや事業が並んでいました。会社が持っているブランドを見せる「ブランドの一覧表」のような作りです。
買い物はそれぞれのブランドのサイトで行うので、このサイトでは「会社の考え方 → 研究 → 各ブランドのページ」と、段階的に案内していく流れになっていました。
色を少なくして、赤に意味を持たせる
土台は白で、黒と赤が効果的に使われています。赤は資生堂を象徴する色で、使う場所を限ることで「資生堂らしさ」を思い出させる役割を持っていました。
写真は、高画質の商品や人物の写真が主役で、文字はおさえめです。スクロールに合わせてふわっと現れる動きやスライドも使われていますが、どれも控えめで、読む邪魔をしません。余白が広く、大事なものは画面の中央に置かれているので、目が自然に流れていきます。
「雑誌のよう」に感じた理由
横長の大きな写真と、短い文字の組み合わせは、ファッション誌のページによく似ています。商品の情報を並べるというより、世界観の中にブランドが溶け込んでいる印象でした。
化粧品は「機能」だけでなく「なりたい自分」を届けるものだと思います。会社案内のサイトでも、その空気を最初に感じてもらうために、雑誌のような見せ方をしているのかもしれません。
このサイトから取り入れたいこと
- サイトの役割をはっきり決める：買い物のサイトか、会社案内のサイトかで、見せるべきものが変わります。
- 目立たせる色は一つにしぼる：使う場所を限ると、その色がブランドの印として効きます。
- 動きは控えめに、余白は広く：派手さをおさえることで、上品さと信頼感が伝わります。
自分のサイトでまねするなら、まず「このサイトで何をしてほしいか」（買ってほしいのか、知ってほしいのか）を一行で書き、それに合わない要素は思い切って別のページに移したいと思います。役割がはっきりすると、色や写真の選び方も迷わなくなりそうです。
ほかのサイトと比べると
同じように「会社の情報」を伝えるトヨタのサイト（「No.006 トヨタ公式グローバルサイトのデザイン分析」）も、派手さをおさえて信頼を伝える作りでした。ただ、トヨタはニュースを中心に正確さを、資生堂は雑誌のような写真で上品さを大切にしています。同じ会社案内のサイトでも、業種によって「信頼」の伝え方が変わるのだと分かりました。
資生堂公式サイトを見て、私が気づいたこと
このサイトから学んだこと
ブランドごとにイメージがしっかり作られていて、ページごとに雰囲気が違う点が印象的でした。訪れた人が一つのブランドをきっかけに、別のブランドへと自然につながっていく作りになっていて、取り扱うブランドを軸にした見やすいトップページだと感じました。
自分ならこう作る
ブランドの一覧は、ロゴを中心にしたスライドで、各ブランドの広告を流す作りになっていました。ここに商品のパッケージもロゴと一緒に表示されていると、外で買い物をしているときにも思い出しやすく、ブランドを覚えてもらいやすくなると感じます。ただ、パッケージを強く見せすぎると高級感がそこなわれるかもしれないので、どちらを優先するかは慎重に考えたいところです。
「高級感」は削ることで生まれる
余白、書体、写真の雰囲気、色の数。資生堂のサイトは、すべてが「上質さ」に向かってそろっている印象でした。派手な演出はないのに、安っぽく感じません。高級感は何かを足すのではなく、余計なものを削ることで生まれるのだと思います。この「上質さの作り方」は、化粧品以外のサイトにも生かせる考え方です。
これから学ぶ人へ
バナーやロゴを使ってブランドの魅力をシンプルに伝えていて、シンプルに見えるぶん、作り手の設計の力が問われると感じました。また、高級感を出すには、余白の使い方がとても大切だということも学べました。
※この分析は、Webデザインの専門校での学習の一環として、公開サイトを実際に観察・整理した記録です。
同じ「メーカー・企業」のサイトとして、「No.002 キユーピー公式サイトのデザイン分析」も分析しています。見比べると、それぞれの工夫の違いがよく分かります。
この記事のまとめ
資生堂の公式サイトは、化粧品を買うサイトではなく、20以上のブランドや事業を持つ会社を紹介する会社案内のサイトです。白を土台に赤をしぼって使い、余白と控えめな動き、雑誌のような写真の見せ方で、上品さと信頼感を伝えています。サイトの役割をはっきり決めることと、削ることで高級感を生む考え方を学べました。
よくある質問（FAQ）
Q. 資生堂のサイトで化粧品は買えますか？
A. 分析したcorp.shiseido.comは会社案内のサイトなので、買い物はそれぞれのブランドのサイトで行う作りです。このサイトでは、会社の考え方や研究、ブランドの一覧を見ることができます。
Q. 高級なブランドのサイトに共通する特徴はありますか？
A. 色をしぼった上品な配色、人物写真の使い方、余白の広さが共通していると感じます。足すより削ることで、上質な印象を作っています。
Q. 「雑誌のような見せ方」とはどういう意味ですか？
A. 横長の大きな写真と短い文字を組み合わせて、情報より先に世界観を届ける並べ方のことです。実際の画面は資生堂公式サイトで見られます。
