問い合わせフォームのデザインと送信ボタン｜離脱を減らす作り方

公開日 2026-11-07

問い合わせフォームのデザインで、送信される数は変わるのか？

変わると考えています。フォームは問い合わせ導線の最後の一枚で、ここでの印象が「いま送るか、後日にするか」を分けます。送信ボタンが分かりやすく、シンプルで安心感のあるデザインであることが、問い合わせのしやすさにつながります。

検索結果で見つけてもらい、記事を読んでもらい、問い合わせページまで来てもらう。ここまでは集客の仕事です。しかし最後に残るのが、フォームそのものです。SEOで集めたアクセスが問い合わせに変わるかどうかは、この一枚で決まります。

私が問い合わせフォームを作るときに外さないようにしているのは、次の2点です。

• 送信ボタンが分かりやすいこと（どれを押せば送れるのか、迷わせない）
• シンプルで安心感のあるデザインであること（警戒させない、構えさせない）

逆に言うと、この2点が崩れているフォームは、内容がどれだけ良くても送信までたどり着きにくくなります。入力中に「これ、何を書けばいいんだろう」と手が止まった瞬間、人は「後日でいいか」と判断します。そして、後日にした人はたいてい戻ってきません。

フォームの改善は、記事を増やす作業に比べて圧倒的に短い時間でできます。アクセスはあるのに問い合わせが少ないと感じているなら、記事を足す前にフォームを1枚見直すほうが早く効きます。アクセスと問い合わせの関係の整理はホームページの問い合わせを増やす逆算思考にまとめています。

HTMLのデフォルトデザインのままだと何が起きるのか？

デフォルトのままの入力欄とボタンは、サイト本体のデザインから浮きます。見た目が周囲と違うだけで、「このページは本当にこの会社のものか」「ちゃんと届くのか」という微妙な不安が生まれます。私はHTMLのデフォルトデザインは避けるようにしています。

HTMLの入力欄やボタンは、何も指定しなければブラウザ標準の見た目になります。灰色の小さなボタン、細い枠線の入力欄。機能としては問題なく動きますが、サイト全体の世界観とはまず合いません。

ここで起きるのは、はっきりした拒否感ではなく、言語化されない違和感です。トップページや記事ページは整っているのに、フォームだけ素のままだと、作りかけのページに見えてしまう。「このフォーム、動いているのかな」と思われたら、送信前の最後の一押しが弱くなります。

デフォルトのままになりやすい箇所

• 入力欄（テキストボックス）の枠線と高さ
• 送信ボタンの色・サイズ・文字
• セレクトボックス（プルダウン）の見た目
• 必須表示や注意文のフォント指定

とくに送信ボタンは、デフォルトのままだと小さく目立ちません。押す場所が分かりにくいボタンは、それだけで一段階ハードルになります。サイト本体と同じトーンに整え、ボタンだけは明確に目立たせる。難しい装飾は不要で、やることは「浮かせない」と「ボタンは目立たせる」の2つだけです。

送信ボタンは何を分かりやすくすればいいのか？

「押せば送信される」と一目で分かることです。他の要素よりはっきり目立ち、どこを押せばいいか迷わない状態をつくります。見た目の派手さではなく、迷いが生まれないことが基準です。

送信ボタンで迷いが生まれるのは、だいたい次のような状態のときです。

• ボタンが小さく、周囲のテキストに埋もれている
• 「戻る」「リセット」など、押してはいけないボタンが同じ見た目で並んでいる
• リンクなのかボタンなのか判断できない見た目になっている
• スマートフォンで指に対して小さすぎる

一般的なUI設計では、画面内で最も実行してほしい操作（主要アクション）は、ほかの操作より視覚的に強くするのが基本です。フォームの主要アクションは送信ひとつなので、そこに視線が集まる状態になっていればいい。補助的な操作が並ぶなら、見た目の強さを明確に差をつけます。

ボタン周りで私が確認している観点

1. ページを開いて最初の1秒で、送信ボタンの位置が分かるか
2. スマートフォンの画面幅で、指で押しやすいサイズになっているか
3. ボタンの文字が、何が起きるかを言っているか（送信・問い合わせる、など行為が分かる言葉）
4. 押したあとに何が起きるかが分かる画面（完了画面）が用意されているか

記事側のボタン文言をどう考えるかはCTAボタンの文言を記事ごとに変えるで扱っています。フォーム内の送信ボタンは、記事中のCTAと違って迷わせる必要がまったくない場所なので、素直に行為が分かる言葉にするのが安全です。

「安心感のあるデザイン」とは具体的に何を指すのか？

必要以上に聞かず、入力者を構えさせない作りのことです。項目が少なく、何を書けばいいか迷う欄がなく、見た目が整っている。この状態が安心感になります。私は、なるべく個人情報を取らないようにすることがユーザーの安心につながると考えています。

