スマートフォン向けフォームでは、その小さいスクリーンサイズを考慮し、構成に工夫を凝らす必要があります。
そのなかでひとつの大きな論点になるのが、フィームの入力欄とラベルのレイアウト方法。大きく２つのパターンがあり、ラベルと入力欄を横方向に並べる２カラムレイアウトにする方法と、縦方向に並べる１カラムレイアウトの方法です。
１カラムレイアウト（左）と２カラムレイアウト（右）。
EFOの文脈では、１カラムレイアウトが推奨されることが多いですが、厳密にはそれぞれにメリットとデメリットが存在します。本日の記事では、それらを整理してみたいと思います。
２カラムレイアウトの場合
まずは２カラムレイアウトのメリット・デメリットを挙げていきましょう。
メリット
２カラムレイアウトにする最大のメリットは、圧倒的にフォームをコンパクトに見せることができる点です。
１カラムにするとフォームが縦長になり俯瞰しにくくなりますが、２カラムに構成すれば、画面内により多くの情報をおさめることができます。
さきほど表示したイメージ画像では、１カラムが画面内に「名前」「フリガナ」「メールアドレス」「電話番号」「郵便番号」の５つのフォームしか表示できていないのに対し、２カラムにレイアウトしたほうはさらに３つの項目を余分に表示されることができています。
１カラムレイアウト（左）ではフォーム項目が５つのみに対し、２カラムレイアウト（右）にが８つの項目が１画面内に表示できた。
デメリット
まず、スマートフォンフォームの２カラムレイアウトに対してよく言われるデメリットは、フォーカス時にラベルが見きれてしまう点です。
フォーカス時に項目名が見えない
ただしこれは、項目フォーカス時の拡大動作をオフにすれば、さほど問題にはなりません。
画面内に多くの情報をおさめていることで生じる２カラムレイアウトの最大のデメリットは、情報量が多い場合の見づらさのほうににあるのではないでしょうか。
具体的には次のようなケースです。
■入力内容が見難い
例えば、メールアドレスの入力欄。
メールアドレスが長い場合には、入力欄の横幅から見きれてしまう可能性があります。
入力内容が見きれてしまった例
端が見きれてしまった場合、文字のポインタを移動するなどしない限りユーザーは自分の入力内容を確認できず、ストレスを感じます。
■ラベルが見難い
ラベルが長い場合、すっきりとまとめることが難しくなります。
ラベルが長い場合のイメージ
■補足が見難い
補足内容が多い場合にも、煩雑な印象を与えてしまいがちです。またコンテンツが多い場合はかえって縦幅を大きくとってしまう可能性もあります。
補足内容が多い場合の例
１カラムレイアウトの場合
次は、１カラムでレイアウトした場合のメリットをデメリットを考えていきます。
メリット
1カラムレイアウトの場合、入力欄やラベル、補足などのボリュームが少々大きくても、画面の横幅を最大限に活用しすっきり見やすく収めることができます。
ラベルが改行なく見やすく表示されている
入力内容が見きれること無く表示されている
補足やエラーを効率的にレイアウトできる
デメリット
デメリットとしては、2カラムにした場合に比べページ全体が縦方向に長くなる傾向があります。
補足１：横向きにすれば解決する？
スマートフォンにはランドスケープ表示（デバイスを横向きに回転して利用する）という使いかたがあります。
ランドスケープ表示の場合は画面横幅が広がる（※）ため、２カラムの状態でも入力欄をそれなりに大きく広げることができます。
ランドスケープ表示時の例（Android2.3）
むしろ、ランドスケープ表示時には上記のようにキーボードの表示で、閲覧可能な画面縦幅がかなり狭まってしまうという特徴があり、この場合は１カラムよりも２カラムの状態でラベルが表示されていたほうが見やすいと思います。
※ただし、あまりに画面領域が狭く不便なため、あまり利用する人はいない可能性もありますが…。
上記をふまえた一番の理想は、画面の横サイズに合わせてレイアウトが変わる対応（レスポンシブ）になっている状態です。
※ただしiOSの場合は全体的に拡大されるため、入力欄を広げることにはならないようです
ランドスケープ表示の例（iOS8）
補足２：１カラムでも当然難しい場合もある
ちなみに、あまりに入力内容が多い場合は、1カラムで構成し、横幅いっぱいに入力領域を広げても、内容を見きれずに表示させるのは難しいでしょう。
そういった場合は、テキストボックスではなくテキストエリアを用いるのが良いでしょう。
または、住所など文量の変動が大きい場合は、入力した量に応じて文字サイズを変化させるような機能を加えてみるもの手です。
テキストエリア
結論：横幅と入力内容に合わせて最適化する
以上、スマートフォンでの１カラムおよび２カラムレイアウトの調書と短所を挙げてきました。それぞれのメリット・デメリットをまとめると以下のとおりです。
| １カラム | ２カラム | |
| メリット |
・入力内容が多くても見きれてしまう確率が低い ・ラベル、補足の情報量が多くなっても見やすくレイアウトできる |
・縦方向にコンパクトになる ・フォーム全体を俯瞰しやすい |
| デメリット |
・縦方向にフォームが長くなる ・全体を俯瞰しにくい |
・入力内容が多い場合に見きれる ・ラベルや補足が多い場合に見にくい。かえって縦長になる場合も |
| 補足 |
・あまりに情報量が多い場合はテキストエリアを用いるなどの対応が必要 ・ランドスケープ表示では逆に縦にラベルが見きれてしまう可能性がある |
いかがだったでしょうか。
スマートフォンでは１カラムのレイアウトが見やすいことが多いですが、フォーム内の入力内容が少ないことがわかりきっている場合などには、わざわざ画面横幅の領域をいっぱい使い切る必要はありませんし、縦方向にコンパクトな２カラムを取り入れるという選択肢もあるでしょう。
フォームが必要とする情報と、デバイスの画面サイズを考慮してレイアウトを設計してみてください。
