Client Brief
白
白石 麗奈支配人
Wedding Belle
件名: リニューアルのご依頼
軽井沢のクラシカルな結婚式場。既存サイトがテンプレ感が強く、式場の格とミスマッチ。フランスの古城のような世界観で、上質なカップルを惹きつけたい。
ご要望
- 1フルスクリーンヒーローにパララックス効果
- 23つのウェディングプラン比較
- 3ブライダルフェア日程と予約導線
- 4カップルの声（テスティモニアル）
- 5相談予約フォーム
予算
¥600,000
納期
2ヶ月
種別
リニューアル
クライアントの人柄
完璧主義、フランス文化への造詣が深い、最高の一日を演出する使命感
避けてほしいこと
チープなテンプレート感ポップな印象情報詰め込み
成功指標
ブライダルフェア予約を月20組以上、成約率30%以上
追加メモ
"The Treat DressingやHatsuko Endoのような、ため息が出るほど美しいサイトにしてほしい。金とクリムゾンで。"
Preview
/demo/S03-wedding-belle/index.html
Learning Points
1
フルスクリーンヒーロー
2
パララックス
3
プラン比較
4
相談予約
How to Build
01
Step 1: エディトリアル設計
60分パララックスヒーロー、プラン比較、ギャラリー構成、フォーム仕様を設計。
成果物: ページ構成図
02
Step 2: HTML構造
120分ヒーロー→コンセプト→プラン→ギャラリー→フェア→テスティモニアル→予約フォーム→アクセス。
成果物: 完全なHTML
03
Step 3: ロマンティックCSS
150分象牙×深紅×ゴールド。Instrument Serif見出し。パララックスヒーロー。マサンリーギャラリー。
成果物: ビジュアル完成
04
Step 4: アニメ＋フォーム
120分スクロールfade-in（IntersectionObserver）、予約フォーム、ブライダルフェアカード。
成果物: ほぼ完成形
05
Step 5: レスポンシブ＋仕上げ
90分パララックスのモバイル対応、ギャラリー列数調整、フォームの最適化。
成果物: 完成版
Source Code
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wedding Belle — ふたりの物語が、始まる場所。</title>
<meta name="description" content="Wedding Belle — フレンチシャトーの気品と、エディトリアルな美意識が融合するウェディング会場。ふたりだけの物語を、ここから。">
<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=Instrument+Serif:ital@0;1&family=Noto+Serif+JP:wght@400;500&family=Plus+Jakarta+Sans:wght@300;400;500;600&display=swap" rel="stylesheet">
<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-text">Wedding Belle</span>
</a>
<button class="header__hamburger" id="hamburger" aria-label="メニューを開く">
<span class="header__hamburger-line"></span>
<span class="header__hamburger-line"></span>
<span class="header__hamburger-line"></span>
</button>
<nav class="header__nav" id="nav">
<ul class="header__nav-list">
<li class="header__nav-item"><a href="#concept" class="header__nav-link">Concept</a></li>
<li class="header__nav-item"><a href="#plans" class="header__nav-link">Plan</a></li>
<li class="header__nav-item"><a href="#gallery" class="header__nav-link">Gallery</a></li>
<li class="header__nav-item"><a href="#fair" class="header__nav-link">Fair</a></li>
<li class="header__nav-item"><a href="#access" class="header__nav-link">Access</a></li>
</ul>
</nav>
</div>
</header>
<!-- ========== Hero ========== -->
<section class="hero" id="hero">
<div class="hero__bg" style="background-image: url('https://images.unsplash.com/photo-1519741497674-611481863552?w=2000&q=80');"></div>
<div class="hero__overlay"></div>
<div class="hero__content">
<p class="hero__subtitle">Wedding Belle</p>
<h1 class="hero__title">ふたりの物語が、<br>始まる場所。</h1>
<p class="hero__description">Where your story begins.</p>
</div>
<div class="hero__scroll">
<span class="hero__scroll-text">Scroll</span>
<span class="hero__scroll-line"></span>
</div>
</section>
<!-- ========== Concept ========== -->
<section class="concept" id="concept">
<div class="concept__inner">
<div class="concept__image-wrapper fade-in">
<img
src="https://images.unsplash.com/photo-1464366400600-7168b8af9bc3?w=1200&q=80"
alt="Wedding Belleの会場外観 — フレンチシャトーを思わせる佇まい"
class="concept__image"
loading="lazy"
>
<div class="concept__image-overlay">
<span class="concept__image-label">Est. 2008</span>
</div>
</div>
<div class="concept__text fade-in">
<p class="concept__section-label">Concept</p>
<h2 class="concept__heading">
永遠に続く、<br>美しい一日を。
</h2>
<p class="concept__description">
フレンチシャトーの優雅さと、エディトリアルな美意識が交差する場所。
Wedding Belleは、おふたりの「らしさ」を大切にしながら、
ゲストの心に深く刻まれる特別な一日をお届けします。
</p>
<p class="concept__description">
200年の歴史を持つフランスの古城にインスピレーションを得た空間で、
花々の香り、繊細な光、そして心のこもったおもてなし。
すべてが調和する、至福のウェディングを。
</p>
<a href="#fair" class="concept__cta">
ブライダルフェアを見る
<span class="concept__cta-arrow">→</span>
</a>
</div>
</div>
</section>
<!-- ========== Plans ========== -->
<section class="plans" id="plans">
<div class="plans__inner">
<p class="plans__section-label fade-in">Plan</p>
<h2 class="plans__heading fade-in">ウェディングプラン</h2>
<p class="plans__lead fade-in">おふたりのご希望に合わせた、3つのプランをご用意しております。</p>
<div class="plans__grid">
<!-- Plan 1: Classique -->
<article class="plan-card fade-in">
<div class="plan-card__header">
<span class="plan-card__label">Plan 01</span>
<h3 class="plan-card__name">Classique</h3>
<p class="plan-card__name-jp">クラシック</p>
</div>
<div class="plan-card__price">
<span class="plan-card__price-yen">¥</span>
<span class="plan-card__price-number">2,980,000</span>
<span class="plan-card__price-tax">（税込）</span>
</div>
<p class="plan-card__guests">40名様まで</p>
<ul class="plan-card__features">
<li class="plan-card__feature">挙式（チャペル or 人前式）</li>
<li class="plan-card__feature">披露宴（2.5時間）</li>
<li class="plan-card__feature">新郎新婦衣装 各1着</li>
<li class="plan-card__feature">ヘアメイク・着付け</li>
<li class="plan-card__feature">フラワーコーディネート</li>
<li class="plan-card__feature">写真撮影（200カット）</li>
<li class="plan-card__feature">フレンチコース料理</li>
<li class="plan-card__feature">ウェルカムドリンク</li>
</ul>
<a href="#consultation" class="plan-card__cta">相談予約する</a>
</article>
<!-- Plan 2: Elegance -->
<article class="plan-card plan-card--featured fade-in">
<div class="plan-card__badge">人気No.1</div>
<div class="plan-card__header">
<span class="plan-card__label">Plan 02</span>
<h3 class="plan-card__name">Élégance</h3>
<p class="plan-card__name-jp">エレガンス</p>
</div>
<div class="plan-card__price">
<span class="plan-card__price-yen">¥</span>
<span class="plan-card__price-number">4,580,000</span>
<span class="plan-card__price-tax">（税込）</span>
</div>
<p class="plan-card__guests">60名様まで</p>
<ul class="plan-card__features">
<li class="plan-card__feature">挙式（チャペル or 人前式）</li>
<li class="plan-card__feature">披露宴（3時間）</li>
<li class="plan-card__feature">新郎新婦衣装 各2着</li>
<li class="plan-card__feature">ヘアメイク・着付け（お色直し含む）</li>
<li class="plan-card__feature">プレミアムフラワー装飾</li>
<li class="plan-card__feature">写真・動画撮影（500カット＋ダイジェスト）</li>
<li class="plan-card__feature">シェフ特選フレンチコース</li>
<li class="plan-card__feature">フリードリンク</li>
<li class="plan-card__feature">引出物・プチギフト</li>
<li class="plan-card__feature">前撮り撮影</li>
</ul>
<a href="#consultation" class="plan-card__cta">相談予約する</a>
</article>
<!-- Plan 3: Royal -->
<article class="plan-card fade-in">
<div class="plan-card__header">
<span class="plan-card__label">Plan 03</span>
<h3 class="plan-card__name">Royal</h3>
<p class="plan-card__name-jp">ロワイヤル</p>
</div>
<div class="plan-card__price">
<span class="plan-card__price-yen">¥</span>
<span class="plan-card__price-number">6,980,000</span>
<span class="plan-card__price-tax">（税込）</span>
</div>
<p class="plan-card__guests">80名様まで</p>
<ul class="plan-card__features">
<li class="plan-card__feature">挙式（チャペル or 人前式 or ガーデン）</li>
<li class="plan-card__feature">披露宴（3.5時間・完全貸切）</li>
<li class="plan-card__feature">新郎新婦衣装 無制限</li>
<li class="plan-card__feature">トップスタイリストによるヘアメイク</li>
<li class="plan-card__feature">オートクチュールフラワー装飾</li>
<li class="plan-card__feature">写真・映像フルパッケージ</li>
<li class="plan-card__feature">グランシェフ監修フルコース</li>
<li class="plan-card__feature">プレミアムフリードリンク</li>
<li class="plan-card__feature">引出物・プチギフト・席札ギフト</li>
<li class="plan-card__feature">前撮り＋後撮り撮影</li>
<li class="plan-card__feature">専属プランナー対応</li>
<li class="plan-card__feature">ハネムーン手配サポート</li>
</ul>
<a href="#consultation" class="plan-card__cta">相談予約する</a>
</article>
</div>
</div>
</section>
<!-- ========== Gallery ========== -->
<section class="gallery" id="gallery">
<div class="gallery__inner">
<p class="gallery__section-label fade-in">Gallery</p>
<h2 class="gallery__heading fade-in">ギャラリー</h2>
<div class="gallery__grid">
<figure class="gallery__item gallery__item--wide fade-in">
<img
src="https://images.unsplash.com/photo-1511285560929-80b456fea0bc?w=600&q=80"
alt="チャペルでの挙式の様子"
class="gallery__image"
loading="lazy"
>
<figcaption class="gallery__caption">Ceremony</figcaption>
</figure>
<figure class="gallery__item fade-in">
<img
src="https://images.unsplash.com/photo-1469371670807-013ccf25f16a?w=600&q=80"
alt="華やかな披露宴会場"
class="gallery__image"
loading="lazy"
>
<figcaption class="gallery__caption">Reception</figcaption>
</figure>
<figure class="gallery__item fade-in">
<img
src="https://images.unsplash.com/photo-1594463750939-ebb28c3f7f75?w=600&q=80"
alt="ウェディングドレス"
class="gallery__image"
loading="lazy"
>
<figcaption class="gallery__caption">Dress</figcaption>
</figure>
<figure class="gallery__item gallery__item--tall fade-in">
<img
src="https://images.unsplash.com/photo-1487530811176-3780de880c2d?w=600&q=80"
alt="ブーケとフラワーアレンジメント"
class="gallery__image"
loading="lazy"
>
<figcaption class="gallery__caption">Flowers</figcaption>
</figure>
<figure class="gallery__item fade-in">
<img
src="https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=600&q=80"
alt="フレンチコース料理"
class="gallery__image"
loading="lazy"
>
<figcaption class="gallery__caption">Cuisine</figcaption>
</figure>
<figure class="gallery__item fade-in">
<img
src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=600&q=80"
alt="チャペル内観"
class="gallery__image"
loading="lazy"
>
<figcaption class="gallery__caption">Chapel</figcaption>
</figure>
</div>
</div>
</section>
<!-- ========== Bridal Fair ========== -->
<section class="fair" id="fair">
<div class="fair__inner">
<p class="fair__section-label fade-in">Bridal Fair</p>
<h2 class="fair__heading fade-in">ブライダルフェア</h2>
<p class="fair__lead fade-in">実際の会場をご覧いただきながら、おふたりの理想のウェディングをご相談いただけます。</p>
<div class="fair__grid">
<!-- Fair 1 -->
<article class="fair-card fade-in">
<div class="fair-card__date">
<span class="fair-card__date-month">4</span>
<span class="fair-card__date-sep">/</span>
<span class="fair-card__date-day">20</span>
<span class="fair-card__date-weekday">Sun</span>
</div>
<div class="fair-card__body">
<h3 class="fair-card__title">グランドチャペル体験＆フレンチ試食フェア</h3>
<p class="fair-card__description">
本番さながらのチャペル挙式体験と、シェフ自慢のフレンチハーフコースをご試食いただけるスペシャルフェア。初めてのご来館にもおすすめです。
</p>
<div class="fair-card__tags">
<span class="fair-card__tag">挙式体験</span>
<span class="fair-card__tag">試食付き</span>
<span class="fair-card__tag">初来館歓迎</span>
</div>
<a href="#consultation" class="fair-card__cta">予約する</a>
</div>
</article>
<!-- Fair 2 -->
<article class="fair-card fade-in">
<div class="fair-card__date">
<span class="fair-card__date-month">5</span>
<span class="fair-card__date-sep">/</span>
<span class="fair-card__date-day">5</span>
<span class="fair-card__date-weekday">Mon</span>
</div>
<div class="fair-card__body">
<h3 class="fair-card__title">GW限定ドレス試着＆会場コーディネート見学会</h3>
<p class="fair-card__description">
人気ブランドのドレスを実際にご試着。季節のフラワーコーディネートで彩られた会場を、ゲスト目線でご体験ください。
</p>
<div class="fair-card__tags">
<span class="fair-card__tag">ドレス試着</span>
<span class="fair-card__tag">コーデ見学</span>
<span class="fair-card__tag">GW限定</span>
</div>
<a href="#consultation" class="fair-card__cta">予約する</a>
</div>
</article>
<!-- Fair 3 -->
<article class="fair-card fade-in">
<div class="fair-card__date">
<span class="fair-card__date-month">5</span>
<span class="fair-card__date-sep">/</span>
<span class="fair-card__date-day">18</span>
<span class="fair-card__date-weekday">Sun</span>
</div>
<div class="fair-card__body">
<h3 class="fair-card__title">プレミアムフルコース試食×模擬挙式体験</h3>
<p class="fair-card__description">
グランシェフが手がけるフルコース料理のご試食と、生演奏による感動の模擬挙式。おふたりの特別な一日をリアルにイメージしていただけます。
</p>
<div class="fair-card__tags">
<span class="fair-card__tag">フルコース試食</span>
<span class="fair-card__tag">模擬挙式</span>
<span class="fair-card__tag">生演奏</span>
</div>
<a href="#consultation" class="fair-card__cta">予約する</a>
</div>
</article>
</div>
</div>
</section>
<!-- ========== Testimonials ========== -->
<section class="testimonials" id="testimonials">
<div class="testimonials__inner">
<p class="testimonials__section-label fade-in">Testimonials</p>
<h2 class="testimonials__heading fade-in">お客様の声</h2>
<div class="testimonials__grid">
<!-- Couple 1 -->
<article class="testimonial fade-in">
<div class="testimonial__image-wrapper">
<img
src="https://images.unsplash.com/photo-1529636798458-92182e662485?w=400&q=80"
alt="T様ご夫妻のウェディングフォト"
class="testimonial__image"
loading="lazy"
>
</div>
<div class="testimonial__body">
<div class="testimonial__meta">
<span class="testimonial__couple-name">T & M 様</span>
<span class="testimonial__date">2025年10月挙式</span>
</div>
<blockquote class="testimonial__quote">
<p>
「チャペルに差し込む光がとても美しく、まるで映画のワンシーンのようでした。
プランナーさんが私たちの小さなこだわりまで丁寧に汲み取ってくださり、
ゲストからも『今まで出席した結婚式で一番感動した』と言っていただけました。
一生の宝物になる一日をありがとうございました。」
</p>
</blockquote>
<p class="testimonial__plan">Élégance プラン / 58名</p>
</div>
</article>
<!-- Couple 2 -->
<article class="testimonial testimonial--reverse fade-in">
<div class="testimonial__image-wrapper">
<img
src="https://images.unsplash.com/photo-1519741497674-611481863552?w=400&q=80"
alt="S様ご夫妻のウェディングフォト"
class="testimonial__image"
loading="lazy"
>
</div>
<div class="testimonial__body">
<div class="testimonial__meta">
<span class="testimonial__couple-name">S & A 様</span>
<span class="testimonial__date">2025年6月挙式</span>
</div>
<blockquote class="testimonial__quote">
<p>
「ガーデンでのデザートビュッフェが大好評でした。
お料理のクオリティが本当に素晴らしく、フレンチのフルコースに
ゲストの皆さんが感動していました。前撮りでは季節の花々に囲まれた
素敵な写真を撮っていただき、アルバムを見返すたびに幸せな気持ちになります。」
</p>
</blockquote>
<p class="testimonial__plan">Royal プラン / 72名</p>
</div>
</article>
</div>
</div>
</section>
<!-- ========== Consultation CTA ========== -->
<section class="consultation" id="consultation">
<div class="consultation__inner">
<div class="consultation__header fade-in">
<p class="consultation__section-label">Reservation</p>
<h2 class="consultation__heading">ブライダルフェアのご予約</h2>
<p class="consultation__lead">
おふたりのご都合に合わせて、ブライダルフェアや個別相談会をご予約いただけます。<br>
まずはお気軽にお問い合わせください。
</p>
</div>
<form class="consultation__form fade-in" id="consultationForm" action="#" method="post">
<div class="consultation__form-group">
<label class="consultation__label" for="name">お名前 <span class="consultation__required">必須</span></label>
<input class="consultation__input" type="text" id="name" name="name" placeholder="例：田中 花子" required>
</div>
<div class="consultation__form-group">
<label class="consultation__label" for="email">メールアドレス <span class="consultation__required">必須</span></label>
<input class="consultation__input" type="email" id="email" name="email" placeholder="例：hanako@example.com" required>
</div>
<div class="consultation__form-group">
<label class="consultation__label" for="date">ご希望日 <span class="consultation__required">必須</span></label>
<select class="consultation__select" id="date" name="date" required>
<option value="" disabled selected>日程をお選びください</option>
<option value="2026-04-20">4月20日（日）グランドチャペル体験＆フレンチ試食フェア</option>
<option value="2026-05-05">5月5日（月）GW限定ドレス試着＆会場コーディネート見学会</option>
<option value="2026-05-18">5月18日（日）プレミアムフルコース試食×模擬挙式体験</option>
<option value="other">その他（メッセージ欄にご希望日をご記入ください）</option>
</select>
</div>
<div class="consultation__form-group">
<label class="consultation__label" for="message">メッセージ</label>
<textarea class="consultation__textarea" id="message" name="message" rows="5" placeholder="ご質問やご要望がございましたらお気軽にご記入ください。"></textarea>
</div>
<button class="consultation__submit" type="submit">予約を送信する</button>
</form>
</div>
</section>
<!-- ========== Access ========== -->
<section class="access" id="access">
<div class="access__inner">
<p class="access__section-label fade-in">Access</p>
<h2 class="access__heading fade-in">アクセス</h2>
<div class="access__content fade-in">
<div class="access__info">
<dl class="access__details">
<div class="access__detail-item">
<dt class="access__detail-label">会場名</dt>
<dd class="access__detail-value">Wedding Belle（ウェディング ベル）</dd>
</div>
<div class="access__detail-item">
<dt class="access__detail-label">所在地</dt>
<dd class="access__detail-value">〒150-0013 東京都渋谷区恵比寿1-2-3 ベルシャトービル</dd>
</div>
<div class="access__detail-item">
<dt class="access__detail-label">電話番号</dt>
<dd class="access__detail-value"><a href="tel:03-1234-5678" class="access__link">03-1234-5678</a></dd>
</div>
<div class="access__detail-item">
<dt class="access__detail-label">営業時間</dt>
<dd class="access__detail-value">10:00〜19:00（火・水定休）</dd>
</div>
<div class="access__detail-item">
<dt class="access__detail-label">アクセス</dt>
<dd class="access__detail-value">JR恵比寿駅 東口より徒歩5分<br>東京メトロ日比谷線 恵比寿駅 3番出口より徒歩3分</dd>
</div>
</dl>
</div>
<div class="access__map">
<div class="access__map-placeholder">
<span class="access__map-icon">♢</span>
<p class="access__map-text">Google Map</p>
<p class="access__map-note">※実際のサイトではGoogle Mapsを埋め込みます</p>
</div>
</div>
</div>
</div>
</section>
<!-- ========== Footer ========== -->
<footer class="footer">
<div class="footer__inner">
<div class="footer__brand">
<p class="footer__logo">Wedding Belle</p>
<p class="footer__tagline">ふたりの物語が、始まる場所。</p>
</div>
<nav class="footer__nav">
<ul class="footer__nav-list">
<li><a href="#concept" class="footer__nav-link">Concept</a></li>
<li><a href="#plans" class="footer__nav-link">Plan</a></li>
<li><a href="#gallery" class="footer__nav-link">Gallery</a></li>
<li><a href="#fair" class="footer__nav-link">Fair</a></li>
<li><a href="#access" class="footer__nav-link">Access</a></li>
</ul>
</nav>
<div class="footer__contact">
<p class="footer__phone"><a href="tel:03-1234-5678">03-1234-5678</a></p>
<p class="footer__hours">10:00〜19:00（火・水定休）</p>
</div>
<div class="footer__bottom">
<p class="footer__copyright">© 2026 Wedding Belle. All rights reserved.</p>
<ul class="footer__legal">
<li><a href="#" class="footer__legal-link">プライバシーポリシー</a></li>
<li><a href="#" class="footer__legal-link">特定商取引法に基づく表記</a></li>
</ul>
</div>
</div>
</footer>
<script src="js/script.js"></script>
</body>
</html>Self Check
0 / 10
Submit
Discord #提出-service チャンネルに投稿
- 1デプロイURL
- 2GitHubリポジトリURL
- 3工夫した点3つ
- 4クライアントへの提案メッセージ案