本日は、人気のウェブサービスやSNSから、シンプルで入力しやすい会員登録フォームを持つサイトをピックアップし、フォームの特徴とともにまとめてみたいと思います。
Naver
まず取り上げるのはWEBキュレーションサービス「NAVERまとめ（http://matome.naver.jp/）」を利用する際に必要な「NAVERアカウント」の会員登録フォームです。
シンプルな登録フォーム。
非常にシンプルな登録フォームで、ユーザ名、メールアドレス、パスワードの項目３つを水平方向に並べているのが特徴です。
入力支援機能
フォーカス中
入力項目にフォーカスしている間、項目の背景色が黄色に変化します。
サブミットブロック
また、必須の項目を入力し終えるまで送信ボタンを押下できなくするサブミットブロック機能を導入しています。
パスワード強度チェック
ユーザー名の重複もその場でチェック
パスワードの強度やユーザー名の重複は、その場でチェックするようになっています。
登録後の流れ
メールアドレス宛てに認証用のURLを送付。
送信すると、メールアドレス宛に確認用の案内が届きます。確認作業をしないと一部のサービスが利用できないとの但し書きがあります。
完了画面。
メール内のリンクに遷移することで、正式に登録が完了します。
Tumblr
次は画像、動画、音楽、引用、リンクなどさまざまなものを投稿できるマイクログログサービス「Tumblr（タンブラー、https://www.tumblr.com/）」のフォームを見て行きましょう。
トップページ
トップページは会員登録フォームを中心に更新されています。シンプルな３つの項目入力です。
入力支援機能
アカウント名の候補を表示
アカウント名の入力では、Tumblr側が利用可能なアカウント名の候補を表示してくれる機能があります。
パスワードの強度が弱い場合
また、パスワードの強度が弱い場合は、送信ボタン押下時のエラーとして表示されるようになっています。
登録後の流れ
追加の質問
３つの情報を入力・送信を終えると、追加の設問が現れます。画面の再読み込みはなく、スムーズなUXで表示されていました。
最後にキャプチャが表示
最後にCAPTCHAのチェックボックスに記入すると、正式に登録が完了するようです。
お次はおなじみTwitter（https://twitter.com/）です。
Twitterトップページ
トップページにはログインと新規登録のフォームが並んでいます。
入力支援機能
「☓」ボタンをクリックすると入力内容がクリアされる。何のための機能か…
入力を始めると入力欄右側に「☓」ボタンが出現。クリックすると入力内容がクリアされるようですが、何のための機能かはわかりませんでした。
パスワードの入力中
パスワードの入力中は、目のマークのアイコンが出現。押下することでマスキングを一時的に解除することが可能です。
アカウント登録の専用ページに遷移
入力内容にブランクがある場合やエラーがある場合には、トップページでエラーを表示するのではなく、アカウント登録の専用ページに遷移したうえで、エラーなどを表示する形となっていました。
パスワードのリアルタイム判定
パスワードが簡単すぎる場合にはリアルタイムに判定してエラー表示。強度チェッカーも表示していました。
入力成功サイン、ユーザ名の重複判定、候補表示。
問題ない入力内容については入力成功サイン（チェックマーク）が表示される。またユーザ名の重複判定や候補表示もリアルタイムに実施します。
登録後の流れ
電話番号の登録
登録後はセキュリティ強化のための電話番号の登録が案内されます。ただしこの登録はスキップすることも可能です。
エラー時
このページでは、エラーは画面上部に表示されました。
Github
お次はソフトウェア開発プロジェクトのための共有ウェブサービス「GitHub（ギットハブ）https://github.com/」の登録フォームを見ていきます。
トップページ
トップページのアイキャッチ内に登録フォームがあります。
入力支援機能
初期項目フォーカス
ページ訪問時、あらかじめフォームの最初の項目にフォーカスがあたっています。また、フォーカス中の項目の周りがうっすら光り、選択中であることを示しています。
入力成功サイン
問題なく入力すると、チェックマークを表示します。
入力形式の間違い
パスワードが短い場合
入力形式やパスワードの強度不足の場合などおいには、リアルタイムにエラー判定しその旨を表示します。
登録後の流れ
プランを選択
情報登録後は、プランの選択画面に遷移します。無料アカウントにあらかじめチェックが入っているので、無料ユーザーはボタンを押下するだけで完了です。
登録後は、自動でログインしたうえでダッシュボードに遷移。
続いては、気に入ったWEB上の画像をスクラップできるサービスPintarest（http://jp.pinterest.com/）の例です。
非ログイン状態のトップページ
トップページは、登録フォームを中心としたデザインになっています。
入力支援機能
エラーの表示例。
リアルタイム判定機能はなく、ボタンを押下した場合にエラーを表示する一般的な形。
パスワードのマスキング解除機能
Twitterのようにパスワードを入力中に、目の形のアイコンが登場。このアイコンをクリックしている間は、パスワードのマスキングを解除できるようになっている
パスワードが簡単な場合、エラーとなる。（ボタン押下時）
登録後の流れ
続いて入力欄が登場
フォームは続いてユーザー名と年齢、性別の選択となる。年齢は入力しなくても次に進むことができた。
Dropbox
次はオンラインストレージサービスのDropbox（https://www.dropbox.com/）のフォームを見てみましょう。
サイトトップページ
サイトトップページの「登録する」を押下すると、隠れていたフォームが現れる。
名前（姓名）とメールアドレス、パスワード、チェックボックスの計５項目。
入力支援機能
エラー
エラーはボタン押下時に表示される形式です。該当箇所の枠線と、エラー内容を赤色で表示して強調しています。
パスワードの入力欄
パスワードの入力欄には強度チェッカーを搭載。
登録後の流れ
プランの選択画面
情報登録後は、プランの選択画面へ遷移します。
Slack
次は最近注目を集めているチームコミュニケーションツール、「Slack」（https://slack.com/）のフォームをご紹介です。
トップページ
サイトのトップページに登録フォームが配置されています。
入力支援機能
入力欄
入力欄は２つのみ。水平方向にシンプルに配置されています。
フォーカス中
フォーカス中の項目には青色の枠線がつきます。
登録後の流れ
フォーム送信後
フォーム送信後、メールアドレスに認証メールが送られます。
HTMLメール
メールはHTMLメールになっており、押下するべきリンクはボタン「Get started」の形で示されています。
登録完了ページ
完了ページでは、メールアドレスの再確認があり、問題なければ初期設定を進めることができます。
Prott
国内発のプロトタイピングサービスであるPrott（https://prottapp.com/）の例を見てみます。
登録フォーム
「アカウント作成」を選択するとシンプルなフォームが登場します。入力項目は４つです。
入力支援機能
ヘルプ文言の表示
右横の？マークにマウスをあてると、入力形式についての説明が現れます。
フォーカス中の入力欄
フォーカス中の入力欄には青色の下線がつき強調されるようになっています。
入力中のラベル出現
入力を始めると、入力欄上部にラベルがなめらかに出現。入力中でのラベルを確認できる。
エラー
エラーはボタン押下時。背景色をつけて強調されたエラー文を該当箇所に表示する形です。
inVision
最後は海外発のプロトタイピングツールinvision（http://www.invisionapp.com/）を見ていきます。
フォーム画面
トップから「SIGN UP FREE」を押下するとフォーム画面に遷移します。
オファー文、ボタン文言ともにFREE（無料）である旨がアピールされているのが印象的です。
クレジットカードは不要ですとの但し書きも。
入力支援機能
ラベル
プレースホルダーがラベルとなっているが、入力を開始すると、入力欄右側にラベルがなめらかな動きで登場。入力中もラベルを確認することができる。
エラー
エラーはフォーム上部に表示され、該当箇所への強調はなかった
登録後の流れ
プロジェクト画面
登録後、メールの確認などのフローはなく、すぐにプロジェクト画面に遷移しました。
最後に
いかがだたでしょうか。本日は人気ウェブサービスのシンプルな会員登録フォームをあつめ、特徴をご紹介しました。
いずれも入力項目数を最低限におさえているだけではなく、大きな入力欄や明確なボタン、ラベル表示の工夫やパスワードマスキングの解除機能、リアルタイムのエラーチェックやアカウント名の重複チェック、候補表示、パスワード強度チェッカーなど、入力支援機能やがふんだんに利用されており、ぜひともお手本にしたいフォームばかりでしたね。
ぜひ、参考に改善を進めてみてはいかがでしょうか！
