アプリケーションをデザインする際、ほとんどのデザイナーはコンテンツページには労力を費やしますが、登録フォームは見過ごしがちです。ユーザーが辿り着くのは、視覚的に魅力がなく、無味で事務的なフォームです。白いバックグラウンド、まっさらなテキストフィールド、煩雑な文章、不快な黒のアウトラインがあちこちに散らばった、登録のモチベーションを掻き立てないフォームです。もしあなたのフォームがそんな状態であれば、改善の余地ありです。
あなたのアプリを使いたいユーザーはフォームの見た目に関わらず登録はしてくれるでしょう。しかし、まだ決めかねているユーザーは事務的なフォームを見て辞めてしまうでしょう。第一印象で多くの見込み顧客を失っている可能性があるということです。もっと機能的で魅力的なフォームにすることで、ギリギリで決めかねているユーザーの背中を押すことができます。
ビジュアルがユーザーを後押しする
フォームをお堅いものではなく、魅力的なものにすることでユーザーがアクションを起こす後押しになります。しかし、ビジュアルを向上するのにも限度があります。ビジュアルに特化しすぎると、フォーム入力の際に気が散ります。また、フォームは機能的でなければいけません。ラッキーなことに、シンプルなテクニックを用いることでその両方を満たすことができるのです。
オフホワイトのテキストフィールド
サインアップフォームを魅力的で機能的にするテクニックとは、テキストフィールドまたはその背景をオフホワイトにすることです。オフホワイトとは、白に淡い色調を混ぜた色です。これをフォームに使うと、陳腐でお堅いフォームが新鮮で活気のあるものになります。それだけでなく、周りの視覚的ノイズを減らす効果があり、テキストフィールドが一目で分かるようになります。
オフホワイトのテキストフィールドによりそれぞれの入力項目が目に入りやすくなり、ユーザーはすぐに判別がつきます。入力欄へ注意が向くため、入力・確認・修正がしやすくもなります。それに比べると事務的なテキストフィールドは、視覚的ノイズを多く生みます。欄外のテキストと入力したテキストがごちゃ混ぜになって、入力欄に集中するのが難しくなります。
オフホワイトの背景も入力欄へ注目しやすくします。テキストフィールドの白いスペースを引き立たせ、欄外のテキストを目立たなくするのです。結果として、テキストフィールドの色調が際立ち、明確になります。
オフホワイトはグレーではないことも述べておきます。グレーのテキストフィールドは「使用できない」もしくは「アクティブではない」とユーザーに受け取られるので、使用を避けましょう。入力文字とプレースホルダーのテキストが読みづらくなるという欠点もあります。
フォームをブランドのテーマカラーにする
オフホワイトの色を決めるとき、適当な色にはしないようにしましょう。ブランドと一貫性のある色にすることによって、フォームがきちんとした見栄えになります。ブランドカラーの明るさと彩度を調整し、適切なオフホワイトを見つけましょう。
明るさを100％近くまで上げ、彩度を５％近くまで下げます。明るさを100％から数度下げることにより、グレーの色合いを出すことが出来ます。彩度を下げるとオフホワイトの色調が下がります。入力欄の枠に少し暗いオフホワイトを配色することで、深みを出すこともできます。
オフホワイトの選択肢は豊富です。どんな色調を使いたいかによって使い分けましょう。明るさと彩度のレベルは大体同じくらいの範囲に収めるようにしましょう。ブランドにぴったりのオフホワイトを見つけてください。必ずしもメインのブランドカラーを使う必要はありません。サブカラーでも大丈夫です。以下は、人気ブランドのテーマカラーを使ったフォームの例です。
登録フォームを新鮮に
登録フォームは必ずしも無味で事務的である必要はありません。事務的な見た目はほとんどのユーザーを遠ざけてしまいます。視覚的な魅力を加えることは、時間も高いデザインスキルも必要としません。そして機能性を上げることはフォーム全体の改修を必要とするわけではありません。テキストフィールドを正しいオフホワイトカラーで強調することで、フォームを新鮮なものにでき、以前より多くの登録が見込めるのです。
