WIREFRAME DOCUMENT
ワイヤーフレーム
美容室 'ecru（エクリュ）　ホームページ
'ecru
beauty salon
HIROSHIMA
作成者世良コミュニケーションズ
作成日2026年5月
バージョンv1.0（クライアント確認用）
対象'ecru美容室（広島市）様
📄 このドキュメントは、ホームページ制作に先立ち、各ページのレイアウト・構成・掲載内容を
視覚的に確認するためのワイヤーフレームです。デザイン・配色・写真は含みません。
内容をご確認いただき、ご要望・修正点をお知らせください。
全9ページ　　© 2026 世良コミュニケーションズ
P.1
COVER
📋 目次（Table of Contents）
このワイヤーフレームに含まれるページ構成です。各ページの概要を確認できます。
📱 SP対応 💻 PC対応
📄
'ecru
P.1　表紙
プロジェクト概要・ドキュメント情報
P.1
📋
目次
P.2　目次
ページ構成一覧
P.2
🗺️
概要
P.3　概要・セクション構造図
HP全体の目的・ターゲット・ページ構造フロー図
P.3
🖥️
NAV
HERO
P.4　Header ＋ Hero（ファーストビュー）
ナビゲーション・ファーストビュー画像・キャッチコピー・CTAボタン
P.4
✨
こだ
わり
P.5　Concept ＋ Features（こだわり）
サロンコンセプト・3つの特徴（テキスト＋アイコン）
P.5
✂️
料金
担当
P.6　Menu ＋ Stylist（メニュー・担当者）
料金メニュー表・スタイリスト紹介カード
P.6
🖼️
GX
GX
P.7　Gallery ＋ News（ギャラリー・お知らせ）
施術写真グリッド・お知らせ一覧リスト
P.7
📍
地図
予約
P.8　Access ＋ Reserve（アクセス・予約）
地図・店舗情報・予約CTAセクション・フッター
P.8
⚙️
仕様
P.9　制作仕様 ＋ スケジュール
技術仕様・納期スケジュール
P.9
📌 確認のポイント：各セクションの情報の種類・配置・優先順位が適切かをご確認ください
✏️ 変更・追加のご要望は赤ペンでご記入いただくか、メモにてお知らせください
P.2
TABLE OF CONTENTS
🗺️ 概要・セクション構造図
HP概要
サイト名美容室 'ecru（エクリュ）
目的お客さん集客・ブランドイメージ確立
ターゲット広島市内の20〜40代女性・美容トレンド関心層
デバイス📱 スマートフォン優先（SP）＋ 💻 PC対応
カラーテーマベージュ × ホワイト × ゴールドアクセント
セクション一覧
#セクション主な内容
①Headerロゴ・ナビ・予約ボタン
②HeroFV画像・キャッチコピー・CTA
③Conceptコンセプト・ブランドメッセージ
④Features3つのこだわり（アイコン付き）
⑤Menu料金表（カット・カラー等）
⑥Stylistスタイリスト紹介
⑦Gallery施術写真グリッド
⑧Newsお知らせ・新メニュー情報
⑨Access地図・営業時間・定休日
⑩Reserve/Footer予約CTA・LINE・フッター
ページ構造フロー図（スクロール順）
🌐 ユーザーがアクセス
▼
① HEADER（固定ナビ）
ロゴ・メニュー・予約ボタン
▼
② HERO（ファーストビュー）
大きな写真・キャッチコピー
▼
③ CONCEPT（コンセプト）
ブランドメッセージ
▼
④ FEATURES（こだわり）
3つの特徴
▼
⑤ MENU（料金メニュー）
カット・カラー等の料金
▼
⑥ STYLIST（担当者紹介）
スタイリストの顔・紹介文
▼
⑦ GALLERY（作品集）
施術写真グリッド
▼
⑧ NEWS（お知らせ）
新メニュー・休業情報
▼
⑨ ACCESS（アクセス）
地図・営業時間・定休日
▼
⑩ RESERVE（ご予約）
LINE・電話・予約ボタン
▼
FOOTER（フッター）
📱 スマホ表示イメージ（SP優先）
e
予約
📷
FV
↑ ナビ（固定）
📷 ファーストビュー
📝 キャッチコピー
🔘🔘 CTAボタン
✨ こだわり
🖼️🖼️🖼️ ギャラリー
🗺️ 地図
⬛ フッター
P.3
OVERVIEW
🖥️ Header ＋ Hero（ファーストビュー）
① HEADER セクション 固定ナビゲーション
ecru-salon.jp
'ecru
① ホーム ② こだわり ③ メニュー ④ スタイリスト ⑤ ギャラリー ⑥ アクセス
📅 ご予約はこちら
No.要素内容・説明備考
Aロゴサロン名「'ecru」をロゴタイプで表示。クリックでトップページへ。画像または文字ロゴ
Bグローバルナビ各セクションへのアンカーリンク6項目。PCは横並び、SPはハンバーガーメニュー。SP:ハンバーガー
C予約CTAボタン常に目立つゴールド系ボタン。クリックで予約セクションへスクロール or 外部予約サイトへ。強調色必須
② HERO セクション（ファーストビュー）最重要
'ecru
こだわり メニュー アクセス
予約する
📷 FV画像（サロン内装 or スタイリスト施術シーン）
BEAUTY SALON
📅 ご予約はこちら
✂️ メニューを見る
▼ スクロール
No.要素内容・説明備考
①FV背景画像サロン内装の雰囲気写真 or スタイリストが施術しているシーン。高解像度推奨。写真支給必要
②メインキャッチコピーサロンの世界観を表す1〜2行のコピー。例：「あなたらしい美しさと出会う場所」要ご確認
③サブコピー補足テキスト。営業エリアや特徴など1〜2文。文言要確認
④CTAボタン×2「ご予約はこちら」（メイン）＋「メニューを見る」（サブ）。PCは右寄せ、SPは中央。予約先URL確認
P.4
HEADER / HERO
✨ Concept ＋ Features（コンセプト・こだわり）
③ CONCEPT セクション
— CONCEPT —
📷
コンセプト画像
（サロン内装・雰囲気）
もっと見る →
No.要素内容・説明
①セクションタイトル「CONCEPT」+ 日本語サブタイトル。例：「'ecruのこだわり」
②コンセプト画像サロンの雰囲気が伝わる写真。落ち着いたトーンのもの。
③コンセプト文サロンの理念・想いを3〜5文程度で記述。ブランドの人格が伝わる内容。
④ FEATURES セクション（3つのこだわり）
— FEATURES —
💆
✂️
🌿
No.要素内容・説明
①アイコン（絵文字→実アイコン）各こだわりを表すアイコン。制作時は専用のSVGアイコンに差し替え。
②こだわりタイトル各カード1行のキャッチ。例：「頭皮ケアにこだわった技術」「似合わせカットの提案」「癒しの空間づくり」
③説明文各カード2〜3文の説明。サロンの強みを具体的に記述。
P.5
CONCEPT / FEATURES
✂️ Menu ＋ Stylist（メニュー・担当者紹介）
⑤ MENU セクション（料金表）
— MENU —
✂️ カット 料金（税込）
カット¥ ◯,◯◯◯〜
前髪カット¥ ◯◯◯〜
🎨 カラー
フルカラー¥ ◯,◯◯◯〜
ハイライト¥ ◯,◯◯◯〜
💆 トリートメント・その他
トリートメント¥ ◯,◯◯◯〜
パーマ¥ ◯,◯◯◯〜
※ 髪の長さ・状態によって異なります。詳細はお問い合わせください。
No.要素内容・説明
①カテゴリヘッダーカット・カラー・トリートメント等のカテゴリ区切り。ゴールド系背景で強調。
②メニュー名・料金各メニューと税込み料金を表示。◯は実際の金額に差し替え。
③注釈テキスト「髪の長さにより異なる」等の注意書き。
⑥ STYLIST セクション（スタイリスト紹介）
— STYLIST —
👤
スタイリスト写真
カット カラー パーマ
＋ スタイリスト追加可能（複数対応）
No.要素内容・説明
①スタイリスト写真顔写真 or バストアップ写真。自然な笑顔が好ましい。hamamoto.jpg 等ご支給ください。
②氏名・役職名前（フリガナ）+ 役職（オーナー・スタイリスト等）
③自己紹介文得意なスタイル・経歴・サロンへの想いなど3〜5文。
④得意タグ「カット」「カラー」「ヘッドスパ」等のスキルタグ。
P.6
MENU / STYLIST
🖼️ Gallery ＋ News（ギャラリー・お知らせ）
⑦ GALLERY セクション（施術写真）
— GALLERY —
ALL
カット
カラー
パーマ
📷 施術1
📷 施術2
📷 施術3
📷 施術4
📷 施術5
📷 施術6
もっと見る →
No.要素内容・説明
①フィルタータブALL / カット / カラー / パーマ等のカテゴリで絞り込み可能。
②写真グリッド（3列）施術写真を3列グリッドで表示。初期表示6枚→「もっと見る」で追加表示。
③もっと見るボタンタップ/クリックで追加写真を読み込む（無限スクロール or Instagramリンク）。
⑧ NEWS セクション（お知らせ）
— NEWS —
2026.05.01 新メニュー
2026.04.20 お知らせ
2026.04.10 休業
2026.03.15 イベント
No.要素内容・説明
①日付YYYY.MM.DD形式。新しい順に表示。
②カテゴリタグ「新メニュー」「お知らせ」「休業」「イベント」等のカラータグ。
③タイトルテキストお知らせのタイトル1行。クリックで詳細ページへ（または展開表示）。
P.7
GALLERY / NEWS
📍 Access ＋ Reserve（アクセス・ご予約）
⑨ ACCESS セクション（店舗情報・地図）
— ACCESS —
📍 'ecru
Googleマップ埋め込み
住所広島市◯◯区◯◯ ◯-◯-◯
TEL082-◯◯◯-◯◯◯◯
営業時間◯◯:◯◯ 〜 ◯◯:◯◯
定休日毎週◯曜日
最寄り駅◯◯線「◯◯駅」徒歩◯分
駐車場◯台あり（無料）
No.要素内容・説明
①Googleマップ埋め込みiframeでGoogleマップを埋め込み。ピンにサロン名を設定。
②店舗情報テーブル住所・TEL・営業時間・定休日・アクセス・駐車場。◯は実際の内容に差し替え。
⑩ RESERVE セクション（予約CTA）
— RESERVATION —
📅 オンライン予約
💬 LINEで予約
📞 お電話で予約
受付時間 ◯◯:◯◯〜◯◯:◯◯（定休日除く）
'ecru
Instagramアイコン LINEアイコン
© 2026 美容室 'ecru. All rights reserved.
プライバシーポリシー 特定商取引法
No.要素内容・説明
①セクション見出し「ご予約はこちら」系のキャッチコピー＋サブコピー。
②オンライン予約ボタンホットペッパービューティー等の外部予約サイトへリンク。
③LINEで予約ボタンLINE公式アカウントへのリンク（[LINE_URL]に差し替え必要）。
④電話予約ボタン電話番号へのtelリンク。
⑤フッターロゴ・SNSアイコン・コピーライト・リンク。
P.8
ACCESS / RESERVE
⚙️ 制作仕様 ＋ スケジュール
技術仕様
制作方式HTML / CSS / JavaScript（静的サイト）
対応デバイス📱 スマートフォン（優先）
💻 タブレット・PC
ホスティングCloudflare Pages（無料・高速）
ドメイン独自ドメイン取得推奨（年額 ¥1,000〜）
予約機能外部リンク（ホットペッパー等）またはLINE
SNS連携Instagram フィード埋め込み（オプション）
SEO対策メタ情報・OGP・Google Analytics設定
SSL無料SSL（HTTPS）標準対応
更新方法制作会社（世良コミュニケーションズ）対応
クライアント確認・支給物チェックリスト
項目確認
📷 ファーストビュー画像（高解像度）未
📷 コンセプト用画像（サロン内装）未
👤 スタイリスト写真（hamamoto.jpg 等）未
📷 施術写真（最低6枚推奨）未
✏️ キャッチコピー・コンセプト文未
💈 メニュー料金（全カテゴリ）未
⏰ 営業時間・定休日未
🔗 LINE公式アカウントURL未
🔗 Instagram アカウント名未
📞 電話番号・住所（最終確認）未
制作スケジュール
フェーズ 内容 第1週第2週第3週第4週 担当
🗂️ ヒアリング 要件確認・素材収集
両者
📐 WF確認 ワイヤーフレームご確認
クライアント
🎨 デザイン デザイン制作・確認
制作会社
💻 コーディング HTML実装・テスト
制作会社
🚀 公開 ドメイン設定・本番公開 ▶ 公開 両者
📌 次のステップ：
① このワイヤーフレームをご確認いただき、修正・追加のご要望をお知らせください
② チェックリストの支給物（写真・テキスト）をご準備ください
③ ご確認後、デザイン制作に進みます

📧 ご連絡先：世良コミュニケーションズ
ワイヤーフレーム v1.0　© 2026 世良コミュニケーションズ
P.9
SPEC / SCHEDULE