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