【保存版】スマホサイトの入力フォームで成果を出す10のテクニック

こんにちは。アイスリーデザインでスマホサイトのデザインを担当している武本です。弊社では大手ECサイトのスマホサイトのデザインを作成することがもっとも多いです。

そこで重要なのが登録・入力フォーム。

登録をしてもらうのはもちろんの事、入力してもらった情報はデータとしても非常に重要。是非とも入力してもらいたい所ですよね。僕が普段、フォームページをデザインする際に「どうしたら登録してもらえるのか」、「どうしたら入力しやすいのか」を考え、気をつけている10個のポイントを紹介したいと思います。

1.文字はできるだけ少なくする

スマホ画面に同じような言葉がたくさん詰まっているのは、そのページを見るだけでページの第一印象が「入力が面倒くさそう...」になってしまいます。ユーザーにそう思われてしまうと絶対に登録してもらえません。文言の重複は可能な限り避け、文章は徹底的にシンプルにしましょう。

例えば、ラベルに「電話番号」と表示があり、その下に「電話番号を入力してください」という説明が入っている場合は、ラベルだけにします。

2.入力する項目は少なくする

登録フォーム・問い合わせフォームどちらにせよ、これが一番重要です！
登録する項目が多ければ多いほど、ユーザーに嫌われます。フォーム入力が好きなユーザーは、いません。

suumo

3.不要なものは閉じておく

文字が多い、項目が多いのと同じで、ページに遷移した時に見えていなくて良いものは閉じておきましょう。例えば、休暇中の連絡先が違う時などに、別の連絡先を入力する場合は、最初は入力欄を閉じておきましょう。使う人が「休暇中の住所/連絡先」にチェックを入れると開くようになります。

car

4.縦方向の配置する

要素を左右に配置すると、スマホ画面で見づらくなるだけでなってしまいます。また、目線が左から右にジグザグに動くことになる為、実際以上に項目が多いと感じさせてしまいます。要素は縦方向で配置するのがベターです。

5.プレースホルダーを使う場合は、ラベルが見えるよう、ひと工夫。

最近、よく見かける入力フォームの中に「placeholder」で文字をフォームのラベルを表示するもの。一度ユーザーが文字を入力してしまうと、そのあとに何を入力する場所だったかわからなくなってしまいます。
「placeholder」を使う場合は、入力した文字が削除したら、フォーム内に表示されているラベルがもう一度見えるようにしましょう。