まちのテニス部 サイト構造図

まちのテニス部(仮称)/ サイト構造図とワイヤーフレーム

1ページ完結型のLPと、そこから分岐する5つのビューで構成しています。

ページ数 1(+分岐ビュー 5 本体のブロック 19 アンカー 8 外部リンク 2 作成 2026-09-11
ページ/ビュー 実装済み・動く 表示イメージ(モック) 未接続・準備中 外部サイトへ

1. 階層マップ

どのビューが、どこから開くか
第0階層
入口
まちのテニス部 LP1ページ完結・縦スクロール
第1階層
同一ページ内
#why 行けない理由 #who 来ている人 #sns 普段の様子 #quiz クラス診断 #step はじめの一歩 #what やっていること #rally ラリー #price 料金 #where 場所 #landing 着地 #apply 申込
第2階層
分岐ビュー
AIチャット右下ボタン ログインモーダルヘッダー SNS 4タブ#sns 内 申込完了受付番号
第3階層
会員のみ
部員ページログイン後・全画面
外部
Googleマップ(場所) Googleマップ(道順) LINE公式/Instagram/YouTube/Xいずれも未開設

2. 常に出ている要素

スクロールしても消えません
FIXヘッダーsticky
🎾 まちのテニス部 SCORE 0→15→30→40→GAME
来ない理由来ている人クラス診断 やっていること料金場所
☎ 092-000-0000 ログイン 入会する →
下端にスクロール進捗バー。読み進めるとテニスの得点表記が進みます(820px以下ではSCORE非表示)。
FIX追従ボタンfixed
右下💬 聞いてみるAIが実際に応答
画面下(760px以下)
体験 1,500円電話のぞく
モバイルではドックが常時表示。電話ボタンを分けて、フォームに依存しない導線を確保しています。

3. 本体のワイヤーフレーム

上から下へ、19ブロック
01仮案バナー実装済み
デザイン案であること・実在しないこと・申込を受け付けないことを最上部で明示。
02ヒーロー(掴み)実装済み
● 開校記念 ─ 1期部員 募集中
✓手ぶらでOK✓1回だけOK✓勧誘しません
1回だけ、のぞいてみる →30秒でクラス診断
今週の掲示板
写真:コートに並ぶ5人
(AI生成・実装済み)
空き あと1名
価格の語は置かない(大手との比較土俵に乗らないため)。掲示板は「いつ・どこで・あと何人」を先に見せます。
03数字バンドカウントアップ
6人まで1,500円0円64歳
スクロールで数字が0から増えます。
04行けない理由#why押すと開く
6枚。押すと ✕→○ に回転して答えが開きます。料金より前に不安を潰す配置。
05来ている人#who
01
02
03
「ラケット未経験/20年ぶり/膝が不安」の3枚。アイコン付き。
06普段の様子(SNSショーケース)#sns表示イメージ
LINEInstagramYouTubeX
LINE
トーク画面の再現。開催案内・今日のテーマ・雨天中止
Instagram
写真写真写真
YouTubeサムネ×3(写真入り)
X
⚠️ アカウントは未開設。埋め込み(外部iframe/外部スクリプト)はArtifactのCSPで遮断されるため、表示イメージで代替しています。上部に警告バーを常時表示。
07クラス診断#quiz3問→1結果
Q1一度もない昔だけたまに
Q230〜50代60代〜
Q3体力膝・腰人づきあい
このクラスを見に行く →
結果は必ず1つだけ提示(2つ出すと選択に戻ってしまうため)。
08はじめの一歩#step
STEP1
STEP2
STEP3
STEP4
ハードルの低い順:見るだけ ★☆☆☆/LINEで一言 ★★☆☆/見学 ★★★☆/体験 ★★★★
09やっていること#what図解が動く
01円グラフ
60分の内訳(5色)
02出席ボード
5/6・あと1名
03カレンダー
開催/雨天中止
冒頭に主張「上達は測りません。動画も撮りません。」円グラフはスクロールで描かれ、出席アイコンは順に灯ります。
10ラリーカウンター#rally押すと動く
🎾 押すと打ち返す
1回・3回・5回・10回・20回で言葉が変わります。「勝ち負けは記録しません」の証明として置いています。
11テーマ・ガチャ+マーキー押すと出る
今日のテーマを引く
第1回第2回第3回第4回…→
8つのテーマから1つ。マーキーは右→左に自動で流れます(停止しません)。
12参加者の声仮の文章
←流れる
左→右へ流れます(テーマ帯と逆方向)。開校前のため仮の文章である旨を下に明記。
13よくある質問8問・開閉
Q
Q
Q
+ 他5問
道具/けが/持病/ひとり/人と話すのが苦手/見学だけ/退会/服装。娘世代向けの2問(けが・持病)を含みます。
14やっている人顔写真は未設定
顔写真
未設定
弱みを先に書く構成(「指導歴は長くありません」)。AIで顔を作ると本人と誤認されるため、写真は空欄のままにしています。
15料金#price
4コースの表+「はじめの1か月=9,500円」の総額を先に全部出す。
16場所#where地図は外部へ
📍
Googleマップで開く道順を見る
3コート+利用料(減免)+地図ブロック。地図は埋め込みではなく外部リンク(CSPで遮断されるため)。
17着地CTA#landing
次の開催日
場所
お電話
LINE
1回だけ、のぞいてみる →先にクラス診断をする
「感情で始めて、事務情報で着地する」原則。ここより下に説明を置きません。
18オンライン申込#apply入力〜受付番号は動く送信先は未接続
1体験見学話を聞く
2
3
4 カレンダー
5午前午後いつでも
650代以下60代70代
7チラシ紹介検索
8
☑ お預かりする内容と使い道
この内容で申し込む →
STEP1
STEP2
STEP3
STEP4
ハニーポット・同意チェック・電話桁数チェック付き(自治会の設計を移植)。送信するとブロック全体が受付番号の表示に切り替わります。下の4段階は「申込→スプレッドシート→運営グループLINE→お電話」の運用フロー。
19フッター
会員規約プライバシーポリシー特商法表記
3列:運営者について/ご参加の前に(12項目)/各種書類(すべて準備中)。下に仮案・減免未確認・仮の声・AIチャットの4つの注記。

4. 分岐ビューのワイヤーフレーム

LPから開く5つ
V1AIチャット実際に応答します
まちのテニス部にきいてみる
持ち物は?費用は?膝が不安見学だけ
送る
教室の全情報を指示文に埋め込み済み。書いていないことは推測せず電話を案内します。AIが使えない環境では定型回答モードに自動で切り替わります。
V2ログインモーダルLINEログインは準備中
部員ページにログイン
LINEでログイン(準備中) デモとして部員ページを見る
パスワードを扱う入力欄は設けていません。シニアがID・パスワードを覚えられない前提のため、LINEログイン方式にしています。
V3部員ページ(会員のみ・全画面)表示イメージ
ログアウト
次回の活動
地図を開くこの日は休みます
これまでの参加
お支払い
振替の残り
お知らせ
お手続き登録変更/休会/退会/撮影設定
会員規約・書類規約/PP/保険
7カード。「これまでの参加」を最大に出す設計(この事業の生命線は解約率で、続いていることが本人に見えるかが継続に直結するため)。本番では別URL(/member)+LIFF推奨。
V4申込完了受付番号を発行
受付番号 T261004-0912
フォーム全体が置き換わります。受付番号・受付日時・折り返しの案内・電話番号。
V5SNS 4タブ表示イメージ
LINEInstagramYouTubeX
#sns 内でタブ切り替え。LINEとXは写真不要のため完成度が高く、InstagramとYouTubeは写真枠を含みます。

5. リンクとアンカーの一覧

どこから、どこへ飛ぶか
種別行き先入口状態
アンカー#why 行けない理由ヘッダーのナビ動く
アンカー#who 来ている人ヘッダーのナビ動く
アンカー#sns 普段の様子ヘッダーのナビ動く
アンカー#quiz クラス診断ヘッダーのナビ/ヒーローの副CTA/着地の副CTA動く
アンカー#step はじめの一歩本文の流れ動く
アンカー#what やっていることヘッダーのナビ動く
アンカー#price 料金ヘッダーのナビ動く
アンカー#where 場所ヘッダーのナビ動く
アンカー#apply オンライン申込すべての主CTA(ヘッダー・ヒーロー・診断結果・着地・追従ドック)動く(送信先は未接続)
ビューAIチャット右下の追従ボタン実際に応答
ビューログインモーダル → 部員ページヘッダー「ログイン」デモ表示のみ
外部Googleマップ(場所を開く)場所セクションの地図ブロック実際に開く
外部Googleマップ(道順)同上/部員ページ実際に開く
外部LINE公式/Instagram/YouTube/XSNSショーケース未開設(リンクなし)
電話092-000-0000(仮)ヘッダー/着地/フッター/チャットの案内/追従ドック仮の番号

6. 本番サイトにしたときの構成(案)

いまは1ページ、本番では3URL
URL中身誰が見るか備考
/いまのLP(01〜19)誰でもCloudflare Pages。独自ドメイン
/apply申込フォームのみ誰でもチラシのQR・LINEから直接ここへ。Pages Function経由で送信
/member部員ページ会員のみLIFF(LINEミニアプリ)推奨。LINEを開いたまま完結する