ピアノ教室のホームページ設計図

Wireframeテンプレートを使って、架空の「おとのわピアノ教室」のホームページ設計図を日本語で作成してください。作品名は「おとのわピアノ教室｜ホームページ設計図」。実在する教室ではなく、名称・人物・料金・所在地等はデザイン検証用のサンプルです。既存のこもれび・ギャラリーの意匠には合わせず、情報設計を確認する低忠実度のワイヤーフレームにしてください。

【目的と読者】
主な読者は、初めてピアノを習う子どもの保護者と、大人の初心者。スマートフォンで「自分に合うか」「料金はいくらか」「誰が教えるか」「どこにあり、いつ通えるか」を確認し、体験レッスンの相談へ進める1ページのホームページです。目標は体験相談の導線と必要情報の順序を検証すること。華やかな完成サイトやブランド提案は不要です。

【デザインとレスポンシブ】
白・薄いグレー・墨色だけのワイヤーフレーム。システム日本語サンセリフ、線、番号、画像用プレースホルダーで構成。実在写真・生成写真・装飾イラスト・外部フォント・外部地図・SNS埋込は使わない。画像枠には予定する写真の内容を短く書く。本文は読みやすい16px程度以上。PC1200pxとスマートフォン390pxで動作するレスポンシブHTMLにする。固定幅のPC画面を縮小してスマホ扱いにはせず、段組・順序・ナビを実際に切り替える。
設計図の冒頭に小さく「WIREFRAME / 架空の教室・内容による設計サンプル」と表示。各主要セクションに01〜09の番号と、短い設計意図を添え、通常の案内文と区別する。設計注記は本文に重ねず、スマホでも横スクロールや文字切れを生まない。最終的な色・書体・写真・公開原稿は別工程で決めると示す。

【ホームページの構成】
ヘッダー：文字ロゴ「おとのわピアノ教室」。ナビは「レッスン」「料金」「講師」「アクセス」「よくある質問」、主ボタン「体験レッスンを相談する」。PCではナビを表示、スマホは開閉できるメニューボタン。各項目はこのページ内の正しい位置へ移動し、開いたスマホメニューは選択後に閉じる。見出しが固定ヘッダーに隠れないようにする。
01 ファーストビュー：見出し「はじめての一音から、自分のペースで。」。短い説明「4歳からの子どもと、大人の初心者のための個人レッスン」。主CTA「体験レッスンを相談する」、副リンク「レッスン・料金を見る」。教室とピアノの写真枠。対象と次の行動が最初の画面でわかる構成。
02 教室の考え方：「一人ひとりのペース」「基礎から少しずつ」「保護者とも相談」の3点。学習成果・合格実績・利用者数・口コミを捏造しない。
03 レッスンと料金：子どもコース（4歳〜高校生）1回30分／年40回／月謝税込7,500円、大人の初心者コース1回45分／月2回／月謝税込6,000円。入会金税込3,000円、教材費別途実費。体験は30分・税込1,000円、説明・相談を含む。「料金・回数はサンプル設定。年40回を毎月4回とは表示しない」。PC比較カード2列→スマホ縦積み。費用注記を料金のそばに配置し、体験の有料条件をCTA近くでも明示する。値引き・無料キャンペーン・入会特典は追加しない。
04 講師紹介：架空講師「森 かなえ」。あいさつは「弾けた喜びを、一緒に少しずつ増やしていきましょう」。プロフィール写真枠と、指導方針の短文。学歴・資格・コンクール受賞歴・指導年数は未設定とし、実績を作らない。公開前に実情報へ差し替える項目は設計注記へ。
05 体験の流れ：「フォームで相談」→「教室から日時を調整」→「30分の体験・相談」。フォーム送信は予約確定ではないことを明示。返信期限や空き枠の保証を設定しない。
06 教室・アクセス：開講枠は火〜金14:00〜20:00、土10:00〜17:00というサンプル設定。これは空き枠ではなく実際の日時は要相談。住所・最寄駅・徒歩分数・駐車場・電話番号はすべて「公開前に確定」と表示して具体値を作らない。地図のプレースホルダーを置く。
07 よくある質問：4問。「まったく初めてでも大丈夫？」→初心者を想定しペースを相談。「家にピアノが必要？」→練習環境は体験時に相談、購入を必須と断定しない。「振替はできる？」→規定は公開前に確定。「体験後すぐ入会が必要？」→入会は体験後に検討。クリック/キーボードで開閉できるdetails/summaryを使う。
08 体験相談フォームの設計：必須は問い合わせ者氏名、返信先メール、希望コース（子ども／大人）。任意は相談内容。子どもの氏名・生年月日・住所・電話番号は集めない。ラベルと必須/任意を表示。「入力確認（デモ）」ボタンを押すとこのページ内で内容確認を表示、戻って修正できる。実メール送信・外部通信・データ保存はしない。確認画面とフォーム近くに「このフォームは設計デモです。送信されません。個人情報を入力しないでください」と明記。送信済みや予約確定を装うメッセージは出さない。サンプル入力値は「見本 太郎」「sample@example.com」等とし、初期状態は空欄。プライバシーポリシーは「公開前に用意」の非リンク注記にする。
09 フッター：教室名、ページ内ナビ、架空サンプルの注記。実在しないSNSやポリシーへのダミーリンクは作らない。

【動作・納品】
CTAはすべて体験フォームへ、料金リンクは料金へ正しくつなぐ。スマホの追従CTAを付けるなら内容・フォームを覆わず、キーボード操作とフォーカス表示に配慮。フォームは外部送信なしのデモに限定。ボタン/リンクのラベルと実際の動きが一致すること。全体は適度な長さに編集し、PCと390pxで最後まで確認する。
Claude Design内で閲覧できる主成果物と、一般ブラウザで開ける独立した wireframe.html（CSS/JS内包、フレームワーク・外部通信・外部アセット不要）を作成してください。主成果物と独立HTMLの文言・構造・動作を揃える。あわせて wireframe-notes.txt に、サイトマップ（1ページとアンカー）、セクションの順序/役割、PCとスマホの違い、リンク先・操作・フォームの状態、公開前に確定する事項をまとめてください。これは設計図の作例で、実際の教室サイトの公開やフォーム配信設定は行いません。

店名・商品・価格・色の指定を、自分のお店に合わせて書き換えてください。生成結果は利用前に確認しましょう。