問い合わせや申し込みへの入口（CTA）を8つの型に分け、AIへの指示文・動く見本・コードを載せています。
CTAはどの型を選ぶか
CTA は「次に何をしてほしいか」を読み手に示す部品です。型を選ぶ前に、してほしい行動がいくつあるか、読み手がどの時点で決めることが多いか、問い合わせの前に何を選んでもらっているか、の3つを書き出します。ひとつのページに複数の型を組み合わせることもよくあり、たとえばセクション末尾型を基本にして、長いページだけ追従型を足す、という使い方をします。
| こんなとき | 向いている型 |
|---|---|
| 内容を読み終えたところで、相談へ進んでほしい | セクション末尾型 |
| 記事やコラムから、話題に合った案内へつなげたい | 本文中型 |
| 白い段が続くページで、申し込みの入口が埋もれている | 全幅バナー型 |
| 相談・資料請求・電話など、入口が複数ある | 主副併記型 |
| 電話の問い合わせが多く、LINEでも受け付けている | 電話・LINE併記型 |
| 縦に長いページで、途中で決める人が多い | 追従型（ほかの型と組み合わせる） |
| 催しや募集に、申し込みの締め切りがある | 期限つき型 |
| 料金の目安やプランを選んだうえで問い合わせてもらう | 条件引き継ぎ型 |
ボタンを押したときの手ごたえの付け方は、アニメーション集の部品の動き（ボタンが押し込まれる）にあります。
マウスを重ねたときのボタンの動きは、アニメーション集のホバーの動き（ボタンがカーソルに吸い寄せられる・光の帯がすっと横切る）にあります。
押した位置から波紋を広げる返事の付け方は、アニメーション集のインタラクションの動き（押した所から波紋が広がる）にあります。
いちばん押してほしいボタンのまわりに輪を広げ続ける動きは、アニメーション集のループの動き（パルスアニメーション）にあります。
追従型は画面の端に出し続ける型なので、ページの最後にはセクション末尾型などを置き、両方が同時に画面に出ないように組み合わせます。
どの型でも守ること
- ボタンの文言に行動を書く。「送信」「こちら」ではなく「無料で相談する」「資料をダウンロード」のように、押すと何が起きるかが分かる言葉にします。
- 主のボタンは1つに絞る。同じ大きさ・同じ色のボタンを並べず、ほかの行動は薄い面や文字のリンクで控えめに見せます。
- ためらう理由を、ボタンのそばの一言で消す。所要時間、費用、営業の有無、届くものの形式などを、ボタンのすぐ近くに短く書きます。
- ページの移動は
a、その場の操作はbuttonにする。見た目をそろえても、要素は役割で選びます。 - 押せる部分を 44px 角以上にする。SP では、親指で押し損じないよう主のボタンを画面の幅まで広げます。
よくある質問 (FAQ)
行き先は1つに絞り、置く場所を何か所かに分けます。話題の区切りごとにセクション末尾型を置き、記事なら本文中型を2か所まで足すのが目安です。同じ画面の中に同じボタンが2つ以上見えないように、追従型と末尾の帯の出し方を調整します。
押した先で何が起きるかを、動詞を使って書きます。「詳しくはこちら」と書くより「料金表を見る」、「お問い合わせ」と書くより「30分の相談を予約する」としたほうが、押した先を思い浮かべやすくなります。費用や時間がかからないなら、それも文言かボタンの下の一言で伝えます。
開いてすぐには出さず、高さを抑えて出せば、本文を読む妨げになりにくいです。少しスクロールしてから表示し、SP では高さ 64px 前後の帯に収めます。チャットの起動ボタンや Cookie の同意バナーのように、画面下に貼り付く部品とぶつからないかも見ておきます。
URL に載せてよいのは選んだ条件までです。氏名・メールアドレスといった個人の情報は載せません。URL はアクセス解析やブラウザの履歴に残るためです。別のページへ渡すなら、プラン名などの条件をクエリ文字列か sessionStorage に入れて受け渡し、フォーム側ではその内容を一覧で示したうえで、「条件を変える」から戻ってやり直せるようにします。