お問い合わせフォームのデザイン事例10選｜レイアウトパターン別に構成を解説

お問い合わせフォームのデザインをパターン別に10事例紹介。シンプルフォーム型・情報併記型・ステップ型など4種類の特徴と、CVRを高めるフォーム設計の考え方を解説します。設計チェックリスト付き。

「お問い合わせページって、フォームを置けばいいだけでしょ？」
そう思われがちですが、お問い合わせページはサイト全体のコンバージョンを左右する重要なページです。フォームの項目数、レイアウト、CTAボタンのデザイン——ひとつひとつの設計判断が、ユーザーが送信ボタンを押すかどうかを決めます。

お問い合わせページとは

お問い合わせページとは、ユーザーが企業やサービスに対して質問・相談・依頼などを送信するためのページです。多くの場合、入力フォームを中心に構成されます。

お問い合わせページが果たす3つの役割

お問い合わせフォームに必要な構成要素

デザインの前に、まず「何を載せるか」の構成を整理しましょう。

基本の構成要素

フォーム項目の設計指針

• 項目数は最小限にする：項目が1つ増えるごとにコンバージョン率が下がる。本当に必要な項目だけに絞る
• 必須・任意の区別を明確にする：「必須」ラベルを色付きバッジで表示するのが一般的
• 入力例（プレースホルダー）を活用する：何を入力すればいいか迷わせない

お問い合わせフォームのレイアウトパターン

お問い合わせページのレイアウトは大きく4つのパターンに分類できます。それぞれの特徴と向き・不向きを整理します。

パターン① シンプルフォーム型

フォームのみを中央に配置する、最もベーシックなレイアウトです。項目数が少なく、ユーザーが最短距離で送信できます。余計な情報がないため、フォームへの集中度が高くなります。

向いているサイト：コーポレートサイト、スタジオ・サロン、小規模サービス
注意点：情報が少なすぎると不安を感じるユーザーもいる。リード文で補足するのが有効

パターン② 情報併記型（フォーム＋連絡先）

フォームの横または上下に、電話番号・メールアドレス・住所・地図などを併記するレイアウトです。「フォーム以外の方法でも連絡できる」という安心感を与えます。

向いているサイト：店舗・施設、不動産、士業・クリニック
注意点：情報が多くなりすぎるとフォームが埋もれる。視覚的な優先順位を明確にする

パターン③ ステップ型（マルチステップ）

入力を複数ステップに分割し、進捗バーで現在地を示すレイアウトです。1画面あたりの項目数が少なくなるため、心理的な負担を軽減できます。

向いているサイト：見積もり依頼、採用応募、保険・金融
注意点：ステップ数が多すぎると逆に離脱率が上がる。3ステップ以内が理想

パターン④ 選択肢分岐型

「お問い合わせ種別」を最初に選ばせ、選択内容に応じてフォームの項目が変わるレイアウトです。ユーザーの目的に合った最適なフォームを表示できます。

向いているサイト：複数サービス展開企業、SaaS、ECサイト
注意点：分岐が複雑すぎるとユーザーが迷う。選択肢は3〜5個が目安

レイアウトパターン比較表

お問い合わせフォームのデザイン事例10選

KASOUに掲載されているお問い合わせページの中から、レイアウトパターン別に10件を厳選して紹介します。

シンプルフォーム型

タイプA：フォーム完結型（ページ内にフォームがある）

① 株式会社WORDS | 社長の隣に編集者を。（ブランディング会社）

契約フロー（STEP1〜3）の説明とFAQを添えつつ、フォーム自体は余白を贅沢に使ったシンプルな構成。ブランディング会社らしく、フォームページ全体がブランドのトーンを体現しています。モノトーンで統一された入力欄やボタンのデザインが、シンプルながら洗練された印象を与える設計です。

② maemo atomo online | 専門職による産前産後のオンラインピラティス（ブランドサイト）

ブランドの世界観をそのままお問い合わせページに持ち込んだシンプルフォーム型。フォーム周辺のビジュアル・配色・タイポグラフィがサイト全体と完全に統一されており、「事務的なフォームページ」ではなくブランド体験の延長としてお問い合わせを位置づけています。

タイプB：連絡先誘導型（フォームを置かず、メール・電話で直接つなげる）

③ ウェブデザイン hasegawahiroshi.jp（建築家ポートフォリオ）

建築家の個人サイトらしい、余白とタイポグラフィで構成されたミニマルなコンタクトページ。ページ内にフォームは置かず、メールアドレスへの直接連絡を案内する設計です。見積もり専用フォームは別ページ（/form/order）へのリンクで誘導しており、問い合わせの敷居を下げつつ用途を分離しています。

④ TryMore Inc | We Are Very Lucky Company!!!（Web制作会社）

