スイング動画チェックアプリ｜5画面モックアップ
ホワイトを地に、ピンク・パープル・ネイビーの3色で組み直した版。名刺TOPのQRとボタンは、このページ上で実際に動きます。
名刺TOP
QRから最初に開く画面。「お試し解析をはじめる」を押すと会員登録へ進みます（この端末内で実際に動きます）。QRは右上のボタンから。
ひとりでは直せない。
レッスンの合間も、見ています。
会員登録
登録はLINEのみ。返信を確実に届けるためで、本人確認が目的ではないので入力はお名前だけ。ピンク＝「初回1本 無料」バッジ。
LINEで登録すると、
そのまま1本送れます。
- 解析のお返事がLINEに届きます。見逃しません
- チケットの残りと期限もLINEでお知らせ
- 過去のスイングがアプリに残るので、3ヶ月前と見比べられます
お名前だけご入力いただきます（30秒ほど）
登録すると 利用規約 と プライバシーポリシー に同意したものとみなされます
お試し解析
登録直後に開く画面。撮り方の不安を先に消してから、ピンクのボタンへ誘導する。
動画をアップロード
スマホを立てかけて撮ればOK
撮り方のコツ
- スマホを地面に立てかけるカゴやバッグに立てかけるだけで十分です
- 正面か真後ろから撮る体全体とクラブが画面に収まる位置に
- 1スイングだけ撮るアドレスからフィニッシュまで通しで
マイページ
残チケットを一番上に置いて「あと2本」を意識させる。ピンク＝チケット追加のボタン。
2026.11.14
予約
対面レッスンの枠取り。空き状況は ○ △ × で示し、選択中の枠だけネイビーで囲む。ピンク＝確定ボタン。
色の役割：地はホワイト。ネイビー #3A0CA3 は見出し・本文・選択状態（白地でコントラスト12:1）、パープル #7209B7 は小見出しと補助（8.6:1）、ピンク #F72585 は「次に押してほしいボタン」と名刺TOPの縦帯だけに使っています。
ピンクは「押せるもの」専用：アプリ内では、ピンクの面はボタンにしか出てきません。チケットカードも履歴のサムネイルもネイビー→パープルで止めて、ピンクを混ぜていません。こうすると、色を見ただけで押せるかどうかが分かります。ボタンは単色（グラデーションなし）で統一しています。
ピンクを文字に使わない理由：白地に #F72585 の文字はコントラストが約3.8:1で、小さい文字だと読みにくくなります。ピンクは面（ボタン・帯・バッジ）にして白文字を乗せる使い方に限定しました。この形なら5.5:1で問題ありません。
名刺TOPは雑誌表紙のまま：構成は従来どおり（大きく傾けた写真、太字ロゴ、右の縦帯に短いコピー）。地の色だけグリーングラデーション → ネイビー→パープルのグラデーションに置き換え、縦帯のピンクという関係もそのまま引き継いでいます。
グラデーションを使う場所：表紙の地、写真枠、チケットカード、履歴のサムネイルなど「面を作るところ」だけ。アプリの中の4画面はホワイトが地です。
名刺TOPは実際に動きます：「お試し解析をはじめる」→ 会員登録 →「LINEで登録する」→ お試し解析、と1台目の端末内で進みます。戻るときは会員登録の「‹ 戻る」、またはお試し解析の下部ナビ「TOP」。
QRは右上のボタンから：開いた瞬間に「このページ」のQRを表示し、下の切替でInstagramに変わります。読み取る側が迷わないよう、画面に出るQRは常に1つ。貼り付けた画像ではなく、その場で生成した実際に読み取れるコードです（色はネイビー）。公開URLが決まったら、スクリプト冒頭 PAGE_URL_OVERRIDE にそのURLを書けば固定できます。
LINEの緑 #06C755 だけは例外：外部ブランドの指定色なのでそのまま使っています（本番ではLINE公式の正規ボタン素材に差し替えてください）。
写真：名刺TOPの傾いた枠は仮です。代表の全身スイング写真（縦位置・背景がシンプルなもの）を入れると表紙らしさが出ます。