離脱されない入力フィールド(入力欄)のデザイン方法。6つの要素を徹底解説

フォームの記入など、さまざまな場面で登場する「入力フィールド（1行の入力欄）」。

コンバージョンを意識したUIデザインにおいて鍵となる要素です。

この記事では、ユーザーに離脱されない入力フィールドをデザインするコツをご紹介します。

入力フィールドを構成するもの

入力フィールドは以下の要素で構成されています。

1. 入力ボックス
2. 先頭のアイコン
3. ラベル
4. プレースホルダー／入力テキスト
5. 末尾のアイコン
6. 説明テキスト／エラーテキスト

以下、項目毎にデザインのポイントをご紹介します。

1. 入力ボックス

ボックスの大きさは、入力テキストの長さに合わせる

入力ボックスの大きさは、入力フィールドへ記入するテキストの、予想される長さに合わせて設定しましょう。それよりも短いと、入力した内容をユーザーが確認しにくくなってしまいます。

スクロールせずに一目でテキストを確認できるよう、ボックスのサイズを調整しましょう。

▲左：テキストに対して小さすぎるボックス　右：テキストに対して適切な大きさのボックス

入力フィールドの長さは、回答の長さの目安をユーザーに示す役割もあります。例えば、ZIPコード（米国の郵便番号に相当）は5ケタまたは9ケタの数字なので、必要以上にボックスを大きくしてしまうと、ユーザーが混乱する原因になります。

▲上：文字数に対して大きすぎるボックス　下：文字数に対して適切な大きさのボックス

ボックスはすぐに見つけられるように

入力フィールドは、ユーザーが簡単に見つけられるよう、他の要素とのコントラストを調整して目立ちやすいようにデザインしましょう。

ステータスを一目で確認できるように

デフォルト、フォーカス、エラー、無効などといったステータスを、一目で確認できるよう、デザインを工夫しましょう。

▲アクティブとアクティブでない入力フィールドの例

ボタンと見間違わないように気をつける

入力フィールドは入力フィールドらしくデザインし、間違ってもボタンに見えるなどというデザインは避けましょう。

▲ボタンに見えてしまう例

アプリのデザインに合わせてビジュアルデザインを決定する

ボックスの角を丸くするか、角を出すかは、アプリのデザインを考慮した上で決定しましょう。

2. 先頭のアイコン

入力フィールドの頭につけるアイコンは、記入すべき情報の属性を視覚的に把握するのに役立ちます。

ラベルテキストを読まなくてもそのフィールドに何を入力すべきかわかれば、よりスピーディに記入できますね。

▲ユーザーIDを記入する入力フィールドでは、人型アイコンがよく使われる

3. ラベルテキスト

入力フィールドには、どんな情報を入力するのかを示すラベルが必要です。

ラベルの書き方は明確に

誤解のないよう、誰でも一目で理解できる分かりやすいラベルをつけましょう。

少ない文字数で

ラベルは説明書きではないので、長文はもちろん避ける必要があります。少ない文字数で記述しましょう。

ラベルは常に見やすい位置に

よいラベルの位置には2種類あります。

ひとつめは、入力フィールドのボックスの上にラベルを置く方法です。

▲入力ボックスの上にラベルテキストを提示した例

ふたつめは、ボックス内にラベルを入れる方法です。

この場合、ユーザーが入力フィールドをクリックすると、自動的にラベルが上部に移動する仕組みがあるとよいでしょう。

▲上：クリック前　下：クリック後

ラベルは途中で途切れたり、複数の行にまたがったりしないように

ラベルは、途中で切れてしまわないように気をつけましょう。

また複数の行にまたがるような長いテキストが必要な場合は、ラベルとは別に説明文を活用しましょう（「6. 説明テキスト」でも紹介）。

▲左：ラベルテキストが途切れてしまっている例　右：ラベルテキストを短く提示し、さらに入力ボックス下に補足説明を加えた例

4. プレースホルダー／入力テキスト

