Challenge 01☆☆☆☆飲食店(カフェ)

Cafe Blossom

新規オープンするカフェのランディングページ制作

Client Brief

クライアントからの依頼

From:オーナー 佐藤美咲 / Cafe Blossom(カフェ ブロッサム)
Subject:Cafe Blossomの制作依頼
Budget:3万〜5万円
Deadline:3〜5日

お世話になります。佐藤美咲と申します。

来月、地元商店街に小さなカフェをオープンします。インスタはやっているのですが、ちゃんとしたホームページも欲しいなと思っています。お店の雰囲気が伝わるような、おしゃれなページを1枚作っていただきたいです。

ページ構成

  • 1ページ完結のLP(ランディングページ)

必須要素

  • ヘッダー(店名ロゴ)
  • メインビジュアル(お店の雰囲気が伝わる画像エリア)
  • コンセプト紹介(お店のこだわり)
  • おすすめメニュー(3〜4品程度)
  • 店舗情報(住所、営業時間、定休日)
  • アクセス(Googleマップ埋め込み)
  • フッター

デザインの希望

配色:ピンクベージュ、クリーム色、白

雰囲気:ナチュラル、温かみがある、女性が入りやすい感じ

フォント:丸みのある可愛らしいフォント希望

避けてほしいもの:
  • ビジネスっぽい硬いデザイン
  • 原色

素材について

ロゴはこちらで用意します。写真は仮で入れておいてください。

よろしくお願いいたします。

Recommended Prompt

この案件、こう書けば伝わる

クライアントブリーフを元に、AIに伝わるプロンプトを作成しました。 コピーしてそのまま使えます。

▶ prompt
以下の要件で、カフェのランディングページを1枚作成してください。

【店舗情報】
- 店名:Cafe Blossom(カフェ ブロッサム)
- 業種:カフェ(スイーツ・コーヒー専門)
- 立地:地元商店街
- ターゲット:20〜30代女性

【ページ構成(1ページLP)】
- ヘッダー(ロゴエリア、ナビゲーション)
- ヒーローセクション(お店の雰囲気が伝わるメインビジュアル、キャッチコピー)
- コンセプト紹介(お店のこだわりを2〜3文で)
- おすすめメニュー4品(画像、商品名、簡単な説明、価格を表示)
  - ストロベリーラテ ¥650
  - 季節のタルト ¥580
  - ブロッサムブレンド ¥500
  - 抹茶カヌレ ¥420
- 店舗情報(住所、営業時間 10:00-19:00、定休日 水曜日)
- アクセス(Googleマップ埋め込みエリア)
- フッター(コピーライト、SNSリンクアイコン)

【デザイン要件】
- 配色:ピンクベージュ #F5DCE0、クリーム色 #FFF8E7、白 #FFFFFF
- 雰囲気:ナチュラル、温かみ、女性ターゲット
- フォント:日本語は丸ゴシック系(Klee One や M PLUS Rounded 1c)
- 角丸を多用して柔らかい印象に
- セクション間に十分な余白を取る
- レスポンシブ対応必須(モバイルファースト)

【避けてほしいもの】
- ビジネスっぽい硬いデザイン
- 原色(赤・青・緑)の使用
- 角張ったフォントや直線的すぎるレイアウト
- 情報を詰め込みすぎない

HTML/CSSで実装してください。
画像はUnsplashの無料画像を使用してください(カフェ、コーヒー、スイーツ系)。

Tips

メニューの品名・価格まで具体的に書くと、AIが仮データを作らず正確に実装します

「避けてほしいもの」を明記することで、意図しないデザインを防げます

「モバイルファースト」と指定すると、スマホ表示が優先的に最適化されます

Completed Sample

完成サンプル

このプロンプトで、こんなサイトができます。

/assets/samples/01-cafe-blossom/index.html
01

Cafe Blossom

Coming Soon

サンプルファイルは後日配置されます

How to Win Clients

このスキルで取れる案件

身につくスキル
  • 1ページLPの設計・実装
  • 飲食店向けデザインの基本
  • レスポンシブ対応
  • Googleマップの埋め込み
単価アップのポイント
  • 写真撮影やロゴデザインもセットで提案すると単価アップ
  • SNS連携やInstagram埋め込みを追加提案
  • 更新マニュアル付きで納品すると継続案件につながる
競合との差別化
  • クライアントの「雰囲気」を言語化してデザインに落とし込む力
  • 飲食店特有のニーズ(メニュー表示、地図、営業時間)を理解している
  • 納品後の更新サポートまで提案できる
Next Challenge

この課題を完了したら、講師に報告して次に進みましょう。

02

Hair Salon RICHE

高級感のある美容サロンのWebサイト制作