UI KIT
Components
会員サイト（member.ard-online.jp）のトーンに合わせた、登録フロー用の最低限コンポーネントです。 画面遷移モック（/）で使っている画面レイアウトも掲載しています。
01 / COLORS
black #000
red-700 CTA
red-800 label
red-950 accent
stone-200 bg
white panel
stone-900 footer
stone-400 muted
02 / TYPOGRAPHY
03 / BUTTONS
04 / STEP INDICATOR
05 / EMAIL CHECK
Step1の手前（index）：メールアドレス入力 → WordPress登録済みか確認
START
メールアドレスの確認
まずはご連絡可能なメールアドレスを入力してください。会員サイトに登録済みか確認したうえで、次の手続きへ進みます。
過去にMクラスへ登録したことを忘れて、再度登録しようとするケースを防ぐため、最初にメールアドレスを確認します。
テスト用: mclass@example.com → Mクラス登録済み、paid@example.com → 有料会員登録済み
06 / TYPE SELECTION（未登録）
Step1（type）：メール未登録時の種別選択
07 / TYPE SELECTION（Mクラス登録済み）
Step1：重複登録を防ぎ、契約追加のみ案内
mclass@example.com
08 / TYPE SELECTION（有料登録済み）
Step1：新規登録不可。ポータル・途中再開へ案内
paid@example.com
新規登録の手続きは不要です。以下からご確認ください。
09 / FORM FIELDS
Step2（profile）：個人情報入力
パスワードが一致しません
メールアドレスが一致しません
LINE認証が使えない場合に入力できます
10 / ALERTS
会員サイトに同じメールアドレスがないか確認のうえ、登録を続けてください。
11 / CONFIRMATION
Step3（confirm）：入力内容の確認
- お名前
- 山田 太郎
- ユーザーID
- allrounder01
- パスワード
- （入力済み）
- メールアドレス
- sample@example.com
- 電話番号
- 09012345678
- 郵便番号
- 100-0001
- 住所
- 東京都千代田区千代田1-1
- 生年月日
- 1990-01-01
- 意気込み・メッセージ
- ALLROUNDERに参加したいと思いました。
12 / LINE AUTH
Step4（line）：LINE認証・手動入力・スキップ
STEP 4
LINE認証
連絡先の登録のため、次のいずれかの方法で進めてください。
LINEで認証する
LINEアプリから認証する方法です（推奨）
LINE IDを手動で入力する
LINE認証が使えない場合はこちら
13 / FREEE SIGN CONFIRM
Step5（freee-confirm）：送付前の内容確認
ELECTRONIC CONTRACT
これから電子契約を行います
下記お名前、アドレス、住所等が間違いないかご確認ください。
「freeeサイン」というサービスから下記に契約書が送付されます。
- お名前
- 山田 太郎
- メールアドレス
- sample@example.com
- 郵便番号
- 100-0001
- 住所
- 東京都千代田区千代田1-1
- 電話番号
- 09012345678
14 / FREEE SIGN
Step5（freee-sign）：承認待ち
ELECTRONIC CONTRACT
契約書の承認をお願いします
freeeサインをユーザーに送ったので承認してください。
ご登録のメールアドレス宛に freeeサイン から契約書が届いています。内容を確認のうえ、承認手続きを完了してください。
freeeより「ALLROUNDER様から●●契約書が届きました」という件名で送付されています。
メールが届いていない場合は迷惑メールフォルダをご確認ください。承認完了後、この画面から次へ進めます。
15 / SUCCESS / COMPLETE
Step6（complete）：登録完了
COMPLETE
登録が完了しました
ALLROUNDER会員サイトへの登録が完了しました。
続きまして各活動は外部サービス「Circle.so」を利用しています。Circle.soは別途登録が必要です。
まだ未登録の方はメールに招待URLをお送りしましたのでご確認ください。
16 / PORTAL
登録状況ポータル（portal）
17 / RESUME
途中から再開（resume）
RESUME
途中から再開
個人情報登録後（WPアカウント発行後）であれば、メールアドレスから続きのステップへ進めます。
sample@example.com の登録が見つかりました（モック）。
続きから始めるステップを選んでください。
18 / DARK PANEL
PICKUP / NOTICE
会員サイトと同じ黒背景＋赤アクセントのパネルです。完了後の案内や注意書きに使えます。