ユーザーが入力を始める前に、入力フィールド内にデフォルトで書かれている仮の情報をプレースホルダーと呼びます。

それに対し、ユーザーが実際にタイプした文章が入力テキストです。

プレースホルダーは、テキストとコントラストに注意する

プレースホルダーは、テキストの書き方とコントラストに気をつけましょう。例であることがわかるように記述し、更にコントラストを下げることで、それがプレースホルダーであることが明確にユーザーに伝わります。

例えばユーザーの住所を入力してもらいたい場合、プレースホルダーとしてすでに都市名が書かれていると、ユーザーは混乱してしまうでしょう。

▲左：何の説明もなく「San Francisco」と書いてある例　右：あくまで例として明示した上で「San Francisco」と書いてある例

必要であれば、入力フォーマットを示す

明確なフォーマットがあればプレースホルダーとして記述しておくと、ユーザーがスムーズに入力できます。

▲左：どのような形式で誕生日を記入すれば分からない　右：明確に記載方法が提示されている

ユーザーが入力したものに自動でフォーマットを与えるのも良いでしょう。後にデータを扱う際に、こうしてフォーマットを揃えておくと便利です。

▲電話番号を記入すると、自動でフォーマット化してくれる例

選択されているボックスが分かるように

選択しアクティブになっているボックスには、明確にハイライトをつけるようにしましょう。アクティブな場合は、常にカーソルを表示しておくと、ユーザーの混乱を防げます。

単位も入れておくとよりわかりやすい

金額や重量など、入力フィールドの情報に特定の単位がある場合は、単位のマークをつけておきましょう。

▲ドルマークのついたテキストフィールド

デフォルト値の設定は慎重に

ユーザーの大多数がある値を選択することが明らかな場合でなければ、デフォルトの値を入力しておくのは避けましょう。ユーザーはすでに埋まっているフォームを読み飛ばしてしまうからです。

5. 末尾のアイコン

末尾についているアイコンは、ユーザーにとって非常に便利です。

クリアボタン

クリックひとつで記入内容をクリアできるボタンを末尾につけておくと、ユーザーが誤記入した場合も簡単に再入力できます。

▲ボックス内右側の「×」マークをクリックすると、それまで入力してい内容がクリアされる

ステータスを表示するアイコン

アイコンを使って、入力した内容が有効か、あるいはエラーがあるかをユーザーに教える機能がつけられます。ユーザーが誤った情報を入力した場合は、赤いアイコンでエラーメッセージを表示しましょう。その際、入力ボックスの下に、同じ色で説明文も添えます。エラーが正されれば、自動的に消える仕組みです。

エラーメッセージは、単にエラーだということを伝えるのではなく、どのように問題を解決すればよいかのアドバイスと共に文脈に合わせた文章にしましょう。

▲上：ユーザーIDが間違っている旨をエラー表示してくれている　下：ユーザーIDが正しいことを視覚的に表示してくれている

目玉マーク

目玉マークを押すと、パスワード情報を隠すか隠さないかを選択できます。

▲上：パスワード非表示　下：パスワード表示

音声入力アイコン

音声入力が可能な場合は、アイコンで示しましょう。

▲マイクのマークで音声入力が可能なことを視覚的に伝えている

6. 説明テキスト／エラーテキスト

説明テキストは、ユーザーの情報がどのように使用されるかをユーザーに伝えたり、パスワードを設定する際のガイドラインを表示したりなど、情報入力の必要条件を伝えるのに役立ちます。

状況に応じて、エラーテキストと入れ替えて使用できます。

説明テキストは複数行にまたがってもOK

説明文が1行以上になってしまう場合でも、ボックスの下部に表示される説明テキストであれば問題ありません。

まとめ

不便で不親切な入力フィールドでは、せっかくのリード顧客が離脱してしまう可能性があります。

マーケティングの効率化に欠かせない入力フィールドのUIデザインについて、この記事が参考になれば幸いです。

（原文：Nick Babich　翻訳：Sugita Mariko）

こちらもおすすめ！▼