スマホ対応の入力フォームのデザインに役立つ7つのポイント

スマホ対応の入力フォームのデザインに役立つ6つのポイント

 パソコン、スマートフォン、タブレット。10年前と比べ、私たちは画面サイズの異なる多くの端末に囲まれて生活するようになりました。そして2016年以降、スマートフォンの普及率はパソコンに接近しており、自社のキャンペーン運用時にもスマートフォンユーザーを意識しなければならなくなった企業の数も増えているのではないでしょうか。
 そこで今回は、スマートフォン対応の入力フォームデザインを行う際に知っておきたい6つのポイントをまとめてみました。皆さんはいくつご存知でしょうか。

レスポンシブ・デザインを採用する

 最も理想的でシンプルな解決方法は、レスポンシブ・デザインを採用することです。レスポンシブ・デザインとは、画面の幅に応じてページレイアウトが自動的に変わる技術です。この技術を採用すれば、ひとつのページで様々な大きさのディスプレイに最適なレイアウトをそれぞれ表示させることができます。

スマホ対応の入力フォームのデザインに役立つ6つのポイント

レスポンシブ・デザインの入力フォームを簡単作成! フォーム作成なら

WiLL Formの無料トライアルを申込む

 Googleは「検索結果において、モバイル向けのページ評価に基づいたアルゴリズム(モバイル ファーストインデックス)を導入する」とアナウンスしています。その際にも、単一のソースでPC・モバイルいずれにも対応できるレスポンシブデザインはGoogle内部の方も推奨しています。つまりGoogleも、レスポンシブ・デザインであれば、ユーザーが快適にモバイルサイトを閲覧できると判断しているといっても良いのではないでしょうか。

 当社の『WiLL Cloud』シリーズのように、近年はプログラミングの知識を必要とせずにレスポンシブ対応のページ作成が可能なサービスも存在します。こういったサービスをうまく活用し、効率的にレスポンシブデザインを採用しましょう。

入力フィールドの高さは48ピクセル以上にする

スマホ対応の入力フォームのデザインに役立つ6つのポイント

 入力フィールドやボタンの高さは、48ピクセル以上が妥当です。大人の指の平均的な大きさは約9mmといわれており、これをピクセル数に直すと48ピクセル程度となります。したがって、モバイル用のフォームは、入力フィールドの高さが48ピクセル以上にすることが望ましいと言われているのです。

フォントサイズは16ptを目安にする

 入力項目やプレイスホルダーの文字サイズはどのくらいの大きさが最適といえるのでしょうか。これには正解は存在しないかと思いますが、目安になる指標はいくつか存在します。iPhoneのsafariブラウザには、16pt未満のテキストがタップされたときに自動的にズームインする機能があります。つまりアップル社は、入力フォームで用いるフォントサイズは16pt以上が望ましいと考えているようです。

 この16ptを目安にその前後のフォントサイズでフォームを作成し、自社にとって最適なサイズを選ぶのも良いかもしれません。

入力項目によって最適なキーパッドを表示する

スマホ対応の入力フォームのデザインに役立つ6つのポイント

 スマートフォンユーザーであれば一度はご覧になったことはあると思いますが、スマートフォン端末には「入力する内容ごとに最適なキーパッドを表示する」という便利な機能が搭載されています。この機能を自社の申し込みフォーム作成にもうまく活用すれば離脱率の改善に繋げられるでしょう。キーパッドは以下の8つに分類されます。

タイプ 説明
input type = “text” 通常のキーボードが表示されます
input type = “email” 通常のキーボードに「@」と「.com」を加えて表示されます
input type = “tel” 0~9の数字キーが表示されます
input type = “number” 数字と記号のキーボードが表示されます
input type = “password” 入力された文字を隠します
input type = “date” 日付セレクタが表示されます
input type = “datetime” 日付と時刻のセレクタが表示されます
input type = “month” 月/年セレクタが表示されます

入力フォームの設置数は極力少なくする

 これはスマートフォンに限りませんが、入力フォームの数はなるべく最小限に留めるべきです。別のエントリーでも記載したとおり、フォーム数が2つ増えるごとにコンバージョン率に1~2%の悪影響を与えることがわかっています。小さな画面のスマートフォンの場合、パソコンよりもスクロール量が増えるため影響はより顕著に出るでしょう。欲張らず、目標に応じた最低限の入力フォームのみ設置することを心がけましょう。

スマホ対応の入力フォームのデザインに役立つ6つのポイント

ラベルと入力欄を配置に気を付ける

 入力フォームのラベルと入力欄の配置は、上下配置と左右配置が存在します。通常、スマートフォン利用時は、上下配置が向いています。

入力フォームのラベルと入力欄の配置例

 画面幅の大きなデスクトップ端末では、どちらの配置でも特に大きな問題はありませんが、画面幅が小さいスマートフォン端末の場合、左右配置にしてしまうと、入力フォームが窮屈な印象になる場合があります。

 また、スマートフォンは、縦にスクロールしながら利用するため上下配置の方が視認性や使い勝手が向上するという理由もあります。

 視認性や使い勝手の良さは、フォームからの途中離脱を防ぐ役割もあるため、スマートフォン対応の入力フォームでは、ラベルと入力欄は上下配置にするのがお勧めです。

ページ読み込み速度を高める

スマホ対応の入力フォームのデザインに役立つ6つのポイント

 申し込みフォームに限らず、スマートフォンにおいて画面の読み込み速度を高めることはコンバージョン率の向上に繋がります。ウェブサイト構築プラットフォーム『Duda』の調査によると、平均ページ読み込み速度(コンテンツが表示されるまでにかかる時間)が0.4秒改善されると、コンバージョン率が23%改善することがわかっています。

 では、どのように速度を高めれば良いのでしょうか。ひとつの指標としてGoogleが無償提供している 『PageSpeed Insights』が参考になります。このサービスは、自社のウェブサイトの表示速度を100点満点で採点してくれます。減点対象となった箇所はJavaScript、画像容量などの要素別に修正方法も表示してくれます。

スマホ対応の入力フォームのデザインに役立つ6つのポイント

 Googleが唱えるポイントは主に以下の4つとなります。

  • JavaScriptを圧縮して最適化しているか
  • CSSコードとプレースメントを縮小しているか
  • 画像サイズを最小限に抑え、CSSイメージスプライトを使用しているか
  • 大きなファイルを必要とするリソースを事前読込みしているか

 わたしたちが提供する申し込みフォーム作成システム『WiLL Form』は、こうしたポイントを押さえた表示速度最適化のアップデートを2017年12月に行いました。

>> WiLL Formの詳しい活用方法を見る

まとめ

 いかがでしたでしょうか。細かいポイントも記載しましたが、こうした小さな改善の積み重ねが大きな成果に繋がるものです。現在ご運用中の申し込みフォームで未対応のポイントがあれば是非お試しください。

最後までお読みいただきありがとうございました。

著者
WiLL Cloudマーケティングチームのロゴ
WiLL Cloud マーケティングチーム ウェブマーケティングに関する情報をお届けするブログです。皆様に役に立つ情報、アップデート、イベントなど、様々なことを発信します。

メルマガ登録 »