昨今レスポンシブ・ウェブデザインを採用するウェブサイトがかなり多くなっています。
レスポンシブなデザインの場合、フォームのユーザビリティを確保するには一手間工夫が必要です。
本日は、異なる画面幅でもフォームを使いやすく工夫しているウェブサイトを勝手にピックアップし、そのポイントをお伝えしていきます。
パターン1: あらかじめ横幅を狭くレイアウトする
まずは、フォームのページのみ、他のページに比べて横幅を狭く作っておく方法でモバイルデバイスに対応している例を紹介していきます。
このとき多くの場合、横幅を狭くした分左右の余白が大きくなります。
採用例
住友商事
住友商事様のコーポレートサイトでは、他のページのコンテンツ（上）は920pxでレイアウトされているのに対し、フォームのページ（下）では横幅670pxとなっています。
横幅を狭めた場合、ナビゲーション類はレスポンシブ向けにコンパクトに収まりつつ、コンテンツ部分は変わらず、です。
コンテンツ部分は基本そのまま。
Adobe
次はアドビ公式サイト クリエイティブ、マーケティング、文書管理ソリューション の新規会員登録フォームです。
Adobeのウェブサイトは全体を通して横幅が激しく変動します。
トップページはデバイス横幅全面を使ってレイアウトしており、その他コンテンツは940px、フォームは412pxと、あらかじめかなり狭くなっています。
フォームは以前勝手に徹底解剖の記事でも取り上げていますが、まったく無駄のないシンプルな形をとっています。
PCスマホどちらで見てもナビゲーション類含め同じ見た目です。
シンプルだがユーザーを戸惑わせない配慮は必要
これらのタイプは画面幅が狭まってもフォームのレイアウトを変化させる必要がなく、行程が楽でシンプルです。
またフォーム画面にはそもそも余計なコンテンツを持たない専用レイアウトを持つべきという方針にもかなった手法ともいえます。
いっぽうデメリットとしては、フォームに進んだ際に別のサイトに飛んだようにユーザーが錯覚したり違和感を感じる可能性もあります。
デザインのトーンを揃えたり、サイトロゴやフォームのタイトルをしっかりと表示させることで対処したいですね。
パターン2: フォームのカラムを1カラムに落とす
フォームのラベルと入力エリアは、多くのフォームが表形式で表示させています。
しかしスマートフォンのような画面幅の狭いデバイスで閲覧した場合、2列のテーブルは見づらくなる場合がほとんど。
そのため、画面幅が狭い場合にのみ、ラベルと入力項目を縦方向にレイアウトするように調整されていると非常に親切です。
採用例
リブセンス
リブセンス様のお問い合わせフォームは、PCでは横にナビゲーションを持ち、コンテンツ幅をいっぱいに利用したフォームとなっています。スマートフォン幅では、表形式にしていたラベルがすべて縦方向に変化しています。
ミツエーリンクス
レスポンシブウェブデザインをいち早く取り入れていたミツエーリンクス様のコーポレートサイトフォームも同様の形をとっていました。
ユーザビリティへの配慮を感じますね！
郵政博物館
さらにデザインが凝っていたのは郵政博物館の例。
ラベルと項目が縦方向に配置されるだけでなく、背景色が交互になり、項目同士の境界が非常にわかりやすくなっています。
親切！ですがそこそこ手間は必要
テーブルのカラムを落としてくれるデザインは、そのまま幅をあわせるだけの場合に比べ、スタイルシートの調整要素が多くなり手間はかかります。
また、ただ縦方向にするだけではなく、補足文言や余白なども見やすく調整できるとベストですね。
パターン3: あらかじめ複数カラムにレイアウトする
ページを複数のカラムで構成しておき、そのカラムを落とすことでデバイス幅に合わせる方法です。
LION
※LION様フォームよりフォーム部分を抜粋
LION様のお問い合わせフォームでは、フォームのラベルと入力欄があらかじめ縦方向にレイアウトされており、モバイルのデバイス幅ではコンテンツ部分がそのまま横幅いっぱいに表示されるよううなシンプルなつくりになっています。
中山ドライブスクール
同様の作りです。こちらは3カラムから1カラムに落としています。
ただし、ただカラムを落とすだけでは、フォームの下部分にナビゲーション類が集中し、ページを長く見せてしまいます。
できるだけフォーム入力に関係のないコンテンツは持たないように設計しておきたいという意味では、パターン1: あらかじめ横幅を狭くレイアウトする方法をとったほうが良いかもしれません。
しかし、フォームの入力項目数が多い場合はや、余計なコンテンツが無い場合は複数カラムが生きてくる場合があります。
下記の例をご覧ください。
Bellroyの購入フォームでは、１つのページに決済から配送に関する情報入力がまとまっています。
複数カラムにすることで、全体を俯瞰できるうえに、1～4のステップとして構成されているために、記入漏れを起こすことも少なそうです。
もちろん、モバイルデバイスではカラムが落ちるだけ。非常にシンプルかつわかりやすいレスポンシブ対応例です。
デバイスによってオファーを調節
ここからは上記1～3のパターンを採用しつつ、さらに工夫されていると感じたフォームを紹介していきます。
電話を強調
福岡デザイン専門学校の資料請求フォームでは、モバイルの画面幅の場合に電話番号が強調されるようになっています。
電話番号部分が赤いボタンとなり強調
フォーム送信の代替となる手段があればフォーム上部表示しておきたいというのはこのブログでも何度かお伝えしているとおりですし、モバイルデバイスの場合はさらに電話と相性が良いので、ぜひお手本にしたい例です。
モバイルでは必要最低限の構成に
googleアカウントの登録フォームでは、画面を2カラムに構成し、PCでは大きくオファーを表示、モバイル幅にするとフォームだけを表示するようになっています。
スマートフォンのフォームではオファー類は最低限に抑え、すぐに入力にとりかかれるようになっているのは良いですね。
写真や地図など
最後に紹介するのはプラザホテル天神のトップページにある検索／予約フォームです。
もともとオファー画像とフォームを２カラムに設計し、そのままカラムを落として使えるよう美しくレイアウトされています。
さらに、EFOの文脈とは厳密にはずれるのですが、モバイルのみ地図コンテンツを表示する、コンテンツの順番を入れ替える、といった利用環境を考慮した細かな調整がページ全体を通して実施されていました。
PCのときはなかった地図が、スマートフォン幅の場合のみフォーム下に表示。
フォームだけではなく、このような細やかな工夫にもユーザー目線を感じますね。
最後に
いかがだったでしょうか。本日はレスポンシブ・ウェブデザインを採用しているウェブサイトのフォームを幾つか取り上げました。
ご担当のフォームはどのパターンだったでしょうか？
これからレスポンシブなサイトを作成する方、まだフォームがスマートフォンに対応していないという方の参考となれば幸いです。
