2019/1/8更新

登録フォームのユーザー体験のガイドライン

Marcin Treder

Marcin Treder氏は最高のユーザーエクスペリエンスデザイン制作を追求するデザインエンスーです。ユーザーエクスペリエンスデザイナー兼ユーザーエクスペリエンスの企業経営者として何年か活躍した後、自身のスタートアップ企業UXPin創設に尽力しました。

この記事はDesignmodoからの翻訳転載です。配信元または著者の許可を得て配信しています。

The Ultimate UX Design of: the Sign-Up Form

登録フォームには、いくつかのフォームフィールドと決定ボタンがあります。もっとも一般的なのは、メールアドレス、パスワード、そして奇妙な「パスワードの再入力」の３つです。この最小限の登録フォームにデザインにおいて、さらなる改善の余地はあるでしょうか？　注目するにはシンプルすぎるでしょうか？

残念ながら、多くの非デザイナーや一部のデザイナーは、登録フォームのデザインは重要でないと考えているようです。シンプルで小さな登録フォームはデザインしなくてもよいのでは？　デザインするだけ時間の無駄と考えるようです。ですが、それはまったくの間違いです。

私はデザインの素人に対して説明を試みましたが、彼は次に述べるような人たちがいることを信じてくれませんでした。Webサイトを訪れ、ホームページの大きな「登録」のボタンをクリックしたにもかかわらず、簡単なフォーム入力をやめて登録しない人たちのことです。彼らは「もう登録することに決めていたのに、３つの入力をためらう人がいるなんて信じられない」というのです。

途中で登録をあきらめる人はよくいるのです。私はGoogle Analyticsのデータをその人に見せました。データは、登録ボタンを押した人の23％がメールアドレス、パスワード、パスワードの再入力の３つの項目を入力せずにやめてしまうことを示していました。23％は多いです。ほぼ1/4の人がフォーム入力に躊躇するということですから。

私は、登録フォームの入力をやめる人がいる原因を調べてみました。すると親切にも70％の人が自由記入式の質問事項にまで回答してくれました。驚いたことに、いつもメールアドレスをどこにも入力せずに登録を考え直す主な理由として、「スパムメールが送られてくるのではないか」という不安を33％もの人が挙げました。（不必要だと思われがちな）フォームの複雑さと登録に時間を費やしたくないというのが次に多い理由で、21％を占めました。

なぜ登録をせずにフォームを離れたのですか？（左から「スパムが怖いから」「フォームが複雑だから」「理解しづらいから」「わからない」）

多数の登録フォームを調べた上で私が気づいたことがあります。多くのフォームは、上記のような残念な欠陥のせいで失敗を招いているのです。つまり、万全ではないのです。

では、完璧な登録フォームの作り方を学習しましょう。まず、いくつかの例やお手本に目を通していきましょう。そして、安全性、明瞭な説明、最小限のフォーム、魅力的なコピーのみに焦点を当て、独自の完璧なフォームを作り上げましょう。

以下の例は、プロトタイピングアプリ UXPin-The UX Design にそれぞれ直接アップロードできるテンプレートも紹介しています。

安全性

まず第一に、登録フォームを使用する理由を考えましょう。私は以下のように考えます。

ユーザーのセンシティブな情報を安全に保持するため（例：Mint.com、UXPin.comなど）
特定のデータの所有者としてユーザーを認識するため（例：Facebookなど）
サービスへのアクセスを制限するため（例、イントラネット全般）
商用目的でユーザーデータを集めるため

これを念頭に、ユーザーが登録フォームを目の前にしたときにどのような気持ちになるか考えてみましょう。一般のインターネットユーザーにとっては、登録フォームの目的が不明瞭なことが多いのです。私たちはわからないと不安を感じます。疑いながら騙されやしないかと恐れフォーム入力をあきらめる人が多いのも納得できます。

ほとんどの場合、登録フォームがあることで利益を得るのは制作者のあなたです。そのため、ユーザーが安心感を持てるようにする責任はあなたにあるのです。

とても奇妙なことに、ほとんどの登録フォームは、この問題に対処できていません。メールアドレスを入力しても安全だという説明をしなかったことで、ユーザーになりそうな人が登録を考え直してしまうかもしれません。あなたはそんな危険を冒しますか？

登録フォームの数少ない良い例として、Mintのフォームがあります。

