視覚的に魅力的なフォーム作成のコツ

お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。

送信ボタン

長いフォームの構成方法

フォームをカスタマイズする時間がない場合

概要

部屋の予約からアポイントメントのスケジュール設定まで、私たちは日常的にさまざまなフォームをウェブサイト上で利用しています。送信しやすくシンプルに見えるフォームもあれば、時間がかかりそうに見えるフォームもあります。では、似たようなフォームなのに、ここまで印象が変わるのはなぜでしょうか。答えは、フォームのデザイン、スタイル、構成にあります。これらは、顧客が組織をどう受け取るかに大きく影響します。フォームの見た目を整えることでブランドに良い印象を与えられるだけでなく、有料のリード獲得キャンペーンにかかるマーケティングコストを効果的に削減することもできます。

ここでは、同じ内容のシンプルな注文フォームを、2つのデザインで比較してみます。

シンプルなデザイン

シンプルなのに美しいデザイン

この2つのフォームの違いは何でしょうか。

1つ目のフォームからは、何の注文フォームなのかが分かりません。2つ目のフォームは、背景画像によって「植物を注文するフォーム」であることが一目で分かります。
1つ目のフォームでは商品を訴求する工夫がありませんが、2つ目のフォームではフォームの説明文でしっかりと商品をアピールできています。
1つ目のフォームのCTAは送信と、形式的な文言になっていますが、2つ目のフォームではボタンを押すことで「植物を手に入れる」という実際の操作内容を回答者にイメージさせる表現になっています。

フォームで最も重要な要素とは

フォームタイトルと説明

フォームタイトルと説明は、ブランドを紹介し訴求するうえで最も効果的な手段の1つです。説明欄の一文が、コンバージョンへの最初の一歩になります。ここでフォームの目的を明確に伝える必要があります。回答者は、フォーム内の他の案内文や説明よりも、フォームの説明文を読む可能性が高いためです。適切で簡潔な説明文を用意し、その違いを実感してください。

フォームのヘッダーには、さらに追加できるものがあります。それはブランドロゴです。ロゴはブランドの「顔」です。フォームにロゴやブランドカラー、パターン、フォントを取り入れて、ブランドアイデンティティを確立しましょう。フォームにロゴを追加する方法については、こちらを参照してください。

項目

もちろん、フォームの本文を構成するのは項目です。しかし、「どこまで質問するか」を見極めることが重要です。顧客のプライバシーを尊重し、本当に必要な情報だけを尋ねるようにしましょう。たとえば、部屋の予約フォームから不要な住所項目を削除するだけで、送信件数が大きく向上する場合があります。不要な情報を求めると、フォームが長くなるだけでなく、顧客が途中で離脱してしまう可能性も高くなります。

どうしても必要な項目であれば、必須項目として設定し、回答者が入力漏れをしないようにしましょう。必須項目がある場合は、フォームの配色にも注意してください。色やコントラストが不十分だと、必須マークが見えづらくなり、ユーザーにとって大きなストレスになります。選択する色は、フォームに対する第一印象に大きく影響します。フォームが散らかった印象にならないようにしつつ、重要な要素に自然と目が向くような最適な配色を見つけるには、ある程度の試行錯誤が必要です。

最初の移動で必須項目に気付きましたか？

こちらを参照してフォームに最適なフィールドの選び方を確認してください。

選択フィールド

選択式フィールドは、ほとんどすべてのフォームで欠かせません。せっかくなら、見やすく、かつ回答者の目を引くようにしてみませんか？

質問や選択肢の文字色、フォント、スタイル、フォントサイズを自由に設定できます。ですが、ドロップダウンフィールドに多数の選択肢を追加する必要がある場合はどうでしょうか。12個を超える選択肢を持つフィールドを作成するのは大変ですし、回答者にとっても、必要な選択肢を探すために長い一覧をスクロールするのは負担になります。ご安心ください。作成者と回答者の両方に役立つ解決策があります。

フォーム作成者向け:

