NWA Coding Lab
F05🍽飲食・店舗系上級

Boulangerie Lune

ベーカリー / アニメーション

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

Client Brief

藤

藤田 美月オーナーパティシエ

Boulangerie Lune

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

パリで5年修行したパティシエが開いた個人ブーランジェリー。既存サイトが古く、ブランドの世界観が伝わっていない。予約販売やイートインの認知を上げたい。

ご要望

  • 1パリの夜の月明かりのような幻想的なデザイン
  • 2商品ラインナップの魅力的な見せ方
  • 3Swiper.jsによるスライダー
  • 4スクロールアニメーション
  • 5予約販売の案内

予算

¥350,000

納期

2ヶ月

種別

リニューアル

クライアントの人柄

美意識が高い、フランス文化への憧れ、繊細

避けてほしいこと

量販店感賑やかすぎる装飾明るいオレンジ・黄色

成功指標

予約販売を月100件以上、Instagram経由の認知拡大

追加メモ

"月の光と、こねた小麦粉の手触り、両方を感じさせたい。色使いは抑えめでも、写真の質感で勝負したい。"

Preview

フル画面で開く →
/demo/F05-boulangerie-lune/index.html

Learning Points

1

Swiper.js

2

Intersection Observer

3

CSS Grid

4

loading=lazy

5

微細なアニメーション

How to Build

01

Step 1: エディトリアル設計

60分

月白×深紺×銅色の配色、複数のセリフ体の使い分け、Swiperの仕様を計画。

成果物: デザイン設計書

02

Step 2: HTML＋Swiper

90分

ヒーロースライダー→イントロ→商品Grid→ストーリー→アクセスの構造。Swiper CDN読み込み。

成果物: 完全なHTML

03

Step 3: エディトリアルCSS

120分

Cormorant Garamond / Fraunces / Outfit の読み込み。商品GridのフィーチャードSpan。月白配色。

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

04

Step 4: Swiper＋アニメ

90分

Swiper初期化（fade、autoplay、pagination）。Intersection Observerでfade-inアニメーション。

成果物: インタラクション完成

05

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

90分

3カラム→2カラム→1カラム切り替え。loading=lazy確認。prefers-reduced-motion対応。

成果物: 完成版

