Chitose Kato’s デザイン解剖　VOL.5「MILK STAR」

雑誌『Web Designing』の連載「MISH MASH」で紹介している「洗練された デザインのつくり方」。初心者から一歩踏み出したデザインのポイントをお届けしているこちらの内容を、最近気になった素敵なサイトとあわせて深堀りし、加藤千歳さんが独自の視点で解説（解剖）します。

話してくれた人

今回のWebサイトの概要

「MILK STAR」
https://milkstar.jp

おいしいお菓子を作るために欠かせない「ミルク」の素材にこだわり、おいしさを追求する“ミルクが主役”のスイーツブランドのサイトです。ゆったりと広くとられた真っ白な余白に、思わず目を奪われるような写真で構成されたレイアウト。シンプルな中に商品の世界観が溶け込んだ魅力溢れるページを、さっそく見ていきましょう。

今回は『Web Designing』6月号の連載（MISH MASH）で解説した「余白が決める洗練度」が、実際にどのように使われているのかを、「MILK STAR」のサイトを例にご紹介します。ぜひ本誌とあわせてご覧ください。

白の余白で縁取られたファーストビュー

① センターに配置されたロゴは、マーク下の鋭角部分が真下を向き、ファーストビュー下にある「SCROLL」の縦線とぴったりつながる、センター揃えの美しいレイアウトです。ロゴや左右のメニューは、写真から少しはみ出して配置されているため、整列しすぎず、ほどよい「抜け」を感じさせるおしゃれな印象になっています。

② 細すぎず、ほどよく幅をもたせた上部と左右の均等な余白は、ミルクやお皿の白と一体感があり、写真そのものの魅力をより一層引き立てる白いフチになっていて、とてもオシャレ！　写真の背景色とお菓子の色も同系色で、色数がシンプルに抑えられています。

③ 左に少しはみ出したメニューには、ロゴマークの星が使われており、リンクであることがひと目でわかります。この星マークは繰り返し目にすることで好感度や印象が高まるという「単純接触効果」によって、ブランドへの愛着感を自然と深めてくれます。

④ まずはセンターや右にある商品が目に入ります。その後、商品の切り口の向きやフォークの配置、奥（右）に置かれたミルク入りのグラスによって視線は自然と左方向へ。左側にたっぷりと取られた余白の効果もあってコンパクトな「メニュー」の存在が引き立つレイアウトになっています。

⑤ 左右両サイドのメニューは、天地のセンターに配置されていることで、全体としてきれいに整列されたデザイン。さらに白いフチ部分にあしらわれたロゴマークの小さな「星」もフチの幅の中央に配置され、左右両端のワンポイントのアクセントに。

⑥ 「SCROLL」のテキストも写真から少しはみ出して配置されており、ここまで細部にわたって丁寧に揃えられていることに驚かされます。

たっぷりの余白でコンセプトを伝えるセクション

⑦ 写真の上下に均一な余白が取られていることで、バランスがよく、美しい見た目に仕上がっています。

⑧ その余白によって、挟まれた大きな商品イメージの写真が一層際立っています。センターに配置された見出しのテキストから、写真上部に広くとられた余白を通って、天地左右の中央（やや上）にある商品へ。さらに、フォークの線がまっすぐ中央を通り、写真下部のセンター揃えのテキストへと視線がつながっていきます。

⑨ 広すぎるくらいに余白をとることで、視線は中央の商品にしっかりと集中します。

⑩ テキストと写真のまとまり、そして十分に取られた余白によって、セクションの境目がしっかりと表現されています。

⑪ このセクションの3枚の写真は、配置・大きさ・縦横の向きがずらされており、それまでのセンター揃えのレイアウトに変化を加えています。写真自体も「個包装入り／商品のみ」や「整列／ランダム」など、すべて異なるパターンで構成されています。

⑫ 袋や箱が内向きに配置されていることで、視線が外へ逃げず、自然と内側へ引き寄せられます。

⑬テキストが少しだけ写真に重ねられており、写真とテキストのつながりを感じられます。

⑭ こちらも商品の切り口が内向きに配置されており、視線が外に逃げずにテキストへと誘導されます。

ガラリと印象を変えた商品紹介のセクション

⑮ ここでも左上のパッケージが右側の商品説明のほうへ、内向きに配置されています。また、商品写真の切り口は次の商品の見出し（商品説明）のほうへと向いています。

⑯ 右上の小さな文字と、左および下部に配置されたテキストが、きれいに整列されています。

⑰ パッケージのデザインがそのままレイアウトに踏襲されており、ブランドイメージに一貫性が生まれています。

⑱ 星と下部のオレンジ部分は、ゆっくりと横にスクロール。右（外側）から左（内側）へと動き、視線を自然にサイト内部へと誘導します。

シンプルだから際立つあしらいの工夫

⑲ 下部に配置された、（⑱のオレンジのような）配色を使っていない別レイアウトの商品紹介も、全体として一貫性のあるデザインに仕上がっています。ロゴマークがワンポイントとして効いています。

⑳ 左右のメニューは固定表示されているため、スクロールしても常に表示され続けます。シンプルなセクションでは、左右の装飾のような役割も果たしており、「メニュー」としてだけでなく、デザインの一部としても機能しています。

メッセージ性のあるストーリーのセクション

㉑ 縦置きのレイアウトで、ここまでの文字の流れやデザインに変化が生まれ、いったん印象が変わります（単調にならない）。

㉒ ジャンプ率が高く、メリハリのあるテキストは黄色の背景でも白文字が読みやすい彩度になっています。

㉓ 左下にゆったりと余白があることで、テキスト部分がより引き立ちます（⑨を参考）。

㉔ 元気な黄色とすてきな笑顔に、思わず目がとまります。右側が少し見切れて配置されていることで、広がりを感じさせるレイアウトに（「アモーダル補完」の効果で、見切れた部分は脳内で自然に補われます）。

㉕ 広い余白によって、セクションの切り替えが明確になっています。

余白を全面につかったフッター

㉖ このあいだに、ミルクの動画が挟まれています。

㉗ ㉖の流れを受けて、メッセージ性のある余白いっぱいのフッターがフルスクリーンで表示されます。この部分もパッケージと同じデザインが使われており、反復によって統一感が生まれています。

「余白」の使い方以外にも、魅力溢れる効果的なデザインに

今回は本誌連載のテーマと合わせて「余白」に着目しましたが、写真の構成・レイアウト・視線誘導……と、余白はもちろんのこと、すべてに洗練されたデザインでした。皆さんも、ぜひ実際のサイトでチェックしてみてくださいね。