フォーム・LP作成

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

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

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

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

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

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

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

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

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

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

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

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

 スマートフォンユーザーであれば一度はご覧になったことはあると思いますが、スマートフォン端末には「入力する内容ごとに最適なキーパッドを表示する」という便利な機能が搭載されています。この機能を自社の申し込みフォーム作成にもうまく活用すれば離脱率の改善に繋げられるでしょう。キーパッドは以下の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%の悪影響を与えることがわかっています。小さな画面のスマートフォンの場合、パソコンよりもスクロール量が増えるため影響はより顕著に出るでしょう。欲張らず、目標に応じた最低限の入力フォームのみ設置することを心がけましょう。

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

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

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

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

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

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

まとめ

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

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

著者
WiLL Cloud マーケティングチーム

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

メルマガ登録 »