Client Brief
月
月岡 凛オーナースタイリスト
hair salon LUNA
件名: 新規制作のご依頼
表参道に開業2年目の美容室。InstagramのDMで予約を受けているが、サイトがなく信頼感に欠ける。月の光のような上品な世界観で差別化したい。
ご要望
- 1スタイリスト紹介（3名分）
- 2メニュー・料金表
- 3スタイルギャラリー
- 4電話予約導線
予算
¥150,000
納期
3週間
種別
新規制作
クライアントの人柄
美意識が高い、静かな自信、トレンドに敏感
避けてほしいこと
安売りサロン感ごちゃごちゃした装飾ピンクピンクした可愛すぎるデザイン
成功指標
サイト経由の新規予約を月15件以上獲得
追加メモ
"夜の月明かりのような、黒と銀の静謐な雰囲気にしたい。髪の美しさが映えるダーク背景で。"
Preview
/demo/S01-hair-salon-luna/index.html
Learning Points
1
スタイリストカード
2
メニュー価格表
3
ギャラリー
4
予約導線
How to Build
01
Step 1: 世界観設計
30分黒背景×月光銀×淡桃の配色とCrimson Proフォントの組み合わせを確認。
成果物: カラー・フォントメモ
02
Step 2: HTML骨組み
60分ヘッダー→ヒーロー→スタイリスト→メニュー→ギャラリー→アクセス→フッター。
成果物: プレーンHTML
03
Step 3: ダーク配色
90分黒背景に銀テキスト。スタイリストカード（丸写真）、メニュー表。
成果物: ビジュアル完成
04
Step 4: ギャラリー＋CTA
120分2×2ギャラリーGrid、ホバーズーム、予約CTAボタン。
成果物: ほぼ完成形
05
Step 5: レスポンシブ
60分ギャラリー・スタイリストカードの列数調整。モバイル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>LUNA | Hair Salon - 髪に、月の光を。</title>
<meta name="description" content="LUNA - 青山・表参道の上質なヘアサロン。月の光のような美しい艶髪へ。">
<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=Crimson+Pro:wght@300;400;500;600;700&family=Outfit: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">
<span class="header__logo-symbol">☽</span>
<span class="header__logo-text">LUNA</span>
</a>
<nav class="header__nav">
<ul class="header__nav-list">
<li class="header__nav-item"><a href="#menu" class="header__nav-link">Menu</a></li>
<li class="header__nav-item"><a href="#stylist" class="header__nav-link">Stylist</a></li>
<li class="header__nav-item"><a href="#gallery" class="header__nav-link">Gallery</a></li>
<li class="header__nav-item"><a href="#access" class="header__nav-link">Access</a></li>
</ul>
</nav>
<button class="header__menu-btn" aria-label="メニューを開く">
<span class="header__menu-bar"></span>
<span class="header__menu-bar"></span>
<span class="header__menu-bar"></span>
</button>
</div>
</header>
<!-- ====== Hero ====== -->
<section class="hero">
<div class="hero__bg">
<img src="https://images.unsplash.com/photo-1560066984-138dadb4c035?w=2000&q=80" alt="LUNAサロン内装 - 洗練された空間" class="hero__bg-img">
</div>
<div class="hero__overlay"></div>
<div class="hero__content">
<p class="hero__tagline">髪に、月の光を。</p>
<p class="hero__sub">A moonlit glow for your hair.</p>
<a href="#menu" class="hero__cta">View Menu</a>
</div>
</section>
<!-- ====== Stylist ====== -->
<section id="stylist" class="section stylist">
<div class="section__inner">
<h2 class="section__title">Stylist</h2>
<p class="section__lead">月のように静かに寄り添い、あなたの美しさを引き出します。</p>
<div class="stylist__grid">
<article class="stylist__card">
<div class="stylist__photo-wrap">
<img src="https://images.unsplash.com/photo-1580489944761-15a19d654956?w=400&q=80" alt="スタイリスト 藤原 美月" class="stylist__photo">
</div>
<h3 class="stylist__name">藤原 美月</h3>
<p class="stylist__role">Top Stylist</p>
<p class="stylist__specialty">透明感カラー / レイヤーカット</p>
<p class="stylist__experience">経験年数: 12年</p>
</article>
<article class="stylist__card">
<div class="stylist__photo-wrap">
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&q=80" alt="スタイリスト 黒川 蓮" class="stylist__photo">
</div>
<h3 class="stylist__name">黒川 蓮</h3>
<p class="stylist__role">Creative Director</p>
<p class="stylist__specialty">メンズカット / パーマデザイン</p>
<p class="stylist__experience">経験年数: 15年</p>
</article>
<article class="stylist__card">
<div class="stylist__photo-wrap">
<img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=400&q=80" alt="スタイリスト 白石 凛" class="stylist__photo">
</div>
<h3 class="stylist__name">白石 凛</h3>
<p class="stylist__role">Stylist</p>
<p class="stylist__specialty">ヘッドスパ / トリートメント</p>
<p class="stylist__experience">経験年数: 8年</p>
</article>
</div>
</div>
</section>
<!-- ====== Menu / Price ====== -->
<section id="menu" class="section menu">
<div class="section__inner">
<h2 class="section__title">Menu</h2>
<p class="section__lead">上質な薬剤と丁寧な技術で、理想のスタイルへ。</p>
<div class="menu__table-wrap">
<table class="menu__table">
<thead>
<tr>
<th class="menu__th">メニュー</th>
<th class="menu__th menu__th--price">料金（税込）</th>
</tr>
</thead>
<tbody>
<tr class="menu__category-row">
<td colspan="2" class="menu__category">Cut</td>
</tr>
<tr class="menu__item-row">
<td class="menu__item">カット</td>
<td class="menu__price">¥7,700</td>
</tr>
<tr class="menu__category-row">
<td colspan="2" class="menu__category">Color</td>
</tr>
<tr class="menu__item-row">
<td class="menu__item">カラー</td>
<td class="menu__price">¥9,900</td>
</tr>
<tr class="menu__category-row">
<td colspan="2" class="menu__category">Perm</td>
</tr>
<tr class="menu__item-row">
<td class="menu__item">パーマ</td>
<td class="menu__price">¥13,200</td>
</tr>
<tr class="menu__category-row">
<td colspan="2" class="menu__category">Care</td>
</tr>
<tr class="menu__item-row">
<td class="menu__item">トリートメント</td>
<td class="menu__price">¥5,500</td>
</tr>
<tr class="menu__item-row">
<td class="menu__item">ヘッドスパ</td>
<td class="menu__price">¥4,400</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- ====== Gallery ====== -->
<section id="gallery" class="section gallery">
<div class="section__inner">
<h2 class="section__title">Gallery</h2>
<p class="section__lead">月明かりに映える、LUNAのスタイル。</p>
<div class="gallery__grid">
<figure class="gallery__item">
<img src="https://images.unsplash.com/photo-1522337360788-8b13dee7a37e?w=600&q=80" alt="ヘアスタイル - ナチュラルロング" class="gallery__img">
</figure>
<figure class="gallery__item">
<img src="https://images.unsplash.com/photo-1492106087820-71f1a00d2b11?w=600&q=80" alt="ヘアスタイル - モードボブ" class="gallery__img">
</figure>
<figure class="gallery__item">
<img src="https://images.unsplash.com/photo-1519699047748-de8e457a634e?w=600&q=80" alt="ヘアスタイル - 透明感カラー" class="gallery__img">
</figure>
<figure class="gallery__item">
<img src="https://images.unsplash.com/photo-1605497788044-5a32c7078486?w=600&q=80" alt="ヘアスタイル - レイヤーカット" class="gallery__img">
</figure>
</div>
</div>
</section>
<!-- ====== Access ====== -->
<section id="access" class="section access">
<div class="section__inner">
<h2 class="section__title">Access</h2>
<div class="access__content">
<dl class="access__info">
<dt class="access__dt">サロン名</dt>
<dd class="access__dd">LUNA Hair Salon</dd>
<dt class="access__dt">住所</dt>
<dd class="access__dd">東京都港区南青山3-8-15 Luna Bldg. 2F</dd>
<dt class="access__dt">最寄り駅</dt>
<dd class="access__dd">表参道駅 A4出口 徒歩3分</dd>
<dt class="access__dt">営業時間</dt>
<dd class="access__dd">10:00 - 21:00（最終受付 19:30）</dd>
<dt class="access__dt">定休日</dt>
<dd class="access__dd">毎週火曜日・第3水曜日</dd>
<dt class="access__dt">電話番号</dt>
<dd class="access__dd">03-6721-0000</dd>
</dl>
<div class="access__cta-wrap">
<p class="access__cta-text">ご予約はお電話にて承ります</p>
<a href="tel:0367210000" class="access__cta-btn">03-6721-0000 で予約する</a>
</div>
</div>
</div>
</section>
<!-- ====== Footer ====== -->
<footer class="footer">
<div class="footer__inner">
<p class="footer__logo">☽ LUNA</p>
<p class="footer__copy">© 2026 LUNA Hair Salon. All rights reserved.</p>
</div>
</footer>
</body>
</html>
Self Check
0 / 8
Submit
Discord #提出-service チャンネルに投稿
- 1デプロイURL
- 2GitHubリポジトリURL
- 3工夫した点3つ
- 4クライアントへの提案メッセージ案