視覚的に魅力的なフォーム作成のポイント

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

送信ボタン

長いフォームの構成方法

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

概要

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

ここでは、同じ注文フォームを2つのデザインで見比べてみましょう。

シンプルなデザイン
Simple Design

シンプルかつ美しいデザイン

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

1つ目のフォームからは、何の注文フォームなのかが分かりません。2つ目のフォームは、背景から「植物の注文フォーム」であることがはっきり伝わります。
1つ目のフォームでは、商品を訴求する工夫がされていませんが、2つ目のフォームではフォームの説明文でしっかりと訴求できています。
1つ目のフォームのCTAであるSubmit はとても形式的な印象ですが、2つ目のフォームでは、ボタンをクリックすると「植物を手に入れられる」という実際のアクションを回答者にイメージさせる表現になっています。

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

フォームタイトルと説明

フォームタイトルと説明は、ブランドを紹介し訴求する最適な手段です。説明文の一文が、コンバージョンへの第一歩になります。フォームの目的はここで伝える必要があります。フォーム内の他の案内文や説明よりも、フォームの説明文は読まれやすいためです。適切で簡潔な説明文を用意して、その効果を確かめてみてください。
Form Title and Description

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

項目

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

本当に重要な項目であれば、必須項目として設定し、回答者が入力漏れをしないようにしましょう。必須項目がある場合は、フォームの配色にも注意が必要です。色やコントラストが不十分だと、必須であるにもかかわらずユーザーから見えにくくなり、ストレスの原因になります。選択する色は、フォームに対する第一印象に大きく影響します。フォームの重要な要素に自然と目が向くようにしつつ、全体が煩雑にならない配色の組み合わせを見つけるには、ある程度の試行錯誤が必要です。

必須項目を一目で見つけられましたか？
Color contrast to spot the mandatory fields

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

選択式フィールド

選択式フィールドは、ほとんどのフォームで欠かせない要素です。せっかくなら、見やすく魅力的な見た目にして、回答者にとって使いやすいフォームにしましょう。

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

フォーム作成者向け :

選択肢をグループ化して、グループごとに視覚的な違いを持たせることができます。
すでに選択肢の一覧が用意されている場合は、ドロップダウンフィールドで1つずつ入力する代わりに、選択肢を一括追加できます。ドロップダウンに長い選択肢リストを追加する例は、こちらを参照してください。
また、グループ内の選択肢をコピーして、同様の選択肢を持つ複数のグループをフォーム内に簡単に作成できます。
さらに、フィールドルールでグループ化した選択肢を利用し、選択されたグループに応じて、回答者に関連するフィールドだけを表示することもできます。

回答者向け:

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

商品を訴求するための画像付き選択肢

商品をアピールしたり販売促進したい場合は、実際の商品画像を選択肢として使用しましょう。購入するものを視覚的に確認できるため、利用者にとって分かりやすくなります。「百聞は一見にしかず」です。

部屋予約フォームを作成する場合も同様に、部屋の画像を表示することで、回答者は実際に宿泊する部屋のイメージを確認しながら選択できます。

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

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

送信ボタン

Submitという文言は、一般的で味気なく感じられることがあります。代わりに、Register、Continue、Apply、Book Now、Sign me up、Go! など、より適切なCTA（行動喚起）に変えてみましょう。お客さまと対話しているように感じられる言葉を意識してください。たとえば、Reserve my seat の方が、Reserve a seat / Reserve your seat よりもクリックされやすくなる可能性があります。Now（Register Now など）を付け加えるだけでも、「今すぐ押そう」という緊急性を高められます。ボタンの色をブランドカラーに合わせて、少し遊び心を加えるのもよいでしょう。フォントサイズは、CTAに目が行く程度に十分大きくしつつ、フォーム全体を圧迫しない大きさに調整してください。

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

長いフォームの構成方法

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

長いフォームにも対策があります。フォームを簡単に保ちながら、必要な情報をすべて取得するためのヒントをいくつかご紹介します。

セクションとページ区切り項目

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