| 項目 | PC 1440 | SP 375 | 出所（実測） |
|---|---|---|---|
| コンテンツ幅 | 1066px（外形1426px） | 全幅 − 左右margin | 参考サイトの実測 |
| 左右マージン | 180px | 20px | 参考サイトの実測（コンテンツ左端180px） |
| 章の上下余白 | 140px | 72px | clamp(72px,10vw,140px) |
| ヘッダー高 | 130px（固定） | 64px（固定） | 参考サイトの実測 130px |
| ヒーロー高 | 568px | 4:5 の写真＋文字 | 参考サイトの実測 |
| 欧文見出し・ラベル | 35px／ls 0.20em | 24px | 参考サイトの実測（英語が主役） |
| 和文ステートメント | 35px／ls 0.16em | 20px | 同上 |
| 和文の副題 | 12px／ls 0.16em | 同上（英35px と対で使う） | |
| 巨大な英字透かし | 195px・#EBEBEB・ヒーロー下端に重ねる | 参考サイトの実測（幅3120px） | |
| 書体・ウェイト | 欧文 Baskervville 400／和文見出し Noto Serif JP 300／小見出し・本文 Noto Sans JP 400 | 現行サイトの実測 | |
| 本文 | 16px／行間 1.8 | 16px／1.8 | 現行サイトの本文は 14px。読みやすさの基準（15〜18px）を下回るため、16px にしています |
| 1段落の最大幅 | 34em | — | |
| インク（本番） | #362A33（純黒を使わない）／帯 #EFF3F4 | 現行サイトの実測 | |
| 帯 | 全幅にしない（左右を130px内側へ） | 参考サイトの実測 | |
| 影・グラデ | 無し／面の角丸0。ボタンのみピル35px | 現行サイトの実測 | |
| タップ領域 | 48px 以上 | BASICS | |
| ブレークポイント | 899px（PC↔SP の組み替え） | — | |
下の表の内容は、サイトを作り直さなくても中身が入れ替わります。 ホットペッパービューティーに1枚上げれば、その日のうちに自社サイトにも並びます。 ワイヤーの中では破線の枠（左に太い線・AUTO の札）で描いています。
| 入るもの | 取り込み元 | 入るページ | 現時点の実測 |
|---|---|---|---|
| スタイル（写真） | ホットペッパービューティー | 美容室トップ／店舗ページ／スタイリスト個人ページ／集客LP | 所沢・小平 23件＋Re-bell 23件 |
| クーポン | ホットペッパービューティー | 同上（店舗ごとに出し分け） | chorule 47件／Re-bell 12件 |
| 口コミ・評価・件数 | ホットペッパービューティー Google ビジネスプロフィール |
美容室トップ／Re-bell トップ／写真館トップ／ハブ | chorule ★4.7・177件 |
| ブログ・お知らせ | ホットペッパービューティー Google ビジネスプロフィール |
ハブのお知らせ／各サロンのブログ一覧 | 現行 718本（URLは維持） |
| 日々の投稿（写真＋一言） | スタッフのスマートフォンから直接 | 写真館トップ／採用トップ | 写真館はホットペッパー掲載が無いため、この形で更新 |
| 出勤の予定（3か月） | スタッフ本人が入力 | スタイリスト個人ページ | 使うかどうかは運用体制しだい（確認事項 8） |
| 料金・営業時間などの数字 | 1か所を直すと全ページに反映 | 全ページ | 画像に焼き込まないため、後から直せます |
| AIチャット | 各ブランドの情報を読んで応答 | 全ページ（右下・固定）。ブランドごとに名乗りが変わります | chorule AI ／ Re-bell AI ／ PHOTO STUDIO AI ／ niau AI |
| 応募・問い合わせの受け取り | フォーム送信 | お問い合わせ／採用エントリー | 通知先メールアドレスが必要（確認事項 7） |
| どこから来た人かの記録 | 広告・検索・ホットペッパー・LINE | 全ページ | 媒体ごとの費用対効果が月次で出せます |
★ 写真館2拠点はホットペッパービューティーに掲載がありません。 そのため作品と最新情報は「投稿」と Google ビジネスプロフィールで更新する設計にしています。
niau-group.jp/ 該当 6件（各サイトのトップ）。ハブは説明しない。4ブランドへの入口に徹する。主導線はグローバルナビではなく本文のブランドカード。
A-1 ヘッダー100px固定 ／ A-2 左に文字・右の写真が画面右端まで断ち切り ／ A-3 縦組みラベル＋ブランドカード4枚（右下に丸矢印） ／ A-4「次がある」＝3列とも同じ高さ・同じ幅 ／ A-5 数字（出典と時点を併記） ／ A-6 お知らせ ／ A-7 採用バナー ／ A-8 サイトマップ型フッター
［ 自動で入るもの ］ グループの最新情報（各ブランドのブログ・投稿を集約）／週替わりの口コミ／AIチャット
/about/ /business/ /culture/ /topics/ ほか該当 70件。目次の役割。自分で語りきらず三階層へ渡す。上部に写真を置きます（専属カメラマンが常時供給できるため、下層でも写真を主役にする）。
B-1 パンくず＋見出し＋上部の写真（見出し左・写真は画面右端まで断ち切り／高さ418px＝トップ568pxより低くして階層差を出す） ／ B-2 リード＝定義先出し。冒頭に「結論1文＋根拠」の自己完結パッセージを置き、AI検索の引用率を上げる ／ B-3 子ページカード2枚 ／ B-4 関連（罫線のみ・ボタンにしない）
［ 自動で入るもの ］ AIチャット（全ページ共通）
/about/company/ スタイル・ギャラリー・スタッフ・撮影メニュー・衣装ほか、該当 145件で最多。ここが実質の主戦場。格をつくるのは ①広い余白 ②60pxの欧文見出し ③細い横罫線の定義リストの3つ。
C-1 パンくず＋見出し＋上部の写真（三階層は該当145件で最多＝量産テンプレなので全幅の横長1枚・高さ331pxで構造を単純に保つ） ／ パンくずは全サイト必須（検索から直接着地するため） ／ C-2 定義リスト（横罫線1pxのみ・縦罫と背景色を使わない） ／ C-3 不規則グリッド＝1点だけ大きく抜き、サイズを揃えない ／ C-4 コンテキストCTA（SPは追従1つだけ）
［ 自動で入るもの ］ 本人のスタイルのみ絞り込み／本人あてのクーポン／出勤の予定（3か月）
/contact/ recruit.niau-group.jp/entry/ 該当 2件。フォーム。離脱率がCV数を直接決めるので他と分けて設計する。職安法の必須明示7項目は実装時に募集要項として記載する。
D-1 フォームではグローバルナビを減らし、離脱の出口を増やさない ／ D-2 今どこかを必ず出す ／ D-3 1カラム・最大幅640px・入力欄48px以上・ラベルは上 ／ D-4 職安法7項目はアコーディオンに格納せず展開したまま置く。賞与は最高額333万円と平均151万円を必ず併記
［ 自動で入るもの ］ 送信内容の保存とメール通知／どこから来た応募かの記録
chorule-hair.com/lp/layer/ 所沢店。髪質改善は商圏の73.2〜81.1%が掲載しており差別化にならない（実測）ので、レイヤー起点に組み替えた。検索需要はレイヤー 165,000 / 髪質改善 33,100 で 4.98倍。
★LPは検索の受け皿ではなく広告の着地面。商圏KW合計1,630/月に対し必要2,421セッションで、CTR20〜30%でも13〜20%しか届かない ／ 型B＝Q 絞込→U 共感→E 啓発（主戦場＝レイヤーの見立て4手順）→S 刺激→T 行動 ／ CTAは「予約する」
［ 自動で入るもの ］ レイヤーのスタイルだけを自動で抜き出し／掲載中のクーポン
S-1 ヒーローは断ち切り ／ S-2 不規則グリッドで1点だけ大きく抜く ／ S-3 メニューは価格をHTMLで持つ（画像に焼かない） ／ S-4 口コミ 177件・加重平均 4.725〈2026年8月・HPB〉
［ 自動で入るもの ］ 今週のスタイル（絞り込み付き）／クーポン／口コミ（評価・件数・本文）／予約ボタンの計測
S-5 店舗カード3枚（所沢・小平・東村山） ／ S-6 定義リストは横罫線1pxのみ ／ S-7 アクセスは徒歩分数を必ず数字で
［ 自動で入るもの ］ AIチャット（全ページ共通）
S-8 料金表は table＋th scope（読み上げ対応） ／ S-9 メニューの並びは検索需要順（レイヤー→カラー→髪質改善） ／ S-10 価格・変わりうる数字・ボタンの文言は画像に焼き込みません（直せなくなるため）
［ 自動で入るもの ］ この店のスタイルとクーポンだけ／料金は後から直せる形で保持
R-1 スタッフ2名は※未取得（氏名） ／ R-2 スタイルは重複を排し実枚数で組む ／ R-3 時短・パート採用の入口をここに置く（自店の顧客リストが最有力の母集団）
［ 自動で入るもの ］ 今週のスタイル／クーポン（Re-bell 分だけ）／口コミ
2拠点。デザイン言語を美容室と分ける（地は #f6f6f6・余白広め・角丸4px・ピンク不使用）。写真事業の成り立ちを語るページは、今回は保留にしています。
実寸で開く（別タブ）P-1 器から有彩色を抜く（IMA から借用）＝作品の色だけを立てる ／ P-2 撮影メニューは用途別（七五三・成人式・家族） ／ P-3 実在の店舗・スタッフ・実績はAI生成で本物として見せない
［ 自動で入るもの ］ 日々の投稿（写真＋一言）／Google の口コミ
recruit.niau-group.jp/ 4職種の入口。制度の説明より先に、店の実像（THE SALON ／ OUR TECHNIQUE）をヒーロー直後に置いています。求職者がまず知りたいのは「どんな店か」で、制度はその後だからです。
K-1 ヒーロー＝「安定も自由も、同じ店にある。」 ／ K-2 NUMBERS は行組み（給与レンジのような長い値をタイルに入れると2行に折れて高さが揃わない） ／ K-3 FLOW は01〜04が同じ幅・同じ高さ
［ 自動で入るもの ］ 日々のサロンワーク（投稿がそのまま並ぶ）／今週の先輩
?track=new-graduate 対象は美容学生。職安法上は「大学等」扱いのため直接応募の導線を置いてよい（高校生向け配布物は別途3条件が要る）。
N-2 実像を不安解消より先に置く ／ N-4 見出しはサロン側の宣言ではなく、求職者から見た言葉にしています（「"なんとなく"で、育てません。」ではなく「売れる順番から、教わります。」） ／ ※ 法令上の配慮（職業安定法）：「平均年収400万を超える設計」は他社比較の優良誤認＋収入の断定でこの形では使わない
M-5 3つの財布（対面・サブスク・チケット） ／ M-6「初月100万」は断定せず「店が置いている基準値」と書く ／ M-7「最高単月800万」は個人の実績。求職者が到達できる水準に見せない。育成役の実績として母数と時期を併記
［ 自動で入るもの ］ 応募前の匿名チャット／どの媒体から来た応募かの記録
F-5 材料費の負担区分＝業務委託は店舗負担／店内独立は自己負担／フリーランスは※未確定（実際の条件をうかがってから試算します＝確認事項 4） ／ F-7 顧客の引き継ぎは移行時100%
P-2 PASONA の P（問題）から入るのが型の要請。店の実像は3番目に置いています（この型は不安への共感から入るため） ／ ※ 法令上の配慮（職業安定法）：現行の採用ページにある「復帰率100%」「面談実施率100%」「満足度100%」は母数・時期の注記なしで断定＝この形では使わない
凡例 実線の箱＝人が作って入れるもの ／ 破線の箱（左に太い線・AUTO の札）＝KINO が自動で入れるもの ／ 対角線＝画像枠 ／ ※未取得＝まだ事実をうかがえていない箇所（別紙「確認事項」） ／ 黒いタグ＝ブロック番号（本番では消えます）
描いていないもの：書体・写真・配色などの装飾。デザイナーの発想の幅を狭めないため、この段階では意図的に捨てている。
どのページがどのパターンで作られるかは、全ページの一覧表（ページ台帳）で1件ずつ決めています（A 6件／B 70件／C 145件／D 2件）。
数字の出典：条件・給与・選考の流れは、現在の採用ページを 2026年8月21日に確認した内容です。★仮置きが2件あります（フリーランスの材料費／時短の選考フロー）＝確認事項 4。
本ページの収録：ハブのテンプレ4パターン（A/B/C/D）＋ 集客LP 1本 ＋ 美容室3本 ＋ Re-bell 1本 ＋ スタジオ1本 ＋ 採用トップ1本 ＋ 職種別LP 4本＝全15本。あわせて管理画面6枚。
稼働中の KINO 管理画面と同じ構成で、名称だけ niau group 様に置き換えたものです。 表示されている数値・文章は、画面の見え方を示すためのサンプルで、実データには接続していません。 本番では、この画面にパスコードが掛かります。
コックピットを開く（別タブ）★すべての画面に、見え方が分かるようサンプルの数値を入れてあります（グラフ・KPI・口コミ・来店記録・訪問者の流れ）。コックピットは左のメニューではなく上のタブで画面が切り替わります。「インサイト」にグラフが、「Googleマップ」に口コミが入っています。
| 画面 | できること | 開く |
|---|---|---|
| コックピット | AIに話しかけて直す。「カットを7,000円に」と伝えると、料金を出している全ページに反映されます。 Googleマップへの投稿・口コミへの返信の下書きも、ここから出せます | 開く |
| 楽録り（来店記録） | お客様ごとの記録。次回の来店時に、前回の内容が分かる状態にしておくためのもの ※ お客様を検索して選ぶと、来店の履歴が開きます |
開く |
| 出勤スケジュール | スタッフが自分の出勤・休みを入れる。スタイリストのページに、そのまま3か月分が出ます | 開く |
| 訪問者の道すじ | どのページを見て、どこで予約や応募に至ったかの流れ ※ 18人分のサンプルが入っています |
開く |
| 修正依頼の履歴 | 「AIに教えた」内容の履歴。誰がいつ何を直したかが残ります ※ 修正依頼4件・観察ノート3件のサンプルが入っています |
開く |
| サインイン | 本番の入口。パスコードで開きます | 開く |
★この画面が付くことで、サイトの更新にパソコンでの作業が要らなくなります。
スタイル・クーポン・口コミはホットペッパービューティーに上げるだけ、
料金や営業時間の変更はAIに話しかけるだけで、全ページに反映されます。
★スタッフのお名前・お客様のお名前は、画面確認用に仮名にしています（実在の方の記録と結びつけないためです）。
★数値はすべてサンプルで、実データには接続していません。