【保存版】スマートフォンEFO(フォーム改善)のための15カ条

スマートフォンの利用者が年々増加するなか、フォームのスマートフォン対策はもはや必須のものとなりつつあります。
このとき、ただスマートフォン向けにデザインを最適化するだけではなく、スマートフォン特有の制約や特徴をおさえたうえで改善することが大切です。

本日はスマートフォンの特徴をふまえながら、スマートフォン向けエントリーフォーム最適化(EFO)のポイントを「15カ条」にまとめてご紹介したいと思います。

スマートフォンEFO15カ条!

本日ご紹介する「スマートフォンEFO 15カ条」は以下のとおりです!

それでは、以下ひとつずつ説明していきます。

第1条: 表組みにするべからず

スマートフォンの最大の特徴と聞かれて、画面が小さいことを一番に挙げる人はきっと多いのではないでしょうか。

スマートフォンデバイスのディスプレイは名刺サイズ程度と非常に小さく、さらにフォーム入力中においては下記のようにソフトウェアキーボードを表示させるために表示領域はさらに半分程度に縮小します。

キーボード表示で半分程度に狭まる画面領域(iPhoneの場合)

キーボード表示で半分程度に狭まる画面領域(iPhoneの場合)

当然、この小さな画面で複雑なレイアウトのデザインを行うと、コンテンツは見にくくなってしまいます。

とくにデスクトップ版のフォームでは常識となりつつある表組み(2カラム)のレイアウトは、どうしても文字サイズを小さくせざるを得なくなり、ユーザーに使いづらさを感じさせてしまう可能性が。
ラベルや注意書きの長さにもよりますが、多くのフォームで垂直方向にラベル、入力項目をレイアウトする方が使いやすくなるでしょう。

垂直方向の配置と表組みレイアウトの例。表組みは文字が多いと見難くなる可能性が。

垂直方向の配置と表組みレイアウトの例。表組みは文字が多いと見難くなる可能性が。

第2条: 拡大はオフにするべし

スマートフォンのフォームでは、項目にフォーカス(タップ)すると、その場所にズームインし、拡大表示するようになっています。

選択した項目の周辺にズームされる

選択した項目の周辺にズームされる

この機能により、文字が大きく拡大され読みやすくはなるのですが、大抵の場合、ラベルが見切れたり前後の項目を俯瞰しにくいなどのデメリットが生じます。

このズームイン機能はHTML側の設定でオフにすることが可能ですので、できれば拡大しないように設定しましょう。

第3条: 項目は大きくするべし

yubi

スマートフォンは指で操作するデバイスです。
当然、指の厚みのぶんだけマウスよりも緻密な操作が難しくなります。

指でタップする必要のあるフォームの入力項目は、文字サイズを大きくするなどして、タップエリアが大きくなるようにデザインしましょう。

また、ラジオボタンやチェックボックスには、ラベル文言をlabelタグで囲むこともお忘れなく。
タップ領域を大幅に広げることができます。

ラベル要素の導入例

label要素の導入例

第4条: 余白を充分に保たせるべし

タップ要素同士が隣り合っており、誤って隣接したタップ要素を選択してしまったという経験をお持ちの方は多いのではないでしょうか。

指で快適に操作するためには、タップエリアを広げるだけでなく、項目同士の余白も適切に確保しましょう。

とくにチェックボックスやラジオボタンの羅列では注意したいポイントです。

外側の余白の有無が、タップのしやすさだけではなく文字の読みやすさにもつながります。

外側の余白の有無が、タップのしやすさだけではなく文字の読みやすさにもつながります。

第5条: リンクは極力配置するべからず

例えば、スクロールしようとしたのにタップしてしまったり、読み込みが遅くて、後から読み込まれてきたコンテンツを誤ってタップしてしまうなど、
指でのタッチ操作は、マウス使用時に比べても意図しない操作を引き起こす可能性が高いものです。

