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

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

05

URBAN CLOSET

アパレルブランドのEC風Webサイト制作