ページ内にフォームは設置せず、TELアイコン・電話番号とメールアドレスのみで構成された連絡先誘導型。ブランドカラーとグラフィック要素を大胆に取り入れ、サイト全体の世界観を崩さずに連絡手段を提示しています。「この会社に頼みたい」という気持ちを後押しする演出が特徴です。

情報併記型

⑤ 済生会熊本予防医療センター（健診クリニック）

フォームの上部に電話番号（人間ドック用・精密検査用の2つ）と受付時間を大きく配置した医療系サイトの情報併記型。健診という性質上「すぐに電話で確認したい」ユーザーが多いため、電話導線を強調しつつフォームも用意する設計が合理的です。医療・クリニック系のお問い合わせページの参考になります。

ステップ型

⑥ mount inc. | ブランド戦略+デザイン | design practice（Web制作会社）

「1.入力→2.確認→3.完了」の進捗ステップUIを備えたステップ型。相談内容をselectで選択させ、予算・納品時期・言語など項目数が多いフォームを段階的に進められる設計です。項目数が多くても心理的負担を軽減できるステップ型の好例です。

⑦ 広島の観光・旅行情報サイト Dive! Hiroshima（広島県観光サイト）

「入力→確認→完了」のステップUIに加え、最初にラジオボタンで問い合わせ種別を選択させるステップ型と選択肢分岐型の複合構成。「観光について」「HITの事業について」「掲載内容について」など目的別に振り分けつつ、ステップで進捗を示す設計です。公的機関・観光サイトのお問い合わせページ設計の参考になります。

選択肢分岐型

⑧ テテトコ | 発達障害・グレーゾーンの子育てSNS（子育て支援サービス）

selectメニューで「アプリについて」「不具合のご報告」「取材のご依頼」「広告掲載について」など問い合わせ種別を選択させる分岐型。サービスへの問い合わせ内容が多岐にわたるため、最初に種別を選ばせることで適切な対応につなげる設計です。

⑨ 株式会社コプレック（製造業）

「製品について」「採用について」「取材・講演」「営業」などラジオボタンで問い合わせ目的を最初に選択させる分岐型。製造業は製品問い合わせ・技術相談・採用など窓口が異なるため、種別選択で適切な担当部署へ振り分ける設計が効率的です。BtoB製造業のお問い合わせページの参考になります。

⑩ 臨床統計家育成コース｜京都大学 大学院医学研究科 社会健康医学系専攻（大学研究機関）

selectメニューで「進学に関するお問い合わせ」「その他」の2種別を選択させるシンプルな分岐型。選択肢を最小限に絞りつつ、進学希望者とその他の問い合わせを振り分けることで、対応の効率化とユーザーの迷いのなさを両立しています。

お問い合わせフォームの設計チェックリスト

お問い合わせフォームを設計・レビューする際に使えるチェックリストです。

構成・情報設計

• フォーム項目は必要最小限に絞られているか
• 必須・任意の区別が視覚的に明確か
• 入力例（プレースホルダー）が適切に設定されているか
• 送信後の完了画面・サンクスメッセージがあるか
• プライバシーポリシーへのリンクまたは同意チェックがあるか
• 電話・メールなど代替連絡手段が記載されているか

デザイン・UI

• 送信ボタン（CTA）が目立つデザインになっているか
• フォームの幅・余白が適切か（広すぎず狭すぎず）
• エラー表示がリアルタイムで分かりやすいか
• モバイルで入力しやすいか（タップターゲット44px以上）
• ラベルはフォーム外に配置されているか（プレースホルダーのみは避ける）

ビジュアル・ブランド

• サイト全体のトーン・カラーと統一感があるか
• CTAボタンの色がブランドカラーと調和しているか
• 余白・フォントサイズが読みやすさを確保しているか
• 装飾がフォームの視認性・入力しやすさを妨げていないか

まとめ

お問い合わせフォームのデザインで押さえるべきポイントを整理します。

• レイアウトパターンは業種と目的で選ぶ
  項目数が少ないならシンプルフォーム型、店舗なら情報併記型、項目が多いならステップ型。「とりあえずフォームを置く」ではなく、ユーザーの行動に合った設計を選ぶことが重要です。
• フォーム項目は最小限にする
  項目が1つ増えるごとにコンバージョン率は下がります。「本当にこの項目は必要か？」を常に問い直し、不要な項目は削りましょう。
• CTAボタンのデザインがコンバージョンを左右する
  送信ボタンはページ内で最も目立つ要素にする。色・サイズ・ラベル文言（「送信する」より「無料で相談する」）を工夫することで、クリック率が変わります。
• KASOUの事例でデザインの引き出しを増やす
  お問い合わせフォームのデザインは「正解」が一つではありません。業種・目的・ブランドの世界観によって最適解は変わります。KASOUに掲載されている多くの実例を見ることが、設計力を高める最短ルートです。

お問い合わせデザインの参考サイト一覧はこちら！

お問い合わせデザインの参考サイト一覧を見る