カロリーメイト リキッドのサイトを分析してみた

大塚製薬さんの「カロリーメイト リキッド」についてデザイン分析させていただきました。シンプルなデザインながらプログラミングで生成されたような動きのサイトで、面白いコンセプト・演出になってます。

KNAPのデザイナー3人でトークしてます。
あくまでメンバーで個人的に分析をさせていただいておりますことをご了承ください。

デザイン分析元の基本情報

商品の特徴：カロリーメイト リキッドを紹介するキャンペーンサイト
#カロリーメイト #缶ジュースの日 #栄養 #Webサイト #Webデザイン
URL：https://www.otsuka.co.jp/cmt/to_programmer/
企業名：大塚製薬

トップページ

動きの演出とデザインのバランスが取れています。

-ファーストビュー

プログラミングのソースコードのように構成されており、一瞬なにかのプログラミングが走ったのかな？とドキッとする分印象に残るなと感じました。
「＃うちこむ人にバランス栄養」というキャッチコピーで、熱中の"打ち込む"と入力の"打ち込む"をかけていて、遊び心の効いているコピーになってます。

-コンテンツ

コードっぽく見せながら、実はPROTEINやFATやVITAMINなどの、英語なのでプログラマーの人でなくても読める文字になっており、コードと栄養素のデザインがマッチしており面白い演出になってます。スクロールしていくと動くので、どんどん下にスクロールしたくなります。
色味はモノクロで作られている分、黄色のアクセントが効いています。マウスオーバーの時の演出もコードを入力したようなものになっています。

-共通箇所（サイトマップ、フッター）

フッターもソースコードっぽいデザインになっていて統一感がありました。

スマホデザイン（レスポンシブ）

SPは長くなってしまうので、ナビゲーションがあります。スマホで見ても見やすくは作られてますが、プログラミング感を味わうのにぜひPCで見てもらいたいです。

下層ページ

スペシャルコンテンツとして、プログラマー向けのページになってました。プログラミングが分かる人がソースを書くとカロリーメイトの画像が文字コードで表示されました。デザインだけでなく、SNSでも盛り上がる仕掛け作りが素敵ですね。（自分で入力できます）

動き

プログラムで書いた感じになったのが面白く、近未来的でワクワクします。このまま画像を入れてしまうと、異質なものに見えてしまうので、凄くバランスが取れているなと思いました。

フォント

こぶりなゴシック StdN W3 | Webフォント・サービス FONTPLUS

Google Fonts

日本語デバイスフォント：こぶりなゴシック
英語：Space Mono（googleフォント）
フォントのカラー：＃000000

▲上がサイトのデザイン　下が通常の文字の幅

フォントの説明
こぶりなゴシックは可愛い印象を与えるフォントだと思っていたのですが、幅を狭くして長体として使用することで可愛さが和らぎ、少しスポーティーな印象を与えるなと感じました。
transform: scaleで文字の横幅を狭くしているのですがこういう演出方法もあるのだなと勉強になりました。

カラースキーム分析

テキストは黒、アクセントにカロリーメイトのイメージカラーの黄色をアンダーラインのように使用しています。色数が少ないため、アクセントが目に飛び込んできます。

ファビコン

OG画像

タイトル

CalorieMate to Programmer | 大塚製薬
カロリーメイトから、すべてのうちこむ人へ。プログラミング言語で書かれたメッセージを公開中。　#うちこむ人にバランス栄養

バランスフードというだけに、サイトのデザインもとてもバランスの取れたサイトでした。

この記事を書いているメンバーが働いている会社
よかったら見に来てください！