シンプルで素敵なサインアップ(会員登録)フォームの事例紹介

本日は、人気のウェブサービスやSNSから、シンプルで入力しやすい会員登録フォームを持つサイトをピックアップし、フォームの特徴とともにまとめてみたいと思います。

Naver

まず取り上げるのはWEBキュレーションサービス「NAVERまとめ(http://matome.naver.jp/)」を利用する際に必要な「NAVERアカウント」の会員登録フォームです。

シンプルな登録フォーム。項目3つを水平方向に並べている

シンプルな登録フォーム。

非常にシンプルな登録フォームで、ユーザ名、メールアドレス、パスワードの項目3つを水平方向に並べているのが特徴です。

入力支援機能

フォーカス中の項目は背景色が黄色に変化。

フォーカス中


入力項目にフォーカスしている間、項目の背景色が黄色に変化します。

項目を入力し終えるまで送信ボタンを押下できないサブミットブロックを導入。

サブミットブロック


また、必須の項目を入力し終えるまで送信ボタンを押下できなくするサブミットブロック機能を導入しています。

パスワード強度をその場でチェック

パスワード強度チェック


ユーザー名の重複もその場でチェック

ユーザー名の重複もその場でチェック


パスワードの強度やユーザー名の重複は、その場でチェックするようになっています。

登録後の流れ

メールアドレス宛てに認証用のURLを送付。

メールアドレス宛てに認証用のURLを送付。


送信すると、メールアドレス宛に確認用の案内が届きます。確認作業をしないと一部のサービスが利用できないとの但し書きがあります。

完了画面。

完了画面。


メール内のリンクに遷移することで、正式に登録が完了します。

Tumblr

次は画像、動画、音楽、引用、リンクなどさまざまなものを投稿できるマイクログログサービス「Tumblr(タンブラー、https://www.tumblr.com/)」のフォームを見て行きましょう。

会員登録はシンプルな3つの項目入力

トップページ


トップページは会員登録フォームを中心に更新されています。シンプルな3つの項目入力です。

入力支援機能

アカウント名の候補を表示してくれる機能がある

アカウント名の候補を表示


アカウント名の入力では、Tumblr側が利用可能なアカウント名の候補を表示してくれる機能があります。

パスワードの強度が弱い場合、ボタン押下時のエラーとして表示される

パスワードの強度が弱い場合


また、パスワードの強度が弱い場合は、送信ボタン押下時のエラーとして表示されるようになっています。

登録後の流れ

追加の質問が画面の再読み込みを経ずにスムーズに表示される。

追加の質問


3つの情報を入力・送信を終えると、追加の設問が現れます。画面の再読み込みはなく、スムーズなUXで表示されていました。

最後にキャプチャのチェックボックスに記入すると、登録が完了する

最後にキャプチャが表示


最後にCAPTCHAのチェックボックスに記入すると、正式に登録が完了するようです。

Twitter

お次はおなじみTwitter(https://twitter.com/)です。

トップページにはログインと新規登録のフォームが並ぶ

Twitterトップページ


トップページにはログインと新規登録のフォームが並んでいます。

入力支援機能

「☓」ボタンをクリックすると入力内容がクリアされる。何のための機能か…

「☓」ボタンをクリックすると入力内容がクリアされる。何のための機能か…


入力を始めると入力欄右側に「☓」ボタンが出現。クリックすると入力内容がクリアされるようですが、何のための機能かはわかりませんでした。

パスワードの入力中は、目のアイコンが出現。押下することでマスキングを一時的に解除することが可能。

パスワードの入力中


パスワードの入力中は、目のマークのアイコンが出現。押下することでマスキングを一時的に解除することが可能です。

入力内容にブランクがある場合やエラーがある場合には、アカウント登録の専用ページに遷移したうえで、エラーなどを表示する

アカウント登録の専用ページに遷移


入力内容にブランクがある場合やエラーがある場合には、トップページでエラーを表示するのではなく、アカウント登録の専用ページに遷移したうえで、エラーなどを表示する形となっていました。

パスワードが簡単すぎる場合にはリアルタイムに判定してエラー表示。強度チェッカーも表示している

パスワードのリアルタイム判定


パスワードが簡単すぎる場合にはリアルタイムに判定してエラー表示。強度チェッカーも表示していました。

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

入力成功サイン、ユーザ名の重複判定、候補表示。


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

登録後の流れ

電話番号の登録が表示されるが、スキップも可能。

電話番号の登録


登録後はセキュリティ強化のための電話番号の登録が案内されます。ただしこの登録はスキップすることも可能です。

ここでは一転、エラーは画面上部に表示された。

エラー時


このページでは、エラーは画面上部に表示されました。

Github

お次はソフトウェア開発プロジェクトのための共有ウェブサービス「GitHub(ギットハブ)https://github.com/」の登録フォームを見ていきます。

トップページのアイキャッチ内に登録フォームが。

トップページ


トップページのアイキャッチ内に登録フォームがあります。

入力支援機能

あらかじめフォーカスがあたっている。また、フォーカス中の項目の周りがうっすら光っている

初期項目フォーカス


ページ訪問時、あらかじめフォームの最初の項目にフォーカスがあたっています。また、フォーカス中の項目の周りがうっすら光り、選択中であることを示しています。

入力成功サインを表示。

入力成功サイン


問題なく入力すると、チェックマークを表示します。

入力形式などをリアルタイムにエラー判定。

入力形式の間違い

パスワードが短い場合も同様にリアルタイムに表示

パスワードが短い場合

入力形式やパスワードの強度不足の場合などおいには、リアルタイムにエラー判定しその旨を表示します。

登録後の流れ

プランを選択。無料アカウントにあらかじめチェックが入っている。

プランを選択


情報登録後は、プランの選択画面に遷移します。無料アカウントにあらかじめチェックが入っているので、無料ユーザーはボタンを押下するだけで完了です。

登録後は、自動でログインしたうえでダッシュボードに遷移。

登録後は、自動でログインしたうえでダッシュボードに遷移。

Pinterest

続いては、気に入ったWEB上の画像をスクラップできるサービスPintarest(http://jp.pinterest.com/)の例です。

非ログイン状態のトップページは、登録フォームを中心としたデザインに

非ログイン状態のトップページ


トップページは、登録フォームを中心としたデザインになっています。

入力支援機能

エラーの表示例。

エラーの表示例。


リアルタイム判定機能はなく、ボタンを押下した場合にエラーを表示する一般的な形。

パスワードを入力中に、目の形のアイコンが登場。このアイコンをクリックしている間は、パスワードのマスキングを解除できるようになっている

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


Twitterのようにパスワードを入力中に、目の形のアイコンが登場。このアイコンをクリックしている間は、パスワードのマスキングを解除できるようになっている

パスワードが簡単な場合、エラーとなる。(ボタン押下時)

パスワードが簡単な場合、エラーとなる。(ボタン押下時)

登録後の流れ

次にユーザー名と年齢、性別の選択となる。年齢は入力しなくても次に進むことができた

続いて入力欄が登場


フォームは続いてユーザー名と年齢、性別の選択となる。年齢は入力しなくても次に進むことができた。

Dropbox

次はオンラインストレージサービスのDropbox(https://www.dropbox.com/)のフォームを見てみましょう。

サイトトップページの「登録する」を押下すると、隠れていたフォームが現れる。 名前(姓名)とメールアドレス、パスワード、チェックボックスの計5項目。

サイトトップページ


サイトトップページの「登録する」を押下すると、隠れていたフォームが現れる。
名前(姓名)とメールアドレス、パスワード、チェックボックスの計5項目。

入力支援機能

エラーはボタン押下時に表示。該当箇所の枠線+エラー内容を赤色で強調。

エラー


エラーはボタン押下時に表示される形式です。該当箇所の枠線と、エラー内容を赤色で表示して強調しています。

パスワードの入力欄には強度チェッカーを搭載。

パスワードの入力欄


パスワードの入力欄には強度チェッカーを搭載。

登録後の流れ

登録後、プランの選択画面へ。

プランの選択画面


情報登録後は、プランの選択画面へ遷移します。

Slack

次は最近注目を集めているチームコミュニケーションツール、「Slack」(https://slack.com/)のフォームをご紹介です。

サイトのトップページに登録フォームが配置されています。

トップページ


サイトのトップページに登録フォームが配置されています。

入力支援機能

入力欄は2つのみ。水平方向にシンプルに配置されています。

入力欄


入力欄は2つのみ。水平方向にシンプルに配置されています。

フォーカス中の項目には青色の枠線がつきます

フォーカス中


フォーカス中の項目には青色の枠線がつきます。

登録後の流れ

フォーム送信後、メールアドレスに認証メールが送られます

フォーム送信後


フォーム送信後、メールアドレスに認証メールが送られます。

メールはHTMLメールになっており、押下するべきリンクはボタン「Get started」の形で示されています

HTMLメール


メールはHTMLメールになっており、押下するべきリンクはボタン「Get started」の形で示されています。

完了ページでは、メールアドレスの再確認があり、問題なければ初期設定を進めることができます。

登録完了ページ


完了ページでは、メールアドレスの再確認があり、問題なければ初期設定を進めることができます。

Prott

国内発のプロトタイピングサービスであるPrott(https://prottapp.com/)の例を見てみます。

「アカウント作成」を選択するとシンプルなフォームが登場。入力項目は4つ。

登録フォーム


「アカウント作成」を選択するとシンプルなフォームが登場します。入力項目は4つです。

入力支援機能

右横の?マークにマウスをあてると、入力形式についての説明が現れる。

ヘルプ文言の表示


右横の?マークにマウスをあてると、入力形式についての説明が現れます。

フォーカス中の入力欄は 青色の下線がつき強調される

フォーカス中の入力欄


フォーカス中の入力欄には青色の下線がつき強調されるようになっています。

入力を始めると、入力欄上部にラベルがなめらかに出現。入力中でのラベルを確認できる。

入力中のラベル出現


入力を始めると、入力欄上部にラベルがなめらかに出現。入力中でのラベルを確認できる。

エラーはボタン押下時。背景色をつけて強調されたエラー文を該当箇所に表示。 エラー画面でメールアドレスが編集できないというバグ?を見つけた

エラー


エラーはボタン押下時。背景色をつけて強調されたエラー文を該当箇所に表示する形です。

inVision

最後は海外発のプロトタイピングツールinvision(http://www.invisionapp.com/)を見ていきます。

トップから「SIGN UP FREE」を押下するとフォーム画面に。 オファー文、ボタン文言ともにFREE(無料)である旨がアピールされている。 クレジットカードは不要ですとの但し書きも。

フォーム画面


トップから「SIGN UP FREE」を押下するとフォーム画面に遷移します。
オファー文、ボタン文言ともにFREE(無料)である旨がアピールされているのが印象的です。
クレジットカードは不要ですとの但し書きも。

入力支援機能

プレースホルダーがラベルとなっているが、入力を開始すると、入力欄右側にラベルがなめらかな動きで登場。入力中もラベルを確認することができる。

ラベル


プレースホルダーがラベルとなっているが、入力を開始すると、入力欄右側にラベルがなめらかな動きで登場。入力中もラベルを確認することができる。

エラーはフォーム上部に表示され、該当箇所への強調はなかった

エラー


エラーはフォーム上部に表示され、該当箇所への強調はなかった

登録後の流れ

登録後、メールの確認などのフローはなく、すぐにプロジェクト画面に遷移した

プロジェクト画面


登録後、メールの確認などのフローはなく、すぐにプロジェクト画面に遷移しました。

最後に

いかがだたでしょうか。本日は人気ウェブサービスのシンプルな会員登録フォームをあつめ、特徴をご紹介しました。
いずれも入力項目数を最低限におさえているだけではなく、大きな入力欄や明確なボタン、ラベル表示の工夫やパスワードマスキングの解除機能、リアルタイムのエラーチェックやアカウント名の重複チェック、候補表示、パスワード強度チェッカーなど、入力支援機能やがふんだんに利用されており、ぜひともお手本にしたいフォームばかりでしたね。

ぜひ、参考に改善を進めてみてはいかがでしょうか!

この記事が気に入ったら
いいね!しよう

UI改善ブログの最新情報をお届けします

エフトラEFO機能アイコン

UI改善ブログを運営する株式会社エフ・コードでは
UI改善の基本施策を簡単に実施できる「エフトラEFO」「エフトラCTA」を開発しています。

エフトラEFOサイトへ エフトラCTAサイトへ

UI改善ブログ by f-tra の購読

当ブログの更新情報は以下の各種アカウントから購読できます。

メールマガジンを購読する

ブログの更新情報やセミナーのお知らせなど、
UI改善に関する情報を1~2週間に1回お届けします。

メールアドレスを入力

 購読解除はいつでも可能です