レスポンシブデザインのフォームを設計するときに気をつけたい7つのステップ

単一のウェブページの装飾やレイアウトを、画面の横幅サイズにあわせて変化させる「レスポンシブ・ウェブデザイン」。
管理するファイルがひとつで済む、どんなデバイスにも対応できる等大きなメリットがありますが、同じコンテンツをどんなデバイスサイズでも快適に閲覧できるようにデザインするのは至難の業です。

とくにユーザビリティが重要な役割を担う入力フォームにおいては、どのような工夫をしたら良いのでしょうか。
本日の記事では、レスポンシブ・ウェブデザインのフォームを設計するときに気をつけるべきポイントについて考えてみたいと思います。

※今回は新たにフォームを設計する前提で書いていきますが、もちろん、すでにお持ちのフォームを改善する場合でも活用していただければ幸いです。

ステップ1: 独自レイアウトを用意する

EFOのテクニックのひとつに、フォーム専用のレイアウトを用意するというものがあります。

これはフォーム向けにサイト共通のヘッダーやフッター、ナビゲーション類などを排除したシンプルなレイアウトを作ることで、ページ内に余計なリンクが存在しなくなり、そのことが入力途中での離脱を防いでくれるというものです。

このフォーム専用レイアウト、ぜひレスポンシブなサイトには採り入れていただきたいと思います。

下記はよくあるレスポンシブ・ウェブデザインのサイト共通のレイアウトと、フォーム専用レイアウトを用意したときの画面のサンプルです。

サイト共通のレイアウトとフォーム専用レイアウトのよくあるレスポンシブデザインの対応図

サイト共通のレイアウトとフォーム専用レイアウトのよくあるレスポンシブデザインの対応図

上記の例を見て頂くと一目瞭然ですが、そもそもページがシンプルになるので、レスポンシブ対応そのものがかなりシンプルになるはずです。
 
当然、もともとの狙いである入力途中での離脱を防ぐことにもつながりますし、余計なコンテンツの読み込みがないため、モバイル回線でもスムーズにページを表示することも可能です。

ステップ2: 必須/任意を整理する

フォームの入力完了率のためには、できるだけ少なくしておきたい入力項目数。

とくにスマートフォンではキーボードの使い勝手やタッチの感度などデバイス側の特徴により、フォームへの入力行為そのものがストレスとなってしまう場合があります。
そのため、デスクトップ向けページよりもはるかにシビアにフォームの入力項目数を削るべきです。

いっぽうで、引き上げ率その他の理由により、なるべくフォームでユーザーの情報を獲得しておきたいという事情もあると思います。

必須と任意

必須と任意

そこでおすすめなのは、任意項目をスマホでは表示しないという方法です。
つまり、スマートフォン(その他表示領域が狭いデバイスを含む)では必須に設定した項目のみ、PC向けサイトでは必須・任意両方の項目を表示します。

スマートフォンでは本当に必要な情報のみに絞ることで、ユーザーのストレスを最小限に留めることができます

以上をふまえたうえで、フォームで取得する情報と、その項目の必須/任意を決定しましょう。

項目数が元々少ない場合は不要

このステップは、項目数は多いときには有効ですが、元々フォームの項目数がさほど多くない時には、PC/スマホでの任意項目の出しわける必要性は低いと思います。

スマホの確認画面での非表示もお忘れなく

任意項目は未記入で送信しても問題ないことから、スマートフォンで見た目上非表示にすることは可能ですが、くれぐれも確認画面でも任意項目の欄を隠しておくのをお忘れなく。

たとえ空欄だとしても、確認画面に見に覚えのない入力項目が並んでいることに、ユーザーは高確率で違和感を抱くと考えられます。

ステップ3: 入力項目を検討

フォームで取得する情報が決まったら、次は入力の方法やラベルを検討しましょう。

具体的には下記のような点に注意しながら、入力コンポーネントやラベルを検討してください。

全体として、スマホのほうが入力のハードルが高いため、スマホでの入力のしやすさを考慮したコンポーネントを検討することがポイントとなります。

ラベルが長すぎないか

長いラベルは判別しにくいうえに、無駄なスペースを生み出します。
さらにスマートフォンデバイス等ではラベルが見きれてしまう場合や、余計な縦スクロールを生み出してしまう場合もあります。
ラベルは短く簡潔に設定しましょう。

ラベルが長い場合

ラベルが長い場合に、閲覧するデバイス・バージョンによっては文言が見きれてしまう場合も。

テキスト入力が多くないか

スマホではテキスト入力がストレスになるため、出来る限りラジオボタンやセレクトボックスなど、選択式の設問に置き換えることが可能か検討しましょう。

頭出ししておく

エフトラEFOのお問合せフォームの例。よくあるお問合せ内容はチェック形式にし、フリー入力しなくても問合せが完結できるようになっている

ラジオボタン、セレクトボックスの使い分け、選択肢数

選択肢の数と入力コンポーネントが釣り合っているか検討しましょう。

選択肢数と入力形式の関係については下記の記事で詳しく取り上げています。

その選択肢、大丈夫?フォームでプルダウンメニューを使う際に気をつけたいこと
https://f-tra.jp/blog/column/2960

また、セレクトボックスの選択肢数が多すぎるとユーザビリティを落としてしまいます。

とくにスマートフォンでは表示領域が狭いこともあり、さらに選択しにくくなる可能性がありますので注意しましょう。

スマートフォンのセレクトボックスでは、表示領域が少なくさらに選択しにくい

スマートフォンのセレクトボックスでは、表示領域が少なくさらに選択しにくい

入力欄を分割していないか

「苗字+名前」や郵便番号、電話番号など、入力欄を複数に分けている場合は、できるだけ項目はひとつに統一してユーザーの手間を減らしましょう。

