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
この課題を完了したら、講師に報告して次に進みましょう。
03NextBridge
IT企業のコーポレートサイト制作