概要
架空のカフェの新メニュー試食キャンペーンランディングページをデザインしよう。
PC版 : 横幅1366px
SP版:横幅375px のアートボードで作成すること
納品形式 PhotoshopもしくはFigmaで出力したPNG
目的
Photoshop または Figma を使用し、カフェの新メニュー試食キャンペーンのLPをデザイン する。
視線誘導や情報整理の基本を学ぶ。
来店促進につながる施策(参加申し込み・クーポン配布)や情報設計を考える。
カフェの想定規模
地域に数店舗ある中規模カフェチェーン
→ 新メニュー導入前に試食キャンペーンを実施し、口コミを集めて話題化したい。
デザイン構成の参考(変更しても構いません)
📌 ヘッダー
カフェのロゴ & 「ほっと一息カフェ 新メニュー試食キャンペーン開催!」
📌 メインビジュアル
大きな抹茶パフェの画像(背景をぼかして文字を際立たせる)
キャッチコピー:「あなたの声で新メニューが決まる!」
サブコピー:「新作『プレミアム抹茶パフェ』を無料で試食しませんか?」
試食日程&店舗情報(例:1月20日〜25日 / 3店舗限定)
📌 特徴紹介(試食するメニューのポイント)
アイコン+テキストで特徴を見せる
例:「抹茶100%使用」「甘さ控えめ」「特製ソースが決め手」
📌 試食キャンペーン詳細
対象人数:「各日20名様限定!」
応募期間:「1月10日〜17日」
応募方法:「応募フォームから簡単エントリー!」
📌 お客様の声(過去の試食者のコメント風に)
「口の中で抹茶が広がる!」「甘さ控えめで上品な味!」
📌 CTA(試食キャンペーン応募)
「試食キャンペーンに応募する」ボタン(目立つ色で大きめに配置)
📌 SNSシェアエリア
「#ほっと一息カフェ試食」で投稿してプレゼントGET!(SNS拡散狙い)
📌 フッター
カフェの店舗情報・SNSリンク・キャンペーン問い合わせ先
CTAとは?
CTA(Call To Action) とは、「ユーザーに具体的な行動を促す要素」 のことです。
LPにおけるCTAの役割
ランディングページ(LP)では、訪問者に 「次にどう行動してほしいか」 を明確に示すことが重要です。
例えば、以下のような行動を促すボタンやリンクがCTAになります。
CTAの具体例
- 応募を促す場合:「試食キャンペーンに応募する」
- 購入を促す場合:「今すぐ注文する」
- 来店を促す場合:「お店の場所をチェック」
- SNSシェアを促す場合:「このキャンペーンをシェアする」
CTAは目立つデザインにして、ユーザーが迷わず行動できるようにします。
今回の「新メニュー試食キャンペーンLP」では、「試食キャンペーンに応募する」ボタン がメインのCTAです!
素材
データは新規作成してください。
(キャンバスサイズ例 : PC向け横幅1366px / スマホ向け横幅 375px)
その他の素材は自分で撮影したり、各種フリー素材サイトから入手してください。
ワイヤーフレーム参考
例としてワイヤーフレームのPSDファイルを提供します。参考にしてください。
デザイン制作はこの通りにする必要はありません。
使用ソフト
Adobe Photoshop
Figma
解答例
いまのところなし