Webフォーム作成の記事
ARTICLEフォームをスマホ対応するには？注意すべきポイントと作成方法
フォームをスマホ対応にすることで、より多くのユーザーから高い反応を得られる可能性があります。当然ですが、スマートフォンで見やすいフォームを作ることが大切です。スマホ対応のフォームの作り方とポイントを解説します。ぜひ作成する際の参考にしてください。
フォームをスマホ対応させる
国内のスマホ利用者は6000万人を超えています。フォームをスマホ対応にすることで、より多くのユーザーの利便性が高まります。スマホサイトの特徴やレスポンシブデザインについて解説します。
スマホサイトの特徴
スマホサイトの特徴は、主に2つ挙げられます。
- スクロールなしで表示できる情報がパソコンより少ない
- 文字種が変わるたびにキーボードを切り替えながら入力する
スマートフォンはパソコンと比べてディスプレイが小さいので、画面に収まる情報量はどうしても少なくなってしまいます。そのため、スマホ対応のフォームを作るなら、小さなディスプレイに合わせてサイズを調整しましょう。
また、スマホ入力では、文字種を変えるたびにキーボードを切り替えなければいけません。そのため、フォームの項目を入力するのにパソコンよりも手間がかかります。ストレスなく入力できるフォームを作ることもポイントでしょう。
レスポンシブデザインとは？
レスポンシブデザインは、1つのHTMLでさまざまな端末に対応しているデザインのことです。パソコンでもスマートフォンでも、レイアウトやデザインを最適化して表示できます。レスポンシブデザインのメリットは、下記の通りです。
- 1つのHTMLだけなので管理の手間が少ない
- PCサイトもスマホサイトも同じURLなのでシェアされやすい
- 検索順位を上げるのにも優位に働く
レスポンシブデザインでスマホ対応させるには、CSSでHTMLを制御します。CSSを利用することで、端末の種類に関わらずサイトを適切に表示できるのです。
フォーム見直しのポイント
前述のように、現代においてはスマートフォンでもWebページが快適に閲覧可能であることはとても大切です。フォームにおいても同じことが言えるでしょう。
まずは『フォームのサイズ感』『キーボードの種類』『フォームの選択方式』がスマートフォンに適しているかを見直しましょう。これらを見直すことで、より使いやすいフォームになります。
入力フォームは適切なサイズか
入力フォームをスマートフォンに最適なサイズにすると、ユーザーの使いやすさが向上します。特に意識したいのは、入力フィールドやボタンの高さです。
スマートフォンは直接指でディスプレイをタッチして入力や選択をします。そのため、入力フィールドやボタンが小さ過ぎると思うように入力ができません。
大人の指の大きさは、平均で約9mmといわれています。9mmをピクセル数にすると、48ピクセルです。入力フィールドやボタンの高さは、48ピクセル以上に設定しましょう。
その項目に適したキーボードか
スマートフォンには、入力内容に合ったキーボードを表示する機能が搭載されています。申し込みフォームにこの機能をうまく活用すると、入力しやすいフォームが作れます。スマートフォンは文字種が変わるごとにキーボードを変更しなければいけないので、その手間を省けます。
キーボードは下記の8種類です。
| キーボードの種類 | キーボードの内容 |
|---|---|
| input type = “text” | 通常のキーボード |
| input type = “tel” | 0～9の数字キー |
| input type = “number” | 数字と記号 |
| input type = “password” | 入力された文字を隠す |
| input type = “date” | 日付を選択できる |
| input type = “datetime” | 日付と時刻を選択できる |
| input type = “month” | 月と年を選択できる |
選択項目はプルダウンになっているか
スマホ対応の入力フォームでは、選択項目をプルダウン式にしましょう。スマホはディスプレイが小さいので、プルダウンにした方がすっきり見やすくなるためです。
また、記述式にした場合、キーボードの切り替えによる誤入力が発生する可能性が高くなります。プルダウン式で選択できるようになっていれば、誤入力の防止にもつながるのです。
入力フォームをスマホ対応する方法
入力フォームをスマホ対応にするとき、起こりやすい問題は主に3点です。入力モードの切り替え・フォーカスの回避・画面からはみ出るときの対処、この3つに注意してスマホに対応させましょう。
入力モードの切り替え
スマホは入力モードを切り替えるとき、その都度キーボードを変更します。これが面倒で、スマホからフォーム入力したくない、というユーザーもいるでしょう。そこで大切なのが、入力モードの切り替えです。
項目ごとに最適なキーボードが表示されるよう指定すると、ユーザーが自分で切り替えなくても、自動的に必要なキーボードが表示されます。ユーザーの面倒なことを1つ減らすことで、回答率アップに役立つ可能性があります。
CSSでフォーカス回避
入力フォームをスマホ対応にしたとき、必要のないフォーカスをしてしまうことがあります。テキストフォームをタップすると、自動的にフォーカスしてしまうのです。ここでは、フォーカスを回避する方法を2つ紹介します。
- ズーム機能をオフにする
- フォームのフォントサイズを16ピクセル以上にする
ズーム機能自体をオフにすれば、当然、テキストフォームをタップしたときのフォーカスもしなくなります。ただし、ページ全体のフォーカス機能がなくなりますので、フォーカスしたいときにもできなくなるというデメリットがあります。
また、フォントサイズが16ピクセル以上の場合、自動フォーカスは起こりません。この方法を取る場合、inputタグにフォントサイズを指定しましょう。
画面からはみ出る場合の対処法
入力フォームがスマホ画面からはみ出る場合には、『style.css』を編集して対処しましょう。『style.css』にフォームの幅を調整するコードを書き込みます。ページの一番下までスクロールして、下記のコードを書き込みましょう。
/*コンタクトフォームの幅調整*/.contactform-width { max-width: 90%;
上の例では『max-width: 90%;』になっています。実際にコードを書き込むときには、フォームの幅が画面にうまく収まる適切な数字にしましょう。
簡単にできるフォーム作成術
入力フォームの作成は、HTMLやCSSなどの知識がなくてもできます。そのときに使うのが、フォーム作成サービスです。サービスを活用すれば、スマホ対応の入力フォームを作るのはもちろん、スマートフォンから入力フォームを作ることもできます。
Googleフォームを使う
Googleフォームは、代表的なフォーム作成サービスです。Googleアカウントがあれば無料で使えます。案内に従って選択していけば、簡単にフォームが作成可能です。シンプルで見やすいデザインのうえ、イメージに合わせて色や写真の選択もできます。
もちろんスマートフォンにも対応しているので、スマートフォンを意識したフォームを作るときにも最適です。回答の仕方も、プルダウン式などスマホで見やすい方式が選択できます。そのため、簡単にスマートフォンでも使いやすいフォームを作れるのです。
Googleフォームの使い方を学ぼう。メリットや使い方の例を紹介
その他のフォーム作成サービス
フォーム作成サービスは、Googleフォーム以外にもたくさんあります。無料で簡単に使えるものもあれば、有料でデザイン性やカスタマイズ性に優れたものもあります。
そうしたサービスの多くが、スマートフォンに対応しています。スマホ対応のフォームを作れるというだけでなく、スマートフォンを操作してフォームを作成できます。
スマートフォンで管理画面にログインすれば、スマホ対応の入力画面から、フォームの作成・閲覧ができます。簡単なフォームなら、外出先からでもすぐに作ってホームページに設置が可能です。
フォーム作成のASP型サービスとは。できることや選び方を紹介
まとめ
スマートフォンは利用者数が伸び続けています。スマホ対応フォームを作成し、設置することは、コンバージョンを増やすことにつながるでしょう。フォームをスマホ対応するときに大切なのは、スマホサイトの特徴を知ったうえで作成することです。
画面のサイズが小さいこと・キーボードの切り替えの面倒さ、といったことを意識してフォームを作れば、ユーザーが使いやすいフォームになります。フォーム作成サービスの利用も便利です。パソコン、スマートフォンはもちろん、さまざまな端末に対応したフォームを簡単に作ることができます。
スマホ対応フォームの特徴や作り方を知り、今後のフォーム作りの参考にしましょう。
また、簡単にフォーム作成をしていきたい方には、弊社のマルチデバイス対応のフォームが簡単操作で作成できる Webフォーム作成サービス「SPIRAL®」もおすすめです。問い合わせ・資料請求は無料ですので、まずはお気軽にお問い合わせください。
