f-traコンバージョンアップのためのUI改善情報をお届け。EFOやCTAのハウツーなど。単一のウェブページの装飾やレイアウトを、画面の横幅サイズにあわせて変化させる「レスポンシブ・ウェブデザイン」。管理するファイルがひとつで済む、どんなデバイスにも対応できる等大きなメリットがありますが、同じコンテンツをどんなデバイスサイズでも快適に閲覧できるようにデザインするのは至難の業です。ユーザビリティが重要な役割を担う入力フォームにおいては、どのような工夫をしたら良いのでしょうか。本日の記事では、レスポンシブ・ウェブデザインのフォームを設計するときに気をつけるべきポイントについて考えてみたいと思います。※今回は新たにフォームを設計する前提で書いていきますが、もちろん、すでにお持ちのフォームを改善する場合でも活用していただければ幸いです。独自レイアウトを用意するEFOのテクニックのひとつに、フォーム専用のレイアウトを用意するというものがあります。これはフォーム向けにサイト共通のヘッダーやフッター、ナビゲーション類などを排除したシンプルなレイアウトを作ることで、ページ内に余計なリンクが存在しなくなり、そのことが入力途中での離脱を防いでくれるというものです。このフォーム専用レイアウト、ぜひレスポンシブなサイトには採り入れていただきたいと思います。下記はよくあるレスポンシブ・ウェブデザインのサイト共通のレイアウトと、フォーム専用レイアウトを用意したときの画面のサンプルです。上記の例を見て頂くと一目瞭然ですが、そもそもページがシンプルになるので、レスポンシブ対応そのものがかなりシンプルになるはずです。狙いである入力途中での離脱を防ぐことにもつながりますし、余計なコンテンツの読み込みがないため、モバイル回線でもスムーズにページを表示することも可能です。必須/任意を整理するフォームの入力完了率のためには、できるだけ少なくしておきたい入力項目数。スマートフォンではキーボードの使い勝手やタッチの感度などデバイス側の特徴により、フォームへの入力行為そのものがストレスとなってしまう場合があります。そのため、デスクトップ向けページよりもはるかにシビアにフォームの入力項目数を削るべきです。いっぽうで、引き上げ率その他の理由により、なるべくフォームでユーザーの情報を獲得しておきたいという事情もあると思います。必須と任意そこでおすすめなのは、任意項目をスマホでは表示しないという方法です。スマートフォン(その他表示領域が狭いデバイスを含む)では必須に設定した項目のみ、PC向けサイトでは必須・任意両方の項目を表示します。スマートフォンでは本当に必要な情報のみに絞ることで、ユーザーのストレスを最小限に留めることができます。以上をふまえたうえで、フォームで取得する情報と、その項目の必須/任意を決定しましょう。項目数が元々少ない場合は不要このステップは、項目数は多いときには有効ですが、元々フォームの項目数がさほど多くない時には、PC/スマホでの任意項目の出しわける必要性は低いと思います。スマホの確認画面での非表示もお忘れなく任意項目は未記入で送信しても問題ないことから、スマートフォンで見た目上非表示にすることは可能ですが、くれぐれも確認画面でも任意項目の欄を隠しておくのをお忘れなく。空欄だとしても、確認画面に見に覚えのない入力項目が並んでいることに、ユーザーは高確率で違和感を抱くと考えられます。入力項目を検討フォームで取得する情報が決まったら、次は入力の方法やラベルを検討しましょう。具体的には下記のような点に注意しながら、入力コンポーネントやラベルを検討してください。全体として、スマホのほうが入力のハードルが高いため、スマホでの入力のしやすさを考慮したコンポーネントを検討することがポイントとなります。ラベルが長すぎないか長いラベルは判別しにくいうえに、無駄なスペースを生み出します。スマートフォンデバイス等ではラベルが見きれてしまう場合や、余計な縦スクロールを生み出してしまう場合もあります。ラベルは短く簡潔に設定しましょう。ラベルが長い場合に、閲覧するデバイス・バージョンによっては文言が見きれてしまう場合も。テキスト入力が多くないかスマホではテキスト入力がストレスになるため、出来る限りラジオボタンやセレクトボックスなど、選択式の設問に置き換えることが可能か検討しましょう。エフトラEFOのお問合せフォームの例。選択肢の数と入力コンポーネントが釣り合っているか検討しましょう。選択肢数と入力形式の関係については下記の記事で詳しく取り上げています。その選択肢、大丈夫?フォームでプルダウンメニューを使う際に気をつけたいことhttps://f-tra.jp/blog/column/2960また、セレクトボックスの選択肢数が多すぎるとユーザビリティを落としてしまいます。スマートフォンでは表示領域が狭いこともあり、さらに選択しにくくなる可能性がありますので注意しましょう。入力欄を複数に分けている場合は、できるだけ項目はひとつに統一してユーザーの手間を減らしましょう。カラムを調整レスポンシブなフォームのページデザインで必ず気をつけていただきたいのは、デバイス幅に合わせてカラムを調整するという点です。PC向けサイトでは表組み形式で表示することが多いフォームですが、スマートフォンでの表示時はカラムを落とし、ラベルや項目を横幅いっぱいに垂直方向に表示するようにしてください。垂直方向の配置と表組みレイアウトの例。表組みは文字が多いと見難くなる可能性が。横幅いっぱいに表示するステップ5:その他デザインの調整カラムを調整したら、入力項目、ボタンなど細かなデザインの調整を進めましょう。気をつけたいのはスマートフォン利用時のタップ領域。指で操作するタッチデバイスでは、項目やボタンの大きさや余白を十分に保つことがユーザビリティを大きく左右します。外側の余白の有無が、タップのしやすさだけではなく文字の読みやすさにもつながります。エラーの表示に注意どんなに使いやすく、わかりやすく作ったとしてもフォームに入力エラーはつきもののです。ストレスを最低限に抑えるためにはエラーの表示は2箇所に用意しましょう。(1)ページ上部(ファーストビューに入る位置)に記載する、エラーがある旨を伝える一文と、(2)実際のエラー箇所に添えるエラー内容です。実際のエラー箇所に指摘がないと、どこにエラーがあるかを探し出すのは大変ですので、あきらかに(2)は必須の対応ですね。(1)も実は重要です。縦に長いスマートフォンでは、(2)の方法だけではファーストビューにエラーを表示することが難しいためです。最後に、ユーザーの入力をより便利にする入力支援機能を付加しましょう。おすすめの機能は下記の3つです。住所自動入力スマートフォンではテキスト入力がストレスです。見かける47都道府県をセレクトボックスで選択する場面も煩雑な作業です。未入力箇所やエラー箇所の背景色を色付けする機能は、直感的に入力すべき項目が認識できるため、フォームの形状を問わず使い勝手を向上してくれます。リアルタイムアラートpcでもスマートフォンでも、エラー画面が表示されてしまうことがストレスなのには変わりありませんので、それを未然に防いでくれるリアルタイムアラートはどんなフォームの離脱率にも効果を発揮するでしょう。レスポンシブなフォームではエラーの表示方法に注意。垂直方向のレイアウトは吹き出し型のアラートと相性が悪い吹き出し型のアラート表示は、スマートフォンで使われる垂直方向の項目レイアウトと相性が悪く、上記の例のように吹き出しがラベルを隠してしまう場合も。レスポンシブなフォームではインライン型のエラー表示を行うのがおすすめです。まとめいかがだったでしょうか。本日は、フォームのレスポンシブ対応させる際の7ステップをご紹介しました。ポイントをまとめると下記のとおりです。入力支援機能を付加カギは、モバイルファースト勘の良い方ならお気づきかもしれませんが、レスポンシブ対応を考える時には、モバイル環境において使いやすいかをまず基準において設計する、いわゆる「モバイルファースト」が大切です。モバイルはpcに比べて圧倒的に制約が多いため、まずスマートフォンで使いやすいフォームになっていれば、pcで使いにくいと感じさせることは少ないでしょう。スマートフォンページを先に作ってからPCにとりかかるのが、もっとも近道になるのではと思います。【保存版】スマートフォンEFO(フォーム改善)のための15カ条https://f-tra.jp/blog/smartphone/4832とはいえ現実には、すでにあるサイトをスマートフォン展開させるなど逆の場合が多いとは思います。そんなケースでも、ご紹介した7つのステップをご考慮いただき、”スマートフォンの場合”をつねに想定しながら設計や改善を進めてみてはいかがでしょうか。ツイートこの記事が気に入ったらいいね!しようUI改善ブログの最新情報をお届けしますUI改善ブログを運営する株式会社エフ・コードではUI改善の基本施策を簡単に実施できる「エフトラEFO」「エフトラCTA」を開発しています。当ブログの更新情報は以下の各種アカウントから購読できます。Facebookを見るTwitterでフォローするFeedlyで購読するRSSを登録するメールマガジンを購読するブログの更新情報やセミナーのお知らせなど、UI改善に関する情報を1~2週間に1回お届けします。PRESSで執筆しましたEFOに関する特集記事を寄稿しています。Vol.89特集3:エントリーフォーム最適化入門2015年10月24日発売Web担当者Forumで連載中!公式Facebookページf-tra(エフトラ)について株式会社エフ・コードのマーケティングテクノロジーブランド「f-tra(エフトラ)」。現在は入力フォーム最適化(EFO)を簡単に実施できる「f-traEFO」と、ユーザーの行動喚起を促すためのUI検証する「f-traCTA」の2種類のUI改善ツールを提供しています。講演/取材/執筆についてEFOに関する講演、雑誌への寄稿、出版、取材などのご依頼は、弊社のお問合せフォームより承っております。お気軽にお問合せくださいませ。田中エフトラEFOサポートチームを統括する傍ら、EFOに関する講演、セミナー登壇、執筆などにも従事。Web担当者Forumにて連載を執筆しています。