デザイン解剖 #70
記念すべき70回目…！今回は【粥粥好日 | アジアを味わう、新感覚お粥】サイトを分析します！
コンセプト推察
「やさしく、アップデート」「ネオ東洋」
ABUOT(メッセージ)に「〜お粥を、まったく新しいワクワクする日常食へとアップデート。」とあること
色味が淡い色で統一されていること
緑・黄色・赤という、中華街で見かける色の組み合わせながら、明度の高いトーン採用することで、柔らかい"ネオ"感を醸し出していること
から推測しました。
ローディング画面
なし
文字
英文
SackersGothicStd
細身で平体をかけたように少し横に長いフォント。
Eの2本目線が極端に短い、6・9がほぼ円形になるほど湾曲しているなどナチュラルな雰囲気ながら特徴の強さがアクセントになっている。
スクロールダウン
font-size: 10px;
font-weight: 900;
line-height: 12px;
和文
A-OTF 太ゴB101
「太ゴB101」は、活字書体のデザインを忠実に引き継ぐゴシック体です。縦画には打ち込みのアクセントがあることに加え、縦横の画には視認性を考慮した抑揚があり、弱く見えがちな先端はやや太く設計されています。このため、小サイズではくっきりと、大サイズでは力強く見せることができます。オーソドックスなデザインと安定した字面が、やや太めの字画と美しく調和し、用途を選ばず広範囲に使いやすいゴシック体のひとつです。
色
Header
ロゴを中央に、左右に3つずつメニューを配置する構成。(＋右端上部にマイページとカートアイコン)
上部にピンクの線を引くことで、緑ベタの画面にアクセントを加えている。
マウスオーバーで下線が左から右に現れるアニメーションあり、クリックできることを伝えている。線が3pxほどとられていることで、柔らかな印象。
MV
ヘッダーのブランドロゴ、左右文字、下部左右のイラストあしらい、筆記体(Congeeは粥の意)がメイン画像に重なる形。
画像は全6種類あり、7-8秒ほどで次のものへ入れ替わる。
商品の写っている画像はクリックでき、商品詳細(購入)ページへ遷移する仕組み。クリックできる範囲は画像の周囲80pxほどとっていることで、流入数を増やしているとみられる。
文字などのあしらいが画像に重なっていることで、額縁のような役割を果たしている(立体的なあしらいではないものの、レイヤー感を与える)。
商品が3種類であること、注文から食べるまで3ステップであることなどから、右下のあしらいに3種類のパターンを採用している。
左下のアイコンでは「米」を様々な表現に言い換えたアイコンを配置している。
ロゴ(各コンテンツタイトル)
漢字のつなぎ目が切り離されていること→モダンな印象/抜け感がある
コンデンス体との組み合わせ→洗練された印象
漢字と英字の接続部分に、漢字の縦線と英字のくぼみを合わせている→凸凹が組み合わさったような一体感を演出
ABOUT
他コンテンツとの上下マージンは80pxほど。
にも関わらずあまり圧迫感がないのは、文字の色合いが淡いこと、文字間・行間が広めにとられているからか。
「こころもからだも ととのえる」「おいしく、やさしく、たのしく。」と書かれているように、柔らかい印象を与えることに成功している。
商品(Producet)
緑ベタにそのまま商品/文字が載っているゾーンと、白ベタを重ねているゾーンを交互においている。白座布団の周囲に80pxずつマージンをとっていることでコンテンツが途切れず、連続性を感じさせている。
ボタンは、商品単品の詳細画面へ遷移するものは白
3点セットに遷移するものはピンク
と使い分けられており、3点セットを目立たせる意図が見える。
要点(Points)
こちらも壱弐参と、"3"が特徴的に使われている。
背景に大きく写真をつかうことで食べるシーンを想像させ、それぞれのステップごとの詳細な素材は必要なくなっている。漢字の縦幅に詳細の文字が収まるように配置されているのもおさまりがよい。
白背景→緑ベタ→白背景でくりかえされており、シンプルな構成。
ニュース部分は日付・ジャンル・タイトル・罫線・ボタンという非常にシンプルな構成だが、
遷移先ページではニュース内容を読んでいるかのように目線を下に向けた写真とともにニュースが描かれており、ワクワクした気分にさせる。
ここでもディレクションの技が光っている。
グラフィック部分はクリックしてポップアップ表示があるのかと思いきやそうではなく、あくまで画像として配置されている。
が、この箇所があるとないとでは、ブランドそのものに感じる奥行きみたいなものが段違いだと感じた。(こういったグラフィックがあることで、力を込めて練られたブランド/世界観だということが伝わってくる。)
フッター
右下に「ニュースレター」の欄があり、すぐに購入につながらずともリード顧客獲得のために動いていることがわかる。
またピンクベタのボタンを使うことで、ロゴ→購読するボタン→詳細といった目線誘導に成功している。
まとめ
写真素材まで完璧にディレクションされていた
特にMVの文字と写真の重なり方、色味の統一感、商品部分の画角の切り取り方など全体のトンマナとずれた部分が一箇所もないのがすごかった。
マージンがそこまで広くとられていないのに、圧迫感がなかった
おそらく全体の色味が柔らかいことで、そこまで余白をとらなくても詰まった印象になっていない。基本的に中央揃えで、写真の配置も小さくしていることも、こじんまりとした優しい雰囲気に一役買っているのかも。
使用色に無彩色がほぼない
文字には黒など使いたくなってしまいがちだが、コントラストを保っていれば登場させる必要性はないのか、とハッとさせられた。
購入画面など、確実に視認性を保つべき場所以外は、サイトや商品の世界観を演出するのに最適な方法をとるべきだとわかった。
いいなと思ったら応援しよう！
