おとのわピアノ教室｜ホームページ設計図 ― 設計メモ ===================================================== 本書は架空の教室を題材にした低忠実度ワイヤーフレームの補足資料です。 名称・人物・料金・所在地・開講枠はデザイン検証用のサンプルで、実在の教室や 実際の募集を示すものではありません。実サイトの公開やフォーム配信の設定は行いません。 成果物 ----------------------------------------------------- 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点の差し替え。 追加写真は未定。 ・色、書体、装飾、公開原稿。本ワイヤーフレームでは扱わない。