Facebook LP|カフェの新商品キャンペーン紹介(架空案件)
Logo

LP|カフェの新商品キャンペーン紹介(架空案件)

クレジット
Avatar
WEBデザイナー
LP|カフェの新商品キャンペーン紹介(架空案件)-1
シェア
制作ノート
【制作について】

◼︎制作の流れ

まず基本情報を整理した上でペルソナを設定し、Instagramからの流入を意識したLP構成を企画しました。次にキャンペーン内容をもとにキャッチコピーの作成と情報の整理をして、ユーザーが迷わず行動できる導線を意識した、メインビジュアル・キャンペーン内容・商品紹介・店舗情報と各ビューの順番と内容を決めました。その上で、ワイヤーフレームの作成→Studioで実際のLPページ制作と進めました。

◼︎カラー

商品名にもある「ルビー」をイメージし、ピンク・ベリーカラーをメインカラーとして使用することで、商品コンセプトを視覚的に表現しました。背景には淡いベージュやピンクを取り入れ、鮮やかなフラッペやベリーの赤色がより引き立つよう配色を調整しています。キャンペーンエリアは彩度の高いピンクをアクセントとして使用し、視線を集めながら楽しさや限定感を演出しました。

◼︎タイポグラフィ

見出しには太めのフォントを採用し、キャンペーン名や商品の特徴が一目で伝わるよう視認性を重視しました。本文は可読性の高いゴシック体を使用し、スマートフォンでも読みやすい文字サイズ・行間を意識しています。強調したいキーワードはサイズやカラーに変化を付け、情報の優先順位が自然に伝わるよう工夫しています。

◼︎情報設計

ユーザーが短時間で内容を理解できる、流れを意識し各ビューを構成しました。ファーストビューでは商品のビジュアルを大きく配置し、商品の魅力が一目で伝わるレイアウトを意識しました。キャンペーン参加方法は5つのステップに分け、番号と写真を組み合わせることで、視覚的に理解しやすい構成にしています。商品紹介では、ベリー・マスカルポーネ・チョコレートなど素材ごとに情報を整理し、商品の特徴を順序立てて伝えられるよう設計しました。LP内にInstagramフォローのCTAボタンを複数配置し、ユーザーが興味を持ったタイミングで行動へ移れる導線を設計しました。

◼︎工夫したポイント

商品写真を大きく使用し、スクロールするたびに商品の魅力が伝わるよう、視覚的なインパクトを重視しました。セクションごとに余白を十分に確保し、スマートフォンでも読みやすく、情報量が多くても圧迫感を感じさせないデザインを意識しました。CTAボタンはメインカラーであるピンクを使用し、LP全体でデザインの統一感を保ちながら、クリックしやすい存在感を持たせています。商品の魅力だけでなく、店舗情報やマップまで掲載することで、興味を持ったユーザーが来店までスムーズに進めるよう配慮しました。

シェア
WEBデザイナー*MioNの他の作品
foriio

あなたのforiioを無料で作成

fori.io/
LP|カフェの新商品キャンペーン紹介(架空案件)-1
WEBデザイナー*MioNの他の作品
foriio

あなたのforiioを無料で作成

fori.io/