パソコンに限らず、スマホでのインターネット利用が普及したことにより、企業のWebサイトやWebフォームの形式も、スマホ形式への最適化が求められています。
スマホ対応したフォームは、フォントサイズや入力方法など、デザインに気を配りながら作成することが重要です。
そこで本記事では、kintone連携サービス「フォームブリッジ」を使ったスマホ対応フォームの作成方法と、作成時のポイントを解説します。
フォームブリッジの導入を検討中の方、スマホでのフォーム回答を促したい方は、ぜひ参考にしてください。
スマホ対応したフォーム作成時のポイント
スマホ対応したフォームを作成する際は、ユーザーの操作性を優先してデザインする必要があります。以下で、具体的なポイントを見ていきましょう。
入力フィールドやボタンのサイズを適切なものにする
スマホはパソコンに比べて画面が小さく、一度に表示できる情報量が限られます。
パーツが小さすぎる、または大きすぎると、フォームの視認性が落ちてしまい、ユーザーにストレスを与えるほか、誤操作を招く恐れがあります。
入力フォームやボタンは、画面や操作する指の大きさに合わせて、適切なサイズに設定しましょう。
まず、大人の指の大きさは平均約9mmと言われており、48ピクセルに換算されます。よって、入力フィールドやボタンの高さは、48ピクセル以上が妥当です。
また、iPhoneのSafariブラウザにおいては、フォントサイズが16pt未満の際に、自動的にズームインされる機能が備わっています。これを参考にすると、フォントサイズは16pt程度が望ましいと言えるでしょう。
なお、ボタンは色をつけたり、線や影をつけて背景と明確に境界を設けたりすることで、タップ可能であることを視覚的にアピールすることもポイントです。
選択項目はプルダウンが望ましい
ユーザーが画面をスクロールする手間を最小限にするため、選択項目はプルダウン形式が最適でしょう。プルダウン形式にすることで、スマホの小さい画面でも視認性を保てます。
また、キーボードを切り替える必要もないため、誤入力も防げます。
<h3入力項目は最小限にする
スマホでのテキスト入力は全て指の操作で行うため、パソコン操作よりもユーザーに負担を与えてしまいます。よって、スマホ対応のフォームでは、入力回数を極力減らすため、入力項目の設置は最小限にしましょう。
フィールドの入力文字数や設問数を見直し、削れる箇所は削っていきます。
また、住所入力項目などでは、郵便番号の入力から自動的に住所を表示し、可能な限りユーザー自身が入力する機会を減らします。
フォームブリッジはスマホにも対応
kintone連携サービス「フォームブリッジ」は、アンケートやお問い合わせフォームなどのWebフォームを簡単に作成できるツールです。
フォームブリッジで作成したフォームから回答がある度、kintoneに自動でデータが保存されます。回答情報をkintone内にわざわざ移し替える必要がなく、入力ミスや誤操作を防げるほか、その後の集計作業の手間を省けます。
皆さん、フォームブリッジはご存知でしょうか？kintoneと連動するWebフォームで、kintoneアカウントがなくてもレコード追加ができるサービスです！ kintoneのスタンダードコースを契約しているなら、ぜひ利用してほしいの[…]
作成したフォームのURLは自動で生成されるため、Webサイトに埋め込んだり、QRコード化してメールで共有したりできます。
また、フォームブリッジで作成したフォームは、スマホ表示での最適化が可能です。スマホ表示の際に、非表示にしたいフィールドを選択したり、ラジオボタンなどの選択肢系のフィールドをスマホで見やすい形式に変更したりできます。スマホ対応により、フォームの受信者はパソコンを開かずに回答できるため、フォームの回答率向上も期待できるでしょう。
フォームブリッジを使ったスマホ対応フォームの作成方法
では、フォームブリッジを使ったスマホ対応フォームの作成手順を見ていきましょう。
ここでは、一定のWebフォームが完成した状態から、スマホ用フィールドを設定する方法をご紹介します。スマホ用フィールドの設定では、スマホに表示・非表示する設定を選んだり、テーブルや選択肢をスマホで見やすい形式に変えたりできます。
スマートフォン用フィールド設定を開く
フォームブリッジで作成したフォームの詳細から、「スマートフォン用フィールド設定」を開きます。
スマホ対応で表示するフィールドを選ぶ
「スマホ用フィールド」から、スマホ専用のレイアウトで表示したいフィールドを選択します。
なお、スマホ専用のレイアウトに対応しているのは、テーブルやラジオボタン・ドロップダウン・チェックボックスなどの選択肢系、日付・日時・時刻などの日時系のフィールドです。例えば、テーブルを縦に表示したり、日付をカレンダー形式ではなくプルダウン形式で表示したりできます。
スマホで表示しないフィールドを選ぶ
「フィールドを表示しない」から、スマホでフォームにアクセスした際に、非表示にしたいフィールドを選択可能です。
右側のスマホ画面で確認する
右側のスマホ画面で、設定が正しく反映されているかを確認します。
設定を保存・更新する
問題がなければ、左下の「保存」をクリックします。
最後に、「編集中の設定をフォームに反映」まで行えば、スマホ対応フォームの設定が完了です。
フォームブリッジでスマホ対応フォームを簡単作成
今回はスマホ対応のフォーム作成時のポイントと、kintone連携サービス「フォームブリッジ」を使ったスマホ対応フォームの設定方法を解説しました。
スマホはパソコンよりも画面が小さくなり、指での操作がメインとなることから、入力の手間や誤操作を防げるような、見やすいフォームの作成が望ましいです。
kintoneと連携したフォームブリッジでは、スマホでも視認性と操作性を保ったWebフォームを簡単に作れます。
スマホ対応のフォームを作成すれば、パソコンの有無に限らず、より多くのユーザーに回答を求められるでしょう。
