スマホ向け入力フォームのデザインで注意すべき5つのポイント

スマートフォンは電話やメールといったコミュニケーションだけでなく、いつでも「買い物」ができる生活に欠かせない存在です。

Forresterの調査によると、アメリカにおける2018年のスマートフォンによる購買額は1兆ドルにものぼるそう。

今回は購買促進に役立つ、スマホ向けフォームデザインで注意すべき5つのポイントご紹介します。

1. スマホUIとデスクトップUIの違いを理解する

スマホユーザーに向けたフォームをデザインする前に、まずはスマホUIとデスクトップUIの違いを理解する必要があります。以下の点に注意しましょう。

ナビゲーション

スマホなどのモバイルデバイスにおいて、ユーザーはマウスではなく指やタッチペンによるタップ動作を行います。

そこで必要になるのが、タップ動作に適したナビゲーションです。

スマホに最適化されたナビゲーションについては、以下の記事が参考になります。

アスペクト比

スマートフォンユーザーの80％〜90%がスマートフォンを縦に持っているため、必然的に縦スクロールが多用されます。縦画面で見やすいUIデザインを考えましょう。

またスマホは画面が小さめなので、スクロールなしで購買フォーム全体を表示することはほぼ不可能です。スクロールした時のユーザビリティを考慮するのも大切です。

フォントサイズ

スマホの場合、本文に使うフォントの人気サイズは16pxとされています。16pxを基準にフォントサイズを検討するのがおすすめです。

フォントに関する調査をおこなっているマサチューセッツ工科大学は、以下の2点を守ることを推奨しています。

• 10px以下のフォントを避ける
• 文字幅を標準にする

▲出典：nngroup

2. ユーザーを意識する

デザイナーが好きなデザインが、かならずしもユーザーに好かれるとは限りません。

ユーザーフレンドリーなフォームをデザインするためには、デバイスの大きさを考慮して、ユーザーの環境を理解する必要があります。

シングルカラムレイアウト

スマホで行う購買プロセスでは、マルチカラムレイアウトは不向きであることが多いです。

Baymard Instituteがおこなった調査によると、マルチカラムレイアウトを採用した購買プロセスでは、ユーザーが必要なフィールドをスキップしてしまったり、間違った情報を入力してしまったりする場合があるそう。

そこでおすすめなのがシングルカラムレイアウトの採用です。スマホでの閲覧を第一に考えたシンプルなレイアウトなので、スマホが主流の現代にはぴったりといえます。間違いが起きづらく、ユーザーが購買プロセスを完了しやすくなります。

▲出典：Baymard Institute

マルチステップフォーム

ユーザーに入力してもらう情報が多い場合は、購買フォームをステップごとに分割しましょう。

マルチステップフォームは、ユーザーがプロセスを理解することを助けるだけでなく、入力した情報の整理にも役立ちます。

またプログレスバーを配置して、進行状況をユーザーに伝えることもお忘れなく。

▲出典：Dribbble

フォームは最小限に

マルチステップフォームをおすすめする一方で、フォームは最小限にしなければなりません。多くの情報をユーザーに求めすぎると、ユーザーは途中でフォームの入力を放棄してしまいます。

プロセスはできるだけシンプルにして、重要なフィールドに絞ることを意識しましょう。

3. オートメーションを取り入れる

オートメーションは、面倒なフォームの入力を助けてくれる自動入力システムです。

住所や電話番号などの情報が自動的に入力されると、ユーザーは手間が省けて嬉しいですよね。

オートコンプリートとオートフィル

郵便番号を入力すれば住所を自動で埋めてくれるシステムは、導入もしやすくおすすめです。

購買フォームの途中放棄が防げます。

オートコレクト

都市名や住所などの誤入力が、自動で修正されるようなシステムもおすすめです。

▲出典：Google

自動検出

位置情報を使用して国を識別したり、クレジットカード番号の最初の4桁で種類を識別するのが、この自動検出にあたります。

プライバシーに関わる位置情報を使う場合は、必ずユーザーに許可を求めるようにしましょう。

4. ドロップダウンは使わない

小さな画面にドロップダウンは不向きです。スライダーやステッパーなどで代用しましょう。

スライダー

選択範囲が広い場合や、数値の範囲が大きい場合は、スライダーの使用をおすすめします。

▲出典：Smashing Magazine

ステッパー

ステッパーの魅力は、細かな数の調整がしやすい点です。

ホテルや航空券の予約人数など、ステッパーは値の小さい入力をするのにおすすめ。

▲出典：Lukew

セグメント

飛行機の座席の位置（通路側、中央、窓側）など、限られた選択肢を提示する場合には、セグメントがおすすめです。

▲出典：Lukew

5. ラベルで入力を手助けする

クレジットカードや電話番号の入力フィールドは、ユーザーが入力しやすい形式を探りましょう。ユーザーが視覚的に理解できる、入力間違いを防げるものが望ましいです。

たとえば以下のように、電話番号の入力欄にに「区切り記号」を入れるのも良いでしょう。

▲出典：Baymard

Googleのプロダクトディレクターであるルーク・ウォロブスキー氏は、「プレースホルダーテキストは、フィールドにすでに入力されているように見えるため、避けるべきだ」と述べています。

フィールドラベル

入力する内容を説明してくれるフィールドラベルは、UIデザインにおいて重要な存在です。フォームにラベルを配置する方法はさまざまですが、まず考えるべきは「どこに配置するか」です。

たとえばCSSやJavaScriptで作成できる、フローティングラベル。はじめはテキストボックスにインラインラベルとして表示されますが、ユーザーが入力を開始するとラベルが上部に移動されます。

この仕組みにより、ユーザーは入力している項目を確認しながらフォームを埋められるため、混乱を防げます。

▲出典：Android Tutorials Hub

おまけ：CTAボタンに注目

すべてのコンバージョンは、デバイスに関係なくCTAボタンに依存しています。

CTAボタンはユーザーに「次のステップでなにをすべきか、そしてなにが起こるか」という情報を与えてくれます。

CTAボタンの分かりやすさを向上させるために、以下の点に気を配ってみましょう。

• 行動を促すアクションワードを使用する
• CTAボタンをクリックするメリットを明確に説明する

▲出典：Dribbble

CTAボタンについて、詳しくは以下の記事をご覧ください。

おわりに

購買フォームのデザインはCVを大きく左右します。しかしスマホは画面が小さいぶん、購買フォームの最適化プロセスは複雑です。

だからこそ今回ご紹介したヒントが参考になるはず。ユーザーフレンドリーなフォームデザインにぜひこの記事を役立ててみてください。

（執筆：Pete McCain　翻訳：Nakajima Asuka　編集：Sansui Riho）