Webフォーム作成の記事
ARTICLE入力フォームデザインのコツ20選！UXが向上しCVにつながる効果的なフォームデザインとは
わかりやすい入力フォームを作成したいなら、デザインにこだわることが重要です。この記事では、入力フォームの魅了的なデザインにするコツを合計20選紹介しているので、新規フォームを作成する際や、既存の入力フォームをクオリティアップする場合の参考にしてください。
目次
入力フォームのデザインにこだわるべき理由
入力フォームは、問い合わせや応募をしてもらうためだけに利用されることから、比較的シンプルなデザインを選びがちです。そのため、特段デザインにこだわる必要はないと考えてしまう人も多いでしょう。
しかし、入力フォームには、配置やカラーなどの見せ方でこだわるべきポイントがいくつもあります。まずは、入力フォームこそデザインにこだわるべき理由について見ていきましょう。
CV（コンバージョン）率アップを期待できる
入力フォームのデザインにこだわり、ユーザーが好印象を抱くページを用意できれば、こだわられていないページと比べてCV（コンバージョン）を向上させやすくなります。まず人は、第一印象で物事を判断する傾向が強いです。見た目や雰囲気、見やすさなどで利用するか、否かを決定することが多々あります。
例として、広島市立大学で実施された「味覚印象と商品情報を表現する色抽出と飲料パッケージ画像への適用」という研究によると、商品パッケージのイメージに合うカラーを選択することで、消費者による商品の購買意欲が向上しやすいことがわかりました。
出典：J-Stage「味覚印象と商品情報を表現する色抽出と飲料パッケージ画像への適用」
同じく入力フォームデザインについても、人にプラスな印象・マイナスな印象を与える要素です。第一印象で問い合わせをするか（応募をするか）の判断が変化しやすいことから、ユーザーニーズを汲み、好印象を与えるデザインを構築することが欠かせません。
ユーザーが直感的に入力できる
入力項目の見た目・配置・項目の順番など、入力フォームデザインにこだわれば、ユーザーがストレスを感じることなくフォーム入力を終えられるようになります。
例えば、デザインが統一された入力フォームなら、「次はこの項目を入力すればいいのか」というように、悩むことなく直感的に情報を入力できるでしょう。一方で、配置がバラバラであったり、入力が必須の項目・任意の項目がわかりづらい入力フォームであったりすると、入力に時間がかかるのはユーザーのストレスになります。
「入力に時間がかかる」「なぜかエラーが起きた」といった状況となり、ストレスが影響してページから離脱されてしまうケースもあるので、ユーザーが負担に感じないデザインを用意することが重要です。
入力フォームデザインを向上する基本的なコツ10選
まずは、入力フォームに確実に反映したい基本的なデザインのコツを10選紹介します。フォームデザインにすべての項目が盛り込まれているのかチェックしつつ、構築を進めてみてください。
設問の順番を意識する
入力フォームは、設問の順番を意識したデザインにすることが大切です。
例えば「名前（漢字）」の下に「名前（ふりがな）」があるなど、一貫性のある順番でなければ、ユーザーにストレスを与えてしまいます。最初に基本情報を入力してもらい、その後に質問内容や応募内容などを入力するというように、ユーザーがひと目で順番を把握できるデザインにしましょう。
項目と入力欄を縦に配置する
入力フォームに挿入する項目・入力欄は、必ず縦並びに配置しましょう。
例えば、横並びで2つの項目を設けた場合、デバイスで表示できるサイズによっては横にスライドしなければ入力できないなど、ユーザーに視覚的な負担を与えてしまいます。視線移動が多い入力フォームのデザインはストレスの原因になるため、縦配置を意識してください。
チェックボックスやラジオボタンを縦に配置する
前述した入力項目・入力欄の縦並びと同様に、選択項目である「チェックボックス」「ラジオボタン」も縦並びの配置がデザインとして好ましいです。
複数の選択肢を横並びで配置した場合、文字量が多いせいで対象項目を見つけにくくなります。項目の選択ミスにもつながるため、わかりやすい縦配置のデザインを取り入れましょう。
入力項目をグループに分ける
入力フォームは、次のようにユーザーに入力してほしい情報をグループに分けることが大切です。
- 基本情報（名前・年齢・性別など）
- 希望内容・質問内容（希望日・質問内容など）
項目を分けることにより、ユーザーが入力すべき内容をひと目で認識できるようになります。グループを枠で囲む、見出しをつける、背景色をつけるといった方法でデザインしてみてください。
大文字と小文字を使い分ける
入力フォームのフォントは、次のように大文字と小文字を使い分けることでデザインの見やすさが向上します。
- MAIL ×
- mail ×
- Mail 〇
使い分ける理由は、すべて大文字、すべて小文字だと、文字数が多いほど読みづらくなってしまうためです。また、なるべく英語表記にすることを避けるようにし「Tel」の代わりに「電話番号」を使うなど、日本語表記を選択しましょう。
選択肢が多いならドロップダウンを利用する
次のように選択肢が多く、複数行にまたがるような情報を挿入する際には、ドロップダウン機能を使って、選択肢をリストにまとめるのがおすすめです。
- 都道府県
- 複数個から選択する項目（選択式の年齢など）
ドロップダウンとは、ひとつの枠に複数の選択肢をまとめられる機能のことであり、クリックすることで選択肢のリストから必要な項目を選べます。選択肢が少数であればチェックボックスやラジオボタン、選択肢が多ければドロップダウンを使うというように、適宜調整をするとよいでしょう。
入力文字数を予想して空欄の幅を決める
入力欄は、想定される入力文字数の長さに合わせて幅を決めることが重要です。
例えば電話番号12桁の場合、12文字分の幅を用意しておけば、不必要な改行が生まれません。なお、項目ごとに幅を変えると逆に見づらさが生まれるため、各項目のなかでも最大幅のものに揃えるなど、統一性をもたせることをおすすめします。
入力フォームの色を意識する
入力フォームのデザインでは、次のような色を意識することが重要です。
- 入力必須という文字を赤にする
- 見出しには背景色をつけ、入力欄は白背景にする
- 入力が終わった項目に青枠が表示されるようにする
赤は注意、青は安全というように、人が感じる色をデザインに取り込むことで、ページの使いやすさが向上します。
必要であれば画像を挿入する
用意する設問に対し「画像があったほうがユーザーが回答しやすくなる」という場合には、関連する画像を挿入しましょう。
文章だけでは伝わりにくい設問などに効果があります。ただし、設問ひとつずつに画像を挿入すると逆に見づらさが増してしまうので、画像の挿入は必要最小限に抑えてください。
長い文章の条件や案内をプルダウン形式にする
入力フォームの画面に「注意事項」「入力条件」といった情報を載せるとき、数行にわたる長文になりそうなら、プルダウン形式で記載するのがおすすめです。
例えば、プルダウンの箇所をクリック（タップ）することで、詳細情報をチェックできるというように、ユーザー自身がチェックしたいときだけ表示できるように対策しておくと、入力フォームのデザインをシンプルなまま維持できます。
入力フォームデザインのUXを向上するコツ10選
入力フォームのCV率を高めたいなら、UX（ユーザーエクスペリエンス）にこだわったデザインを用意することが重要です。具体的にUXの向上につながるコツを10選見ていきましょう。
プレースホルダーに例を記入する
空欄の入力フォームには、プレースホルダーの機能を使って、参考例となる文字列を記入しましょう。
例えば「名前」の項目には「田中 太郎」というように、ユーザーが入力すべきイメージを掲載することで入力の悩みを解消できます。また、よく間違えられやすい電話番号のハイフン（-）入力においても「08012345678」なのか「080-1234-5678」なのかを記載することで、入力ミスを避けやすくなります。
エラー表示で入力ミスを防止する
ユーザーが間違った情報を入力したときにエラー表示される設定をしておけば、ユーザーが申し込み前に間違いに気が付くことができます。
例えば「〇〇が正しく入力されていません」と表示させたり、対象箇所を赤枠で囲ったりと、視覚的に間違いがわかるように表示することが重要です。エラー表示がないと「何度やり直してもエラーが起きる」という理由で、ユーザーの入力意欲が下がってしまうので、ぜひ取り入れてみてください。
入力が完了した項目をわかりやすくする
前述のエラー表示とは逆に、入力が完了した項目は、青や緑の枠で表示するとユーザーに安心感を与えられます。入力ミスを防ぐ効果もあるため、エラー表示と組み合わせて入力フォームのデザインに反映しましょう。
必須項目・任意項目を表示する
入力フォームの各項目には、その入力情報が必要なのか、任意なのかがわかるように「必須」「任意」などのマークやフォントを挿入するのがおすすめです。
例えば「必須」だけ入力すれば問い合わせや申し込みなどができるように設定しておけば、時間がないユーザーでも気軽に入力を進められます。
住所には自動入力機能を用いる
ユーザーの入力の手間を省く方法として、住所の自動入力機能を活用しましょう。
別名、オートコンプリート機能とも言い、郵便番号を入力したら都道府県や市町村の情報が表示される便利な機能です。ユーザーの入力の手間が減り、CV率アップとしても効果を期待できます。
モバイル端末の入力に合わせる
入力フォームのデザインは、入力できる幅が狭いモバイル端末に合わせておくと安心です。
もしすべての入力欄をPCサイズに合わせてしまうと、スマートフォンなどを利用した場合に、入力欄が2行で表示されたり、デザインが崩れてしまったりするかもしれません。特に入力欄が横長になる場合には、作成時にモバイル端末での表示も確認しましょう。
CTAの文言をユーザーがイメージできるものに設定する
入力フォームへの記入が終えたときに押すボタンなど、CTAの文言は次のように内容がイメージできるものに設定するのがおすすめです。
- 入力した情報を送信する
- 会員登録する
- 商品を購入する
- 内容を確認する
短く「送信」「完了」とだけ記載してある入力フォームもありますが、何が完了なのかがわかりづらい点に気をつけなければなりません。ユーザーがボタンをクリック（タップ）することで何が起きるのかをわかりやすく表記しておきましょう。
入力フォームにリンクを配置しない
入力フォームのなかには、なるべく別ページへ移動するリンクを配置しないようにしてください。
なぜなら入力の途中で別ページへ移動してしまうと、これまで入力してきた情報が消える場合があるほか、ユーザーの入力意欲を削ぐ結果になってしまうためです。どうしてもリンクの配置が必要だという場合には、新しいタブで開くようにするか、枠外などユーザーの入力の支障にならない場所に配置するとよいでしょう。
同意ボタンなどセキュリティ対策にこだわる
近年ではネットを利用した詐欺なども多いことから、ユーザーのセキュリティに対するリテラシーが高まってきています。そのため、入力フォームの送信ボタン手前に、次のようなセキュリティ情報を記載するのがおすすめです。
- プライバシーポリシー
- SSL
- Pマーク
- ISO認証ロゴ
信頼できる媒体であることを伝えられれば、ユーザーの不安による離脱を防止しやすくなります。
PC・スマホのレスポンシブデザインを意識する
PC・スマホの両方に適用できる入力フォームデザインを用意したいなら、レスポンシブ対応のフォームにするのがよいでしょう。PC表示とスマホ表示でデザインを変えるなど、それぞれのユーザーに合うデザインを構築することで、CV率アップを期待できます。
入力フォームのデザインで役立つ項目一覧
入力フォームはただユーザーが入力するための空欄を設けるのではなく、フォーム用に使える便利なデザイン機能を反映することがCV率アップにつながります。参考として以下に、頻出する項目を整理しました。
| 設問 | ・チェックボックス ・ラジオボタン ・ドロップダウン |
| ラベル | ・テキストボックス |
| ボタン | ・アクションボタン |
特に項目が多い場合には、チェックボックスやドロップダウンを利用することで、すっきりとした印象の入力フォームをデザインできます。またボタンの色を変更することでもCV率が変化しやすいため、ぜひ目的に合うデザインを検討してみてください。
入力フォームのデザイン参考例
入力フォームを作成したいけれど、具体的にどのようなデザインにすべきか判断できない人も多いでしょう。参考として、入力フォームのデザイン例を紹介します。
実用的な入力フォームデザイン例
以下に実用的で、参考にしやすい入力フォームのデザイン例をまとめました。
| 写真コンテストへの応募フォーム | 起業セミナーへの応募フォーム |
 |  |
