NWA Coding Lab
F02🍽飲食・店舗系初級

酒蔵 蛍

居酒屋 / 複数ページ

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

Client Brief

山

山田 誠一店主

酒蔵 蛍

件名: リニューアルのご依頼

10年続く老舗居酒屋。常連は固いが新規客が減ってきた。Instagram経由で20-30代に来てもらえるサイトに作り変えたい。

ご要望

  • 1店の世界観（夜の暗がり、暖色照明）が伝わるデザイン
  • 2メニューと店舗情報、アクセスがすぐ分かる
  • 3予約導線（電話と外部予約サイト）

予算

¥120,000

納期

1ヶ月

種別

リニューアル

クライアントの人柄

頑固一徹、料理と酒に対するこだわりが強い

避けてほしいこと

明るすぎる配色ポップな印象若者向けすぎる軽さ

成功指標

新規来店客数を月20%増やす

追加メモ

"うちは『神楽坂の隠れ家』みたいな雰囲気を目指してる。和紙の質感とか、行灯の暖かさを表現できると嬉しい。"

Preview

フル画面で開く →
/demo/F02-izakaya-hotaru/index.html

Learning Points

1

複数ページ構成

2

ナビゲーション設計

3

画像ギャラリー

4

和風カラーパレット

5

縦のリズム

How to Build

01

Step 1: 世界観設計

30分

ダーク配色のカラーパレットと和風フォントの組み合わせを確認。参考サイトを観察。

成果物: カラーパレットメモ

02

Step 2: HTML骨組み

60分

ヘッダー→ヒーロー→About→メニュー→ギャラリー→Access→フッターのセクション構造を作る。

成果物: プレーンなHTML

03

Step 3: ダーク配色＋タイポ

90分

CSS変数で暗い配色を設定。Shippori Mincho / Zen Old Minchoの読み込みと適用。

成果物: 配色とフォントが整ったページ

04

Step 4: レイアウト＋装飾

120分

2カラムGrid、メニュー価格表、ギャラリーのtall/wide配置。縦書きテキスト。

成果物: ほぼ完成形

05

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

60分

768px / 480pxブレイクポイント。ホバーエフェクト、画像フィルタの調整。