Source Code

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Boulangerie Lune — 月夜のパン屋</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=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&family=Fraunces:opsz,wght@9..144,300;9..144,500;9..144,700&family=Outfit:wght@300;400;500;600&family=Shippori+Mincho:wght@400;500&display=swap" rel="stylesheet">

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>

  <!-- ============ HEADER ============ -->
  <header class="header" id="header">
    <div class="header__inner">
      <a href="#" class="header__logo">
        <span class="header__logo-icon">☽</span>
        <span class="header__logo-text">Boulangerie Lune</span>
      </a>
      <nav class="header__nav">
        <a href="#products" class="header__link">Produits</a>
        <a href="#story" class="header__link">Histoire</a>
        <a href="#access" class="header__link">Accès</a>
      </nav>
    </div>
  </header>

  <!-- ============ HERO SLIDER ============ -->
  <section class="hero">
    <div class="swiper hero-swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="https://images.unsplash.com/photo-1509440159596-0249088772ff?w=2000&q=80" alt="焼きたてのパン" loading="eager">
        </div>
        <div class="swiper-slide">
          <img src="https://images.unsplash.com/photo-1558961363-fa8fdf82db35?w=2000&q=80" alt="クロワッサン" loading="lazy">
        </div>
        <div class="swiper-slide">
          <img src="https://images.unsplash.com/photo-1509440159596-0249088772ff?w=2000&q=80" alt="パン屋の店内" loading="lazy">
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
    <div class="hero__overlay"></div>
    <div class="hero__content">
      <p class="hero__eyebrow">Boulangerie artisanale — Setagaya, Tokyo</p>
      <h1 class="hero__title">Boulangerie<br>Lune</h1>
      <p class="hero__subtitle">月夜に焼き上げる、小さな幸せ。</p>
    </div>
  </section>

  <!-- ============ INTRO ============ -->
  <section class="intro">
    <div class="intro__inner">
      <p class="intro__text">
        夜明け前、月の光が差し込む工房で、<br>
        小麦粉と水と、少しの塩と、たくさんの愛情で——<br>
        毎日、パンを焼いています。
      </p>
    </div>
  </section>

  <!-- ============ PRODUCTS ============ -->
  <section id="products" class="products">
    <div class="products__inner">
      <p class="section-label">Nos Produits</p>
      <h2 class="section-heading">商品ラインナップ</h2>

      <div class="products__grid">
        <article class="product-card product-card--featured">
          <div class="product-card__image">
            <img src="https://images.unsplash.com/photo-1555507036-ab1f4038808a?w=800&q=80" alt="クロワッサン" loading="lazy">
          </div>
          <div class="product-card__info">
            <span class="product-card__tag">Signature</span>
            <h3 class="product-card__name">Croissant au Beurre</h3>
            <p class="product-card__jp">発酵バターのクロワッサン</p>
            <p class="product-card__desc">フランスAOP認証エシレバターを使用。48時間低温発酵で香り高く、層の美しさにこだわった看板商品。</p>
            <span class="product-card__price">¥380</span>
          </div>
        </article>

        <article class="product-card">
          <div class="product-card__image">
            <img src="https://images.unsplash.com/photo-1608198093002-ad4e005484ec?w=600&q=80" alt="バゲット" loading="lazy">
          </div>
          <div class="product-card__info">
            <h3 class="product-card__name">Baguette Tradition</h3>
            <p class="product-card__jp">バゲット・トラディション</p>
            <span class="product-card__price">¥340</span>
          </div>
        </article>

        <article class="product-card">
          <div class="product-card__image">
            <img src="https://images.unsplash.com/photo-1558961363-fa8fdf82db35?w=600&q=80" alt="カンパーニュ" loading="lazy">
          </div>
          <div class="product-card__info">
            <h3 class="product-card__name">Pain de Campagne</h3>
            <p class="product-card__jp">カンパーニュ</p>
            <span class="product-card__price">¥520</span>
          </div>
        </article>

        <article class="product-card">
          <div class="product-card__image">
            <img src="https://images.unsplash.com/photo-1517433670267-08bbd4be890f?w=600&q=80" alt="フィナンシェ" loading="lazy">
          </div>
          <div class="product-card__info">
            <h3 class="product-card__name">Financier</h3>
            <p class="product-card__jp">フィナンシェ</p>
            <span class="product-card__price">¥280</span>
          </div>
        </article>

        <article class="product-card">
          <div class="product-card__image">
            <img src="https://images.unsplash.com/photo-1464305795204-6f5bbfc7fb81?w=600&q=80" alt="タルト" loading="lazy">
          </div>
          <div class="product-card__info">
            <h3 class="product-card__name">Tarte aux Fruits</h3>
            <p class="product-card__jp">季節のフルーツタルト</p>
            <span class="product-card__price">¥580</span>
          </div>
        </article>

        <article class="product-card">
          <div class="product-card__image">
            <img src="https://images.unsplash.com/photo-1550617931-e17a7b70dce2?w=600&q=80" alt="ブリオッシュ" loading="lazy">
          </div>
          <div class="product-card__info">
            <h3 class="product-card__name">Brioche Dorée</h3>
            <p class="product-card__jp">黄金のブリオッシュ</p>
            <span class="product-card__price">¥320</span>
          </div>
        </article>
      </div>
    </div>
  </section>

  <!-- ============ STORY ============ -->
  <section id="story" class="story">
    <div class="story__inner">
      <div class="story__image">
        <img src="https://images.unsplash.com/photo-1495195134817-aeb325a55b65?w=800&q=80" alt="パティシエの手" loading="lazy">
      </div>
      <div class="story__text">
        <p class="section-label">Notre Histoire</p>
        <h2 class="section-heading">わたしたちの物語</h2>
        <p class="story__body">
          2019年、パリ16区のブーランジェリーでの5年間の修業を終え、東京・経堂の小さな路面店をオープンしました。
        </p>
        <p class="story__body">
          パリの月夜の下、早朝3時に工房に入り、生地と向き合う日々。あの静謐な時間と、焼き上がりの香りに包まれる幸福を、この街でも届けたい。「Lune（月）」という名前には、そんな想いを込めています。
        </p>
        <p class="story__body">
          予約販売も承っております。お気軽にお問い合わせください。
        </p>
      </div>
    </div>
  </section>

  <!-- ============ ACCESS ============ -->
  <section id="access" class="access">
    <div class="access__inner">
      <p class="section-label section-label--center">Accès</p>
      <h2 class="section-heading section-heading--center">店舗情報</h2>
      <div class="access__grid">
        <dl class="access__dl">
          <div class="access__row">
            <dt>住所</dt>
            <dd>〒156-0052<br>東京都世田谷区経堂2-15-7</dd>
          </div>
          <div class="access__row">
            <dt>最寄り</dt>
            <dd>小田急線「経堂駅」南口 徒歩4分</dd>
          </div>
          <div class="access__row">
            <dt>営業時間</dt>
            <dd>7:00 – 18:00（売切次第閉店）</dd>
          </div>
          <div class="access__row">
            <dt>定休日</dt>
            <dd>月曜日・火曜日</dd>
          </div>
          <div class="access__row">
            <dt>予約販売</dt>
            <dd>Instagramの DMにて受付</dd>
          </div>
        </dl>
        <div class="access__photo">
          <img src="https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=800&q=80" alt="店舗外観" loading="lazy">
        </div>
      </div>
    </div>
  </section>

  <!-- ============ FOOTER ============ -->
  <footer class="footer">
    <div class="footer__inner">
      <div class="footer__brand">
        <span class="footer__moon">☽</span>
        <p class="footer__name">Boulangerie Lune</p>
        <p class="footer__tagline">Boulangerie artisanale — Setagaya, Tokyo</p>
      </div>
      <ul class="footer__links">
        <li><a href="#">Instagram</a></li>
        <li><a href="#">予約販売について</a></li>
      </ul>
    </div>
    <p class="footer__copy">&copy; 2026 Boulangerie Lune. All rights reserved.</p>
  </footer>

  <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
  <script src="js/script.js"></script>
</body>
</html>

Self Check

0 / 10

Submit

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

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

Freelance Value

おしゃれなパン屋・スイーツ店サイト。相場：150,000〜300,000円

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