スマホ入力フォームを最適化する4つの方法 （後編）

「スマホ版：入力フォーム改善メソッド（後編）」です。
今回は入力エラーを未然に防ぐ４つのメソッドを解説し、スマホサイトのフォーム離脱を防ぐUI改善施策（EFO）を紹介します。

▼前回の記事はこちらから
スマホ版入力フォーム改善メソッド（前編）〜膨大な項目数と情報量をもつ入力フォーム〜
/archives/647

【いますぐチェック！】入力エラーを未然に防ぐ４つのメソッド

スマートフォンなどのタッチデバイスは、指で直感的に操作できる一方、タップ領域がPCとは異なるため細かな操作が苦手です。
フォームに関してはその影響が顕著です。誤タップによる入力エラーや、ユーザー負荷が高い選択項目を設けてしまうことで、ユーザーのページ離脱に直結することもしばしば。高いコンバージョン率を達成する為には、デバイスの特性に沿ったUIを選択することが重要です。
UIの見直しでユーザーストレスを軽減し、快適かつ的確な情報入力を促しましょう。

1．タッチエリアを調整しよう

ボタン領域が小さかったり要素同士が隣接しすぎると、スピーディーな入力をすることは不可能です。タッチエリアを意識し余白や横幅を調整するだけで、選択項目の誤タップを大幅に改善することができます。

2．テキスト入力をなるべく減らそう

スマホでの文字入力は、PCに比べると大幅に時間がかかります。スマホサイトの入力項目は、なるべくテキスト入力は無くす事を意識しましょう。「生年月日」や「都道府県」など、値が固定できるものはプルダウンで選択させることでエラーを未然に防ぐことができます。

3．radioボタンをカスタマイズしよう

PCサイトで頻繁に使用されるradioボタンも、スマホサイトだと視認性が悪く、タッチエリアも統一されていないため使い勝手がよいUIとはいえません。
radioボタンはボタン化し、よりスマホライクに変身させましょう。

項目数の多いradioボタンの場合、selectボックスとして配置すれば表示エリアのボリュームダウンにもつながりますよ。

4．入力ボックスには適切な入力モードを設定しよう

スマートフォンでは、入力ボックス毎に入力モード（typeプロパティ）が設定できます。
適切なtypeプロパティを指定することで、デフォルトで立ち上がるキーボードを固定できます。これにより半角 or 全角のような基本的なエラーも意識せずに回避することができます。

入力フォームUI最適化の成功例

前編〜後編にわたって入力フォームのスマホ最適化について解説しました。では、これらの内容を網羅した入力フォーム最適化の２つの成功例をご紹介します。

ページ分割でユーザーストレスを軽減！SBI損保「自動車保険見積もりお申込みサイト」

ページ分割を効果的に使用
入力項目数の多さを感じさせない簡潔で分かりやすい入力フォーム
https://www.symmetric.co.jp/genecode/customers/sbi/

UI改善でコンバージョン率2.4倍UP！セゾン自動車「おとなの自動車保険」

統一性のあるUIと効果的なモーダル表現でフォーム全体の入力エラーを回避
テキスト入力が無いまま試算結果まで遷移できるのも◎
https://www.symmetric.co.jp/genecode/customers/ins-saison/

どんなに綺麗なサイトを作っても、フォームで離脱されては意味がありません。
あなたのサイトのフォームで離脱率が高いようなら、フォームの内容に問題があることは明らかです。
今回のフォーム最適化でUIを見直してみてください。

スマホサイトのUI改善、どうぞお気軽にお問合せください。

弊社の製品である「ジーンコード」を使用すれば、これらのUI変換も容易に行うことができます。
スマホサイトのUI改善にお悩みなら、ぜひ一度弊社までご相談ください。

ウェブサイトのスマートフォン対応はPCサイト変換で｜GeneCode（ジーンコード）
https://www.symmetric.co.jp/genecode/