【HerTech課題】カフェ新店舗キャンペーンLP ｜ SNS拡散を促すスマホ特化デザイン
【プロジェクト概要】
Ruby Coffee 新店舗オープンキャンペーンLP
本LPは、Webデザインスクール「HerTech」の課題として制作した作品です。
架空のカフェチェーン「Ruby Coffee」の新店舗・青山一丁目店オープンに伴う新商品「Very Berry Ruby Frappe」のプロモーションを想定し、SNS拡散を促すスマホ特化LPとして設計した。
◯LPの目的
・新店舗オープンの認知拡大
・新商品「Very Berry Ruby Frappe」のプロモーション
・SNS（特にInstagram）での拡散促進
・20〜30代女性の新規顧客獲得
→なぜスマホ特化なのか
ターゲット層である20〜30代女性の多くは、スマホでの情報収集が中心。特にInstagramでカフェ情報を探す行動が多いため、スマホでの閲覧体験を最優先に設計した。
【ペルソナ設定】
◯ターゲット像
年齢：20〜30代女性
職業：会社員、フリーランスなど
◯ライフスタイル
・新しいカフェやスイーツに敏感
・Instagramで情報収集
・映える写真を投稿するのが好き
・トレンドに敏感で、限定商品に弱い
◯想定されるペルソナの行動パターン
1. Instagramで新しいカフェ情報を発見
2. LPで商品情報やキャンペーンを確認
3. 「友達と行きたい」「映えそう」と思う
4. Instagramでシェア・タグ付け
5. 実際に来店
この行動パターンを意識し、各セクションを設計。
【デザインコンセプト】
ベリーのフレッシュさと、SNS映えする世界観
◯配色の意図
・ベリーの鮮やかさを表現するピンク〜レッドのグラデーション配色を採用。
・若い女性に響く親しみやすく明るいトーンを意識。
#f9dbdb（淡いピンク）：かわいいイメージ、明るいカラフルさ、親しみやすさ
#fffef9（オフホワイト）：ミルキー感、ナチュラルさ、優しい色味
#e8204e（鮮やかなレッド）：フレッシュなベリーの色味、情熱的、目を引く
◯フォントの選定
・全体的にカジュアルでポップな親しみやすい雰囲気を演出。
和文（Zen Maru Gothic）
：丸ゴシック系で親しみやすく。本文も堅さが抑えられ、可愛らしい印象を損なわない。
英文（Lobster）
：手書き風でポップかつおしゃれな印象で、見出しにアクセントを加える。
【各セクションの設計意図】
◯First View（ファーストビュー）：新商品キャンペーンの認知拡大とSNS拡散の促進
・果実感あふれるビジュアルで商品の魅力を訴求
→実際のフラッペとフルーツを配置し、視覚的に「美味しそう」「映えそう」を演出。
・「青山一丁目店Open記念」で限定感を演出
→限定感を出すことで、「今行かなきゃ」という心理を刺激。
・「@rubycoffeeをフォローする」CTAでSNS誘導
→ファーストビューからSNS導線を配置し、拡散を促進。
◯2nd View（商品紹介ページ）：3種類のフレーバーを魅力的に紹介
・01 Berry / 02 Cream / 03 Chocolateの番号付けで整理
→情報を整理し、視認性を向上。
・各商品の特徴を短い文章で説明
→スマホでの読みやすさを考慮し、簡潔に。
・ベリーの装飾でフレッシュ感を演出
→ビジュアル要素で商品の魅力を補強。
◯3rd View（キャンペーン詳細ページ）：参加方法を明確に伝え、SNS投稿を促進
・参加方法を5ステップでわかりやすく説明
→複雑な手順は離脱の原因になるため、シンプルに。
・キャンペーン期間と対象店舗を明記
→ユーザーの不安を解消し、参加ハードルを下げる。
・応募条件の注意書きでトラブル防止
→トラブル回避のため、細かい条件も明示。
◯4th View（店舗情報ページ）：来店を促すためのアクセス情報提供
・Googleマップ埋め込みで視覚的に場所を伝達
→地図があることで、「行きやすそう」という印象に。
・住所、営業時間を読みやすく整理
→必要な情報を迷わず見つけられる構成。
・最下部のCTAで最後のSNS誘導
→LPの最後まで読んだユーザーに、もう一度SNSへの導線。
【制作を通じての学び】
1. SNS導線の重要性
ただ「映えるデザイン」を作るだけでなく、「どこでどうやってSNSに誘導するか」を設計することの重要性を学んだ。要所にCTAを配置することで、押し付けがましくなることなく、ユーザーの関心が高まったタイミングでSNS投稿を促せる設計になるよう意識した。
2. スマホ縦長レイアウトの設計
スマホでの縦スクロールを意識し、情報が自然と目に入る構成を心がけた。PC優先のレイアウトとは異なり、「1画面1メッセージ」を意識することで、ユーザーの負担を減らすことを意識した。
3. ターゲットに合わせた配色の考え方
20〜30代女性というターゲットに合わせ、親しみやすくポップな“映える”ピンク系の配色を選択。色の心理効果を考えながらデザインすることで、ターゲットによりフィットする案ができることを実感した。
【使用ツール】photoshop、studio
