Challenge 04★★★★☆飲食店(イタリアン)
Trattoria SOLE
本格イタリアンレストランのWebサイト制作
Client Brief
クライアントからの依頼
From:オーナーシェフ 松本 隆司 / Trattoria SOLE(トラットリア ソーレ)
Subject:Trattoria SOLEの制作依頼
Budget:12万〜18万円
Deadline:10〜14日
お世話になります。隆司と申します。
代々木上原でイタリアンレストランを15年営んでいます。常連のお客様は多いのですが、新規のお客様をもっと増やしたいです。料理へのこだわりや、ワインのセレクションが自慢です。オンライン予約ができるサイトが欲しいです。記念日利用のお客様も多いので、特別感のあるデザインにしてほしいです。
ページ構成
- ▸トップページ
- ▸メニューページ
- ▸ワインページ
- ▸ご予約ページ
必須要素
- ▸ヘッダー(ロゴ、ナビゲーション、予約ボタン)
- ▸ヒーロー(全画面の料理写真、キャッチコピー)
- ▸シェフのこだわり(ストーリー形式)
- ▸おすすめメニュー(前菜、パスタ、メイン、ドルチェ)
- ▸コース紹介(ランチ、ディナー、記念日コース)
- ▸ワインリスト(赤・白・スパークリング)
- ▸予約フォーム(日付、時間、人数、名前、電話、アレルギー・要望)
- ▸店舗情報、アクセス
- ▸フッター
デザインの希望
配色:ワインレッド #722F37、ベージュ #F5E6D3、ゴールド #C9A96E、ダークブラウン #3E2723
雰囲気:温かみと高級感の両立、記念日にふさわしい特別感
フォント:セリフ体でエレガント、イタリアンな雰囲気
避けてほしいもの:
- ✕ カジュアルすぎるファミレス的デザイン
- ✕ 暗すぎる・重すぎる雰囲気
- ✕ ポップなカラー
素材について
料理写真は撮影予定です。仮画像で進めてください。ロゴはあります。
よろしくお願いいたします。
Recommended Prompt
この案件、こう書けば伝わる
クライアントブリーフを元に、AIに伝わるプロンプトを作成しました。 コピーしてそのまま使えます。
▶ prompt
以下の要件で、イタリアンレストランのWebサイトを作成してください。4ページ構成です。 【店舗情報】 - 店名:Trattoria SOLE(トラットリア ソーレ) - 業種:イタリアンレストラン - 立地:東京・代々木上原 - 創業:15年目 - コンセプト:「太陽のように温かい、本場の味」 - ターゲット:30〜50代カップル、記念日利用、ワイン好き 【ページ構成(4ページ)】 ■ トップページ - ヘッダー(ロゴ中央、ナビ下部、予約ボタン固定) - ヒーロー(全画面料理写真、キャッチコピー「太陽のように温かい、本場の味を。」) - シェフのこだわり(松本シェフの写真とストーリー、イタリア修行時代のエピソード) - 季節のおすすめ(3品程度、写真と説明) - コース紹介プレビュー(ランチ ¥3,800〜 / ディナー ¥8,500〜 / 記念日 ¥12,000〜) - お客様の声(3件) - Instagram埋め込みエリア(プレースホルダー) - フッター ■ メニューページ - カテゴリ別メニュー: - 前菜(Antipasto):カプレーゼ ¥1,200、生ハムとルッコラ ¥1,500、カルパッチョ ¥1,800 - パスタ(Pasta):自家製タリアテッレ ボロネーゼ ¥1,600、ボンゴレビアンコ ¥1,800、トリュフのカルボナーラ ¥2,200 - メイン(Secondo):仔牛のミラノ風カツレツ ¥2,800、鮮魚のアクアパッツァ ¥2,600、和牛のタリアータ ¥3,500 - ドルチェ(Dolce):ティラミス ¥800、パンナコッタ ¥700、季節のジェラート ¥600 - ランチコース ¥3,800(前菜+パスタ+ドルチェ+ドリンク) - ディナーコース ¥8,500(前菜2品+パスタ+メイン+ドルチェ) - 記念日コース ¥12,000(乾杯スパークリング+前菜2品+パスタ+メイン+特製ドルチェ+メッセージプレート) ■ ワインページ - ソムリエ紹介(一言コメント付き) - ワインリスト: - 赤ワイン(5種、産地・品種・価格:グラス¥900〜/ボトル¥4,500〜) - 白ワイン(4種) - スパークリング(3種) - ペアリング提案(おすすめ料理との組み合わせ3セット) ■ ご予約ページ - 予約フォーム: - ご希望日(date picker) - ご希望時間(ランチ 11:30-14:00 / ディナー 17:30-22:00) - 人数(1〜8名、セレクトボックス) - お名前 - お電話番号 - メールアドレス - コース選択(アラカルト/ランチコース/ディナーコース/記念日コース) - アレルギー・ご要望(テキストエリア) - 送信ボタン - 電話予約の案内(03-XXXX-XXXX) - キャンセルポリシー - 店舗情報・アクセスマップ 【デザイン要件】 - 配色:ワインレッド #722F37、ベージュ #F5E6D3、ゴールド #C9A96E、ダークブラウン #3E2723 - 雰囲気:温かみと高級感の両立、記念日にふさわしい特別感 - フォント:日本語は Noto Serif JP、イタリア語メニュー名は Cormorant Garamond - 料理写真を大きく見せる(カードではなく全幅で) - 予約ボタンは常に見える位置に固定 - ページ遷移はスムーズに - レスポンシブ対応必須 【避けてほしいもの】 - ファミレスっぽいカジュアルなデザイン - 暗すぎる・重すぎるトーン(温かみを忘れない) - メニューの羅列だけの味気ないページ HTML/CSS/JSで実装してください。 画像はUnsplashの無料画像を使用してください(イタリアン料理、ワイン、レストラン内装系)。 ページ間のナビゲーションと予約フォームのバリデーションを実装してください。
Tips
飲食店サイトは「写真の見せ方」が命。大きく表示する指示を忘れずに
予約フォームのフィールドを具体的に指定すると、実用的なフォームが出力されます
イタリア語のメニュー名と日本語説明を併記する指示で、雰囲気が格段に上がります
Completed Sample
完成サンプル
このプロンプトで、こんなサイトができます。
/assets/samples/04-trattoria-sole/index.html
04
Trattoria SOLE
Coming Soon
サンプルファイルは後日配置されます
How to Win Clients
このスキルで取れる案件
身につくスキル
- ▸予約フォームの実装(バリデーション含む)
- ▸写真を活かしたレイアウト設計
- ▸飲食店特有のUI(メニュー表、コース表示)
- ▸多言語対応の基礎
単価アップのポイント
- ↑実際の予約システム連携(Googleフォーム、STORES予約など)で+3〜5万
- ↑多言語対応(英語メニュー追加)で+5〜8万
- ↑季節ごとのメニュー更新サポートで継続案件化
競合との差別化
- ★飲食店の「空気感」をWebで表現する力
- ★予約導線の設計とフォーム実装の両方ができる
- ★記念日利用など、ターゲットに合わせた訴求ができる
Next Challenge
この課題を完了したら、講師に報告して次に進みましょう。
05URBAN CLOSET
アパレルブランドのEC風Webサイト制作