スマホ入力フォームのデザイン｜UI/UXを高めるポイント10選

• efo
• デザイン, 入力フォーム, 変更, 改善事例

本記事では、スマホの入力フォームをデザインする際のポイントをご紹介します。

オンライン上での消費活動が増える今、入力フォームは事業者とユーザーをつなぐWeb上の重要な接点です。

申込直前の入力フォームで離脱させないために、すぐに実践できる入力フォームのデザインで意識するところを解説していきます。

スマホだけではなく、PCも同様に効果があるのでぜひ参考にしてください。

スマホの入力フォームデザインが重要な理由と改善事例

入力フォームのデザインが重要なのは、CV率に直接影響を与えるからです。

デザイン変更だけで、本当に離脱は減るの？CV率は向上するの？と半信半疑の方もいるでしょう。

下記は東急カード様の事例です。

入力フォームを最適化する「フォームアシスト」というサービスを導入し、スマホ画面のレイアウトを最適化した事でCV率が6.9％も改善しています！

スマホの入力フォームをデザインする際のポイント10選

入力フォームのデザインポイント1：項目をまとめる

入力項目は極力1カラムのデザインを採用しましょう。理由は、カーソルイン移動の手間を減らせるからです。

入力フォームにおいて作業量の削減はユーザーの負担軽減に繋がり、離脱削減を見込めます。

入力フォームのデザインポイント2：縦のラインを揃える

入力フォーム全体の縦ラインを揃えましょう。

項目の幅不揃いだと入力しずらい印象を与える可能性があります。最低限のデザイン性や統一感は意識しましょう。

入力フォームのデザインポイント3：ステップナビを設置する

入力フォームのファーストビュー内にステップナビの設置をお勧めします。

自分が今何の入力作業をしているか、全体の入力量のうちどれ位進んだのか等、現状のステータスを知らせ、ユーザーを安心させましょう。

入力フォームデザインのポイント4：難易度の低い項目から配置する

入力難易度が低い項目から配置しましょう。難易度が低い項目を先頭に配置する事で、入力開始率の改善を期待できます。

入力難易度が低い項目とは、「名前・生年月日・性別」等です。要は、反射的に入力可能な項目を指します。

反対に、「メールアドレス・運転免許証・クーポン番号・日時選択」は入力難易度が高い項目です。主に、準備・参照・調整が必要な項目が該当します。

入力フォームのデザインポイント5：フォントサイズとカラーを最適化する

入力フォームのフォントサイズとカラーを上手に活用しましょう。

全て同じフォントサイズ・カラーでは、メリハリが付かず重要なポイントに目が行きません。

まずは、「項目名→記入例→注釈」の順で目立つデザインを意識してみてください。

入力フォームのデザインポイント6：案内を非表示化する

基本的に、入力フォームは項目名と入力欄（項目）があれば成立します。しかし、お知らせや申し送り事項等、ユーザーへの伝達事項が多いのが現状です。

企業側に負い目が無いよう、丁寧に細かく注意書きを羅列していませんか？

特定のユーザーにのみ該当する注釈や法的に表示不要な内容はデフォルトで非表示化しましょう。

ユーザー自身で情報の取捨選択ができるデザインが理想です。

また、デフォルトで非表示化する事でページ全体が短く、文字量が減るためスッキリとした印象になります。

入力フォームのデザインポイント7：CTAボタンを最適化する

入力フォームのCTAボタンは、「押すとどうなるのか」が伝わるデザインや文言にしましょう。

「次のページに進むのか・前ぺージに戻るのか・押すと申し込んだ事になるのか」等、ユーザーが安心して行動出来る様にデザインしましょう。

また、進むためのボタンが目立つデザインを採用すれば、誤操作によるページ戻りも防止できます。

入力フォームのデザインポイント8：必須項目のデザインを最適化する

ユーザーは面倒な作業、手間を嫌う傾向にあります。必須項目を強調し入力フォームを最短で駆け抜けてもらいましょう。

入力フォームのデザインポイント9：不要な項目を設置しない

申込みに不要な項目を設置している入力フォームを良く目にします。例えば、アンケート項目や金融商材のフォームによくある審査項目です。

・アンケートデータは集計して本当に活用していますか？
・審査には不要だけど「情報として欲しい」という理由で項目を設置していませんか？

該当する場合は、見直しを検討しましょう。

入力フォームのデザインポイント10：レスポンシブ対応を行う

項目にカーソルを合わせると、画面が拡大（＝ピンチイン）される入力フォームを見かけます。

スマホ用の画面幅で表示されていないため、いちいち指で画面を縮小しながら入力を進める必要があり非常に面倒です。レスポンシブ対応を行い適正な画面幅でユーザーに表示しましょう。

レスポンシブ対応の概要を知りたい方＞＞レスポンシブ・スマホ対応に関する記事を読む

入力フォームデザインのまとめ

入力フォームにおけるデザインのゴールは「入力すべき内容が正確に直感的に伝わる事」です。

入力作業は「必要不可欠だけどやりたく無い事」です。ユーザーが重い腰を上げ、「これなら入力してもいいかな」という気持ちにさせるデザインはどの様なものでしょうか。

ユーザーの目線に立ち、少し気の利いたデザインを取り入れる事で入力開始率・CV率を改善しましょう！

入力フォームのCV改善するなら「フォームアシスト」

フォームアシストなら軽微な修正から大掛かりなデザイン変更まで弊社で対応可能です。

ABテストやレポート機能、専任コンサルタントがお客様固有の課題解決まで、ユーザーの反応を確認しながらPDCAサイクルを回す事が可能です。

お悩み解決だけでなく、トレンドも取り入れたCV率の高い入力フォームをデザインし実装まで行います。