おとのわピアノ教室｜ホームページ設計図 ― 設計メモ
=====================================================
本書は架空の教室を題材にした低忠実度ワイヤーフレームの補足資料です。
名称・人物・料金・所在地・開講枠はデザイン検証用のサンプルで、実在の教室や
実際の募集を示すものではありません。実サイトの公開やフォーム配信の設定は行いません。

成果物
-----------------------------------------------------
1. おとのわピアノ教室｜ホームページ設計図.dc.html
   Claude Design 内で閲覧する主成果物。
2. wireframe.html
   一般ブラウザで開ける独立版（CSS/JS内包、フレームワーク・外部通信・外部アセットなし）。
   文言・構造・動作は主成果物と同一。ギャラリーで sandbox="allow-scripts"（allow-forms なし）の
   iframe に埋め込んでも入力確認が成立するよう、ボタンの click を主の経路としている。
3. wireframe-notes.txt（本ファイル）

1. サイトマップ（1ページ＋アンカー）
-----------------------------------------------------
/ （1ページ構成）
  #top      ページ先頭（ロゴのリンク先）
  #hero     01 ファーストビュー
  #policy   02 教室の考え方
  #lesson   03 レッスンと料金（ナビ「レッスン」）
  #price      └ 料金カード2枚（ナビ「料金」）
  #teacher  04 講師紹介
  #flow     05 体験の流れ
  #access   06 教室・アクセス
  #faq      07 よくある質問
  #form     08 体験相談フォーム（すべてのCTAの着地点）
  footer    09 フッター（ページ内ナビと注記）

2. セクションの順序と役割
-----------------------------------------------------
01 ファーストビュー
   役割：対象（4歳からの子ども／大人の初心者）と次の行動を最初の画面で示す。
   要素：見出し、1行説明、主CTA「体験レッスンを相談する」、副リンク「レッスン・料金を見る」、写真枠、
         CTA直下の価格注記「体験レッスンは30分・1,000円（税込）です。無料ではありません。」
02 教室の考え方
   役割：判断材料としての姿勢の提示。3点（一人ひとりのペース／基礎から少しずつ／保護者とも相談）。
   方針：学習成果・合格実績・利用者数・口コミは扱わない。
03 レッスンと料金
   役割：費用と通う頻度の確認。子どもコースと大人の初心者コースを比較。
   要素：コースカード2枚、費用注記（入会金・教材費・体験）、CTAと体験の有料条件。
04 講師紹介
   役割：誰が教えるかの確認。写真枠、あいさつ、指導方針の短文。
   方針：学歴・資格・受賞歴・指導年数は未設定。
05 体験の流れ
   役割：相談から体験までの見通し。3段階（フォームで相談→日時を調整→30分の体験・相談）。
   方針：フォーム送信は予約確定ではないと明示。返信期限や空き枠の保証は置かない。
06 教室・アクセス
   役割：通える時間帯と場所の確認。開講枠（サンプル設定）、所在地・連絡先、地図プレースホルダー。
07 よくある質問
   役割：最初の不安4件への回答。details/summary で開閉。
08 体験相談フォーム
   役割：体験相談の入口。必須3項目、任意1項目。送信は行わないデモ。
09 フッター
   役割：ページ内移動と架空サンプルの注記のみ。

設計注記の扱い：各セクション先頭に「01〜09の番号＋セクション名」のラベル行と、
破線グレーの「設計意図」ブロックを置く。案内文（本文）とは書体サイズ・背景で区別し、
本文には重ねない。先頭に「WIREFRAME / 架空の教室・内容による設計サンプル」と、
色・書体・写真・公開原稿を別工程で確定する旨を表示。

3. PC（1200px）とスマートフォン（390px）の違い
-----------------------------------------------------
切替は 860px のブレークポイント。縮小表示ではなく段組・順序・ナビを実際に切り替える。
                  PC 1200px                      スマホ 390px
ヘッダー          ロゴ＋ナビ5項目＋主CTAを横並び  ロゴ＋「メニュー」ボタン
ナビ              常時表示                        開閉パネル（選択で自動的に閉じる）
01 ファーストビュー 左：文章＋CTA／右：写真枠      文章＋CTA が上、写真枠が下（order入替）
02 考え方          3列                            縦積み
03 料金カード      2列比較                        縦積み（子ども→大人）
04 講師            写真枠と文章の2列              写真枠→文章
05 体験の流れ      3列                            縦積み
06 アクセス        表と地図枠の2列                表→地図枠
08 フォーム        最大幅560pxの1カラム           全幅1カラム
追従CTA           非表示                          画面下に固定バー（価格注記＋CTA）
本文サイズ        16px（見出しh1 34px）          16px（見出しh1 26px）
その他            —                               本文末に余白104pxを確保しバーが内容を覆わない

見出しが固定ヘッダーに隠れないよう、各アンカー（#top / 01〜09の各セクション / 料金 #price）に
scroll-margin-top（PC 84px／スマホ 76px）を指定。#price はセクション内の中途アンカーのため別途指定。
横スクロールと文字切れが出ないよう、固定幅を使わず可変幅と折り返しで構成。