シンプルかつ、ひと目で入力する情報がわかるデザインが採用されています。直感的に入力できる入力フォームを用意したい人におすすめです。
おしゃれな入力フォームデザイン例
機能性はもちろんデザイン性にこだわりたい人向けに、おしゃれな見た目の入力フォーム例をまとめました。
| 雑誌の定期購読への応募フォーム | キャンペーンへの応募フォーム |
 |  |
カラーはもちろん、枠のデザインなどにもこだわられています。色にこだわるだけで企業の雰囲気を伝えられるため、ぜひおしゃれさを取り入れてみてください。
入力フォームデザインにHTMLやCSSは活用すべき？
入力フォームのデザインにこだわるため、HTMLやCSS、ほかにもJavaScriptなどを利用して、1から構築をしようと考えている人も多いでしょう。確かにマークアップ言語等を利用して構築することで、オリジナリティの高い入力フォームをデザインできます。
ただ、ページの構築に専門知識が必要になるほか、完成後の定期的な改修等が必要になる点に気を付けなければなりません。そのため、HTML・CSS等の利用は社内に専門知識をもつ人材がいる場合、もしくは安価で依頼できる委託先がある場合を想定するとよいでしょう。
なお近年では、入力フォームの支援ツールなども多数登場しており、手軽にハイクオリティなデザインを用意できます。社内の負担を削減するためにも、まずは目的の入力フォームを支援ツールで作成できないかチェックしてみてはいかがでしょうか。
安全でデザイン性の高いフォーム作成ならWebフォーム作成ツール「SPIRAL®」
当社のご提供する 「Webフォーム作成ツールSPIRAL®」は、かんたん操作で自由自在にフォーム作成が行える定額制のWebフォーム作成システムです。申し込みの受付だけでなく、その後のステータス管理や応募者用マイページ作成など、受付から管理までをWebシステム化することができます。
受付フォームは画像やPDFなどのアップロードにも対応。拡張子指定や容量制限、入力制限もできるので、自社の要件にあったフォームを構築することができます。また、デザインはテンプレートからの選択の他、HTML、CSS、JavaScript、PHPを利用してカスタマイズも可能です。
申請者用・管理者様にそれぞれマイページを作成し、ステータス管理や申請内容の情報変更をWeb上で行うこともできます。
書類申請、出願・公募受付、補助金・助成金申請、契約加入・更新受付、キャンペーン受付、問い合わせ受付などさまざまな業界・用途・シーンで延べ13,000社以上のご利用実績がございます。
サービスの詳細については「Webフォーム作成ツールSPIRAL®」のページをご覧いただくか、サービス導入をご検討中の方はこちらからぜひお問い合わせください。
まとめ
入力フォームはただシンプルな項目を配置するだけではなく、色や見た目、配置の手順など、全体のデザインにこだわることが重要です。デザインひとつでCV率が変化することも多く、ユーザーのページ離脱防止や入力ミス防止につながります。初心者から利用でき、手軽にハイクオリティな入力フォームを用意できる方法をお探しなら、ぜひ当社にご相談ください。
