フォームの確認画面は、お客様が入力内容を送信前に見直すための画面です。ここで内容が見にくかったり、送信ボタンがわかりにくかったりすると、せっかく入力を終えたお客様が最後に離脱してしまうことがあります。

この記事では、フォーム確認画面の役割や、離脱を防ぐデザインのポイントを解説します。入力画面から完了画面まで、使いやすいフォーム全体を設計したい方は、ぜひ参考にしてください。

フォームの確認画面とは？役割と必要性

フォームの確認画面は、お客様が入力した内容を送信前に見直してもらうためのページです。一見すると一手間多いように見えますが、誤入力の防止や信頼感の演出など、いくつかの重要な役割を担っています。

確認画面の役割

確認画面の主な役割は、入力ミスを防ぐことです。電話番号やメールアドレスのタイプミス、選択項目の選び間違いといった誤入力は、企業側が後から訂正することが難しい情報です。送信前に内容を一覧で見直せる仕組みがあると、お客様自身がその場で気づいて修正できます。

もう1つの役割が、お客様への安心感の提供です。「これから送信される内容」を視覚的に確認できることで、入力情報がきちんと送られるという信頼感が生まれます。とくに資料請求や問い合わせなど、後で対応を待つ性質のフォームでは、確認画面が信頼の土台になります。

確認画面を設けないという選択肢

一方で、簡易な問い合わせやアンケートなど、項目数が少なく入力ミスのリスクが低いフォームでは、確認画面を設けない選択肢もあります。確認画面が増えると工程が1つ増え、その分離脱のリスクも上がります。フォームの目的や項目数に応じて、確認画面の必要性を判断することが大切です。

項目数が3〜5個程度に収まり、入力ミスがあっても再入力で対応可能な内容であれば、確認画面を省略してリアルタイムエラー表示で十分カバーできるケースもあります。逆に、住所や決済情報など慎重さが求められる情報を扱う場合は、確認画面を必ず設けるべきといえます。

確認画面で起きやすい離脱

確認画面は最終ステップだからこそ、ここで離脱されると影響が大きくなります。代表的な離脱パターンが、ボタンの位置や名前がわかりにくく操作に迷う、内容を修正したくても入力画面に戻れない、レイアウトが見づらく内容を確認しきれない、といったケースです。

確認画面の設計次第で、入力を終えたお客様が安心して送信に進めるかが決まります。最後の一歩で離脱を生まないため、デザインと操作性を意識した設計が必要です。

フォーム確認画面のデザインで押さえたいポイント

確認画面は通常のフォーム入力画面とは異なる役割を持っています。ここでは、確認画面に特化したデザインのポイントを5つ紹介します。

入力内容を見やすい一覧形式で表示する

確認画面では、お客様が入力した内容を「項目名」と「入力値」のセットで一覧表示します。表形式でまとめると視覚的に整理され、長文の問い合わせ内容も改行を保ったまま表示する設計が望ましい形です。お客様自身が項目ごとにすぐに確認できるレイアウトを意識します。

選択項目（プルダウンやラジオボタン）の入力結果は、システム上の値ではなく、お客様が選んだときの表示文字列をそのまま見せることが大切です。「1」や「option_a」のような内部値が表示されると、何を選んだのか伝わりません。

「修正する」と「送信する」ボタンを明確に分ける

確認画面では、入力画面に戻って修正するためのボタンと、内容を確定して送信するボタンの2つを設置します。両者の見た目を明確に分け、誤操作を防ぐデザインを心がけます。「送信する」ボタンを目立つ色にし、「修正する」ボタンはグレーや枠線のみのスタイルにする使い分けが定番です。

「戻る」というラベルだけだと、ブラウザの戻るボタンと混同されることがあります。「内容を修正する」「入力画面に戻る」など、行先がわかる文言にすると親切です。

送信ボタンを目立たせ、誤操作を防ぐ

送信ボタンは画面内で最も目立つ要素として配置します。色だけでなく、サイズやアイコンの併用、ボタン周辺の余白の確保なども重要です。タップしやすい十分なサイズを確保し、押し間違いを防ぐ仕組みを整えます。

二重送信を防ぐ仕組みも忘れずに取り入れます。送信ボタンを押した直後にボタンが無効化される、ローディングアイコンに切り替わるなどの工夫により、お客様が誤って同じ内容を複数回送信してしまう事態を避けられます。

スマートフォンでも確認しやすいレイアウトにする

確認画面はスマートフォンで見ると、項目数が多い場合に縦に長くなりがちです。スクロール途中で送信ボタンを見失わないよう、ボタンを画面下部に固定する方法もあります。

入力内容と送信ボタンの距離があまりに離れていると、最終確認の体験が分断されます。最後にもう一度内容の概要が見えるよう、画面構成を工夫することも有効です。スマートフォンの実機で操作感を必ず確認しておきましょう。