成果物: 完成版

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=Shippori+Mincho:wght@400;500;600;700;800&family=Zen+Old+Mincho:wght@400;500;600;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">
        <span class="header__logo-kanji">蛍</span>
        <span class="header__logo-text">酒蔵 蛍</span>
      </a>
      <nav class="header__nav">
        <a href="#about" class="header__link">当店について</a>
        <a href="#menu" class="header__link">お品書き</a>
        <a href="#gallery" class="header__link">店内</a>
        <a href="#access" class="header__link">ご案内</a>
      </nav>
    </div>
  </header>

  <!-- ============ HERO ============ -->
  <section class="hero">
    <div class="hero__image">
      <img src="https://images.unsplash.com/photo-1553621042-f6e147245754?w=2000&q=80" alt="薄暗い居酒屋の店内">
    </div>
    <div class="hero__content">
      <div class="hero__vertical">
        <p class="hero__vertical-text">神楽坂の隠れ家</p>
      </div>
      <h1 class="hero__title">
        <span class="hero__title-sub">— 季節の酒肴と、全国の地酒 —</span>
        <span class="hero__title-main">酒蔵 蛍</span>
      </h1>
      <p class="hero__lead">
        路地裏の小さな引き戸の向こうに、<br>
        行灯の灯りと、心を解す一杯が待っています。
      </p>
    </div>
  </section>

  <!-- ============ ABOUT ============ -->
  <section id="about" class="about">
    <div class="about__inner">
      <div class="about__image-col">
        <img src="https://images.unsplash.com/photo-1514190051997-0f6f39ca5cde?w=800&q=80" alt="日本酒の注がれる盃">
      </div>
      <div class="about__text-col">
        <p class="section-label">About</p>
        <h2 class="section-heading">当店について</h2>
        <p class="about__body">
          「酒蔵 蛍」は、平成十六年に神楽坂の路地裏に開業した小さな居酒屋です。カウンター八席と小上がり二卓、あわせて十六席。店主が毎朝築地で仕入れる旬の魚介と、全国から厳選した五十種以上の地酒をお愉しみいただけます。
        </p>
        <p class="about__body">
          照明を落とした店内に、行灯の灯りが揺れる。そんな空間で、日々の喧騒を忘れてゆっくりと杯を傾けてください。一期一会の一皿と一杯を、真心を込めてお出しいたします。
        </p>
      </div>
    </div>
  </section>

  <!-- ============ MENU ============ -->
  <section id="menu" class="menu">
    <div class="menu__inner">
      <p class="section-label section-label--light">Menu</p>
      <h2 class="section-heading section-heading--light">お品書き</h2>

      <div class="menu__columns">
        <div class="menu__category">
          <h3 class="menu__category-title">酒肴</h3>
          <ul class="menu__list">
            <li class="menu__item">
              <span class="menu__name">本日の刺身三点盛り</span>
              <span class="menu__dots"></span>
              <span class="menu__price">¥1,480</span>
            </li>
            <li class="menu__item">
              <span class="menu__name">炙り〆鯖</span>
              <span class="menu__dots"></span>
              <span class="menu__price">¥880</span>
            </li>
            <li class="menu__item">
              <span class="menu__name">季節の天ぷら盛り合わせ</span>
              <span class="menu__dots"></span>
              <span class="menu__price">¥1,280</span>
            </li>
            <li class="menu__item">
              <span class="menu__name">牛すじ味噌煮込み</span>
              <span class="menu__dots"></span>
              <span class="menu__price">¥980</span>
            </li>
            <li class="menu__item">
              <span class="menu__name">自家製ぬか漬け</span>
              <span class="menu__dots"></span>
              <span class="menu__price">¥580</span>
            </li>
          </ul>
        </div>
        <div class="menu__category">
          <h3 class="menu__category-title">地酒</h3>
          <ul class="menu__list">
            <li class="menu__item">
              <span class="menu__name">獺祭 純米大吟醸</span>
              <span class="menu__dots"></span>
              <span class="menu__price">¥980</span>
            </li>
            <li class="menu__item">
              <span class="menu__name">而今 特別純米</span>
              <span class="menu__dots"></span>
              <span class="menu__price">¥880</span>
            </li>
            <li class="menu__item">
              <span class="menu__name">田酒 純米吟醸</span>
              <span class="menu__dots"></span>
              <span class="menu__price">¥780</span>
            </li>
            <li class="menu__item">
              <span class="menu__name">飛露喜 純米</span>
              <span class="menu__dots"></span>
              <span class="menu__price">¥880</span>
            </li>
            <li class="menu__item">
              <span class="menu__name">黒龍 大吟醸</span>
              <span class="menu__dots"></span>
              <span class="menu__price">¥1,200</span>
            </li>
          </ul>
        </div>
      </div>
      <p class="menu__note">※ 仕入れ状況により内容が変わります。本日のおすすめは店内にて。</p>
    </div>
  </section>

  <!-- ============ GALLERY ============ -->
  <section id="gallery" class="gallery">
    <div class="gallery__inner">
      <p class="section-label">Gallery</p>
      <h2 class="section-heading">店内の様子</h2>
      <div class="gallery__grid">
        <figure class="gallery__item gallery__item--tall">
          <img src="https://images.unsplash.com/photo-1551218808-94e220e084d2?w=800&q=80" alt="カウンターに並ぶ酒瓶">
        </figure>
        <figure class="gallery__item">
          <img src="https://images.unsplash.com/photo-1579027989536-b7b1f875659b?w=600&q=80" alt="焼き鳥">
        </figure>
        <figure class="gallery__item">
          <img src="https://images.unsplash.com/photo-1580442151529-343f2f6e0e27?w=600&q=80" alt="日本酒と小鉢">
        </figure>
        <figure class="gallery__item gallery__item--wide">
          <img src="https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?w=1200&q=80" alt="居酒屋の内観">
        </figure>
      </div>
    </div>
  </section>

  <!-- ============ ACCESS ============ -->
  <section id="access" class="access">
    <div class="access__inner">
      <p class="section-label section-label--light">Access</p>
      <h2 class="section-heading section-heading--light">ご案内</h2>
      <div class="access__grid">
        <div class="access__info">
          <dl class="access__dl">
            <div class="access__row">
              <dt>住所</dt>
              <dd>〒162-0825<br>東京都新宿区神楽坂3-2-15<br>蛍ビル 1F</dd>
            </div>
            <div class="access__row">
              <dt>最寄り</dt>
              <dd>東京メトロ 東西線<br>「神楽坂駅」徒歩3分</dd>
            </div>
            <div class="access__row">
              <dt>営業時間</dt>
              <dd>17:00 〜 24:00（L.O. 23:00）</dd>
            </div>
            <div class="access__row">
              <dt>定休日</dt>
              <dd>日曜日・祝日</dd>
            </div>
            <div class="access__row">
              <dt>席数</dt>
              <dd>カウンター8席 / 小上がり2卓</dd>
            </div>
            <div class="access__row">
              <dt>電話</dt>
              <dd><a href="tel:03-0000-0000">03-0000-0000</a></dd>
            </div>
          </dl>
        </div>
        <div class="access__photo">
          <img src="https://images.unsplash.com/photo-1555396273-367ea4eb4db5?w=800&q=80" alt="店舗外観 — 暖簾のかかる入口">
          <p class="access__caption">路地を入って左手、暖簾が目印です</p>
        </div>
      </div>
      <div class="access__cta">
        <p class="access__cta-text">ご予約は電話にて承ります</p>
        <a href="tel:03-0000-0000" class="btn btn--lantern">03-0000-0000</a>
      </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>
      <ul class="footer__links">
        <li><a href="#">食べログ</a></li>
        <li><a href="#">Instagram</a></li>
        <li><a href="#">ぐるなび</a></li>
      </ul>
    </div>
    <p class="footer__copy">&copy; 2026 酒蔵 蛍. All rights reserved.</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〜150,000円

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