キユーピー公式サイトをぼんやり眺めていたら、「赤が多いのに、なんでうるさく感じないんだろう」と思いました。Webデザインの専門校の先生にすすめられたサイトで、そこからデザインを観察し始めました。
はじめに
この記事でわかること
- 赤が多いのに、うるさく見えない理由
- テレビCMの写真をそのまま使った最初の画面
- 商品・レシピ・見学・会員と、目的ごとに積み重なるページの組み立て
- 食品メーカーらしくない、ゲームのような会員サービス
結論
キユーピー公式サイトは、ブランドの赤を使う場所をしぼり、料理写真を主役にしたサイトです。テレビCMと同じ写真で世界観をつなぎ、商品・レシピ・見学・会員と、目的ごとのまとまりを順番に積み重ねています。
サイトの基本情報
- サイト名：キユーピー公式サイト
- 運営会社：キユーピー株式会社
- 業種：食品メーカー
- 分析日：2026年3月
- 基礎知識：キユーピーは1919年創業（創業者・中島董一郎）。看板商品のマヨネーズは1925年発売で、国内シェアは長年トップを維持しています。
テレビCMとつながる最初の画面
最初の画面は、大きな写真が5枚、自動で切り替わる作りでした。「マヨネーズ」「深煎りごまドレッシング」など、商品ごとのテレビCMの静止画をそのまま使っています。
テレビで見た映像とサイトの写真が同じなので、サイトを開いた瞬間に「あのCMのキユーピーだ」とつながります。サイトだけで世界観を作るのではなく、CMと地続きにしている点が印象に残りました。
赤は「ここだけ」に使う
土台は白で、ブランドの赤はロゴやボタンなど、目立たせたい場所にしぼって使われています。補助の色としてグリーンなども入りますが、色の数は多くありません。
料理写真を大きく見せているので、画面の色の多くは「料理の色」です。赤を使う場所が限られているから、写真のおいしそうな色とぶつからず、うるさく感じないのだと思いました。
目的ごとに積み重なるページの組み立て
最初の画面の下には、目的ごとのまとまりが順番に積み重なっています。
- 商品情報：20点近い商品の種類が、正方形の小さな画像で並ぶ
- とっておきレシピ：商品を使った料理の提案
- 体験・エンタメ：マヨテラス（見学施設）や工場見学の案内
- kewpie ID：会員サービスへの入り口
「商品を知る → 料理に使ってみる → 見学で深く知る → 会員になる」と、関わりが少しずつ深くなる順番に並んでいます。どこから読み始めても、次に進む先が自然に見える作りです。
食品メーカーらしくない、ゲームのような会員サービス
会員向けには、スタンプカード形式の「Hi! kewpie」と、サラダを提案する「Qummy」が、それぞれ独自のロゴつきで用意されていました。スタンプを集めてポイントと交換するなど、アプリのようにゲームの仕組みを取り入れています。
食品メーカーのサイトは商品とレシピの紹介が中心になりがちですが、キユーピーは「また来たくなる仕組み」にも力を入れているのだと感じました。
このサイトから取り入れたいこと
- ブランドの色は使う場所をしぼる：しぼることで、色が「印」として効き、写真の色ともぶつかりません。
- 広告とサイトの写真をそろえる：CMやチラシと同じ写真を使うと、見た人の中で世界観がつながります。
- まとまりを「関わりが深くなる順」に並べる：知る→使う→深く知る→会員になる、の順にすると、自然に読み進められます。
自分のサイトでまねするなら、まずブランドの色を「ロゴ」「一番押してほしいボタン」「見出しの印」など3か所くらいに決めて、それ以外には使わないところから始めるとよさそうです。写真が多いページほど、色をしぼる効果が大きくなります。
また、チラシやSNSで使った写真を、サイトの最初の画面でもそのまま使ってみる方法もあります。広告を見て来た人が「さっきの商品だ」とすぐに分かれば、迷わず次のページへ進めるはずです。
キユーピー公式サイトを見て、私が気づいたこと
このサイトから学んだこと
Webデザインの専門校の先生からおすすめされたサイトです。
特に印象に残ったのは、バナーの中の文字の置き方と写真の使い方でした。シンプルなのに商品の魅力やおいしそうな雰囲気が伝わりやすく、余計な情報が少ないので、とても見やすいと感じました。
また、全体的に余白を生かした作りになっていて、シンプルなデザインでありながら適度な動きもあり、見ていて楽しいサイトでした。
自分ならこう作る
商品情報や企業情報など情報が多いので、ボタンを使って目的のページへ移動しやすくする方法も考えました。
ただ、ボタンに強い色をつけると、本来見てほしい情報よりボタンが目立ってしまうかもしれません。赤を使う場所をしぼっている今のバランスが、このサイトには一番合っているのかもしれないとも感じました。
※この記事は、Webデザインを学ぶ過程で実際の公開サイトを見て気づいたことをまとめた学習記録です。
同じ「メーカー・企業」のサイトとして、「No.019 Panasonic公式サイトのデザイン分析」も分析しています。見比べると、それぞれの工夫の違いがよく分かります。
この記事のまとめ
キユーピー公式サイトは、ブランドの赤を使う場所をしぼり、料理写真を主役にすることで、赤が多くてもうるさく見えないサイトです。テレビCMと同じ写真で世界観をつなぎ、商品・レシピ・見学・会員と、関わりが深くなる順にまとまりを並べています。特に「色を使う場所をしぼる」考え方は、自分の制作にも生かしていきたいポイントです。
よくある質問（FAQ）
Q. 赤が多いのに、なぜうるさく見えないのですか？
A. 赤をロゴやボタンなど目立たせたい場所にしぼって使い、画面の多くを料理写真にしているからだと思います。写真の色と赤がぶつからないので、落ち着いて見られます。
Q. 食品メーカーのサイトはなぜ「赤」を使うことが多いのですか？
A. 赤は食欲をわかせる色と言われることがありますが、根拠については諸説あります。キユーピーの場合はブランドのロゴが赤なので、ロゴとそろえるために使われているのだと思います。
Q. 広告とサイトの写真をそろえると、どんな良いことがありますか？
A. CMやチラシで見た人がサイトを開いたとき、「あの商品だ」とすぐにつながります。キユーピーは最初の画面にCMの静止画を使っていました。実際の画面はキユーピー公式サイトで見られます。
