レスポンシブデザインを採用するとき参考にしたいフォーム実例まとめ

昨今レスポンシブ・ウェブデザインを採用するウェブサイトがかなり多くなっています。
レスポンシブなデザインの場合、フォームのユーザビリティを確保するには一手間工夫が必要です。
本日は、異なる画面幅でもフォームを使いやすく工夫しているウェブサイトを勝手にピックアップし、そのポイントをお伝えしていきます。

パターン1: あらかじめ横幅を狭くレイアウトする

まずは、フォームのページのみ、他のページに比べて横幅を狭く作っておく方法でモバイルデバイスに対応している例を紹介していきます。
このとき多くの場合、横幅を狭くした分左右の余白が大きくなります。

採用例

住友商事

住友商事様のコーポレートサイトでは、他のページのコンテンツ(上)は920pxでレイアウトされているのに対し、フォームのページ(下)では横幅670pxとなっています。

横幅を狭めた場合、ナビゲーション類はレスポンシブ向けにコンパクトに収まりつつ、コンテンツ部分は変わらず、です。

コンテンツ部分は基本そのまま。

コンテンツ部分は基本そのまま。

Adobe
次はアドビ公式サイト クリエイティブ、マーケティング、文書管理ソリューション の新規会員登録フォームです。

adobe1

Adobeのウェブサイトは全体を通して横幅が激しく変動します。
トップページはデバイス横幅全面を使ってレイアウトしており、その他コンテンツは940px、フォームは412pxと、あらかじめかなり狭くなっています。

フォームは以前勝手に徹底解剖の記事でも取り上げていますが、まったく無駄のないシンプルな形をとっています。
PCスマホどちらで見てもナビゲーション類含め同じ見た目です。

adobe2

シンプルだがユーザーを戸惑わせない配慮は必要

これらのタイプは画面幅が狭まってもフォームのレイアウトを変化させる必要がなく、行程が楽でシンプルです。
またフォーム画面にはそもそも余計なコンテンツを持たない専用レイアウトを持つべきという方針にもかなった手法ともいえます。

いっぽうデメリットとしては、フォームに進んだ際に別のサイトに飛んだようにユーザーが錯覚したり違和感を感じる可能性もあります。
デザインのトーンを揃えたり、サイトロゴやフォームのタイトルをしっかりと表示させることで対処したいですね。

パターン2: フォームのカラムを1カラムに落とす

フォームのラベルと入力エリアは、多くのフォームが表形式で表示させています。
しかしスマートフォンのような画面幅の狭いデバイスで閲覧した場合、2列のテーブルは見づらくなる場合がほとんど。

そのため、画面幅が狭い場合にのみ、ラベルと入力項目を縦方向にレイアウトするように調整されていると非常に親切です。

採用例

リブセンス
live1
リブセンス様のお問い合わせフォームは、PCでは横にナビゲーションを持ち、コンテンツ幅をいっぱいに利用したフォームとなっています。スマートフォン幅では、表形式にしていたラベルがすべて縦方向に変化しています。

ミツエーリンクス
mitsue1
レスポンシブウェブデザインをいち早く取り入れていたミツエーリンクス様のコーポレートサイトフォームも同様の形をとっていました。
ユーザビリティへの配慮を感じますね!

郵政博物館
さらにデザインが凝っていたのは郵政博物館の例
ラベルと項目が縦方向に配置されるだけでなく、背景色が交互になり、項目同士の境界が非常にわかりやすくなっています

yusei1

親切!ですがそこそこ手間は必要

テーブルのカラムを落としてくれるデザインは、そのまま幅をあわせるだけの場合に比べ、スタイルシートの調整要素が多くなり手間はかかります。
また、ただ縦方向にするだけではなく、補足文言や余白なども見やすく調整できるとベストですね。

パターン3: あらかじめ複数カラムにレイアウトする

ページを複数のカラムで構成しておき、そのカラムを落とすことでデバイス幅に合わせる方法です。

LION

LION様フォームよりフォーム部分を抜粋

※LION様フォームよりフォーム部分を抜粋