Mintの登録フォームは安全性を実感できるようにデザインされた優れた例です。

Mintは視覚的表現（施錠アイコン）を使い登録の全過程が安全だということを暗示します。NortonとTRUSTeのシールがさらにフォームの安全性を保証しています。

Mintが登録によって得られるユーザーの利益を繰り返して説明しているところにも注目しましょう。情緒的な表現（「あなたがMint.comを愛するようになる理由」）を用いて親密さや想い入れといった感情を起こさせます。これこそが、登録フォームのこの段階で顧客がサービスに対して持つ疑いを完全になくすのに必要なものなのです。

Mint.comのワイヤーフレームテンプレートをUX Pinからダウンロードする

登録フォームへの安心感を高める興味深い例として、Songkickの登録フォームも挙げられます。Songkickは、定番の登録フォームと共にSNSへのサインインも採用したよくある形式を使用しています。

Songkickの登録フォームは、SNSへのサインインを採用した良い形式です。

適切なSNS連携は、とても強力な手法です。時間を省きトラブルを回避します。しかし、より危険を感じさせる可能性もあります。SNSの場合、スパムメールでユーザーのメール受信箱だけでなく、その友達の受信箱までもが攻撃されることがあるのです。これは厄介なことです。この種の登録プロセスでは安全性の強調がきわめて重要です。

その点、Songkickは小さいながら力強いフォームです。初めに「許可なくしてはFacebookに通知しません」と明記しています。それは単なる記述で、ユーザーの絶大な信用を得ようとしていることに変わりはありませんが、このように明記することによって、少なくとも顧客の心配に向き合い丁寧に不安を和らげようとしているのです。

顧客が不安を抱いていることがあれば、逃げ隠れせずに立ち向かい対処しましょう。

Songkickの登録フォームのワイヤーフレームテンプレートをUX Pinからダウンロードする

説明

「安全性を強調する」コンテンツの例に続き、登録フォームのコンバージョン率を向上させユーザーに親しみを持ってもらうためのとても重要でありながら軽視されているポイントについて考えましょう。

それはそう、説明です。

登録プロセスは人工的です。「オフラインの世界」ではほとんど通用しないものであり、見ればわかるものではないのです。我々にとって便利で安全なフォーマットでユーザーにデータを提供してもらおうとするのに、その目的を説明しなかったり、必要なフォーマットさえも知らせなかったりということがかなり頻繁にあります。

パスワードが短すぎた、あるいは数字が一切含まれていなかったということを知らせるフォームを何回も見たことがあるでしょう。頻繁にあります。パスワードのフォーマットについてのお知らせは前もってすべきです。

GitHubの登録フォームを見てみましょう。

GitHubのフォームでは、フォームを送信する前にパスワードのフォーマットについて知らせています

GitHubのフォームは完璧ではありません。及第点といったところです。実際、私は入力フィールド内にプレースホルダーでラベルを表示していたり、一番最初に「ユーザーネーム」を入力させる理由が理解できません。

ですが、このフォームのとても素晴らしいところは、パスワードについての注の部分です。「注：１つ以上の数字と７文字以上の文字を用いましょう」という注意書きによりユーザーは時間と労力を節約できます。これに対し、入力したパスワードが短すぎたり数字を含まなかったりしたときに、エラーメッセージでこうした注意書きを表示するサービスがほとんどです。決してユーザーにとって親切な解決策とはいえません。

GitHubのワイヤーフレームテンプレートをUX Pinでダウンロードする

Facebookは、誕生日のフォームフィールドの入力時に、同じように説明を表示しています。登録フォームに誕生日に関する質問があることに違和感を覚えるユーザーが多いことを把握し、短い説明とリンクを貼ったのです。「どうして私は誕生日を教える必要があるのでしょうか？」という疑問に答える素晴らしい試みです。

Facebookの登録フォームには賢いアイデアが含まれています。

Facebookの登録フォームのラベルをよく見てみましょう。「新しいパスワード」というラベルがありますでしょう。これは安全性に配慮した良い例です。他サービスで頻繁に使用しているパスワードを使わずに新しいパスワードを作るように顧客に促しているのです。賢いデザインです。

FacebookのサインフォームのワイヤーフレームテンプレートをUX Pinからダウンロードする

ユーザーのためにデザインする

登録フォームをデザインする際に必要なこととして、以下ようなポイントが挙げられます。

