本日のエントリーでは、これまで紹介した会員登録フォームに特化した内容の改善のポイント・方法について、チェックリスト形式にまとめました。
リストは35もあり、かなりボリュームが多くなってしまいましたが、ぜひ会員登録フォームの改善案を検討する際に参考にしていただければと思います。

目次

※内容が似ているもの、一部フォームの内容によっては必要ないチェック項目も含まれていますのが、ご了承下さい。
以下、それぞれ簡単に触れていきます。

フォームへの導線

フォームそのものの改善ではありませんが、ユーザーがページに訪れるまでの導線も可能な限りスムーズに設計するようにしたいですね。

会員登録フォームはサイトのホームページ上に配置する

サイトに訪れたユーザーがいち早く会員登録を始めるためには、ホームページ(トップページ)上にフォームを埋め込んでしまうのがもっともてっとり早い方法です。
可能であればページのファーストビュー内に配置してしまうと良いでしょう。

トップページのアイキャッチ内に登録フォームが。
Githubでは、サイトのトップページのアイキャッチ内に登録フォームが埋め込まれている。

会員登録の場所をわかりやすくする

トップページを通り過ぎ、サイト内を回遊中のユーザーにもスムーズに会員登録を始めてもらうには、サイトのどこにいても会員登録の開始ページにたどり着けるようにすることが重要です。
共通のナビゲーションのわかりやすい位置に会員登録へのリンクを用意するようにしましょう。

ユニクロのECショップでは、サイト共通のナビゲーションにわかりやすく「会員登録」のリンクが
ユニクロのECショップでは、サイト共通のナビゲーションにわかりやすく「会員登録」のリンクが

会員登録とログインに同じフォームを使用する

一歩間違えるとわかりにくいフォームになってしまうので注意が必要ですが、会員登録とログインを同じフォームで兼用するという方法も。
新規ユーザーもリピートユーザーも同一のページに向けて導線をつくることができ、より構造がシンプルとなります。

AmazonのPCフォームのレイアウト
Amazonの会員登録ページからは、ログインも可能

オファー、補足について

ユーザーの入力を促進するオファーと、迷わせないための補足を用意しましょう。

アカウント作成のメリットを提示する

会員登録すると、どんなメリットがあるのか、その魅力をオファで充分伝えることで、ユーザーのフォーム送信を後押ししましょう。

JINSの登録フォームでは、わかりやすいアイコンとともに、登録後できることのポイントをまとめている
JINSの登録フォームでは、わかりやすいアイコンとともに、登録後できることのポイントをまとめている

ソーシャルプルーフを表示

ソーシャルプルーフ(=社会的証明)とは社会心理学の用語のひとつで、対象への賛同者が多くなるにつれて、それが信頼性を持つようになることを指す言葉です。
会員登録サイトでいうソーシャルプルーフは、ユーザー数や、サービスの利用数、口コミやアンケート結果、メディア掲載事例、facebookのいいね!数や友人の数などがあるでしょう。あなたのサイト・サービスに対する肯定的な意見を多数表示することで、ユーザーは安心してフォーム送信することができます。

「cofeemeeting」では会員登録を促すためのソーシャルプルーフ(会員数、月間利用数、リピート率、メディア掲載事例、ユーザーインタビュー、いいね!ボックス)を多数用意している。
「cofeemeeting」では会員登録を促すためのソーシャルプルーフを多数用意している。

製品やサービスの内容を明確にする

そもそも会員登録するとどのようなサービスを利用できるのかをユーザーが正しく理解できているとは限りません。
とくに有料会員のコースが用意されていたり、サービス内容が特殊な場合は、メリットを強調する伝え方とは別に、利用できるサービス内容を客観的に伝えることも大切です。

クックパッドでは、有料会員サービスの登録画面に機能比較表を用意し、サービス内容を客観的に伝えている
クックパッドでは、有料会員サービスの登録画面に機能比較表を用意し、サービス内容を客観的に伝えている

次に何が起こるかを明記する

登録した後にそのまま利用開始できるタイプのサービスの場合は必要ありませんが、例えば、ウェブからの登録後に電話での連絡や抽選がある場合や、イベント等へ足を運ぶ必要があるケースなど、フォーム送信の後に何らかのフローを設けている場合は、送信した次に何が起こるのか、アクションが必要な場合はどういったタスクがあるのかを明示すると親切です。