このような誤操作がストレスとなり余計な離脱を産まないためにも、フォームページ内には余計なリンクやバナー類を配置しないのが吉です。

誤タップ率の高い画面下のバナー。まさかフォーム画面上でこのように広告を表示させている例はないと思いますが・・・

誤タップ率の高い画面下のバナー。まさかフォーム画面上でこのように広告を表示させている例はないと思いますが・・・

第6条: タップエリアとわかりやすくするべし

スマートフォンはタッチデバイスであるため、マウスオーバー(ロールオーバー)表現がありません
ですのでPC以上に気をつけてデザインしないと、「タップできそうでできなかった」(あるいはその逆も)ということが起こります。

タップエリアをタップ可能だとわかりやすくするためには、

  • アイコンつける
  • 境界線をはっきりさせる
  • タップ時に色を変化させる
    • などが有効です。

      アイコンが有るだけでボタンであることがわかりやすくなります

      アイコンが有るだけでボタンであることがわかりやすくなります

      第7条: 項目数は極力減らすべし

      スマートフォンでの文字入力は、ソフトウェアキーボードを使って実施します。

      ソフトウェアキーボード

      ソフトウェアキーボード

      PCやフィーチャーフォンとは異なり、スマートフォンのキーボードは平らな面であり、入力時の感触もほぼありません。

      また、一度のタップでキーの周囲にスライドさせて五十音入力行う「フリック入力」も、慣れないうちは入力ミスが多く、タイピングの速度も遅くなりがち。

      このようにスマートフォンにおいては、入力そのものがユーザーにとってストレスとなりうる可能性があります。

      ですので、スマートフォンフォームでは、入力項目数は最低限にとどめるようにしましょう。

      • 必須のみ表示する(任意項目は削除する)
      • 複数の項目をひとつにまとめる(入力項目間の移動ストレスを軽減)

      なども手法としては効果的です。

      第8条: 負担の少ない入力形式を使うべし

      スマートフォンでのフォーム入力は、ユーザーにとってストレスとなりうるというのは前述のとおりですが、
      なかでも特に、<テキスト入力>の負担が大きいと言えるでしょう。

      テキスト入力

      テキスト入力

      できるだけ入力の負担を減らすためには、

      • 選択式(セレクトボックスやチェックボックスなど)で代用する
      • 入力サジェストを実施する(メールアドレスなど)
      • 自動入力機能を使う(ふりがなや住所など)
      • GPSを利用した位置情報入力

      など、テキスト入力に替わる入力コンポーネントの利用や入力補助機能を導入すると良いでしょう。

      第9条: 入力形式に合ったキーボードをだすべし

      ただでさえ面倒なテキスト入力時、英字/かな/数字など入力内容にあわせて都度都度キーボード表示を切り替えるのはユーザーにとって負担です。

      ですが、スマートフォンフォームでは、HTML側で指定することで項目フォーカス時に表示するキーボードを切り替えることができます。

      ソフトウェアキーボードの例

      ソフトウェアキーボードの例

      電話番号ならば電話番号用のキーボード、メールアドレスであればメール用など、専用のキーボードを表示するようにしましょう。

      第10条: 回線速度を考慮するべし

      昨今モバイル通信の速度はかなり改善されてきましたが、エリアによっては3G環境でしか通信できない場合もまだまだあり、スマートフォンフォームでも回線速度が遅いことを当然考慮に入れる必要があります。

      ネットワーク

      ダウンロードを解決するにはページの容量を軽くするという対策がもっとも効果的です。

      具体的には、ファイルサイズの大きな画像の利用や、画像多用を控えるなど、フォーム内のコンテンツを見なおしましょう。
      またfacebookやtwitterなどのソーシャルボタン類を取り除くことも効果的です。

      また、どうしても読み込みに時間がかかる場合は、プログレスバーやローディング画像を表示するだけでも、ユーザーの心理負担を軽減することができるでしょう。

      プログレスバー

      プログレスバー

      第11条: なるべく1ページにおさめるべし

      屋外や移動中など、スマートフォンの利用シーンにおいて、ネットワーク環境の不安定さは切り離せない問題です。

      とくにフォーム送信の途中で通信が切れてしまった場合、入力内容が消えてしまうなどのリスクがあり、大きな離脱要因となります。

      ユーザーの利用環境に依るため完全な対策は難しいものの、フォームの遷移回数を減らすことによってリスクを軽減することが可能です。

      入力ページ数を減らせば、単純に遷移回数=リスクが減少する

      単純なことですが、入力ページ数を減らせば、遷移回数=リスクが減少する

      第12条: 屋外でも見やすくするべし

      スマートフォンの利用環境は実に様々で、日中の屋外など非常に明るい環境では、スマートフォンの画面が非常に見づらくなるという問題があります。

      明るい場所でも見やすくするためには、ページの背景と文字の明度差を大きくするのが吉です。

      背景の明度が高い(白っぽい色)ときは、文字は明度を低く(黒っぽく)、明度のコントラストを大きくするほど視認性が向上する

      背景の明度が高い(白っぽい色)ときは、文字は明度を低く(黒っぽく)、明度のコントラストを大きくするほど視認性が向上する

      第13条: 作業は中断されるものと心得よ

      スマートフォンには、プッシュ通知や通話着信など、作業を妨げる要素が多く存在します。

      通知バナーの例

      通知バナーの例

      つまり、ユーザーがフォーム入力中も、途中で作業を中断する可能性を考慮に入れることが大切です。

      たとえば、「作業再開後にフォームがセッション切れで入力やりなおし…」ということを極力防ぐために、セッションの有効期限を長めに設定しておくなどの対策や、
      残り項目数を表示するガイド機能の導入で、入力完了へのモチベーションを維持するなどの対策が効果的なのではと思います。

      第14条: エラーや注意事項はその場に簡潔に明記するべし

      スマートフォンのページはどうしても縦長になります。

      ですので、ページ全体を俯瞰することが難しくなり、ページ上部に重要な情報があった場合、画面上下の行き来をしなくてはならず非常に面倒です。

      エラーや注意事項をフォーム上部にまとめて表示しているフォームは要注意。著しくユーザビリティを低下させている可能性があります。
      入力中に確認したくなる情報は、項目の上下など「その場」に明記するようにしましょう。

      さらにできれば、リアルタイムのエラー判定を実施し、その場その場でミスを修正できることが望ましいでしょう。

      リアルタイムのエラー表示

      リアルタイムのエラー表示

      また、スマートフォンの小さな画面では、メッセージの内容を簡潔に表現するということも大切です。

      第15条: 余計なコンテンツを配置するべからず

      縦に長いスマートフォンのページは、一度に全体を俯瞰できないため、ユーザーはスクロールバーでページの長さを判断しています。

      スマートフォンのスクロールバー

      スマートフォンのスクロールバー

      そのため、ページ下部にフッターコンテンツやナビゲーションなどを豊富に配置している場合、フォームの入力項目のボリュームを不要に大きく感じさせてしまう可能性が出てきます。

      極力、フォームに直接関係のないコンテンツは、ページから取り除くようにしておきたいですね。

      最後に

      いかがだったでしょうか。本日は、スマートフォン向けEFO15カ条をご紹介いたしました。
      ご担当のフォームは、15カ条のうちいくつ達成していましたか?
      PC向けフォームの15カ条とあわせて、ぜひご確認ください!

      もちろんフォームによって効果的な施策はさまざまですので、ぜひ分析と改善を繰り返しながらEFOを進めていただければと思います

      本日はこれまでお届けしてきたスマフォ向けフォーム改善の集大成、というような形になりましたが、「EFO・フォーム改善ブログ」では引き続き、スマートフォンのフォーム改善情報をご紹介していきます。今後共ぜひお付き合いくださいませ。

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

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

エフトラEFO機能アイコン

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

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

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

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

メールアドレスを入力

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