Challenge 02★★☆☆☆美容

Hair Salon RICHE

高級感のある美容サロンのWebサイト制作

Client Brief

クライアントからの依頼

From:オーナースタイリスト 田中 翔 / Hair Salon RICHE(ヘアサロン リッシュ)
Subject:Hair Salon RICHEの制作依頼
Budget:8万〜12万円
Deadline:7〜10日

お世話になります。と申します。

表参道で美容サロンを経営しています。現在のホームページが古くなってきたので、サロンの高級感が伝わる新しいサイトにリニューアルしたいです。ホットペッパーからの集客だけでなく、自社サイトからの予約も増やしていきたいと考えています。

ページ構成

  • トップページ
  • メニュー&料金ページ
  • サロン情報ページ

必須要素

  • ヘッダー(ロゴ、ナビゲーション、予約ボタン)
  • メインビジュアル(スライドショーまたは動画背景)
  • コンセプト紹介
  • スタイリスト紹介(3名分)
  • メニュー&料金表(カット、カラー、パーマ、トリートメント)
  • サロン情報(住所、電話、営業時間、アクセス)
  • 予約導線(ホットペッパービューティーへのリンク)
  • フッター(SNSリンク含む)

デザインの希望

配色:黒 #1A1A1A、ゴールド #C9A96E、白 #FFFFFF、グレー #F5F5F5

雰囲気:高級感、洗練、都会的、大人の女性向け

フォント:細身のエレガントなフォント

避けてほしいもの:
  • ポップすぎるデザイン
  • カラフルな配色
  • 安っぽい素材感

素材について

サロンの写真はこちらで撮影したものを後日お送りします。仮画像で進めてください。

よろしくお願いいたします。

Recommended Prompt

この案件、こう書けば伝わる

クライアントブリーフを元に、AIに伝わるプロンプトを作成しました。 コピーしてそのまま使えます。

▶ prompt
以下の要件で、美容サロンのWebサイトを作成してください。3ページ構成です。

【サロン情報】
- 店名:Hair Salon RICHE(ヘアサロン リッシュ)
- 業種:美容サロン(ヘアサロン)
- 立地:東京・表参道
- ターゲット:30〜40代の美意識の高い女性

【ページ構成(3ページ)】

■ トップページ
- ヘッダー(ロゴ左寄せ、ナビ右寄せ、予約ボタン)
- ヒーロー(全画面ビジュアル、キャッチコピー「あなたの美しさを、引き出す」)
- コンセプトセクション(サロンの哲学を3〜4行で)
- スタイリスト紹介(3名分:名前、肩書き、一言コメント、写真)
  - 田中 翔 / オーナースタイリスト / 「髪質を見極めた、あなただけのスタイルを」
  - 鈴木 あかり / トップスタイリスト / 「トレンドと似合わせの両立を」
  - 佐々木 遥 / カラーリスト / 「透明感のあるカラーが得意です」
- お知らせ・新着情報エリア(3件分のダミー)
- フッター

■ メニュー&料金ページ
- カテゴリ別料金表:
  - カット:レディース ¥7,700 / メンズ ¥6,600 / 前髪カット ¥1,100
  - カラー:フルカラー ¥8,800〜 / リタッチ ¥6,600〜 / ハイライト ¥5,500〜
  - パーマ:デジタルパーマ ¥13,200〜 / コスメパーマ ¥11,000〜
  - トリートメント:TOKIOトリートメント ¥5,500〜 / 髪質改善 ¥16,500〜
- 初回限定クーポンバナー(全メニュー20%OFF)

■ サロン情報ページ
- サロンの内観・外観写真(ギャラリー)
- 住所:東京都渋谷区神宮前4-XX-XX 2F
- 電話:03-XXXX-XXXX
- 営業時間:平日 10:00-20:00 / 土日祝 9:00-19:00
- 定休日:毎週火曜日
- アクセス(表参道駅A2出口 徒歩3分)
- Googleマップ埋め込み

【デザイン要件】
- 配色:黒 #1A1A1A、ゴールド #C9A96E、白 #FFFFFF、薄グレー #F5F5F5
- 雰囲気:高級感、洗練、都会的なサロン
- フォント:日本語は Noto Serif JP など細身のセリフ体
- 英字は大きめで装飾的に使う
- 余白を贅沢に取り、情報密度を下げる
- ホバーエフェクトで上品なインタラクション
- レスポンシブ対応必須

【避けてほしいもの】
- ポップすぎる・カジュアルすぎるデザイン
- カラフルな配色(ゴールドをアクセントに絞る)
- 安っぽいグラデーションやシャドウ
- 詰め込みすぎたレイアウト

HTML/CSS/JSで実装してください。
画像はUnsplashの無料画像を使用してください(サロン、ヘアスタイル系)。
ページ間のナビゲーションを実装してください。

Tips

複数ページの場合、各ページの構成を個別に詳しく書くとAIが迷いません

料金は税込み表記まで指定すると、後から修正する手間が減ります

「余白を贅沢に」など抽象的な表現も、高級感の演出に効果的です

Completed Sample

完成サンプル

このプロンプトで、こんなサイトができます。

/assets/samples/02-hair-salon-riche/index.html
02

Hair Salon RICHE

Coming Soon

サンプルファイルは後日配置されます

How to Win Clients

このスキルで取れる案件

身につくスキル
  • 複数ページのサイト設計
  • 高級感のあるデザイン表現
  • 料金表のレイアウト
  • 予約導線の設計
単価アップのポイント
  • SNS埋め込み(Instagramのスタイル写真連携)で+2〜3万
  • ブログ機能やお知らせ更新機能の提案
  • SEO対策(美容サロン+地域名)を含めて提案
競合との差別化
  • 美容業界のWeb集客トレンドを理解している
  • ホットペッパーと自社サイトの役割分担を提案できる
  • 写真の見せ方・余白の使い方で高級感を演出する力
Next Challenge

この課題を完了したら、講師に報告して次に進みましょう。

03

NextBridge

IT企業のコーポレートサイト制作