--- title: "会員サイトのデザイン｜登録・ログイン・マイページの離脱を減らすUI設計の勘所" url: "https://www.issoh.co.jp/column/details/19527/" published: 2026-11-09 updated: 2026-11-09 categories: ["Webシステム"] publisher: "株式会社一創" --- # 会員サイトのデザイン｜登録・ログイン・マイページの離脱を減らすUI設計の勘所 会員サイトのデザインは、色やフォントを選ぶ前に、登録・ログイン・再訪・解約の各画面で利用者がどこで止まるかを見定める作業から始まります。この記事では、W3CのWCAG 2.2、NISTのSP 800-63B、GoogleとLINEのボタン規定といった公開資料をもとに、会員登録の入力項目、ログイン画面の文言、マイページの構成を発注仕様に落とせる形で整理しました。テンプレートで足りる条件と、UI設計から外注する条件も示します。掲載している基準は2026年11月9日時点の各公式ページの記載です。 ## まとめ：会員サイトのデザインは配色より先に登録と再訪の導線を画面単位で決める 最初に決めるのは配色ではなく、未ログイン・登録中・初回ログイン・再訪・解約という5つの状態ごとの画面です。登録は価値が伝わったあと、機能を使う直前に求め、必須項目はメールアドレスとパスワードまで絞ります。パスワードの貼り付けと自動入力を妨げない仕様、ログイン直後に次の行動を示すマイページ、探せる場所にある解約の導線。この3つを先に固めると、見た目の好みとは別に、止まりやすい箇所を設計の段階でつぶせます。 テンプレートで足りるのは、会員種別が2つまでで標準の画面に収まる場合です。会員種別ごとに表示が変わる、既存の顧客データと画面がつながるといった条件が加われば、UI設計から外注する段階に入ります。 ## 会員サイトのデザインが一般のWebサイトと異なる、ログイン前後の画面の作り分け コーポレートサイトの画面は、誰が見ても同じ内容です。会員サイトは同じURLでも、見る人の状態によって表示が変わります。この差が、デザインの進め方を変えます。 ### 未ログイン・登録中・初回・再訪・解約の5状態で必要な画面を洗い出す手順 デザインの範囲を決めるときは、ページの一覧ではなく利用者の状態の一覧から書き始めます。状態ごとの目的と画面、止まりやすい箇所は次のように整理できます。 | 状態 | 利用者の目的 | 主な画面 | 止まりやすい箇所 | | ------ | ------- | ---------- | --------- | | 未ログイン | 中身を確かめる | 紹介・料金・一部公開 | 登録する理由が不明 | | 登録中 | 早く終える | 入力・確認メール案内 | 項目数と未着メール | | 初回ログイン | 使い方を知る | 案内・初期設定 | 次の操作が不明 | | 再訪 | 続きをする | ログイン・ホーム | パスワード忘れ | | 解約・退会 | 手続きを終える | 契約情報・確認 | 入口が見つからない | 表の右端の列が、そのままデザインで解く課題になります。トップページとマイページだけのカンプでは、この5行のうち半分以上が設計されないまま開発に入ります。 ### 配色や余白の統一では解けない、登録前・ログイン時・再訪後の離脱の違い 色数を絞る、見出しと本文のフォントを分けるといった基本は、会員サイトでも有効です。ただ、それで改善するのは読みやすさであり、離脱の原因は別の場所にあります。登録前に離れる人は、登録する理由を受け取れていません。ログインで離れる人は、IDかパスワードを思い出せずにいます。再訪しなくなる人は、ログインしても新しく見るものが無かった人です。 原因が違えば、直す画面も違います。計測するときは1つの数値にまとめず、登録・ログイン・再訪に分けて見てください。指標の定義は[離脱率の計算式とGA4での出し方](https://www.issoh.co.jp/column/details/6967/)で確認できます。 ## 未ログインから会員登録までの離脱を減らす、入力項目と確認手順の設計 会員登録のフォームは、最初に利用者の手間が集中する画面です。求める位置、項目の数、確認の手順の順で決めていきます。 ### 登録を求める位置は価値が伝わったあと、機能を使う直前に置く判断 Googleが運営する[web.devの登録フォームの解説](https://web.dev/articles/sign-up-form-best-practices)は、可能なら機能をログインの背後に置かないよう勧めています。通販の購入手続きを調べた[Baymard Instituteの集計](https://baymard.com/blog/cart-abandonment-rate)でも、「見ているだけ」を除いた離脱理由のうち「アカウント作成を求められた」は18%でした。米国の通販の数値で、会員サイトの離脱率そのものではありません。それでも、目的の手前で登録を求める負担の大きさを見積もる材料にはなります。 実務では、記事の冒頭だけを公開する、料金と機能を未ログインで見せるといった形で、登録の理由を先に渡します。公開範囲の方式は[会員サイトの仕組みと3つの公開方式](https://www.issoh.co.jp/column/details/18124/)、実在サービスの線引きは[目的別の会員サイト事例](https://www.issoh.co.jp/column/details/18914/)を参照してください。 ### 必須項目は初回2項目に絞り、住所や属性は必要になった時点で聞く設計 登録時に集める項目は、web.devの解説でも最小限にとどめ、必要になった時点で追加で聞くよう整理されています。初回に必要なのは、メールアドレスとパスワードの2項目です。配送先は最初の購入のとき、勤務先は資料を請求するとき、という具合に、聞く理由が利用者に見える場面まで後ろへ送ります。 性別や生年月日を「あとで分析に使うかもしれない」という理由で必須にする設計は避けてください。使い道が決まっていない項目は、入力の手間と個人情報の管理範囲だけを増やします。例外は、BtoBの取引審査や資格確認のように、登録の可否そのものを判断する情報が要る場合です。 ### メールアドレスの二重入力をやめ、確認メールで到達を確かめる登録手順 メールアドレスの入力欄を2つ並べる必要はありません。web.devは二重入力を避け、確認のコードを送る方法を示しています。[WCAG 2.2の達成基準3.3.7](https://www.w3.org/WAI/WCAG22/Understanding/redundant-entry.html)（レベルA）も、同じ手続きの中で入力済みの情報を再度求めるときは、自動で入れるか選べるようにすることを定めています。セキュリティの確保に要る場合などは例外です。 1. メールアドレスとパスワードを入力して送信する 2. 画面に送信先のアドレスと、メールを開くよう促す案内を出す 3. メール内のリンクかコードで本人のアドレスだと確かめる 4. 登録完了とともにログイン状態で初回の案内画面へ進める 手順2の画面には、再送のボタン、迷惑メールの確認、アドレスの修正欄を置きます。メールが届かないときの出口が無いと、利用者はそこで止まるしかありません。 ### パスワード欄は貼り付けと自動入力を許可、NISTとWCAGが示す入力仕様 [NIST SP 800-63B](https://pages.nist.gov/800-63-4/sp800-63b.html)の3.1.1.2節は、パスワードマネージャーと自動入力の利用を許可するよう定め、貼り付けの許可と入力内容を表示するオプションの提供を推奨しています。文字種の混在を強制する規則は認めていません。[WCAG 2.2の達成基準3.3.8](https://www.w3.org/WAI/WCAG22/Understanding/accessible-authentication-minimum.html)（レベルAA）でも、貼り付けを妨げる実装は、代替の手段が無ければ不適合と説明されています。 発注時の仕様には、登録画面に`autocomplete="new-password"`、ログイン画面に`autocomplete="current-password"`と`autocomplete="username"`を指定し、表示切替のボタンを置く、と書いておけば足ります。パスワードの長さや流出済みの照合といった安全面の基準は[会員サイトのセキュリティ対策](https://www.issoh.co.jp/column/details/18916/)で扱っています。 ## ログインとパスワード再設定で行き詰まらせない、入口の配置と文言の決め方 再訪した会員が最初に触るのがログイン画面です。ここで止まると、どれほど中身を作り込んでも見てもらえません。 ### ログインの入口はヘッダー右上に文字で置き、アイコンだけの表示を避ける web.devの登録フォームの解説は、ログインへの導線を明確な文言のボタンやリンクとし、ページ右上など見つけやすい位置に置くよう勧めています。人型のアイコンだけの表示や、メニューの奥への配置は避けます。[web.devのログインフォームの解説](https://web.dev/articles/sign-in-form-best-practices)によれば、送信ボタンの文言も「送信」ではなく、動作が分かる語にするのが基本です。 見落とされやすいのは、ログインしたあとの戻り先です。会員限定の記事を開こうとしてログインを求められた人を、マイページのホームへ送ると、元の記事を探し直す手間が生じます。ログイン前に開いていたページへ戻す動きを、画面の仕様として明記しておきます。 ### ソーシャルログインのボタンはGoogleとLINEの規定で色と文言が決まる 各社のログインボタンは、サイトの配色に合わせて自由に変えられません。[Googleのブランドガイドライン](https://developers.google.com/identity/branding-guidelines)は、Gのロゴの色変更を認めず、白・濃色・灰色の3テーマを定めています。他社のログインボタンと少なくとも同程度に目立たせることも条件です。[LINEログインボタンの規定](https://developers.line.biz/ja/docs/line-login/login-button/)では、基本色は#06C755に固定され、推奨の文言は「LINEでログイン」です。 デザインの工程で確かめるべきは、規定どおりのボタンを並べたときに画面が破綻しないかどうかです。カンプで全ボタンをサイトの色に統一してしまうと、実装の段階で作り直しになります。パスワードを使わない選択肢まで検討するなら、[パスキー認証の導入判断](https://www.issoh.co.jp/column/details/15368/)もあわせて読むと論点がそろいます。 ### ログイン失敗の文言と再設定の導線、CAPTCHAの出し方を仕様に書く ログインに失敗したら、入力欄の近くに原因と次の操作を示し、パスワード再設定へのリンクを同じ画面に置きます。一方で、再設定の画面は親切すぎても問題が起きるため、案内には配慮が必要です。[OWASPのパスワード再設定のチートシート](https://cheatsheetseries.owasp.org/cheatsheets/Forgot%5FPassword%5FCheat%5FSheet.html)は、アカウントの有無で応答の文言と処理時間を変えないよう求めています。「入力のアドレスが登録済みの場合は案内を送りました」のような文面が基本形です。 CAPTCHAも画面の仕様に含まれます。WCAGの3.3.8では、車の画像を選ぶような物体認識はレベルAAの例外ですが、計算を伴う課題は例外に入りません。毎回のログインに出すのではなく、失敗が続いたときに限って出す形が現実的です。 ## マイページの情報設計、ログイン直後に見せる内容とスマホでの操作性の基準 登録を終えた会員が使い続けるかどうかは、マイページで決まります。項目を並べる順番と、スマホで押せるかどうかを具体的な基準で決めていきます。 ### ログイン直後のホームは次にやることを先頭に置く、会員の型別の表示 マイページのホームを、お知らせの一覧やプロフィールから始めると、会員は自分の次の操作を探すことになります。先頭に置くものは、サイトの型で変わります。 | 型 | 先頭に置くもの | 下に回すもの | | ------- | --------- | ------ | | 有料コンテンツ | 続きから読む | 過去の一覧 | | 学習 | 受講中の講座と進捗 | 講座の検索 | | BtoB | 承認待ちと期限 | 担当者の管理 | | EC特典 | 失効が近いポイント | 購入履歴 | 初回のログインでは「続き」が存在しないため、同じ枠に初期設定の案内を出します。再訪と初回で表示を切り替える前提でカンプを作っておくと、空の状態の画面が抜け落ちません。 ### スマホの操作領域は24ピクセルを下限に、固定ヘッダーで隠さない確認項目 [WCAG 2.2の達成基準2.5.8](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html)（レベルAA）は、押せる領域の最小を24×24 CSSピクセルとしています。これは下限です。web.devは44×44 CSSピクセル以上を目安の1つとして紹介しているため、ログインや保存といった主要なボタンは44を発注の基準にします。 追従するヘッダーやフッターにも注意が要ります。[達成基準2.4.11](https://www.w3.org/WAI/WCAG22/Understanding/focus-not-obscured-minimum.html)（レベルAA）は、キーボードの操作対象が固定要素に完全に隠れることを不適合としており、CSSの`scroll-padding`で避ける方法が示されています。画面幅ごとの実装方式は[レスポンシブデザインの方式の選び方](https://www.issoh.co.jp/column/details/15308/)にまとめました。 ### 会員情報の変更と解約は探せる場所に置き、誤認させる表示を避ける判断 月額課金の会員サイトでは、[消費者庁の特定商取引法ガイド](https://www.no-trouble.caa.go.jp/what/mailorder/)が示すとおり、申込みの最終確認画面に分量・価格・支払時期・撤回や解除に関する事項などの表示が必要です。誤認させる表示や、解除を妨げる目的で事実と違う案内をすることも禁じられています。表示事項の詳細は[会員サイトの作り方の公開前の点検](https://www.issoh.co.jp/column/details/18910/)で扱っています。 解約の入口をメニューの奥に隠す設計は、採らないでください。問い合わせ窓口の負担が増えるうえ、不信感を持って離れた会員は戻りません。web.devもアカウント削除を簡単にするよう勧めています。マイページのメニューから契約情報へ進み、その中に解約の入口がある、という2段階の深さを基準にしましょう。 ## テンプレートで足りる会員サイトと、UI設計から外注すべき条件の線引き すべての会員サイトに、専任のUI設計が必要なわけではありません。結論から書くと、会員の種類と既存データとのつながりで判断が分かれます。 ### ASPやプラグインの標準画面で足りる、会員種別が2つまでのサイトの条件 無料会員と有料会員の2種類で、見せる内容の切り替えが記事や動画の閲覧可否だけなら、標準の画面で足ります。この場合に時間をかけるのは、ロゴと配色の適用、登録前に見せる紹介ページの文章です。ツールの選び方は[会員サイト作成ツールの比較](https://www.issoh.co.jp/column/details/18920/)、WordPressで作る場合の限界は[プラグイン4種の比較](https://www.issoh.co.jp/column/details/18918/)で確認できます。 契約の前に、試用環境で登録の完了メール、再設定の画面、解約の画面まで実際に操作してください。トップページの見本だけでは、変更できない画面に気づけません。 ### 会員種別ごとに画面が変わる場合に、UI設計から受託で作る判断条件 次のいずれかに当てはまるなら、テンプレートの調整ではなく、画面の設計から始める案件です。 - 会員種別が3つ以上あり、ホームの構成が種別ごとに異なる - BtoBで、担当者の権限により操作できるボタンが変わる - 既存の顧客データや契約情報をマイページに表示する - 登録の途中に審査や書類の提出が入る これらは状態と画面の組み合わせが増えるため、試作を操作して確かめる工程を省くと手戻りが大きくなります。調査から画面の試作、操作の検証まで一貫して依頼したい場合は、[一創のUI/UXデザイン](https://www.issoh.co.jp/service/web/ui-ux/)でご相談いただけます。 ### カンプの見た目から発注して失敗する場面、この進め方は採らない判断 ギャラリーサイトの見本を渡して、トップページとマイページのカンプから作り始める。この進め方は、会員種別が3つ以上ある案件では採りません。エラーの表示、メール未着の案内、データが空の画面、解約の確認が設計されないまま開発に入り、追加の見積もりと公開の遅れにつながるためです。 順番は、状態ごとの画面一覧、ワイヤーフレーム、試作の操作確認、配色の適用です。公開後は登録の開始数と完了数、ログインの成功率、再設定の依頼件数を記録し、数値が悪い画面から直していきます。 ## よくある質問 会員サイトのデザインを検討している方から寄せられやすい質問に回答します。 ### 会員サイトのデザインの参考になるサイトはどう探せばよいですか？ ギャラリーサイトは見た目の参考になりますが、掲載の多くは公開ページなので、ログイン後の画面は確認できません。登録・ログイン・マイページの参考には、同じ型のサービスに実際に無料登録して、確認メールの文面や再設定の画面まで操作するのが確実です。利用者向けのヘルプやご利用ガイドにも、会員区分ごとの画面の違いが書かれています。見本は業種ではなく、会員の種類と課金の形が自社に近いものから選んでください。 ### 会員サイトのデザイン費用はどのくらいかかりますか？ 金額を左右するのは、ページ数よりも状態と会員種別の組み合わせの数です。テンプレートに配色を当てるだけの作業と、種別ごとのホームやエラー画面まで設計する作業では、必要な工数の桁が異なるのです。ASP・WordPress・受託開発の方式別の初期費用と月額の内訳は、関連記事の構築費用の解説で公開料金をもとに試算しています。見積もりを取るときは、本文の5状態の画面一覧を添えて依頼すると比較しやすくなります。 ### スマホとPCで会員サイトのデザインは分けるべきですか？ 原則は同じURLのまま画面幅で表示を変える形で足ります。別々に作ると、ログインの状態や画面の修正を二重に管理することになるためです。分けて考えるのは配置の優先順位で、スマホではホームの先頭に置く情報を1つに絞り、主要なボタンの押せる領域を44×44 CSSピクセル程度確保します。会員の大半がスマホから使う場合は、最初からスマホの画面でカンプを作ると情報の取捨選択が進みます。 ### ログイン画面のデザインで最低限確認することは何ですか？ 確認したいのは5点です。入力欄ごとにラベルがあること、パスワードの貼り付けと自動入力ができること、パスワードの表示切替があること、失敗時に原因と再設定へのリンクが出ること、ボタンの文言が動作を示していることです。あわせてスマホの実機で、キーボードが開いた状態でも送信ボタンに届くかを試してください。入力欄のプレースホルダーをラベル代わりにすると、入力を始めた時点で項目名が消えるので避けます。 ### WordPressのテーマだけで会員サイトのデザインはできますか？ 公開ページの見た目はテーマで整えられますが、登録やマイページの画面はプラグイン側が持っていることが多く、テーマの変更だけでは反映されない部分が残ります。会員種別が少なく標準の画面で足りるなら、その範囲で問題ありません。画面の順序や表示を大きく変えたくなった時点で、プラグインの調整費がかさみ始めます。プラグインごとの範囲と受託開発へ移る判断は、本文で紹介した比較記事で確認してください。 ## 関連記事 - [会員サイトの構築費用｜ASP・WordPress・受託開発の初期と月額を公開料金で試算](https://www.issoh.co.jp/column/details/18912/)：画面の範囲が決まったあとに費用を見積もるときに - [会員管理システムとは？機能・顧客管理との違いと、Excelから移行する判断基準を解説](https://www.issoh.co.jp/column/details/12830/)：会員が触る画面の裏側で運営が使う仕組みを知りたいときに - [顧客ポータルとは？BtoBのセルフサービス窓口に必要な機能と構築方式の判断基準](https://www.issoh.co.jp/column/details/16649/)：取引先向けの画面として要件を整理するときに - [業務システムの画面デザイン｜実装者向けUI設計パターンとライブラリ選定](https://www.issoh.co.jp/tech/details/15325/)：画面の実装方法まで踏み込んで確認するときに --- 出典: [会員サイトのデザイン｜登録・ログイン・マイページの離脱を減らすUI設計の勘所]()（株式会社一創）