LION様のお問い合わせフォームでは、フォームのラベルと入力欄があらかじめ縦方向にレイアウトされており、モバイルのデバイス幅ではコンテンツ部分がそのまま横幅いっぱいに表示されるよううなシンプルなつくりになっています。

中山ドライブスクール
同様の作りです。こちらは3カラムから1カラムに落としています。

ただし、ただカラムを落とすだけでは、フォームの下部分にナビゲーション類が集中し、ページを長く見せてしまいます。
できるだけフォーム入力に関係のないコンテンツは持たないように設計しておきたいという意味では、パターン1: あらかじめ横幅を狭くレイアウトする方法をとったほうが良いかもしれません。

しかし、フォームの入力項目数が多い場合はや、余計なコンテンツが無い場合は複数カラムが生きてくる場合があります。
下記の例をご覧ください。

bellroy

Bellroyの購入フォームでは、1つのページに決済から配送に関する情報入力がまとまっています。
複数カラムにすることで、全体を俯瞰できるうえに、1~4のステップとして構成されているために、記入漏れを起こすことも少なそうです。

もちろん、モバイルデバイスではカラムが落ちるだけ。非常にシンプルかつわかりやすいレスポンシブ対応例です。

 

デバイスによってオファーを調節

ここからは上記1~3のパターンを採用しつつ、さらに工夫されていると感じたフォームを紹介していきます。

電話を強調

福岡デザイン専門学校の資料請求フォームでは、モバイルの画面幅の場合に電話番号が強調されるようになっています。

電話番号部分が赤いボタンとなり強調

電話番号部分が赤いボタンとなり強調

フォーム送信の代替となる手段があればフォーム上部表示しておきたいというのはこのブログでも何度かお伝えしているとおりですし、モバイルデバイスの場合はさらに電話と相性が良いので、ぜひお手本にしたい例です

モバイルでは必要最低限の構成に

ggl

googleアカウントの登録フォームでは、画面を2カラムに構成し、PCでは大きくオファーを表示、モバイル幅にするとフォームだけを表示するようになっています。

スマートフォンのフォームではオファー類は最低限に抑え、すぐに入力にとりかかれるようになっているのは良いですね。

写真や地図など

最後に紹介するのはプラザホテル天神のトップページにある検索/予約フォームです。
もともとオファー画像とフォームを2カラムに設計し、そのままカラムを落として使えるよう美しくレイアウトされています。

tenjin

さらに、EFOの文脈とは厳密にはずれるのですが、モバイルのみ地図コンテンツを表示する、コンテンツの順番を入れ替える、といった利用環境を考慮した細かな調整がページ全体を通して実施されていました。

PCのときはなかった地図が、スマートフォン幅の場合のみフォーム下に表示。

PCのときはなかった地図が、スマートフォン幅の場合のみフォーム下に表示。

フォームだけではなく、このような細やかな工夫にもユーザー目線を感じますね。

最後に

いかがだったでしょうか。本日はレスポンシブ・ウェブデザインを採用しているウェブサイトのフォームを幾つか取り上げました。
ご担当のフォームはどのパターンだったでしょうか?
これからレスポンシブなサイトを作成する方、まだフォームがスマートフォンに対応していないという方の参考となれば幸いです。

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

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

エフトラEFO機能アイコン

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

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

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

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

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

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

メールアドレスを入力

 購読解除はいつでも可能です
  1. ピンバック: Web/アプリ界隈で個人的に興味深かった話題(2015年5月9日~15日) | 未分類 | Interest Speaker

  2. @miyaseven

    うわーこれためになるなあ
    (今さら感かもしれませんが…)

    >>>レスポンシブデザインを採用するとき参考にしたいフォーム実例まとめ | UI改善ブログ by f-tra https://t.co/G6MomVfs1H

  3. @hiro_parallel00

    「フォーム画面にはそもそも余計なコンテンツを持たない専用レイアウトを持つべき」φ(・_・”)メモメモ/レスポンシブデザインを採用するとき参考にしたいフォーム実例まとめ | UI改善ブログ by f-tra https://t.co/gpnUxRXxTp