【HerTech 架空案件】Ruby Coffee新作フラッペ

⚫︎制作の流れ

クライアントへのヒアリングをもとにペルソナを設計し、ユーザーの悩みやニーズを整理したうえで訴求ポイントを明確化。 ワイヤーフレーム作成時には、視線誘導や情報の優先順位を意識し、構成を設計しました。 その後、キャンペーンイメージに合わせたトンマナを設定し、デザインカンプを制作。 ファーストビューから制作を進め、構成を確認いただきながら進めました。 担当範囲はデザイン全般です。

⚫︎カラー

新作フラッペに合わせて、

ベースは、淡いストロベリーを連想させる柔らかいピンクを背景に使用。

メインは、完熟いちごをイメージした鮮やかな赤を使用。商品の魅力と食欲を喚起する役割。

アクセントは、チョコレートを連想させる深みのあるブラウンを使用。甘いピンクと赤を引き締め、全体にコントラスト、濃厚さと大人っぽさを演出。

⚫︎タイポグラフィ

可読性を重視し、日本語フォントには視認性の高いNoto Sans JPを使用しました。商品名やサブタイトルにはPlayfair Displayを使用し、柔らかさの中に上品さを加えることで、 “期間限定の特別感”やカフェのブランドイメージを表現しました。

⚫︎情報設計

FVでは、商品の魅力と期間限定であることが一目で伝わるよう設計しました。 中央にフラッペのビジュアルを大きく配置し、視覚的なインパクトを持たせています。また、ベリーの素材写真を周囲に配置することで、使用されている食材を直感的に伝え、 フレッシュさや自然な美味しさを想起させる構成にしました。

⚫︎工夫したポイント

ユーザーが迷わず行動できるよう、導線設計を重視しました。 特にキャンペーン参加のフローを「フォロー→来店→投稿」の3ステップで明確に整理し、認知から行動までのハードルを下げています。また、CTAをファーストビュー直下やキャンペーンセクションなど複数箇所に設置し、ユーザーの興味が高まったタイミングでアクションできるよう設計しました。加えて、「期間限定」「友達と一緒に」「無料」といった心理的トリガーを適切に配置することで、ユーザーの意思決定を後押ししています。

Figmaでワイヤーフレームを制作し、StudioでデザインカンプからWebサイトを制作しました。