お問い合わせフォームのドロップダウン設計：選択肢数・分類ロジック・ユーザー体験

お問い合わせフォームのドロップダウン設計：選択肢数・分類ロジック・ユーザー体験

1. ドロップダウンがなぜフォームコンバージョンの見えない関門なのか

買い手がお問い合わせフォームを記入するとき、テキスト入力欄なら飛ばせますし、空欄のままにもできますし、適当に書くこともできます。しかしドロップダウンは違います。よく知らない選択肢の中から選ばざるを得ず、選び間違えれば送信できません。この一つの操作が、そのまま記入を続けるか、ページを閉じて離脱するかを決めます。

多くのチームはドロップダウンを「ユーザーが入力しなくて済む道具」と捉えていますが、実際はフィルターです。選択肢の設計が良ければ、買い手は自分のニーズを素早く特定できます。設計が悪ければ、買い手は選択肢の意味が分からず、あっさり諦めます。ドロップダウンの離脱率は、テキスト欄より2〜3倍高いことがよくあります。

上の表はB2B自社サイトフォームの経験値レンジで、業界によって上下しますが、ドロップダウンの離脱率が体系的に高いという点は確かです。ドロップダウンと問い合わせフォームの項目設計と転換率は同じロジックの裏表です。フィールド数が全体の長さを決め、ドロップダウンの選択肢が一つのフィールドの完了コストを決めます。

2. 選択肢数の黄金帯：8〜15個

ドロップダウンの選択肢は多ければ良いわけではありません。人がスクロールせずに一画面で見分けられる選択肢はおよそ7個。スマホでは画面が狭いため一画面で4〜5個です。これを超えるとユーザーはスクロールを始め、注意力が散漫になります。B2Bフォームのデータによると、8〜15個の選択肢のドロップダウンが送信率で最も高く、30個を超えると送信率が明らかに下がり始めます。

ここに逆説的な判断があります。選択肢が多ければ多いほど、集められる情報は精緻になると考えがちですが、実際には失われる問い合わせの方が多くなります。買い手が40カ国の中から自分の国を探すドロップダウンは、主要20市場だけを並べたドロップダウンより、離脱率が少なくとも15ポイント高くなります。増えた20カ国の選択肢と引き換えに、より多くの人がフォームをそのまま閉じてしまうのです。

具体的なシナリオを2つ挙げます。シナリオ1：産業部品を扱い、製品ラインが12の大分類ある場合、標準的なフラットドロップダウンがちょうどよく、買い手は一目で見て1つ選べます。シナリオ2：世界のお客様向けに機器を扱い、対象市場が40カ国ある場合、フラットドロップダウンはスマホで8画面分スクロールが必要になるため、検索付きコンボボックスに切り替え、ユーザーが直接文字を打って絞り込めるようにする必要があります。

選択肢の並び順にも工夫があります。頻度の高い選択肢を前に置き、アルファベット順や五十音順で並べないでください。問い合わせの80%が来る上位5市場をリストの最上部に置き、その後にロングテールの選択肢を続けます。この調整で通常、ドロップダウンフィールドの完了率を5〜10ポイント高められます。

三、分類ロジック：フラット、第一階層グループ化、検索式の選び方

選択肢が増えると、どう分類するかがユーザーの選択肢の見つけやすさに直結します。よくある方法は3つ：フラット、第一階層グループ化、検索可能なコンボボックスです。選ぶ基準は感覚ではなく、選択肢の数とユーザーの熟知度で決めます。

よくある失敗は、optgroupでグループ化しながらグループ名が曖昧なことです。例えば業界を「製造業」「サービス業」「その他」の3グループに分けても、買い手は自分の業界がどこに入るか分からず、グループ化がかえって認知負荷を高めます。グループ名はユーザーが照合できる言葉にし、社内用語を使わないでください。

もう一つの場面：製品型番が80個あって、それぞれに接頭辞と接尾辞が付いているとします。こういうときは検索可能なコンボボックスを使い、型番のキーワードで絞り込ませるほうが、80個の選択肢をスクロールさせるよりはるかに優れています。技術的にはSelect2やTom Selectといったオープンソースのコンポーネントで実装でき、30分で組み込めます。

4. デフォルト値、プレースホルダー、アクセシビリティの細部

ドロップダウンのデフォルト値設計には鉄則があります。必須項目では最初の選択肢をデフォルト値にしないことです。多くのフォーム開発は手間を省こうとして、リストの先頭をデフォルト選択にします。その結果、80%の購入者はそのドロップダウンに触れずにそのまま送信し、あなたの手元にはあなたが勝手に設定した、購入者の本意ではないデータが届きます。

アクセシビリティは見落とされがちです。ドロップダウンはキーボード操作で、Tabキーでフォーカス、方向キーで選択、Enterで確定というネイティブの挙動が、カスタムのドロップダウンコンポーネントではしばしば壊されます。フォームでアクセシビリティ基準を満たす必要があるなら、サイトのアクセシビリティ（WCAG）のドロップダウンコンポーネントのキーボード操作要件を参照し、車輪の再発明はしないでください。

もう一つの細部：モバイルブラウザのネイティブドロップダウンは、実はカスタムコンポーネントより快適です。全画面のホイールピッカーが表示されます。スマホでは、検索が必要な場合を除き、素直にネイティブのselectを使い、カスタムのポップアップは避けましょう。後者は機種ごとの互換性問題で一週間は潰れます。

5. よくあるドロップダウンの誤り

この五つの誤りで最も見えにくいのが、最初の項目をデフォルト選択することです。すぐにユーザーが離脱するわけではありませんが、CRMを偽のデータで埋め尽くします。営業がフォローアップすると、80%の顧客が、あなたにも意味が分からない同じ選択肢を「選んだ」ことになっています。フォーム送信後のデータ品質チェックは、問い合わせフォームの信頼性と同じチェックリストです。

ドロップダウンを直したら、必ずフォームのA/Bテストの方法で検証します。改版前に2週間のベースラインを計測し、改版後に2週間の比較を実施して、完了率の変化が統計的に有意かどうかを確認します。”こちらのほうが良さそう”という感覚で判断せず、ドロップダウンの各選択肢の調整にはデータの裏付けを持たせましょう。

FAQ よくある質問

最後に

プルダウンは、フォームの中の小さな部品に見えて、実は買い手が自分の要望を無理なく構造化して伝えられるかどうかを左右します。設計の悪いプルダウンは、問い合わせを集め始めるその瞬間に、潜在顧客の三割を失わせます。

実行は3ステップです。まず各プルダウンの選択肢がいくつあるかを数え、8から15個の黄金レンジに収めます。次に選択肢の数に応じてUIの形を選び、15個を超えたらグループ分けし、30個を超えたら検索を付けます。最後に必須プルダウンのデフォルト値をプレースホルダーに変え、偽データを防ぎます。この3ステップが終わったら、もう一度A/Bテストを回して送信率の変化を検証します。

覚えておきたい一言。プルダウンは選択肢が多いほどプロフェッショナルなのではなく、スクロール不要の8から15個の選択のほうが、スクロールが必要な60個のリストより本物の問い合わせにつながります。分類のロジックとデフォルト値の設計は、見た目のスタイルより十倍重要です。