問い合わせフォームは個人情報を取るのが目的のように見えますが、取る情報を増やすほど送信のハードルは上がります。なるべく個人情報を取らないようにする。これがユーザーにとっての安心につながり、結果として問い合わせの数に効いてきます。

多くの情報を集めるフォームでは、会社名・役職・肩書・お名前・住所・メール・電話番号・興味を持った商品・使いたい用途・従業員数・資本金・お問い合わせ内容、といった項目が並ぶことがあります。入力する側からすると「なぜここまで聞かれるのか」が分からず、警戒が先に立ちます。

警戒を生みやすい代表例

項目	入力者が感じること	考え方
住所（資料請求がPDFのメール送付のみ）	なぜ住所が要るのか分からない	紙を送らないなら不要。必要でも郵便番号や都道府県レベルの選択で足りる場合がある
電話番号	営業電話が来るのではないか	電話をしないなら不要。メールアドレスの入力ミスに備えて残す判断はある
従業員数・資本金	審査されている感覚になる	初回接点で必須にする必然性は薄い
会社名・役職・肩書・所属	個人として相談しづらい	あってもなくてもいい項目だと考えている

私が最小構成としておすすめしているのは、名前・メール・電話番号・お問い合わせ内容の4項目程度です。そして絶対にやってはいけないのは、入力者が「これ、何を入力したらいいかな」と悩む項目を入れてしまうことだと考えています。悩ませた時点で、その人は離脱に向かいます。

項目数そのものの考え方は問い合わせフォームは4項目でいい、必須と任意の線引きは問い合わせフォームで電話番号と住所は必須にすべきかにまとめています。

業種によってフォームの作りはどう変えるのか？

型にこだわらず、業種・業態・事業内容から必要項目を決めます。紙の資料を送るなら住所と電話番号は必須になりますし、地域性の高いビジネスなら地域情報を取ることもあります。フォームの内容は業種・業態によって当然変わります。

「4項目が正解」と固定して考えると、かえって運用に合わなくなります。問い合わせフォームはサイトによって、業種や業態によって内容が変わるものです。決め方は型ではなく、自社の対応の流れから逆算します。

必要項目を決める順番

1. 問い合わせを受けたあと、自社が最初に何をするかを書き出す（メールで返信／電話する／資料を郵送する／来店案内を送る）
2. その最初の行動に必要な情報だけを項目にする
3. 残った項目は「なくても最初の一歩が踏める」ので、任意にするか外す
4. 入力者が書き方に悩みそうな項目が残っていないか確認する

たとえば紙のカタログを郵送する事業なら、住所と電話番号は必須にせざるを得ません。地域密着のサービスなら、対応エリア判定のために地域情報を聞く場面もあります。一方で、資料をPDFでメール送付するだけなら住所は要りません。住所が必要な場合でも、個人宅まで特定する必要がないなら、郵便番号や都道府県の選択で済ませる方法があります。

営業をかける以上は最低限の情報が必要、という事情もあります。そのバランスをどこに置くかは、ユーザーセグメントと自社の事業内容を総合的に見て決めるところです。「他社がこうだから」で項目をコピーしないことが、いちばんの近道だと考えています。

フォームは自作とGoogleフォーム・LINE公式のどれがいいのか？

外部のフォームを使うことを個人的にはおすすめしています。自作のメールフォームはセキュリティ面で常にアップデートと管理が必要で、その負担が続くからです。自作する場合は、ロボット判定（CAPTCHA等）を入れることをおすすめしています。

セキュリティを自社で全部追っていくのは、なかなかハードルの高い時代になってきたと感じています。自作のメールフォームを置いている場合、プログラムの更新、迷惑投稿への対処、個人情報の保管まで、すべて自社の責任範囲に入ります。それを続けられるならいいのですが、止まった瞬間に弱くなります。

選択肢の整理

方法	デザインの自由度	運用負担
自作のメールフォーム	高い（サイトに完全に合わせられる）	アップデートと管理が継続的に必要。ロボット判定の設置を推奨
Googleフォームなど外部フォーム	限定的	セキュリティ管理の負担を軽減できる
LINE公式アカウント（QRコードで案内）	チャット形式	やり取りがそのまま残る。入力の手間が小さい

外部フォームはデザインの自由度が下がるぶん、サイト本体から浮きやすくなります。だからこそ、フォームへ入る直前のページ（問い合わせページ本体）で、何を聞くのか・どう返信するのかを丁寧に書いておくと、違和感が和らぎます。LINE公式をQRコードで案内する方法も、フォーム入力に抵抗がある人の受け皿になります。

