少しの工夫でCV改善！フォームデザインのコツ15選【EFO】
原文：https://www.uidesign.tips/blog/top-ui-ux-design-tips-for-better-forms
著者：Jim Raptis
本記事は2021年6月17日に公開された情報を和訳、追記したものです。
英文を翻訳したものであるため、詳細や正しい表現は原文を参照ください。
フォームはUIの全体を支える大切な部分です。また、企業・サービスとユーザーにとっても重要なコミュニケーション手段です。
しかし、依然として質の悪いフォームも存在しており、それが原因で離脱してしまうユーザーが多いのが現状です。
そのような事態にならないよう、ユーザー体験を重視し、簡単に利用できるフォームを作成するための15個の実用的なヒントを紹介します。
ここにあるちょっとした工夫を意識することでCV（コンバージョン）が増え、EFO（Entry Form Optimisation、入力フォーム最適化）を実現することができます。
01.常にラベルを使用する
ラベルはフォームにとって非常に重要なので、常に表示しておきましょう。ユーザーにとって、入力欄が何であるかを推測することはとても大変です。
デザイナーは入力欄を作成する際にラベルを非表示にする場合がありますが、かえってユーザーを混乱させてしまうので避けるべきです。
02.「Zパターン」を避ける
入力欄をグリッドに配置すると、ユーザーがZパターンに従うように誘導されますが、わかりづらいのでこれはオススメしません。
Zパターンの入力欄を垂直線上にすれば、ユーザーはすばやくフォームに目を通して簡単にタスクを完了（フォームに入力）することができます。
03.入力欄の上にラベルを配置する
上で述べたヒントに付け足しで、入力欄の左側に配置されたラベルは、Zパターンを再現してしまいます。
ユーザーが簡単に目を通せるように、入力欄の上にラベルを配置することをオススメします。
ただ、フォームが少ない場合（1〜2画面未満）、フィールドの左側にラベルを配置しても問題はありません。
04.右揃えのラベルを使用する
フォームの左側にラベルを使用することになった場合は、ラベルのテキストが右揃えになっていることを確認してください。
これにより、フォームが伝わりやすくなるだけでなく、ユーザーがページを見やすくなります。
05.関連する入力欄をグループ化する
まとまりの無いフォームはユーザーの意欲を失わせ、悪いイメージを与えてしまうことがあります。
解決策は、関連する入力欄をサブセクションにグループ化することです。
さらに使いやすくするために、各サブセクションにCTAの「保存」ボタンを配置して、ユーザーが入力を個別に保存できるようにすることもできます。
06.ユーザーフローを尊重する
多くのユーザーがフォームに入力する際、項目を順番に埋めていき、最後に送信します。これが基本的なユーザーフローです。
この特徴を活かし、フォームの最後にCTAボタンを配置します。UIおよびUXデザインにフィッツの法則を適用する特徴的な例です。
原案のフィッツの法則のリンク先は以下です。
https://lawsofux.com/fittss-law/
翻訳記事のため日本語ページをリンク先に変更しています。
07.空白を設ける
デザインにとって空白は大切な存在です！
フォームをより美しく見せるために、入力欄の間に十分なスペースを残してください。空白の少ないフォームはユーザーにとって入力しづらく避けられがちです。
08.ラベルの繰り返しを避ける
デザインする際、常に同じ情報やデータを繰り返すことは避ける方が良いです。フォームの場合は特に、フィールド上の不要な情報をなるべく省略する必要があります。
例えば、3つの必須項目と1つ任意項目の場合は「任意項目のみユーザーに表示」するようにします。
逆に3つの任意項と1つの必須項目がある場合は、「必須項目のみユーザーに表示」するとユーザーにとってとても見やすいフォームになります。
09.エラーの説明メッセージ
フォーム入力においてエラーはよく起こってしまいます。
エラーが起こった時にユーザーが知りたいのは、エラーの理由とそれを修正する方法です
よく「エラーが起こりました」とエラーの発生を知らせるフォームが存在していますが、それだけでは良くなく、エラーの原因を常に詳細に説明し、ユーザーに親切であることが大切です。
10.必要に応じてドロップダウンを使用する
フォームの入力欄に適切なUI要素を選択することはとても重要です。しかし、どの要素を選択するか判断に困る場合もあると思います。特によく耳にするのは「ドロップダウンボタンとラジオボタンの使い分け」です。
原則3つ以上の選択肢がある場合にドロップダウンを使用しましょう。
選択肢が少ない場合には、ユーザーがすべての選択肢を事前に確認できるラジオボタンを使用するのが良いです。
11.プレースホルダーを活用する
プレースホルダーテキストは、ユーザーにわかりやすく入力方法を伝えるための優れた方法です。「ここに入力してください」という一般的なテキストを入れるのではなく「入力例」を表示してあげることで、ユーザーは入力しやすくなります。
12.ボタンは1つだけにする
複数のCTAボタンはユーザーを混乱させてしまいます。単一のCTAを使用しシンプルな表現を心がけましょう。より多くのCTAボタンが必要な場合は、メインのボタンより目立たないように使用しましょう。
13.ボタンテキストは実用的にする
コピーライティングは、デザインと使いやすさにおいて重要な役割を果たします。フォームの送信ボタンには、送信、次へ、移動などの単語は使わない方が良いです。ユーザーが次のアクションが判断しやすい言葉を使うようにしましょう。
（例） サインアップフォームの場合：「アカウントの作成」 順番待ちリストフォームの場合：「1000人以上の開発者に参加」 フィードバックフォームの場合：「フィードバックを送信してください」
14.適切な入力タイプを選択する
すべてにテキスト入力を使用しないでください。内容に合わせた入力欄を作成しましょう。特別な処理が必要なコンテンツタイプは多数あります。例えば、電話番号、クレジットカード、ウェブサイトのURL、国、日付、色などそれぞれの内容に合わせた入力欄を作成しましょう。
15.制限の内容を事前に表示する
ほとんどの入力欄には、文字数制限、番号のみ/日付範囲、電話番号などの制限があります。ユーザーが戸惑わないように、事前に制限の内容を表示しておいてください。