第0回　その気になった客を逃さないフォーム設計術

第0回
その気になった客を逃さないフォーム設計術

現実の店舗や窓口では、目の前にいるお客が困っていればすぐにわかるし、同じトラブルが重なれば問題が起きないように施策をとる。しかし、ウェブサイトを作っているときにはお客は目の前にいないし、公開後にお客の対応をするのはウェブサーバーやスクリプトという機械だ。そのため、現実の商売では当然のように行っている接客ができない、いや忘れてしまってはいないだろうか？

今木 智隆（株式会社ビービット [1]）

ウェブサイトの「ユーザビリティー」という言葉は、当たり前のように耳にする機会が増えてきた。しかし、その知名度の広まりとは裏腹に、「何をどうすれば成果に結びつくのか」「実践に落とし込むにはどうしたらよいのか」について具体的に取り上げられることは少ないようだ。

この連載では、主に「会員登録による顧客獲得を行う企業サイト」をモデルとして、想定される次のようなユーザーの行動ステップごとに、具体的なウェブサイトのユーザビリティー向上策について解説する。

これらの各ステップについて、それぞれ対応すべき事項があるが、今回はその中でも、「比較的短期間の改善が可能」であり、「それが会員登録の達成率（サイトの成果）に直結しやすい」という理由から、会員登録・申し込みフォームの部分を扱う。ビービットが繰り返し行ってきたユーザビリティーテストの知見を元に、改善に向けてのポイントを解説する。

ウェブサイトは 「セルフサービスメディア」

具体的なフォームの設計へ移る前に、なぜウェブサイトにおいてユーザビリティーが重要なのかを説明したい。

たとえば、旅行代理店に旅行やチケットを申し込む、あるいは銀行で口座開設の手続きを行うという状況を考えてみよう。

店頭でこのような契約・申し込みに関する書類を記載するときには、どうしても記入につまずくことがある。しかし、旅行代理店や銀行ではその場に担当者がいて対応してくれるため、問題なく申し込みを完了できることがほとんどである。

しかし、ウェブサイトのフォームを通じて会員登録や申し込みなどを行う場合、このような「人による個別対応」が不可能である。そのため、登録や申し込みに当たって、フォームへの入力をスムーズに行うことができなかったユーザーは、容易にサイトから離脱してしまうのである。

せっかく「登録しよう」「申し込んでみよう」と思ってくれたユーザー（顧客）を取り逃がしてしまうことは、企業にとって大きな損失である。担当者も受付係も存在しないウェブサイトだからこそ、ユーザーが迷うことなく登録を完遂できるように、最大限の注意を払って設計を行うことが重要となる。

では、フォーム入力の完遂率を向上させるための具体的なポイントはどういうものがあるのだろうか。まずは、サンプルフォームを見てもらいたい（図1）。このフォームには、いくつもの「ユーザーを離脱させる要素」が含まれているが、おわかりだろうか？

解決！ 問題だらけのフォーム設計

(1) 住所入力部分

住所入力、特に郵便番号の入力はフォームの中でもユーザーが手間取る箇所である。サンプルフォームでは、入力のパターンが例示されていないため、「全角入力なのか、半角入力なのか」「ハイフンは入れるべきなのか」といった点がわからず、エラーを起こす確率が大きく跳ね上がる。

現実の世界では、役所や定期券売り場には、必ずと言っていいほど入力サンプルが置いてあるのを思い出してほしい。入力エラーによってユーザーが脱落するのを防ぐためには、「例：952-0012」のように記入例を明記するといい（もちろん、さまざまな入力パターンにシステムで対応することが最も理想的な解決案ではある）。

ただし、入力している部分から離れたところに入力例が書かれていては意味がない。ユーザーは入力に集中しているため、入力フィールドから離れた位置にこれらの情報を提示しても気づかないことが多い。記入例や注意点は、入力フォームの横・または下に表示するのが適切である。また、郵便番号の入力により、自動で住所の一部が入力されるボタンを用意するなど、ユーザーの負荷を軽減する改善策を施すとなお良いだろう（図2）。

(2) 電話番号

電話番号についても、郵便番号入力と同じ問題が存在する。ユーザーが適切に入力できるように、例を示す必要があるだろう。

(3) 職種

この項目は、本当に尋ねる必要があるだろうか？ ユーザー、特にキーボード入力に慣れていない初心者にとって、フォーム入力作業は非常に面倒なものである。それにもかかわらず、運営者側は顧客情報をなるべく多く集めようと、項目数を増やしがちである。

