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

麺屋 雷神

ラーメン店 / 縦書きレイアウト

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

Client Brief

雷

雷神 拳一店主

麺屋 雷神

件名: 新規制作のご依頼

博多発の二郎系ラーメン店。東京進出に合わせてWebサイト新規制作。圧倒的な世界観で『行ってみたい』と思わせたい。

ご要望

  • 1店の力強さが一発で伝わるトップ
  • 2メニュー一覧、店舗情報、こだわりストーリー
  • 3縦書きで日本らしさを表現

予算

¥150,000

納期

3週間

種別

新規制作

クライアントの人柄

武骨、職人気質、ラーメンへの情熱が異常

避けてほしいこと

可愛い印象明るいパステルオシャレすぎる印象

成功指標

オープン1ヶ月で行列ができる店にする

追加メモ

"縦書きの『麺』の一文字を巨大に出したい。雷光が走るような視覚効果も検討してほしい。"

Preview

フル画面で開く →
/demo/F04-men-ya-raijin/index.html

Learning Points

1

writing-mode

2

和モダン配色

3

店舗情報マークアップ

4

Google Fonts日本語

How to Build

01

Step 1: 和モダン設計

40分

漆黒×雷光黄の配色、Yuji Syuku フォント、縦書きレイアウトの配置を計画。

成果物: 配色・レイアウトメモ

02

Step 2: HTML構造

60分

ヒーロー（巨大漢字＋縦書き）→こだわり→品書き→店舗情報→フッター。

成果物: プレーンなHTML

03

Step 3: 漆黒配色＋巨大タイポ

90分

CSS変数、writing-mode: vertical-rl、巨大漢字の配置、text-shadowグロー。

成果物: ビジュアルベース

04

Step 4: メニュー＋こだわり

90分

看板メニューフィーチャード、漢数字ナンバリング、3カラムGrid、トッピング表。

成果物: ほぼ完成形

05

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

60分

縦書きのスマホ対応、Gridの1カラム化。太罫線とカラーの微調整。

成果物: 完成版