スパムメールの不安をなくす
わかりやすいフォームを作る
不必要に複雑にしない

フォームの効率は、フォーム全体の簡単さに依存します。ユーザー候補が10分も登録フォームとにらめっこするようなことは避けなくてはなりません。数秒のうちにデータ入力および登録が完了できるようにしましょう。

私の知る優れた登録フォームでは、ユーザーのためにさまざまなことをしています。

Hunchのフォームを見てみましょう。無駄な時間と労力を省くために、FacebookやTwitterアカウントでサインインするように促しています。“Why be old-fashioned?”（その方法、古臭くない？）という直接的でくだけた表現が親しみやすさを演出しています。

HunchのSNSサインインは時間と労力を節約する

登録とサインインフォームに戸惑いしかもすでにアカウントを持っている人（よくあるケースなのです！）のために、 Hunchは正式なフォームに移行するためのわかりやすいオプションも用意しています。

Hunchの登録フォームのワイヤーフレームテンプレートをUX Pinからダウンロードする

私のお気に入りの登録フォームの１つに、Podioの優秀な制作チームがデザインしたフォームが挙げられます。Podioの２つの登録フォームは、ユーザーのために徹した良い例です。

ホームページ上で最初に現れるフォームは、１つのフィールドと４つのアイコン、説明で構成されたショートカットです。何の心配もありません。数字の１，２，３と同じくらい見てわかりやすいフォームです。

Podioのミニサイズの登録フォーム。限りなく簡単。

この登録フォームでは時間の無駄だと捉えられることはないでしょう。メールアドレスの入力や適切なSNSサインイン選択に10秒もかかりません。これはとても印象的な構想です。

Podioのミニサイズ登録フォームのワイヤーフレームテンプレートをUX Pinからダウンロードする

Podioの登録フォームの大きい版（メインサイズ）はさらに優秀です。わかりやすく説得力のあるシンプルなフォームから、Podioのデザイナーたちの広い知識がうかがえます。

Podioのメインサイズ登録フォーム

Podioのフォームフィールドは、たったの１つです。しかしSNSサインインのオプションはよりわかりやすくなっています。一般的なFacebookやTwitterでの登録以外にも、GoToMeetingでのサインインなど仕事目的での利用を考える顧客にも対応しています。

Podioのメインサイズフォームのマイクロコピーはただただ秀逸です。「Good decision.」という見出しを付けることにより、全登録過程を含む積極的なフレームを形成しています。私はこれが単純に好きです。また、Podioでは強力な視覚的表現による社会的証明をうまく利用しています。つまり、Podioの利用者を表示するのです。彼ら利用者にとって有益ならば、あなたにとっても有益ではないかというのです。

Podioが完璧だと言えないのは、「アスタリスク」の使い方で手抜きが見られるからです。

第一に、１つのフィールドしかない場合、その中にアスタリスクが必要です。第二に、フォームラベルの隣にアスタリスクを付けるのであればその説明が必要です。

Podioの登録フォームをUX Pinからダウンロードする

コピーの数

Podioの登録フォームの事例から、登録フォームをデザインする上で優れたコピーがいかに役に立つかということが分かりました。登録プロセスに製品を売り込む気の利いた情緒的なコピーを入れることで、ユーザーの不安をなくしています。

Basecampでは、彼らの実際の顧客を写真と「先週7,087の企業がBasecampに登録しプロジェクトを運営しています。今日は貴社の番です。」というコピーを表示することで社会的証明をうまく活用しています。これは強力な解決策です。

Basecampの説得力のある登録フォーム

Basecampではまた、「登録は１分もたたずに終わります」と明記し、登録プロセスが簡単ですぐに終わることを強調しています。さらに、アカウントがある人は、フォームに入力する必要がありません。「ログインはここから」からログインできるのです。

このBasecampのフォームは私が見てきた中で一番説得力のあるフォームです。

Basecampの登録フォームのワイヤーフレームテンプレートをUX Pinからダウンロードする

秀逸なコピーは、細かいディテールまでこだわるべきです。コールトゥアクション（CTA）は、小さなものかもしれませんが非常に重要です。驚いたことに、「フリートライアルを始める」や「無料登録」などの標準的なCTAを採用しているフォームがほとんどです。コンテキストを意識したCTAの優れた例としてTumblrの登録フォームが挙げられます。