WORKS

モックアップ

東京で買える!白いお菓子集めてみました。

ページリンクはこちら

グルメサイト内の東京で買える白いお菓子を紹介する特設ページ(ランディングページ)を制作しました。架空サイトであるものの、白いお菓子の魅力を知ってもらえるように実際に店舗に足を運び、お菓子を食べその味や食感などの感想を記載しました。

ターゲット

20〜40歳代の男性・女性

バレンタインデーのお返しを検討してる男性(白いに特化)

東京に観光で訪れた家族連れ(東京に特化)

会社でのお土産やおやつタイムのお菓子を探している会社員(おやつに特化)

目的

全6種類あるお菓子の購入をしていただくため

販促のほかにご自宅でも白いお菓子を作ってもらう

白いお菓子を購入し、召し上がってもらい幸せな時間を過ごしてもらう(白いお菓子の魅力)

情報設計

商品紹介のセクションに入る前に白いお菓子の特徴や魅力を説明し、その後のセクションにメインである商品紹介のコンテンツを挿入しました。
また、商品販促の他に白いお菓子を作ってもらえるように、Instagramのハッシュタグを活用して作例を載せました。

デザイン

かわいい・やわらかい・美味しそうを魅せるために、見出しフォントには手書きフォントを本文には丸ゴシックを使用しました。
ベースカラーには「白い」を映えるように水色(#58B2DC)を、メインカラーには真っ白では無く微量な黄色を混ぜた白色(#FFFFF9)を使用しました。
商品紹介のセクションには商品画像に動的な流体シェイプを使用し、やわらかいを表現しています。

担当範囲

企画 / 写真撮影 / デザイン / コーディング

制作期間

企画:3日間 / ワイヤーフレーム・デザインカンプ:2週間 / コーディング:1週間

使用ツール

PhotoShop / Illustrator / Figma

使用言語

HTML / CSS

PC
PCページ全体
SP
SPページ全体
3