CTA-005 公開  更新

条件引き継ぎ型 CTA

料金のシミュレーションやプランの選択で読み手が選んだ条件を、そのまま問い合わせへ引き継ぐCTAの設計です。
同じ内容を書き直す手間をなくし、フォームの上に引き継いだ条件を選んだときの言葉のまま示します。
条件は変更したり外したりでき、金額は概算であることを明示することで、行き違いを防ぎながら相談の前提をそろえます。

ワイヤーフレーム(PC)

条件引き継ぎ型 CTA PC版ワイヤーフレーム

ワイヤーフレーム(SP)

条件引き継ぎ型 CTA SP版ワイヤーフレーム

SP版の特徴

  1. 条件の要約はフォームの一番上:画面が縦に長くなっても、入力を始める前に何を引き継いだのかを確かめられるようにしています。
  2. 画面は縦に並べる:引き継ぐ元と問い合わせを横に並べる余白がないため、上から順にたどれる並びにしています。
  3. 条件の一覧は短く:狭い画面で長い条件が続くと、入力欄が下へ押し下げられるため、要点だけにまとめています。
  4. ボタンと入力欄は全幅:押しやすく、入力しやすい大きさを保っています。

採用前の判断ポイント

向いているケース

  • 読み手が条件を選んだり計算したりしたあとに、問い合わせてもらいたい
  • 料金のシミュレーション、プランの診断、商品・プランの選択、希望日時の選択がある(実際に枠を予約する場合は日時予約型が向きます)
  • 問い合わせの内容に、選んだ条件を添えてもらうと話が早い
  • 料金ページ、見積もりの目安、プラン選択のあとの相談など

向かないケース

  • 問い合わせの前に、読み手が選んだり計算したりするものがない(引き継ぐ条件がないため、セクション末尾型などで足ります)
  • 選んだ条件が、相談の内容とほとんど関係しない(引き継いでも、受け取る側で使われません)
  • 条件を受け取っても、見積もりや返信に生かす仕組みがない

このワイヤーの特徴

選んだ条件を、もう一度入力しなくてよい

料金の目安を調べたあとで問い合わせると、同じ内容を文章で書き直すことになりがちです。選んだ条件をそのまま問い合わせへ引き継ぎ、入力の手間を減らしています。

何を引き継いだのかが、ひと目で分かる

条件が裏で送られるだけだと、読み手は何が伝わるのかが分かりません。フォームの上に「ご検討中の条件」として、引き継いだ内容を選んだときの言葉のまま表示しています。

条件を変えたり、外したりできる

引き継いだ条件が今の考えと違う場合もあります。「条件を変更する」で選び直せるようにし、「この条件を外す」で条件なしの相談にも切り替えられるようにしています。

受け取る側も、相談の前提をつかみやすい

相談の内容と一緒に、どの条件で検討しているのかが届くと、返信する側も前提をつかみやすくなります。文章とは別に、条件を項目ごとに受け取れる形にしています。

SPでは、条件の要約をフォームの一番上に置く

SPでは画面が縦に長くなり、何を引き継いだのかを見失いやすくなります。フォームの一番上に条件の要約を置き、入力を始める前に確かめられるようにしています。

制作時のよくある失敗

引き継いだ内容を、お問い合わせ内容の欄に長い文章で入れてしまう

条件を文章にして入力欄へ流し込むと、読み手は自分の書く場所を探したり、不要な部分を消したりすることになります。
条件は入力欄とは別に表示し、項目ごとに受け取ります。

概算の金額を、確定した金額のように見せる

引き継いだ金額が見積もりの金額だと受け取られると、あとで金額が変わったときに行き違いが起きます。
「概算」「税別」など金額の前提を添え、正式な金額は見積もりで決まることが分かるようにします。

条件を変更しようと戻ると、選んだ内容が消えている

条件を直すために料金の画面へ戻ったら、最初から選び直しになっていた、ということがあると手間が増えます。
戻ったときも、選んでいた条件を残します。
問い合わせの画面で名前や相談内容を書きかけていた場合も、戻ってきたときにその入力が消えないようにします。

URLに個人情報や外部に残したくない条件を載せる

条件をURLのパラメータで引き継ぐ作りは手軽ですが、URLはブラウザの履歴やアクセス解析、サーバーの記録などに残ることがあります。
氏名やメールアドレスなどの個人情報や、外部に残したくない相談内容・条件は載せないようにします。
また、URLの値は書き換えられるため、受け取る側では条件が用意した選択肢の中の値かを確認し、金額はその条件から計算し直します。

条件がない状態で開くと、フォームが使えない

料金の画面を通らずに問い合わせへ来る人もいます。
条件がない場合も、そのまま相談できるようにし、「条件の指定はありません」のように状態が分かる表示にします。

よくある質問

引き継ぐ条件は、どう受け渡せばよいですか?

同じサイトの中なら、URLのパラメータ、ブラウザに一時的に保存する方法、サーバー側で受け渡す方法などがあります。
どの方法でも、個人情報や外部に残したくない条件はURLに載せず、受け取る側では条件が用意した選択肢の中の値かを確かめます。
金額は、受け取った条件から計算し直します。

引き継いだ金額は、見積もりとして扱ってよいですか?

画面で出した金額は、条件から計算した概算として扱うのが安全です。
実際の内容を伺ってから正式な見積もりを出す場合は、そのことを引き継いだ条件の近くに書いておきます。

条件はお問い合わせ内容の欄に入れず、別に受け取るのはなぜですか?

入力欄に長い文章が入っていると、読み手が自分の書く場所を見失ったり、消してしまったりすることがあります。
条件を項目ごとに受け取れば、受け取る側も集計や確認がしやすくなります。

どんな画面から引き継ぐのが向いていますか?

料金のシミュレーション、プランの診断、商品・プランの選択、希望日時の選択など、読み手が何かを選んだり計算したりしたあとに問い合わせる画面が向いています。
選んだ結果がそのまま相談の前提になる場合に、効果を発揮しやすい型です。
空いている枠をその場で予約として確定させる場合は、予約の重なりの防止まで扱う日時予約型のフォームが向きます。

関連ページ

この型をシェアする

チームや制作先に、この型のページを送れます。

この型は役に立ちましたか?

このPatternを書いた人

岡野 優太

株式会社ENVY DESIGN

代表取締役/ディレクター/デザイナー

Web業界歴14年。これまでに500件以上のWeb制作プロジェクトに携わり、企業サイト、採用サイト、ECサイトなど幅広い領域を手がけてきました。情報設計・ディレクション・デザインを中心に、Webサイトの企画から改善まで携わっています。近年はAIO(AI Optimization)・GEO領域に注力し、ChatGPTやPerplexity、Google AI Overviewなど生成AI検索からの引用獲得を支援しています。

レビュー・修正の履歴

  1. 公開 アバター画像岡野 優太 この型を公開