Webでの問い合わせのあり方自体、フォーム入力からAIチャットボットのようなチャットベースへ変わりつつある可能性があると見ています。入口を1つに固定せず、複数用意しておく発想のほうが長持ちします。自作フォームを手放す判断については自作フォームはもう持たないに書いています。

※GoogleフォームやLINE公式アカウントの機能・仕様は変わります（2026年9月時点）。導入前に各社の最新の公式情報で確認してください。

今あるフォームは、どこから見直せばいいのか？

自分のスマートフォンで、自社のフォームを一度最後まで送信してみることから始めます。そのうえで、送信ボタンの目立ち方、デフォルトのままの見た目、悩む項目の3点を順に直します。作業としては半日あれば着手できます。

見直しの手順

1. 自分で送信してみる。スマートフォンで、実際に最後まで入力して送信する。途中で手が止まった箇所が、そのまま離脱の原因になっている箇所です。
2. 送信ボタンを確認する。ページを開いて1秒で場所が分かるか。指で押しやすいサイズか。押してはいけないボタンと見た目が同じになっていないか。
3. デフォルトの見た目を直す。入力欄とボタンがブラウザ標準のままなら、サイト本体のトーンに合わせる。ボタンだけは明確に目立たせる。
4. 悩む項目を外す。「何を書けばいいか迷う」欄をひとつずつ消す。残すのは、問い合わせを受けたあと最初の行動に必要な情報だけ。
5. 完了画面を用意する。送ったあとに何が起きるか（いつ返信が来るか）が分かる画面にしておく。

記事を1本増やすのに比べて、フォームの見直しは圧倒的に短時間で終わります。そして効果はサイト全体の問い合わせに効きます。アクセスはあるのに問い合わせが少ないと感じているなら、ここが最初の一手です。

フォームまでの導線（記事内のどこにボタンを置くか）も合わせて整えると効果が重なります。配置の考え方はSEO記事のCTAはどこに置く？にまとめています。

よくある質問

問い合わせフォームの送信ボタンは、どんな見た目にすればいいですか？

一目で「押せば送信される」と分かる状態が基準です。ページを開いて1秒で位置が分かること、スマートフォンで指に対して押しやすいサイズであること、戻るやリセットなど別の操作と見た目が混ざっていないこと。この3点を満たせば、装飾は不要です。文字は「送信」「問い合わせる」など、何が起きるかが分かる言葉にします。

HTMLのデフォルトデザインのままだと何が問題ですか？

サイト本体のデザインから浮き、作りかけのページのように見えてしまう点が問題です。入力欄やボタンがブラウザ標準のままだと送信ボタンも小さく目立たず、押す場所が分かりにくくなります。私はHTMLのデフォルトデザインは避け、サイトのトーンに合わせたうえで送信ボタンだけを明確に目立たせるようにしています。

フォームの項目は何項目が目安ですか？

名前・メール・電話番号・お問い合わせ内容の4項目程度を最小構成としておすすめしています。会社名・役職・肩書・所属は、あってもなくてもいい項目だと考えています。ただしフォームの内容は業種・業態によって変わるので、紙の資料を郵送するなら住所と電話番号は必須になります。

フォームで離脱される一番の原因は何ですか？

入力者が「これ、何を書けばいいか」と悩む項目があることです。悩んだ瞬間に「後日でいいか」となり、そのまま戻ってこないケースが多くなります。資料請求がPDFのメール送付だけなのに住所を聞く、電話をしないのに電話番号を必須にする、といった不要な項目が警戒感につながります。

フォームは自作とGoogleフォームのどちらがいいですか？

外部のフォームを使うことを個人的にはおすすめしています。自作のメールフォームはセキュリティ面で常にアップデートと管理が必要で、その負担が続くからです。自作する場合はロボット判定（CAPTCHA等）の設置をおすすめします。LINE公式アカウントをQRコードで案内する方法も、フォーム入力に抵抗がある人の受け皿になります。

住所を聞く必要がある場合はどうすればいいですか？

個人宅まで特定する必要がないなら、郵便番号や都道府県レベルの選択で済ませる方法があります。紙の資料を郵送する場合は住所と電話番号が必須になりますが、PDFをメールで送るだけなら住所は不要です。問い合わせを受けたあと最初に自社が何をするかから逆算して、必要な情報だけを項目にします。

参考・出典

• Google フォーム（公式サービス紹介）（2026年9月時点）
• LINE公式アカウント（公式サービス情報）（2026年9月時点）

関連記事

CTAボタンの文言を記事ごとに変える｜資料請求へ誘導する案と私の未達
ポップアップで問い合わせに誘導する条件設計と邪魔にしない線引き
固定した問い合わせボタンが押されない理由｜意識から外れるCTA

← leadsへ戻る