選択肢をグループ化して、グループ間を視覚的に区別できます。
すでに選択肢の一覧がある場合は、選択肢を一括追加して、ドロップダウンフィールドの下で1つずつ入力する手間を省けます。こちらを参照して、ドロップダウンに長い選択肢リストを追加する例をご確認ください。
また、グループ内の選択肢をコピーして、同様の選択肢を持つグループをフォーム内に複数作成することもできます。
さらに、フィールドルールでグループ化した選択肢を利用し、選択されたグループに基づいて、回答者に関連するフィールドだけを表示することができます。

回答者向け:

回答者に、長い一覧の中から目的の選択肢を探させるのではなく、入力して検索できる欄を用意し、選択肢を絞り込めるようにしましょう。こちらを参照して、ドロップダウンで検索可能なリストを提供する方法を確認してください。

商品を訴求する画像選択肢

商品を紹介・販売したい場合は、実際の商品の画像を選択肢として使用し、購入するものを回答者が一目で把握できるようにしましょう。「百聞は一見にしかず」です。

部屋予約フォームを作成する場合も同様に、部屋の画像を表示することで、回答者は自分が滞在先として選択する部屋の実際の様子を確認できます。

動的フィールドで回答者に語りかける

フォーム入力中の顧客と会話することで、より親しみやすい体験を提供できます。 Zoho Forms の動的フィールドラベルを使って、各顧客ごとにフィールド名をパーソナライズしましょう。 リッチテキスト オプションを使用して、あるフィールドの入力値（例：名前）を別のフィールドのラベルに差し込むことができます。インタラクティブなフォームの作成については、こちらをご覧ください。

送信ボタン

送信という文言は、一般的で味気なく感じられることがあります。代わりに、Register（登録）、続ける、適用する、Book Now、Sign me up、移動するなど、より適切な CTA を検討してみましょう。顧客との対話を意識した文言にすることが重要です。たとえば、Reserve my seat の方が、Reserve a seat / Reserve your seat よりもクリック率が高くなる可能性があります。今すぐ登録する のように、シンプルな Now を加えるだけでも、回答者に「今すぐ送信しよう」という緊急性を与えられます。さらに、ボタンの色をブランドカラーに合わせて、少し遊び心を加えることもできます。フォントサイズは、CTA に自然と目が向く程度に十分な大きさにしつつ、フォーム全体のデザインを損なわないように調整してください。

送信ボタンだけでなく、確認ボタン、保存ボタン、フォームページのナビゲーションボタンも、より意味のある文言に変更できます。フォームボタンの変更とカスタマイズについては、こちらをご覧ください。

長いフォームの構成方法

すべてのフォームを短く簡潔にできるわけではないことは理解しています。必要な情報が多く、フォームが長くなる場合もあります。その結果、フォームが整理されていない印象になり、回答者が入力を面倒に感じて、回答率が下がってしまう可能性があります。

Zoho Forms では、長いフォーム向けの解決策もご用意しています。フォームを入力しやすく保ちながら、必要な情報をすべて取得するためのヒントをいくつかご紹介します。

セクションとページ区切りフィールド

まず、関連するフィールドや質問ごとにフォームを整理し、グループ化しましょう。そのうえで、Zoho Forms のページ区切りフィールドを使用して、これらのセクションを複数ページに分割し、回答者にとって見やすく入力しやすいフォームにします。複数ページフォームを利用すれば、ユーザーはフォーム内をスムーズに移動でき、あたかも短いフォームのように感じてもらうことができます。

ナビゲーションの見た目や操作感も、好みに合わせてカスタマイズできます。フォーム内のページのカスタマイズについては、こちらをご覧ください。

フィールドルール

フォームを短く見せるもう 1 つの方法が、フィールドルールです。回答内容に応じて、特定のフォームフィールドを表示または非表示にすることができます。これにより、回答者には自分に関係するフィールドだけを表示させながらフォームに入力してもらえ、入力体験をカスタマイズしつつ、フォームをコンパクトに見せ、完了までにかかる時間も短縮できます。