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
この課題を完了したら、講師に報告して次に進みましょう。
02Hair Salon RICHE
高級感のある美容サロンのWebサイト制作