派遣登録サービス「JOBNET」では登録後の流れをフローで示している
派遣登録サービス「JOBNET」では登録後の流れをフローで示している

個人情報の安全性を明記

企業やウェブサービスの個人情報漏えいが取り沙汰され、ユーザーは個人情報の取り扱いに益々敏感になっています。フォームから個人情報保護方針を参照するのは当然必須。さらに個人方法の安全性を示すために、プライバシーマークの表示やSSLバッジの表示を行うとユーザーの安心度を高めることができます。

Pマーク
プライバシーマーク

アカウント削除が可能な旨を表記

退会が簡単にできないサイトが存在することから、登録された個人情報が保持され続けることをを懸念するユーザーもいます。いつでも退会ができる旨を示すことは、このようなユーザーの登録時の心理的ハードルを下げることにつながります。

スパムメールが送られないことを明記する

スパムメールはともかく、登録したメールアドレスに大量の宣伝メールを勝手に送りつけるようなウェブサービスは今ではかなり少なくなってきましたが、サービス内容によっては未だにスパムを懸念するユーザーもいるかもしれません。
そういったメールの存在を否定する1文をあらかじめ添えておくことで、ユーザーの不安を解消できる場合もあるでしょう。

ソーシャルログインでは、友人にスパムが送られない旨を表記する

ソーシャルログインは気軽で便利な仕組みですが、自分のSNS内への投稿や、友人へのメッセージスパムに対する懸念を持つユーザーも。
許可無く投稿することがない旨を記載し、こういった懸念を払拭するようにしたいですね。

Wantedlyの登録画面では、許可無くfacebookのウォールに投稿することがない旨の記載がある
Wantedlyの登録画面では、許可無くfacebookのウォールに投稿することがない旨の記載がある

項目数、種類、順番

次はフォームの項目についてです。

入力項目は最低限に留める

項目数の多さ≒フォーム入力の手間ですので、項目は少ないに越したことはありません。

入力欄は2つのみ。水平方向にシンプルに配置されています。
Slackの登録フォームの入力項目は2つのみ。水平方向にシンプルに配置されています。

フィールドをメールアドレスのみにする

上記の究極系として、登録項目をメールアドレスただひとつのみとする会員登録フォームのアイデアが挙げられます。
かなりフォームをシンプルにでき、登録完了率は飛躍的に向上できそうです。
ただし、パスワードはランダムな文字列を発行する必要がありますので、パスワード変更の導線を別途設定する必要はありそうです。

任意の情報は登録後に求める

入力項目を減らすための方法のひとつとして、任意の項目をフォームから取り除いてしまうという方法があります。
任意の登録情報は、会員登録後に別途入力できる機会を設けると良いでしょう。

会員登録直後にユーザー名を求める

ユーザー名のようなオリジナル性の高い情報は、入力時にユーザーがどういった内容を登録するか迷ってしまうケースがあります。
また、一度登録したら変更できないような場合はなおさらです。
まずは登録を済ませてから、ユーザーがじっくり考えて決められる導線を用意するか、あとから変更できる仕様にしておけば、ユーザーはスムーズに入力を完了できます。

IDはメールアドレスにする

ログインするためのIDはメールアドレスと兼用にすれば、ユーザーにがログイン情報を管理する負担を軽減することができます。
さらに言うと、メールアドレスにかぎらず電話番号などその他の個人情報でのログインも可能であれば、ユーザー自身が管理しやすいものを選択することができます。

Twitterのログイン画面。ユーザー名だけでなく、登録した電話番号やメールアドレスなどでログインできるようになっている
Twitterのログイン画面。ユーザー名だけでなく、登録した電話番号やメールアドレスなどでログインできるようになっている

不要な情報を求めない

登録時にユーザーの情報を取得しすぎると、フォームの項目数が膨れ上がるだけでなく、用途が不明な場合、ユーザーが不信感を抱くことにもなりかねません。
取得する情報は必要最低限を心がけましょう。

情報が必要な理由を明記する

上記でも述べた通り、情報取得の理由が不明瞭な場合、ユーザーがサイトに不信感を抱いてしまうケースがあります。
一見、何のために取得しているかわかりにくいフォーム項目については、その用途を簡単に説明しておくとユーザーは安心して入力に取り組むことができるでしょう。