Source Code

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>麺屋 雷神 | 博多発・魂の一杯</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=Yuji+Syuku&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">
    <a href="#" class="header__logo">雷神</a>
    <nav class="header__nav">
      <a href="#kodawari" class="header__link">こだわり</a>
      <a href="#menu" class="header__link">品書き</a>
      <a href="#access" class="header__link">店舗情報</a>
    </nav>
  </header>

  <!-- ============ HERO ============ -->
  <section class="hero">
    <div class="hero__bg">
      <img src="https://images.unsplash.com/photo-1569718212165-3a8278d5f624?w=2000&q=80" alt="湯気の立つラーメン">
    </div>
    <div class="hero__overlay"></div>
    <div class="hero__content">
      <div class="hero__kanji" aria-hidden="true">麺</div>
      <div class="hero__text">
        <div class="hero__vertical-block">
          <p class="hero__vertical-text">博多発・東京上陸</p>
        </div>
        <h1 class="hero__title">
          <span class="hero__title-top">麺屋</span>
          <span class="hero__title-bottom">雷神</span>
        </h1>
        <p class="hero__tagline">魂を込めた、一杯。</p>
      </div>
    </div>
    <div class="hero__thunder" aria-hidden="true"></div>
  </section>

  <!-- ============ KODAWARI ============ -->
  <section id="kodawari" class="kodawari">
    <div class="kodawari__inner">
      <h2 class="kodawari__heading">
        <span class="kodawari__heading-kanji">魂</span>
        <span class="kodawari__heading-text">こだわり</span>
      </h2>
      <div class="kodawari__grid">
        <article class="kodawari__card">
          <span class="kodawari__number">壱</span>
          <h3 class="kodawari__title">極太自家製麺</h3>
          <p class="kodawari__desc">
            国産小麦を独自配合し、毎朝打つ極太麺。もちもちの食感と、スープとの絡みを極限まで追求。加水率38%の黄金比。
          </p>
        </article>
        <article class="kodawari__card">
          <span class="kodawari__number">弐</span>
          <h3 class="kodawari__title">18時間煮込む豚骨</h3>
          <p class="kodawari__desc">
            九州産の豚頭骨を大釜で18時間。白濁するまで炊き上げるドロ系スープ。臭みを消し、旨みだけを抽出する技術。
          </p>
        </article>
        <article class="kodawari__card">
          <span class="kodawari__number">参</span>
          <h3 class="kodawari__title">秘伝の返し</h3>
          <p class="kodawari__desc">
            濃口醤油と4種の味噌をブレンドした秘伝のタレ。創業以来、一度も途切れたことのない「継ぎ足し」の味。
          </p>
        </article>
      </div>
    </div>
  </section>

  <!-- ============ MENU ============ -->
  <section id="menu" class="menu">
    <div class="menu__inner">
      <h2 class="menu__heading">品書き</h2>
      <div class="menu__list">
        <div class="menu__item menu__item--featured">
          <div class="menu__item-image">
            <img src="https://images.unsplash.com/photo-1557872943-16a5ac26437e?w=600&q=80" alt="雷神ラーメン">
          </div>
          <div class="menu__item-info">
            <span class="menu__item-badge">看板</span>
            <h3 class="menu__item-name">雷神ラーメン</h3>
            <p class="menu__item-desc">極太麺 × 超濃厚豚骨 × 秘伝返し。これが雷神の原点。</p>
            <span class="menu__item-price">¥980</span>
          </div>
        </div>
        <div class="menu__item">
          <div class="menu__item-info">
            <h3 class="menu__item-name">辛雷ラーメン</h3>
            <p class="menu__item-desc">自家製辣油と花椒の痺れ。辛さの向こうに旨み。</p>
            <span class="menu__item-price">¥1,080</span>
          </div>
        </div>
        <div class="menu__item">
          <div class="menu__item-info">
            <h3 class="menu__item-name">味噌雷神</h3>
            <p class="menu__item-desc">赤味噌と白味噌の合わせ。冬限定の濃厚みそ豚骨。</p>
            <span class="menu__item-price">¥1,100</span>
          </div>
        </div>
        <div class="menu__item">
          <div class="menu__item-info">
            <h3 class="menu__item-name">つけ麺 雷</h3>
            <p class="menu__item-desc">極太麺を魚介豚骨のつけダレで。〆は割りスープで。</p>
            <span class="menu__item-price">¥1,080</span>
          </div>
        </div>
      </div>
      <div class="menu__toppings">
        <h3 class="menu__toppings-title">トッピング</h3>
        <div class="menu__toppings-grid">
          <span>味玉 ¥120</span>
          <span>チャーシュー増し ¥200</span>
          <span>海苔5枚 ¥100</span>
          <span>もやし増し ¥0</span>
          <span>にんにく ¥0</span>
          <span>背脂増し ¥0</span>
        </div>
      </div>
    </div>
  </section>

  <!-- ============ ACCESS ============ -->
  <section id="access" class="access">
    <div class="access__inner">
      <h2 class="access__heading">店舗情報</h2>
      <div class="access__grid">
        <div class="access__info">
          <dl class="access__dl">
            <div class="access__row">
              <dt>住所</dt>
              <dd>〒160-0023<br>東京都新宿区西新宿7-8-2<br>雷神ビル 1F</dd>
            </div>
            <div class="access__row">
              <dt>最寄り</dt>
              <dd>JR「新宿駅」西口 徒歩5分</dd>
            </div>
            <div class="access__row">
              <dt>営業時間</dt>
              <dd>11:00 〜 翌3:00<br>（日曜のみ 〜 23:00）</dd>
            </div>
            <div class="access__row">
              <dt>定休日</dt>
              <dd>年中無休</dd>
            </div>
            <div class="access__row">
              <dt>席数</dt>
              <dd>カウンター 14席</dd>
            </div>
          </dl>
        </div>
        <div class="access__photo">
          <img src="https://images.unsplash.com/photo-1554502078-ef0fc409efce?w=800&q=80" alt="店舗外観">
          <p class="access__caption">黒い暖簾と「雷」の提灯が目印</p>
        </div>
      </div>
    </div>
  </section>

  <!-- ============ FOOTER ============ -->
  <footer class="footer">
    <div class="footer__inner">
      <div class="footer__brand">
        <span class="footer__kanji">雷</span>
        <p class="footer__name">麺屋 雷神</p>
        <p class="footer__tagline">博多発 — 東京・西新宿</p>
      </div>
      <div class="footer__sns">
        <a href="#">Twitter</a>
        <a href="#">Instagram</a>
      </div>
    </div>
    <p class="footer__copy">&copy; 2026 麺屋 雷神</p>
  </footer>

</body>
</html>

Self Check

0 / 9

Submit

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

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

Freelance Value

ラーメン店・和食店のサイト制作。相場：80,000〜180,000円

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