NWA Coding Lab
F03🍽飲食・店舗系中級

Trattoria Sole

イタリアン / 1カラム

想定時間12h
技術HTML / CSS / JS
完成形を見るソースコードを見る

Client Brief

M

Marco Rossi（マルコ・ロッシ）オーナーシェフ

Trattoria Sole

件名: 新規制作のご依頼

ナポリ出身のシェフが東京に開いた本格南イタリアン。予約サイト経由で予約を増やしたい。

ご要望

  • 1南イタリアの陽気な雰囲気
  • 2メニューカテゴリ別表示（前菜・パスタ・ピザ・デザート）
  • 3予約フォーム（人数・日時・連絡先）
  • 4Googleマップ埋め込み

予算

¥180,000

納期

3週間

種別

新規制作

クライアントの人柄

陽気、家族的、料理への愛情が深い

避けてほしいこと

北イタリアの洗練すぎる雰囲気高級すぎる印象冷たい色使い

成功指標

Web経由予約を月50件以上獲得

追加メモ

"故郷ナポリの太陽と、うちの店の温かさを伝えたい。写真は手書き感のある雰囲気で。"

Preview

フル画面で開く →
/demo/F03-trattoria-sole/index.html

Learning Points

1

予約フォーム

2

iframe埋め込み

3

アクセス情報の構造化

4

ホバーアニメーション

How to Build

01

Step 1: フォーム設計

40分

予約フォームの必須項目（名前・日時・人数・電話・備考）を設計。バリデーション方針も決める。

成果物: フォーム設計書

02

Step 2: HTML構造

90分

ヒーロー→About→メニュー4カテゴリ→予約フォーム→アクセスの順でマークアップ。

成果物: 完全なHTML

03

Step 3: 暖色配色＋タイポ

90分

トマトレッド・オリーブグリーンの配色、Italiana / Cormorant Garamond の読み込み。

成果物: 配色完成

04

Step 4: フォーム＋レイアウト

90分

フォームスタイリング、メニュー2カラムGrid、アクセス情報の構造化。

成果物: ほぼ完成形

05

Step 5: レスポンシブ＋仕上げ

60分

フォームの1カラム化、メニューの1カラム化。CTA・ホバーの磨き込み。

成果物: 完成版

Source Code

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Trattoria Sole | 南イタリアの太陽を食卓に</title>
  <meta name="description" content="ナポリ出身のシェフが手がける、陽気な南イタリア料理。東京・代官山のトラットリア。">

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Italiana&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Manrope:wght@300;400;500;600&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap" rel="stylesheet">

  <link rel="stylesheet" href="css/style.css">