「ログインに使用する情報」「ご本人様確認のために使用する情報」など、取得する情報の用途が明確に記されている。
cookpadのフォームでは、「ログインに使用する情報」「ご本人様確認のために使用する情報」など、取得する情報の用途が明確に記されている。

パスワード関連

会員登録フォームには、後日パスワードを使ってログインするという特徴があります。ユーザーがスムーズにログインを行うためには下記の工夫があると良いでしょう。

パスワードを設定可能にする

パスワードにランダムな文字列を設定すると、ユーザーが次回ログインする際に高い確率でパスワードリセットする必要が出てきてしまいます。
パスワードは必ずユーザーが任意の文字列を設定できるようにしましょう。

パスワードマネージャが有効になるようにする

ブラウザがログイン情報を記憶してくれるパスワードマネージャ機能は、毎回のログイン時の入力を楽にしてくれます。
このパスワードマネージャは、javascriptなどで生成されたフォーム入力欄などでは動作しないことがあるようですので、通常のフォーム入力欄で構築するようにするべきです。

パスワードのフォーマットを表示する

すぐに破られないパスワードにするために、会員登録で設定するパスワードの文字列には、英字と数字を混在させたり、一定の文字数以上にするなどの条件を設けていることがほとんどです。
このようにパスワードに必要なフォーマットは、あらかじめ明確な形でユーザーに提示しましょう。

コメリフォームパスワード
例:コメリのパスワード入力欄

パスワードのマスキング解除機能を用意する

パスワード入力中のマスキングにより、ユーザーは本当に意図する文字列を入力できているかわからなくなることがあります。
入力中の文字列を確かめるために、マスキングの解除機能を用意しておくとユーザーにとって親切です。

パスワードマスキングの解除例
パスワードマスキングの解除例

パスワード入力を一度だけにする

パスワードを確認のために2回入力させることは、確実に意図した文字列をパスワードに設定できるものの、ユーザーにとっては手間になることもあります。
上記のマスキング解除機能と併用することで、パスワード入力を1回のみにするという方法もあります。

「パスワードを表示」にチェックを入れると入力内容が表示でき、チェックをはずすとマスキングされる。
「パスワードを表示」にチェックを入れると入力内容が表示でき、チェックをはずすとマスキングされる。

パスワードの強度チェッカーを用意する

設定したパスワードの強度が充分かどうかをリアルタイムに判定する機能を設けると、ユーザーがより強力なパスワード設定を行うことを促進します。

入力しながらパスワードの強度を確認できる
入力しながらパスワードの強度を確認できる

入力支援機能関連

IDの重複はリアルタイムに知らせる

会員登録時にユーザーIDを設定するタイプのフォームでは、指定のIDに重複がないかどうかをリアルタイムに判定しましょう。

IDが利用可能かどうかもその場で通信して称号することが可能。
Yahoo!ではIDが利用可能かどうかもその場で通信して称号

IDの候補を表示する

IDに重複がある場合、代わりのIDの候補を表示するとユーザーが迷わずに登録を進めることができます。

問題ない入力内容については入力成功サイン(チェックマーク)が表示される。またユーザ名の重複判定や候補表示もリアルタイムに実施。
Twitterの例。ユーザ名の重複判定や候補表示をリアルタイムに実施。

ソーシャルログインを使う

会員登録で利用するサービスは、Twitterやfacebookなどのアカウントを使ったソーシャルログイン機能と相性が良い場合が多いでしょう。
これらのアカウントを所持するユーザーにとっては登録の手間を大幅に省いてくれるうえに、パスワード忘れのリスクも小さくすることができ、再ログイン時もスムーズです。ぜひ、積極的に取り入れたいですね。

LINE様運営の「ロケタッチ」のログイン。各種SNSアカウントでログインできる
LINE様運営の「ロケタッチ」のログイン。各種SNSアカウントでログインできる

他の手段で取得できる情報を求めない

例えば、生年月日と年齢、郵便番号と都道府県、名前と(おおまかな)ふりがななど、他の情報から得られる情報については極力重複して取得せず、なるべく自動入力などで入力を支援する機能をつけるとユーザーに優しいでしょう。

郵便番号から住所を自動入力
郵便番号から住所を自動入力

プレースホルダーをラベルとして使わない