質問を増やせば増やすほど、ユーザーの離脱率は高くなる。このことを理解し、可能な限り質問項目を絞り込むべきである。

(4) 収入

必要な項目であっても、この尋ね方では、ユーザーは求められているものが「年収」なのか「月収」なのかがわからない。フォームの項目設定にあたっては、入力項目や選択項目にユーザーの誤解を招くような表現がないかどうかを一度吟味する必要がある。

また、金額入力欄は、数値での直接入力ではなく選択肢形式にすれば、ユーザーはどのような内容が求められているのかを悩まなくてもフォームの入力を続けられるだろう。選択肢による入力は、記入例を示す役割を兼ねているのだ（図3）。

(5) メールアドレス

メールアドレスは、インターネットにおける連絡手段として、必ず正確な情報を入手する必要があるが、同時にユーザーが入力ミスを起こしやすい項目でもある。

システム側によって、最低限の書式ミスを判定することは可能であるが、スペルミスについては防ぎようがないため、特に顧客登録のような重要なフォームについては、ユーザーの負担が上がることを承知の上で確認のための2度入力を行ってもらうべきだろう（これはパスワードを求める場合についても同様である）。

これらの問題点を改善すると、フォームは図4のようになる。

エラー画面にも ユーザビリティーを

フォームの設計において、入力フォームの画面設計と並んで非常に重要なポイントとして「エラーの見せ方」がある。エラーは起こるものだという前提で、一度生じたエラーからの復活をいかに簡単にするかによって、フォーム入力の完遂率は大きく変化するからだ。

よく見られる悪い例としては、ページの上部にエラーメッセージが小さく表示されるというものがある。ユーザーは実際に入力できるフィールドに目を向ける傾向があるため、入力箇所から遠い場所にエラー文言が表示されていても、どこが間違っているかわからないどころかエラーが発生したこと自体に気づかず、エラーを繰り返してしまいがちだ。

また、フィールドのラベルに赤く色を付けるだけでエラー箇所を示すサイトも多いが、これには、色覚障碍のユーザーが エラー箇所を把握できないというアクセシビリティー上の問題がある。エラー箇所のすぐ近くに、エラーだとわかるような印とともに、どう対処すればエラーから脱出できるのかを具体的に記述することが重要になる（図5）。

実際の店舗などでも、書類や申込書を提出しようとしたときに「これじゃダメ」とだけ言われて突き返されたら、何が悪いのかわからず途方に暮れるだろう。「ここをこういう風に直してください」と“わかりやすく”説明するべきなのは、実店舗でもウェブサイトでも同じことなのだ。

その他のフォーム設計に おけるポイント

複数ページにわたるフォームでは現在地を明記する

入力項目が多く、複数ページにわたるフォームの入力作業では、ユーザーに対して今どの位置にいるのかを常に表示することが重要である（図6）。ただし、この表示はページのどこにあってもいいわけではない。表示場所は、画面が切り替わったときにすぐに目に付く位置がいいだろう。

SSL対応状況を明示する

ユーザーによっては、個人情報をインターネット上で入力・送信することに不安を感じていることがある。そのような不安を解消する目的で、フォームへの入場前後において、暗号化によって情報が保護されていることを画像によって表記するといい。

以上、フォーム設計によって起こりやすい一般的な問題点について、具体例を示した。冒頭でも述べたが、これらの改善の中には、比較的短期間での見直しが可能なものも少なくない。今すぐにフォームを見直して、「使いやすい」かをチェックしてほしい。

良いサイトに学ぶ ユーザビリティーの高いフォーム

ウェブサイトのフォームといっても、その設計指針は一様に決まるものではなく、サービスの内容によってさまざまな設計パターンが考えられる。優れたフォームを実装しているサイトの例をいくつか挙げたので、設計のポイントを掴んでほしい。

ワイキューブ資料請求フォーム

人材コンサルティング会社の請求フォームであることから、法人を意識したフォーム設計がなされている。また、入力フォームの項目の組み立てや必須項目と任意項目の使い分けなど、特にB to Bサービスを手がけるサイトのフォーム設計において参考にすべき点が多い。

三井住友銀行 One's Style 申し込みフォーム

このURLから1ページ進むとフォームのページになる。記入内容の多い金融サービスの申し込みを、ステップを切って実装している。数字入力は半角・全角の両方に対応しており、ユーザーへの配慮が伺える。また、項目によってプルダウンメニューとラジオボタンをうまく使い分けている点も参考になるだろう

※この記事は、『Web Master完全ガイド vol.2』掲載の記事です（掲載時タイトル「商売を繁盛させるウェブサイト接客術」）。