個人情報保護方針への同意を改めて確認できるようにする

確認画面に個人情報保護方針へのリンクを再度配置すると、お客様にとって安心材料になります。チェックボックスでの同意を再確認する形にするか、入力画面で同意済みの内容を確認画面でも明示する形にするか、フォームの目的に応じて選択します。

法令への配慮として、利用目的の明示と同意取得は確実に行いたいプロセスです。確認画面はその最終確認の場として機能します。

確認画面と一緒に整えたいフォーム全体の設計

確認画面のデザインを磨く前提として、フォーム入力画面の設計が整っていることが重要です。ここでは、入力画面に共通して押さえておきたい設計の基本を整理します。

入力画面はシングルカラム（縦一列）で構成する

入力欄は縦一列に並べる「シングルカラム」が基本です。横に複数並べると視線の動きが複雑になり、入力ミスや迷いの原因になります。

スマートフォンでもPCでも、縦に並んだ構成は視認性と操作性に優れています。住所のように複数項目をまとめたほうが自然な場合は、関連項目をグループ化するなど、メリハリのあるレイアウトを意識しましょう。

プレースホルダーとラベルを使い分ける

項目名を表すラベルは、入力欄の外側に常時表示します。プレースホルダー（薄文字のヒント）だけに頼ると、入力中に文字が消えて何の項目だったかわからなくなります。

プレースホルダーは入力例や記入時の注意事項を示す補助的な役割にとどめます。視覚障がいのあるお客様への配慮としても、ラベルの常時表示は重要な要素です。

リアルタイムエラー表示を取り入れる

メールアドレスの形式不正や必須項目の未入力など、入力ミスはその場で気づける形が理想です。フォーカスが外れた瞬間に判定する仕組みなら、お客様は次の項目に進む前に修正できます。

送信時にまとめてエラーを出すよりも、ストレスの少ない体験になります。エラー表示は赤枠と簡潔なメッセージで、何をどう修正すればよいかが瞬時に伝わるデザインを心がけます。

ステップ分割と進捗表示でゴールを示す

項目数が多い場合は、いくつかのステップに分けて進捗バーで現在地を示すと、お客様の心理的な負担が軽くなります。「あと1ステップで完了」という視覚的なゴールが、入力途中の離脱を防ぐ効果も期待できます。

各ステップでこまめに入力内容を保存できる仕組みも併せて用意すると、より安心感のある体験になります。

送信完了画面・サンキューページのデザインも忘れずに

確認画面の次に表示される完了画面（サンキューページ）も、フォームのデザインに含まれる重要なステップです。ここでの体験が、お客様の満足度や次のアクションへの動機を大きく左右します。

受付完了が明確に伝わるメッセージにする

完了画面では、まず「お問い合わせを受け付けました」「送信が完了しました」といった明確なメッセージを表示します。次にいつ頃返信があるか、自動返信メールが届くかどうかなど、お客様が知りたい次の情報も伝えます。

営業時間外であれば翌営業日の対応となる旨など、現実的な目安を伝えると親切です。

次のアクションを案内するコンテンツを配置する

完了画面はそのままページを閉じられてしまうこともありますが、関連コンテンツへのリンク、SNSへの誘導、関連サービスの紹介などを配置することで、サイト内回遊を促せます。資料請求のお礼として別の関連資料を案内するなど、リードの育成につながる接点を作ることも可能です。

お客様の関心が一番高まっているタイミングだからこそ、次のアクションを丁寧に提示する価値があります。

コンバージョン計測やタグ設置を組み込む

完了画面はコンバージョンの計測ポイントとして重要な役割も担います。Google AnalyticsやGoogle広告のコンバージョンタグ、各種MAツールのタグなどを完了画面に設置することで、フォーム経由のコンバージョンを正確に計測できます。

マーケティング担当者と連携して、必要なタグの設置を漏れなく行いましょう。

確認画面までを含めたフォーム運用の課題

確認画面を含むフォーム全体のデザインを整えていくなかで、運用上はいくつかの典型的な課題が見えてきます。

確認画面のデザインだけ統一されていない

入力画面はサイト全体のデザインに合わせて作り込まれているのに、確認画面だけツールの初期テンプレートのままで、見た目が浮いてしまうケースは少なくありません。

確認画面まで含めて自社のブランドに合わせたデザインに統一することで、お客様の体験全体に一貫性が生まれます。

HTML編集の知識がないと細部の調整ができない

フォーム作成サービスによっては、確認画面のレイアウトを自由に編集できない、またはコード編集の知識がないと変更が難しいケースもあります。

担当者がノーコードで編集できる範囲と、HTMLやCSSで自由にカスタマイズできる範囲の両方を備えたサービスを選ぶと、改善のスピードが上がります。

ABテストや改善のサイクルが回らない

