スマホEFO:1列V.S.2列レイアウトはどっちが良いの?

スマートフォン向けフォームでは、その小さいスクリーンサイズを考慮し、構成に工夫を凝らす必要があります。

そのなかでひとつの大きな論点になるのが、フィームの入力欄とラベルのレイアウト方法。大きく2つのパターンがあり、ラベルと入力欄を横方向に並べる2カラムレイアウトにする方法と、縦方向に並べる1カラムレイアウトの方法です。

1カラムレイアウト(左)と2カラムレイアウト(右)。

1カラムレイアウト(左)と2カラムレイアウト(右)。

EFOの文脈では、1カラムレイアウトが推奨されることが多いですが、厳密にはそれぞれにメリットとデメリットが存在します。本日の記事では、それらを整理してみたいと思います。

2カラムレイアウトの場合

まずは2カラムレイアウトのメリット・デメリットを挙げていきましょう。

メリット

2カラムレイアウトにする最大のメリットは、圧倒的にフォームをコンパクトに見せることができる点です。
1カラムにするとフォームが縦長になり俯瞰しにくくなりますが、2カラムに構成すれば、画面内により多くの情報をおさめることができます。

さきほど表示したイメージ画像では、1カラムが画面内に「名前」「フリガナ」「メールアドレス」「電話番号」「郵便番号」の5つのフォームしか表示できていないのに対し、2カラムにレイアウトしたほうはさらに3つの項目を余分に表示されることができています。

1カラムレイアウト(左)と2カラムレイアウト(右)。

1カラムレイアウト(左)ではフォーム項目が5つのみに対し、2カラムレイアウト(右)にが8つの項目が1画面内に表示できた。

デメリット

まず、スマートフォンフォームの2カラムレイアウトに対してよく言われるデメリットは、フォーカス時にラベルが見きれてしまう点です。

フォーカス時に項目名が見えない

フォーカス時に項目名が見えない

ただしこれは、項目フォーカス時の拡大動作をオフにすれば、さほど問題にはなりません。

画面内に多くの情報をおさめていることで生じる2カラムレイアウトの最大のデメリットは、情報量が多い場合の見づらさのほうににあるのではないでしょうか。

具体的には次のようなケースです。

■入力内容が見難い

例えば、メールアドレスの入力欄。
メールアドレスが長い場合には、入力欄の横幅から見きれてしまう可能性があります。

入力内容が見きれてしまった例

入力内容が見きれてしまった例

端が見きれてしまった場合、文字のポインタを移動するなどしない限りユーザーは自分の入力内容を確認できず、ストレスを感じます。

■ラベルが見難い

ラベルが長い場合、すっきりとまとめることが難しくなります。

ラベルが長い場合のイメージ

ラベルが長い場合のイメージ

■補足が見難い

補足内容が多い場合にも、煩雑な印象を与えてしまいがちです。またコンテンツが多い場合はかえって縦幅を大きくとってしまう可能性もあります。

補足内容が多い場合の例

補足内容が多い場合の例

1カラムレイアウトの場合

次は、1カラムでレイアウトした場合のメリットをデメリットを考えていきます。

メリット

1カラムレイアウトの場合、入力欄やラベル、補足などのボリュームが少々大きくても、画面の横幅を最大限に活用しすっきり見やすく収めることができます。

ラベルが改行なく見やすく表示されている

ラベルが改行なく見やすく表示されている

入力内容が見きれること無く表示されている

入力内容が見きれること無く表示されている

補足やエラーを効率的にレイアウトできる

補足やエラーを効率的にレイアウトできる

デメリット

デメリットとしては、2カラムにした場合に比べページ全体が縦方向に長くなる傾向があります。

補足1:横向きにすれば解決する?

スマートフォンにはランドスケープ表示(デバイスを横向きに回転して利用する)という使いかたがあります。
ランドスケープ表示の場合は画面横幅が広がる(※)ため、2カラムの状態でも入力欄をそれなりに大きく広げることができます。

ランドスケープ表示時の例(Android2.3)

ランドスケープ表示時の例(Android2.3)

むしろ、ランドスケープ表示時には上記のようにキーボードの表示で、閲覧可能な画面縦幅がかなり狭まってしまうという特徴があり、この場合は1カラムよりも2カラムの状態でラベルが表示されていたほうが見やすいと思います。

※ただし、あまりに画面領域が狭く不便なため、あまり利用する人はいない可能性もありますが…。

上記をふまえた一番の理想は、画面の横サイズに合わせてレイアウトが変わる対応(レスポンシブ)になっている状態です。

※ただしiOSの場合は全体的に拡大されるため、入力欄を広げることにはならないようです

ランドスケープ表示の例

ランドスケープ表示の例(iOS8)

補足2:1カラムでも当然難しい場合もある

ちなみに、あまりに入力内容が多い場合は、1カラムで構成し、横幅いっぱいに入力領域を広げても、内容を見きれずに表示させるのは難しいでしょう。

そういった場合は、テキストボックスではなくテキストエリアを用いるのが良いでしょう。
または、住所など文量の変動が大きい場合は、入力した量に応じて文字サイズを変化させるような機能を加えてみるもの手です。

テキストエリア

テキストエリア

結論:横幅と入力内容に合わせて最適化する

以上、スマートフォンでの1カラムおよび2カラムレイアウトの調書と短所を挙げてきました。それぞれのメリット・デメリットをまとめると以下のとおりです。

1カラム 2カラム
メリット ・入力内容が多くても見きれてしまう確率が低い
・ラベル、補足の情報量が多くなっても見やすくレイアウトできる
・縦方向にコンパクトになる
・フォーム全体を俯瞰しやすい
デメリット ・縦方向にフォームが長くなる
・全体を俯瞰しにくい
・入力内容が多い場合に見きれる
・ラベルや補足が多い場合に見にくい。かえって縦長になる場合も
補足 ・あまりに情報量が多い場合はテキストエリアを用いるなどの対応が必要
・ランドスケープ表示では逆に縦にラベルが見きれてしまう可能性がある

いかがだったでしょうか。
スマートフォンでは1カラムのレイアウトが見やすいことが多いですが、フォーム内の入力内容が少ないことがわかりきっている場合などには、わざわざ画面横幅の領域をいっぱい使い切る必要はありませんし、縦方向にコンパクトな2カラムを取り入れるという選択肢もあるでしょう。

フォームが必要とする情報と、デバイスの画面サイズを考慮してレイアウトを設計してみてください。

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

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

エフトラEFO機能アイコン

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

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

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

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

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

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

メールアドレスを入力

 購読解除はいつでも可能です