項目を統一すれば単純に項目数=移動回数を減らすことができます

項目を統一すれば単純に項目数=移動回数を減らすことができます

ステップ4: カラムを調整

レスポンシブなフォームのページデザインで必ず気をつけていただきたいのは、デバイス幅に合わせてカラムを調整するという点です。

PC向けサイトでは表組み形式で表示することが多いフォームですが、スマートフォンでの表示時はカラムを落とし、ラベルや項目を横幅いっぱいに垂直方向に表示するようにしてください。

垂直方向の配置と表組みレイアウトの例。表組みは文字が多いと見難くなる可能性が。

垂直方向の配置と表組みレイアウトの例。表組みは文字が多いと見難くなる可能性が。

横幅いっぱいに表示する

ステップ5:その他デザインの調整

カラムを調整したら、入力項目、ボタンなど細かなデザインの調整を進めましょう。

とくに気をつけたいのはスマートフォン利用時のタップ領域。
指で操作するタッチデバイスでは、項目やボタンの大きさや余白を十分に保つことがユーザビリティを大きく左右します。

外側の余白の有無が、タップのしやすさだけではなく文字の読みやすさにもつながります。

外側の余白の有無が、タップのしやすさだけではなく文字の読みやすさにもつながります。

ステップ6: エラーの表示に注意

どんなに使いやすく、わかりやすく作ったとしてもフォームに入力エラーはつきもののです。

ストレスを最低限に抑えるためにはエラーの表示は2箇所に用意しましょう。

(1)ページ上部(ファーストビューに入る位置)に記載する、エラーがある旨を伝える一文と、(2)実際のエラー箇所に添えるエラー内容です。

error

実際のエラー箇所に指摘がないと、どこにエラーがあるかを探し出すのは大変ですので、あきらかに(2)は必須の対応ですね。
しかし(1)も実は重要です。特に縦に長いスマートフォンでは、(2)の方法だけではファーストビューにエラーを表示することが難しいためです。

ステップ7: 入力支援機能を付加

最後に、ユーザーの入力をより便利にする入力支援機能を付加しましょう。
とくにおすすめの機能は下記の3つです。

住所自動入力


スマートフォンではテキスト入力がストレスです。よく見かける47都道府県をセレクトボックスで選択する場面も煩雑な作業です。

スマートフォンのセレクトボックスでは、表示領域が少なくさらに選択しにくい

47都道府県をセレクトボックスで選択


住所自動入力機能があれば、数桁の数字を入力するだけで多くのテキスト入力の手間を省いてくれるため、ユーザーの大きな助けになります。

背景色


必須項目の未入力箇所やエラー箇所の背景色を色付けする機能は、直感的に入力すべき項目が認識できるため、フォームの形状を問わず使い勝手を向上してくれます。

必須項目の背景色設定

リアルタイムアラート


pcでもスマートフォンでも、エラー画面が表示されてしまうことがストレスなのには変わりありませんので、それを未然に防いでくれるリアルタイムアラートはどんなフォームの離脱率にも効果を発揮するでしょう。

ただしレスポンシブなフォームではエラーの表示方法に注意。

垂直方向のレイアウトは吹き出し型のアラートと相性が悪い

垂直方向のレイアウトは吹き出し型のアラートと相性が悪い

吹き出し型のアラート表示は、スマートフォンで使われる垂直方向の項目レイアウトと相性が悪く、上記の例のように吹き出しがラベルを隠してしまう場合も。
レスポンシブなフォームではインライン型のエラー表示を行うのがおすすめです。

まとめ

いかがだったでしょうか。
本日は、フォームのレスポンシブ対応させる際の7ステップをご紹介しました。
ポイントをまとめると下記のとおりです。

カギは、モバイルファースト

勘の良い方ならお気づきかもしれませんが、レスポンシブ対応を考える時には、モバイル環境において使いやすいかをまず基準において設計する、いわゆる「モバイルファースト」が大切です。
モバイルはpcに比べて圧倒的に制約が多いため、まずスマートフォンで使いやすいフォームになっていれば、pcで使いにくいと感じさせることは少ないでしょう。

ですので、スマートフォンページを先に作ってからPCにとりかかるのが、もっとも近道になるのではと思います。

【保存版】スマートフォンEFO(フォーム改善)のための15カ条
https://f-tra.jp/blog/smartphone/4832

とはいえ現実には、すでにあるサイトをスマートフォン展開させるなど逆の場合が多いとは思います。
そんなケースでも、ご紹介した7つのステップをご考慮いただき、”スマートフォンの場合”をつねに想定しながら設計や改善を進めてみてはいかがでしょうか。
 

この記事が気に入ったら
いいね!しよう

UI改善ブログの最新情報をお届けします

エフトラEFO機能アイコン

UI改善ブログを運営する株式会社エフ・コードでは
UI改善の基本施策を簡単に実施できる「エフトラEFO」「エフトラCTA」を開発しています。

エフトラEFOサイトへ エフトラCTAサイトへ

UI改善ブログ by f-tra の購読

当ブログの更新情報は以下の各種アカウントから購読できます。

メールマガジンを購読する

ブログの更新情報やセミナーのお知らせなど、
UI改善に関する情報を1~2週間に1回お届けします。

メールアドレスを入力

 購読解除はいつでも可能です
  1. @mypacecreator

    この記事では「おすすめなのは、任意項目をスマホでは表示しないという方法」としている→レスポンシブデザインのフォームを設計するときに気をつけたい7つのステップ | EFO・フォーム改善ブログ https://t.co/V45v4eKbQI

  2. @MariHana69

    レスポンシブデザインのフォームを設計するときに気をつけたい7つのステップ https://t.co/iJVHIeylsL @ftraEFOさんから