4. リンク先・操作・フォームの状態
-----------------------------------------------------
リンクとボタンの対応（ラベルと動作を一致させる）
  ロゴ「おとのわピアノ教室」      → #top
  ナビ「レッスン」                → #lesson
  ナビ「料金」                    → #price
  ナビ「講師」                    → #teacher
  ナビ「アクセス」                → #access
  ナビ「よくある質問」            → #faq
  「体験レッスンを相談する」（ヘッダー／01／03／スマホメニュー／追従バー／フッター）→ #form
  体験の有料条件「30分・1,000円（税込）」は 01 のCTA直下、03 のCTA横、スマホ追従バー内、
  フォームのCTA横に表示。
  「レッスン・料金を見る」        → #lesson
  フッターのページ内ナビ          → 上記と同じアンカー
  外部リンク・SNS・ダミーポリシーリンクは置かない。

操作
  スマホメニュー：ボタンで開閉（ラベルは「メニュー」／「閉じる」、aria-expanded を同期）。
                  パネル内のリンクを選ぶとメニューは閉じる。
  よくある質問：details/summary。クリックとキーボード（Enter／Space）で開閉。
  フォーカス表示：:focus-visible に2pxのアウトライン。
  ターゲットサイズ：ボタン類（.btn）とスマホメニューの各項目は高さ44px以上。
                    本文リンクとPCナビの項目は行高なりのサイズで、44px以上とはしていない。
  追従CTA（スマホのみ）：08 フォームが画面に入ると自動的に隠れ、フォームと本文を覆わない。
                        バー内にCTAと並んで「体験は30分・1,000円（税込）／無料ではありません」を表示。

フォームの状態
  初期状態：全項目空欄（placeholder に見本値「見本 太郎」「sample@example.com」等を表示）。
  必須：お問い合わせ者のお名前／返信先メールアドレス／希望コース（子ども・大人）。
  任意：相談内容。
  収集しない：子どもの氏名・生年月日・住所・電話番号。
  検証（両HTMLで同一のJS処理。ブラウザ標準の検証に依存しない）
    ・必須未入力あり → 未入力項目名を並べたエラーをフォーム上部に表示し、確認表示へ進まない。
                       最初の未入力欄（氏名→メール→コースの順）にフォーカス。
    ・メール形式不正 → 形式を促すエラーを表示し、メール欄にフォーカス。
                       判定は /^[^\s@]+@[^\s@]+\.[^\s@]+$/（両HTML共通）。
    ・検証OK       → 同一ページ内に確認表示（入力値の一覧）を出し、
                       見出し「入力内容の確認（デモ）」に tabindex="-1" を付してフォーカスを移す。
  「入力確認（デモ）」ボタン：type="button" とし、click から共通の確認処理を呼び出す。
    ギャラリーの iframe が sandbox="allow-scripts"（allow-forms なし）でも操作できるよう、
    submit イベントには依存しない。確認の実行は、確認ボタンをクリック、または Tab で
    確認ボタンへ移動し Enter／Space で実行する。入力欄内の Enter による確認遷移は保証しない。
    実送信は行わない。独立版の novalidate による
    ブラウザ標準メッセージとの差はなく、両HTMLとも上記の自前エラー表示に統一。
  「戻って修正する」押下 → 入力値を保持したままフォームに戻り、氏名欄にフォーカス。
  注記：フォーム直前と確認表示の両方に
        「このフォームは設計デモです。送信されません。個人情報を入力しないでください」。
  行わないこと：実メール送信、外部通信、データ保存、送信完了や予約確定を装う表示。
  プライバシーポリシー：「公開前に用意します」の非リンク注記。

主成果物側の切替（Tweaks）
  設計注記の表示／スマホ追従CTAの有無／よくある質問を最初から開く。
  独立版 wireframe.html は、いずれも既定値（注記あり・追従CTAあり・FAQは閉じた状態）で固定。

5. 公開前に確定する事項
-----------------------------------------------------
表記・数値
  ・料金、レッスン回数、入会金、教材費、体験レッスンの料金と所要時間（現状はサンプル設定）。
  ・年間回数の表記方法（「年40回」を毎月4回と読ませない書き方の最終確認）。
  ・開講枠の実際の時間帯、および空き枠の案内方法。
  ・振替・休講・退会の規定。
教室情報
  ・住所、最寄駅、徒歩分数、駐車場の有無、電話番号（現状すべて「公開前に確定」）。
  ・地図の掲載方法（プレースホルダーを置いている）。
講師情報
  ・講師名、経歴・資格・指導方針の実情報、あいさつ文の最終原稿。
フォーム運用
  ・送信先と受付方法、返信の目安、プライバシーポリシー本文とその掲載先。
表現・素材
  ・写真枠2点（教室とピアノの全体、講師の上半身）＋地図プレースホルダー1点の差し替え。
    追加写真は未定。
  ・色、書体、装飾、公開原稿。本ワイヤーフレームでは扱わない。