確認画面の改善で大きな差が出るのは、ボタンの色や文言、レイアウトの細かな違いです。これらは机上の議論で決めるよりも、実際にABテストで効果を測りながら改善していくほうが確実です。

フォーム作成サービスにABテスト機能が標準で備わっていれば、改善のサイクルが回しやすくなります。

確認画面まで自由に設計できるフォームなら「Synergy!」

確認画面までを含めて自由に設計でき、改善のサイクルも回しやすい仕組みを選ぶことで、フォーム全体の体験価値を高められます。

そこでおすすめなのが、当社の「Synergy!」です。

「Synergy!」とは？

「Synergy!」は、フォーム作成、メール配信、顧客データベースなどをまとめて扱えるクラウド型CRMサービスです。お問い合わせフォーム、資料請求フォーム、キャンペーン応募フォームなどを作成数無制限で運用でき、入力画面から確認画面、完了画面までを一貫して管理できます。

参考記事：CRM・顧客管理システム「Synergy!（シナジー）」

「Synergy!」の強み

確認画面のデザインに関わる強みとして、HTML・CSS・JavaScriptを使った自由なカスタマイズが可能な点が挙げられます。確認画面のレイアウト、ボタンの配置、色の使い方まで、自社のブランドに合わせて細部まで調整できます。同時に、ノーコードで操作できる管理画面も用意されており、専門知識がない担当者でも基本的なフォーム作成と運用が完結できます。

入力フォーム最適化（EFO）の観点で役立つ機能も豊富です。レスポンシブデザインへの標準対応、リアルタイムエラー表示、入力途中の一時保存、ABテスト機能、アクセスレポートによる離脱ポイントの分析など、確認画面とその前後を含めたフォーム全体の改善サイクルを回せます。

参考記事：CRM・顧客管理システム「Synergy!（シナジー）」のフォーム機能

「Synergy!」の事例

スポーツクラブNAS様では、体験会レッスンや季節イベントの申し込みフォーム作成に「Synergy!」を活用しています。以前はフォーム作成のプロセスが煩雑で、本部への依頼や修正確認に時間がかかり、施策開始までに1週間ほどかかることもありました。

「Synergy!」導入後は、店舗側でもフォームを作成できるようになり、簡単なフォームであれば30分程度で作成できるようになりました。実際に、企画のフライヤーデザインに合わせてロゴや画像を入れ、「何の申し込みフォームか」が一目で伝わるように工夫したフォームを作成しています。

フォームの確認画面に関するよくある質問（FAQ）

確認画面と完了画面の違いは？

確認画面は、入力した内容を送信する前にお客様が見直すための画面です。一方の完了画面は、送信が完了した後に表示される画面で、受付完了のメッセージや次のアクションへの案内が中心となります。それぞれ役割が異なるため、デザインも目的に応じて作り分けることが大切です。

確認画面で「戻る」ボタンを押すと入力内容が消えるのはなぜ？

ブラウザの戻るボタンを使うと、フォームの仕様によっては入力内容が初期化されてしまうケースがあります。これを防ぐため、確認画面には「内容を修正する」など、フォーム側で用意した戻るボタンを必ず設置し、お客様にはそのボタンを使ってもらえるよう案内することが重要です。

確認画面のデザインを改善するときは何から手をつけるべき？

まずはアクセスデータを確認し、確認画面で離脱が発生しているかを把握します。離脱が見られる場合は、ボタンの色や位置、文言、入力内容の一覧表示の見やすさなどを順に検証します。仮説をもとに数パターンを用意し、ABテストで実際の効果を測るアプローチが効果的です。

まとめ

フォームの確認画面は、送信直前のお客様が内容を見直す大切な画面です。入力内容の見やすさ、修正ボタンと送信ボタンの分かりやすさ、スマートフォンでの操作性まで整えることで、最後の離脱を防ぎやすくなります。

こうしたフォーム改善に役立つのがSynergy!です。入力画面、確認画面、完了画面までを一貫して管理でき、HTMLやCSSでのカスタマイズにも対応しているため、自社サイトに合ったフォーム体験を作りやすくなります。

Synergy!を提供するシナジーマーケティングは、フォームを含む顧客接点の改善を支援してきました。確認画面まで含めてフォームを使いやすくしたい場合は、ぜひ一度ご相談ください。

お問い合わせはこちら

CRMシステム「Synergy!」の特長が機能別でわかる資料です！

「Synergy!」の具体的な製品機能については、ぜひ以下のフォームから資料をダウンロードしてご確認ください。

資料をダウンロードする

関連情報

• 【ブログ】HTMLでお問い合わせフォームを作る方法｜コード例・CSS・PHPの基本
• 【ブログ】使いやすいスマホの入力フォームを作成するポイントは？作成・運用におすすめのツールも紹介

※記載されている内容は掲載当時のものであり、一部現状とは内容が異なる場合があります。ご了承ください。