会員登録フォームではとくに、プレースホルダーをラベルとして使用するデザインのサイトが多いようですが、ユーザーが入力中に何の情報を入力しているか参照できなくなりますので、プレースホルダーを使わないか、使う場合は入力中にどこかに補足を表示するなどの対応を行いましょう。

入力を始めると、入力欄上部にラベルがなめらかに出現。入力中でのラベルを確認できる。
「Prott」のフォームではプレースホルダーをラベルとして使っているが、入力を始めると入力欄上部にラベルがなめらかに出現。入力中でもラベルを確認できる。

その他UX関連

サンクスメール(登録完了メール)は検索しやすく

ログイン時にIDを忘れてしまった場合は、単純に再発行すれば良いパスワードとは異なり、さらに面倒な手続きが必要となる可能性があり、ユーザーに大きなストレスを与えてしまいかねません。
登録時にメールアドレスに送られるサンクスメール(登録完了メール)を検索することが、ユーザーがID情報を入手する足がかりのひとつとなりますので、メールの件名や本文には検索しやすいように、サイト名や「登録完了」などの文言をわかりやすく用いるとユーザーに親切です。

メールアドレスの認証を間に挟まない

メールアドレスが有効かどうかを確かめる認証のフローで、ユーザーは<一度ウェブページから離れ、メールを確認したのちに戻ってくる>必要があります。
しかしこの作業中断のタイミングでは、当然離脱のリスクは大きくなります。
入力フローが複数ある場合にフォーム入力に集中してもらうためには、なるべくメールの認証はフローの冒頭か最後に行い、入力作業の流れを絶ち切ってしまわないようにすると良いでしょう。

メールマガジンをチェック状態にしておかない

登録ユーザーにニュースレターやメールマガジンを送付してサイトへの再訪を促すのは重要なことですが、ユーザーが意図しない状況でメールが送信されてしまうとサービスへの不信感につながってしまいます。
メールマガジン配信のチェックボックスの初期値はオフにしておくことがユーザーにとっては親切です。

エラーメッセージは具体的にする

会員登録以外のフォームにも言えることですが、エラーメッセージの内容が抽象的だと、ユーザーはどのように修正していいかわかりません。
会員登録フォームでは、IDやパスワードの入力に、文字数やフォーマットの制限を設けているケースが多いので、エラーの内容を具体的に伝えるようにとくに注意したいですね。

エラー文言の悪い例。
エラー文言の悪い例。何をどう修正すればよいかを示すようにしたい

ゲスト購入機能を用意する

購入や予約などのフォームの一部では、会員登録してからでないとサービスを利用できない設計になっていることがあります。
いちはやく購入や予約を済ませたいユーザーにとって、登録のフローは非常に煩わしい存在。できれば、会員登録をスキップできるゲスト機能を設けると吉です。

アカウント作成後は自動的にログインする

アカウントの作成後は、自動的にサービスへログインしておくようにするとユーザーの手間を削減することができます。
ただし、メールアドレスやパスワードで登録してしまった場合にそれに気づきにくい場合がありますので注意は必要です。
また、会員登録前に閲覧していたページに再び戻ってくるとユーザーフレンドリーです。

最後に

いかがだったでしょうか。本日は会員登録フォームの改善に役立つ改善チェックリストについてお伝えしました。
なお、これまでの会員登録フォーム関連の過去記事はこちらです。ぜひ合わせてお役立て下さい。
会員登録フォームで気をつけたいEFO(フォーム最適化)のポイント/strong>
https://f-tra.jp/blog/column/4098

シンプルで素敵なサインアップ(会員登録)フォームの事例紹介/strong>
https://f-tra.jp/blog/column/6208

会員登録必須のフォームは、45%のCVを逃している!?~ゲスト購入機能が必須である理由~/strong>
https://f-tra.jp/blog/column/5979

「こんなサイトには登録したくない!」ユーザーが会員登録を躊躇する8つの理由/strong>
https://f-tra.jp/blog/overseas/4584

海外EFO:会員登録フォームをシンプルにするための19の方法(1/2)/strong>
https://f-tra.jp/blog/overseas/4282

海外EFO:会員登録フォームをシンプルにするための19の方法(2/2)/strong>
https://f-tra.jp/blog/overseas/4385

【海外EFO】会員登録とログインをシンプルにするためのテクニック14選 (前編)/strong>
https://f-tra.jp/blog/overseas/5257