</head>
<body>

  <!-- ============ HEADER ============ -->
  <header class="header">
    <div class="header__inner">
      <a href="#" class="header__logo">Trattoria Sole</a>
      <nav class="header__nav">
        <a href="#about" class="header__link">About</a>
        <a href="#menu" class="header__link">Menu</a>
        <a href="#reservation" class="header__link">Reservation</a>
        <a href="#access" class="header__link">Access</a>
      </nav>
    </div>
  </header>

  <!-- ============ HERO ============ -->
  <section class="hero">
    <div class="hero__image">
      <img src="https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=2000&q=80" alt="美しく盛り付けられたイタリアン料理">
    </div>
    <div class="hero__content">
      <p class="hero__eyebrow">Authentic Southern Italian Cuisine</p>
      <h1 class="hero__title">Trattoria<br>Sole</h1>
      <p class="hero__subtitle">南イタリアの太陽を、食卓に。</p>
      <a href="#reservation" class="hero__btn">ご予約はこちら</a>
    </div>
  </section>

  <!-- ============ ABOUT ============ -->
  <section id="about" class="about">
    <div class="about__inner">
      <div class="about__image">
        <img src="https://images.unsplash.com/photo-1556910103-1c02745aae4d?w=800&q=80" alt="シェフがパスタを作る様子">
      </div>
      <div class="about__text">
        <p class="section-label">About Us</p>
        <h2 class="section-heading">Benvenuti a<br>Trattoria Sole</h2>
        <p class="about__body">
          ナポリ出身のシェフ、マルコ・ロッシが2020年に代官山にオープンした南イタリア料理店です。故郷の母が作ってくれたあの味を、東京の食卓にお届けしたい——そんな想いで毎日キッチンに立っています。
        </p>
        <p class="about__body">
          パスタは毎朝手打ち。トマトソースはサンマルツァーノ種のみ。オリーブオイルはカラブリアの農家から直輸入。素材への妥協なきこだわりが、Soleの味を支えています。
        </p>
      </div>
    </div>
  </section>

  <!-- ============ MENU ============ -->
  <section id="menu" class="menu">
    <div class="menu__inner">
      <p class="section-label section-label--center">Il Nostro Menu</p>
      <h2 class="section-heading section-heading--center">メニュー</h2>

      <div class="menu__grid">
        <div class="menu__category">
          <h3 class="menu__category-title">Antipasto</h3>
          <div class="menu__items">
            <div class="menu__item">
              <span class="menu__name">カプレーゼ・ディ・ブッファラ</span>
              <span class="menu__price">¥1,200</span>
            </div>
            <div class="menu__item">
              <span class="menu__name">タコのマリナート</span>
              <span class="menu__price">¥1,400</span>
            </div>
            <div class="menu__item">
              <span class="menu__name">ブルスケッタ 3種盛り</span>
              <span class="menu__price">¥980</span>
            </div>
          </div>
        </div>
        <div class="menu__category">
          <h3 class="menu__category-title">Pasta</h3>
          <div class="menu__items">
            <div class="menu__item">
              <span class="menu__name">スパゲッティ・アッラ・ナポリターナ</span>
              <span class="menu__price">¥1,600</span>
            </div>
            <div class="menu__item">
              <span class="menu__name">リガトーニ・アッラ・ノルマ</span>
              <span class="menu__price">¥1,800</span>
            </div>
            <div class="menu__item">
              <span class="menu__name">自家製ニョッキ ゴルゴンゾーラ</span>
              <span class="menu__price">¥1,700</span>
            </div>
          </div>
        </div>
        <div class="menu__category">
          <h3 class="menu__category-title">Pizza</h3>
          <div class="menu__items">
            <div class="menu__item">
              <span class="menu__name">マルゲリータ D.O.C.</span>
              <span class="menu__price">¥1,500</span>
            </div>
            <div class="menu__item">
              <span class="menu__name">ディアヴォラ</span>
              <span class="menu__price">¥1,700</span>
            </div>
            <div class="menu__item">
              <span class="menu__name">クアトロ・フォルマッジ</span>
              <span class="menu__price">¥1,800</span>
            </div>
          </div>
        </div>
        <div class="menu__category">
          <h3 class="menu__category-title">Dolce</h3>
          <div class="menu__items">
            <div class="menu__item">
              <span class="menu__name">ティラミス</span>
              <span class="menu__price">¥800</span>
            </div>
            <div class="menu__item">
              <span class="menu__name">パンナコッタ</span>
              <span class="menu__price">¥750</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- ============ RESERVATION ============ -->
  <section id="reservation" class="reservation">
    <div class="reservation__inner">
      <div class="reservation__text-col">
        <p class="section-label">Reservation</p>
        <h2 class="section-heading">ご予約</h2>
        <p class="reservation__note">
          お電話またはフォームからご予約いただけます。<br>
          当日のご予約はお電話にてお願いいたします。
        </p>
        <a href="tel:03-0000-1234" class="reservation__phone">03-0000-1234</a>
      </div>
      <form class="reservation__form" onsubmit="return false;">
        <div class="form__group">
          <label class="form__label" for="name">お名前</label>
          <input class="form__input" type="text" id="name" placeholder="山田 太郎" required>
        </div>
        <div class="form__row">
          <div class="form__group">
            <label class="form__label" for="date">ご来店日</label>
            <input class="form__input" type="date" id="date" required>
          </div>
          <div class="form__group">
            <label class="form__label" for="time">ご来店時間</label>
            <select class="form__input" id="time" required>
              <option value="">選択</option>
              <option>11:30</option>
              <option>12:00</option>
              <option>12:30</option>
              <option>18:00</option>
              <option>18:30</option>
              <option>19:00</option>
              <option>19:30</option>
              <option>20:00</option>
            </select>
          </div>
        </div>
        <div class="form__row">
          <div class="form__group">
            <label class="form__label" for="guests">人数</label>
            <select class="form__input" id="guests" required>
              <option value="">選択</option>
              <option>1名</option>
              <option>2名</option>
              <option>3名</option>
              <option>4名</option>
              <option>5名以上</option>
            </select>
          </div>
          <div class="form__group">
            <label class="form__label" for="tel">お電話番号</label>
            <input class="form__input" type="tel" id="tel" placeholder="090-0000-0000" required>
          </div>
        </div>
        <div class="form__group">
          <label class="form__label" for="note">備考</label>
          <textarea class="form__input form__textarea" id="note" rows="3" placeholder="アレルギーや特別なご要望があればご記入ください"></textarea>
        </div>
        <button type="submit" class="form__submit">予約を送信する</button>
      </form>
    </div>
  </section>

  <!-- ============ ACCESS ============ -->
  <section id="access" class="access">
    <div class="access__inner">
      <p class="section-label section-label--center">Access</p>
      <h2 class="section-heading section-heading--center">店舗情報</h2>
      <div class="access__grid">
        <div class="access__info">
          <dl class="access__dl">
            <div class="access__row">
              <dt>住所</dt>
              <dd>〒150-0034<br>東京都渋谷区代官山町14-8<br>ソーレビル 1F</dd>
            </div>
            <div class="access__row">
              <dt>最寄り</dt>
              <dd>東急東横線「代官山駅」徒歩5分</dd>
            </div>
            <div class="access__row">
              <dt>営業時間</dt>
              <dd>Lunch 11:30–14:30（L.O. 14:00）<br>Dinner 18:00–22:30（L.O. 21:30）</dd>
            </div>
            <div class="access__row">
              <dt>定休日</dt>
              <dd>毎週火曜日</dd>
            </div>
            <div class="access__row">
              <dt>席数</dt>
              <dd>テーブル 28席 / テラス 8席</dd>
            </div>
          </dl>
        </div>
        <div class="access__map">
          <div class="access__map-placeholder">
            <p>Google Maps<br><small>（ここに地図が埋め込まれます）</small></p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- ============ FOOTER ============ -->
  <footer class="footer">
    <div class="footer__inner">
      <div class="footer__brand">
        <p class="footer__logo">Trattoria Sole</p>
        <p class="footer__tagline">Authentic Southern Italian — Daikanyama, Tokyo</p>
      </div>
      <ul class="footer__links">
        <li><a href="#">Instagram</a></li>
        <li><a href="#">食べログ</a></li>
        <li><a href="#">Facebook</a></li>
      </ul>
    </div>
    <p class="footer__copy">&copy; 2026 Trattoria Sole. Tutti i diritti riservati.</p>
  </footer>

</body>
</html>

Self Check

0 / 9

Submit

Discord #提出-food チャンネルに以下を投稿

  1. 1デプロイURL
  2. 2GitHubリポジトリURL
  3. 3実装で工夫した点を3つ
  4. 4クライアントへの提案メッセージ案

Freelance Value

レストランチェーン店舗紹介ページ。相場：100,000〜200,000円

飲食・店舗系の他の課題を見る