【HerTech 架空案件】カフェ新店舗オープン記念新作フラッペキャンペーンLP

【デザインについて】

●ビジュアルイメージ
フラッペの華やかさと「友達と一緒に楽しむキャンペーン」のワクワク感を表現するため、ピンクを基調としたポップでかわいらしい世界観で制作しました。

●カラー
フラッペをイメージしたピンクをアクセントカラーに設定し、背景にはホワイトや淡いカラーを使用することで、商品の写真やキャンペーン情報が目立つようにしています。

●タイポグラフィー
若年層をターゲットとしたカフェキャンペーンLPのため、親しみやすく柔らかい印象の丸ゴシック体を中心に使用しました。
見出しには筑紫A丸ゴシックを使用し、ポップでかわいらしい世界観を表現しました。また、説明要素が多くなりがちなLPの印象が堅くなりすぎないよう、柔らかく親しみやすいトーンを表現しています。
本文には可読性を重視し、スマートフォンでも読みやすいNoto Sans JPを使用しました。
また、ファーストビューの画像内キャッチコピーには、雰囲気を合わせるためモトヤ丸アポロを使用しています。
見出し・本文でウェイトやサイズにメリハリをつけ、スクロールしながらでも情報の優先順位が伝わるよう設計しました。

●情報設計
スマートフォンでの閲覧を想定し、縦スクロールで情報を理解しやすい構成にしました。
ユーザーがスムーズに内容を把握できるよう、
「キャンペーン」
↓
「参加方法」
↓
「商品紹介」
↓
「店舗情報」
の順で情報設計を行っています。

●工夫したポイント
・キャンペーン参加方法をSTEP形式にして直感的に理解できるよう設計
・SNSキャンペーンのためInstagram誘導ボタンを目立つ位置に配置
・写真が引き立つよう余白を意識したレイアウト
またLPでは必須ではありませんが、UI理解の練習としてハンバーガーメニューも実装しています。