基本：モバイルフォームのデザイン

オンライン購入者は、モバイル デバイスを利用して新しいストアを見つけたり、商品を閲覧したり、購入したりすることがますます増えています。米国だけでも、オンライン購入の 35％超がモバイル デバイスで行われており、この数字は毎年増え続けています。

これらの顧客を購読者に転換できるよう、サインアップフォームがデスクトップと同じくらいモバイルでも見栄えよく表示されることが重要です。

メールと SMS の同意を同時に収集するなど、3 つを超えるフィールドが必要な場合は、複数ステップのフォームを検討してください。

複数ステップのフォームを使用すると、見込み購読者を圧倒することなく、より多くの情報を収集できます。さらに、1 つのフォームで複数種類の同意を取得する場合、SMS 用のステップを別に設けることはコンプライアンスのベスト プラクティスです。

または、カスタマージャーニーの後半で購読者をリターゲティングすることで、購読者についてさらに詳しく把握できます。たとえば 30 日後に別のフォームを表示して現在の購読者の誕生日を尋ねたり、ウェルカムシリーズの一部として尋ねたりできます。

フォームのすべてのフィールドが必須であっても、名前の前に誕生日を尋ねるのはやはり不自然です。

一般的に、情報は個人的でないものからより個人的なものへと順に尋ねてください。例：

1. 名前
2. メールアドレスまたは電話番号
3. 誕生日

単一列とは、フォーム内のすべての入力フィールド、フィールド、ボタンが 1 行で並ぶことを意味します。複数列の形式はデスクトップでは問題なく使用できますが、モバイル フォームが乱雑または窮屈に見える場合があります。単一列のフォームは、モバイルでもスキャンしやすくなります。

単一列フォーム	複数列フォーム

CTA ボタンは閲覧者のスキャンの動線の最後に配置し、最後に目に入るようにする必要があります。フォームを完了するために上にスクロールしたり、ボタンを探したりする必要がないようにします。

通常、CTA ボタンは中央または左側に配置されます。

閉じるボタンを右上に配置する必要がある理由は、単にユーザーがそこにあると期待しているためです。

左上や下部付近など別の場所に配置すると、ユーザーがフォームを閉じる方法を探すのに時間を費やし、探している間に不満を感じる可能性があります。その結果、ブランドに対してネガティブなインプレッションを抱いて離脱する可能性があり、今後ウェブサイトを訪問したり顧客になったりする可能性が低くなります。

フォームの各フィールドのすぐ上に、入力してもらいたい情報を明確に説明するラベルを配置してください。

また、説明しているフィールドの近くにラベルを配置し、両者が対になっていることが明確になるようにしてください。

各ラベルは、どのモバイルデバイスで表示しても 1 行未満に収まるようにする必要があるため、簡潔にすることが重要です。

ユーザーがテキストまたは数値を入力する必要があるすべてのフィールドに、入力内容がどのような形式になるべきかを示すプレースホルダーを含めてください（例：メール アドレスの例、名前、日付形式など）。

これにより、誰かが犯してしまう可能性のあるエラーの数を減らすのに役立ちます。ラベルとプレースホルダーを組み合わせて使用すると、フォーム内を簡単に移動できます。

プロのヒント: ボタンにもラベルを付ける必要があります。ボタンのテキストをより具体的にすると、ユーザーの役にも立ちます。

たとえば、単純な「Submit」の行動喚起ではなく、「Subscribe to newsletter」や「Sign up for SMS」とすることで、ボタンの動作がより明確になります。さらに、これにより小さいフォームで貴重なスペースを節約できます。

必須項目と任意項目をお客様に伝えることで、ユーザー エクスペリエンスが効率化されます。特定のフォーム要素を必須にし、その他を任意にできます。

ユーザーが正常に送信できたことがわかるように、フォームの送信後に成功メッセージを含めてください。

フォントサイズを 16 ピクセル以上にすると、テキストの可読性を確保しやすくなります。こうすることで、ユーザーは読むためにズームインする必要がなくなります。

モバイルフォーム内のすべてのテキスト（ラベル、プレースホルダー、ボタンテキストを含む）では、16 ピクセルが推奨される最小フォントサイズです。

フォーム内の各アクションの間には十分なスペースを確保し、ユーザーがクリックしたいフィールドをクリックしづらくならないようにしてください。そうしないと、ユーザーは続けて試すのではなく、離脱してしまう可能性があります。

フォームを作成する際は、ユーザーが間違いにくいようにできるだけ工夫してください。さまざまな種類のデバイスでユーザー エクスペリエンスをテストします。

入力フィールドやボタンなどの「タッチ ターゲット」は、十分に大きくしてクリックしやすくする必要があります。

平均的な成人の指は 11 mm で、約 41.6 ピクセルです。これを考慮すると、タッチターゲットを少なくとも 48 ピクセルにすることがベストプラクティスです。

ティーザーフォームを使用すると、モバイル訪問者は閲覧中に必要に応じてフォームを開閉でき、フォームがサイトのコンテンツを隠す心配がありません。
Google はユーザーの操作を妨げるインタースティシャルのあるサイトにペナルティを科すことに注意してください。ティーザーはこのペナルティを回避するのに役立ちますが、フォームには長い待機時間を設定するようにしてください。

色のコントラストとは、前景のテキストまたはオブジェクトと背景との明るさの違いです。良い色のコントラストはフォームの可読性を向上させ、アクセシビリティの重要な要素です。色のコントラスト チェッカーを使用して、色のコントラストを確認します。

最小のコントラストは 1:1 で、判読できません（白い背景に白いテキストなど）。利用可能な最大のコントラストは 21:1、つまり白い背景に黒いテキストです。つまり、比率が大きいほどコントラストは高くなります。

ウェブ コンテンツ アクセシビリティ ガイドライン（WCAG）では、最小の色コントラストは、小さなテキスト、画像、画像内のテキストの場合は 4.5:1、大きなテキストまたは重要な要素の場合は 3:1 です。

理想的には、コントラストはさらに大きいほうが望ましいです。WCAG によると、より適切な最小値は次のとおりです：

• 小さいテキスト、画像、またはテキストを含む画像の場合は 7:1
• 大きめのテキスト、主要なビジュアル要素などの場合は 4.5:1。

一生懸命作成したコンテンツを、誰もが理解できることが重要です。特定の色の組み合わせを使用すると、特定のグループにとってフォームが読みにくくなったり、まったく読めなくなったりする場合があります。

色覚多様性に配慮した組み合わせ
青とオレンジ		青と黄色
青と赤		オレンジと黄色
青と茶色

使用しないものについては、色覚異常にはさまざまな種類があることを念頭に置いてください（赤と緑だけではありません）。

避けるべき色の組み合わせ
緑と赤		青と紫
赤とオレンジ		青とグレー
グリーンとオレンジ		紫と赤
赤と茶色		青緑とピンク
緑と茶色		ブルーグリーンとグレー
緑と青		黄色とピンク
薄い緑と黄色		ピンクとグレー
緑とグレー		グレーとブラウン
緑と黒		オレンジとブラウン
赤と黒