CTAとは？ボタンとの違いをHTMLで比較して分かったこと
【要約】CTA（Call to Action）のポイント比較
| 項目 | CTAを意識していないページ | CTAを意識したページ（推奨） | CTAを強調しすぎたページ |
|---|---|---|---|
| ユーザーの視線・動線 | どこを見ればいいか迷う | 迷わず次の行動がわかる | 強要・誘導されていると感じる |
| ボタン・UI配置 | 各要素が同じ強さで並ぶ | 目的の行動＋判断材料が揃う | カウントダウン等の過剰演出 |
| デザイン上の注意点 | コンバージョンが下がりやすい | WCAGでアクセス性を確保 | ダークパターンになりやすい |
デザインの議論をしていて「CTAとWCAGを考慮してないよね」と言われて、「WCAGは分かるけどCTAって何者…？」となったので、備忘録もかねて調べて比較してみた。
そもそもCTAとは何者？
CTAは Call to Action の略で、直訳すると「行動への呼びかけ」。
簡単に言えばユーザーに取ってほしい行動を促すための仕組みや考え方のこと。
例えばWebサイトでよく見る、
- 無料で試してみる
- 購入する
- 資料をダウンロードする
- 会員登録する
みたいなやつ。
CTAってボタンの種類のことじゃないの？
最初は「CTAっていう特別なボタンの種類があるのかな？」と思ってた。
でも調べてみると、CTAは「ボタン」というUI部品そのものの名前ではない。
「ユーザーに取ってほしい行動」があり、それをボタンというUIで表現しているから「CTAボタン」と呼ばれているだけ。
実際、ボタンだけでなくバナーやポップアップなんかもCTAに含まれる。
- CTA = ユーザーに取ってほしい行動を促す考え方・仕組み
- CTAボタン = CTAをボタンというUIで実現したもの
と整理するとしっくりくる。
普通のボタンじゃだめなの？なぜCTAが必要なのか
「ユーザーに行動してほしいなら、普通にボタン置いとけばいいのでは？」と疑問に感じた。
例えばサービス紹介ページなら、
サービスの説明
料金
機能
利用方法
[ 購入する ]って書いておけば動作自体は問題ないはず。
でも、ページを作る側で「このページでユーザーに一番やってほしいこと」が曖昧なまま情報を並べると、ユーザー視点では、
「で、結局私は次に何をすればいいの？」
となっちゃう。
CTAは「ユーザーに次に取ってほしい行動」を迷わせないための視点でもある。
CTAの考え方はWebより前からあったっぽい
CTAという言葉の正確な発祥までは特定できなかったが、「ユーザーに具体的な行動を促す」という考え方自体はダイレクトレスポンス広告などWeb以前からあったっぽい。
Webだとページの中に直接「無料で試す」みたいなクリック可能なボタンを置けるので、この「行動を促す仕組み」とWebの相性がめちゃくちゃ良かったんだと思う。
CTAを意識すると何が変わるの？HTMLで3パターン作ってみた
文章だけだとイメージしづらかったので、同じ架空サービスを使ってHTMLを3パターン作って比較してみた。
- CTAを意識したデザイン
- CTAを意識していないデザイン
- CTAを強調しすぎたデザイン
（※CTAにはWCAGのような公式の判定基準があるわけじゃないので、あくまで比較用のサンプル。）
パターン①：CTAを意識したデザイン
最初のパターンでは「このページを見たユーザーには、まず無料でサービスを試してほしい」という目的を設定。
ここでやったのは、単にボタンをデカくしただけじゃない。
- ページの見出し
- サービスの説明
- 「無料で試してみる」ボタン（CTA）
- 判断するための補足情報（「30日間無料」「カード登録不要」）
という順番で配置したこと。
「試したいけど、後から勝手に請求されないかな…？」というユーザーの不安を解消する情報もセットで置いてあるのがポイント。
パターン②：CTAを意識していないデザイン（情報が並んでるだけ）
次に、同じサービス内容で特定の行動を優先しないページを作ってみた。
- サービスについて
- 料金プラン
- 無料プラン
- お問い合わせ
が横並びになっていて、見た目が崩れているわけじゃない。
でも2つを見比べてみると、印象が全然違う。
- CTAなし：情報が横並びに見えて、どこをクリックすればいいのか一瞬迷う
- CTAあり：ページを開いた瞬間に「次に何をすればいいか」が直感的にわかる
今回の検証で一番実感できた違いがここだった。
デカくて赤いボタンにすればOKなの？「CTAを目立たせる」の勘違い
「CTAを目立たせる」と聞くと、
- 赤くする
- デカくする
- ギラギラさせる
みたいなのを想像しがちだけど、実際は違った。
重要なのは、ページ内の情報に優先順位がついているかどうか。
サービスの説明
↓
無料体験のメリット
↓
[ 無料で試してみる ]という流れがあれば、ユーザーは自然と「なるほど、まずは無料体験すればいいんだな」と理解できる。
逆に、
サービスについて | 料金 | 無料プラン | お問い合わせ | ログインが同じ強さで並んでると、「どれを選べばいいの？」となりやすい。
つまり、
× ボタンを派手にすること
○ ユーザーに取ってほしい行動が、ページの中で迷わず伝わること
と考えるのが正解っぽい。
ボタンの文言も地味に重要
ボタンの文字も [ こちら ] より [ 無料で試してみる ] の方が、「クリックしたら何が起きるか」が分かるので圧倒的に押しやすい。
アクセシビリティ的にも「リンクの目的が分かること」は重要なので、ここは共通する部分。
CTAとWCAGって何が違うの？関係あるの？
最初に見かけた「CTAとWCAGを考慮してない」というコメントについて。
「そもそもCTAとWCAGって関係あるの？」と疑問だった。
調べてみると、この2つは全く別物。
- CTA：ユーザーに取ってほしい行動を促すデザイン・マーケティングの考え方
- WCAG：いろんな人がWebサイトを利用できるようにするためのアクセシビリティのガイドライン
CTA →「何をしてほしいか」を明確にする
WCAG →「誰でも操作・理解できるようにする」なので「CTAを考慮している＝WCAGを満たしている」とはならない。
ただ、「一番押してほしいボタン（CTA）なのに、キーボード操作で選択できない」とか「コントラストが低くて読めない」状態だと本末転倒。
「行動を促す大事なUIだからこそ、誰でも使えるようにWCAGの基準も満たそうね」という意味でセットで語られることが多いっぽい。
パターン③：CTAを強調しすぎたデザイン（ダークパターンっぽい？）
「じゃあCTAをとにかく強く押し出せば最強じゃん」と思って極端なページも作ってみた。
- タイマーでカウントダウン（「あと3分で終了！」）
- 赤色の過剰な強調
- 「無料プラン」の選択肢を極端に小さく・目立たなくする
実際に触ってみると、完全に「うわ、なんか誘導されてるな…」と感じる。
カウントダウンで焦らされ、「無料プランを選ぶ」という選択肢が隠すように置かれているため、ユーザーの正常な判断が妨げられてしまう。
CTAとダークパターンの境目
CTAで「行動を分かりやすく促す」ことと、ユーザーを「強要・誤導する」のは全く違う。
こういったユーザーの判断を不当に煽ったり隠したりするデザインは**Dark Pattern（ダークパターン）**と呼ばれる。
FTC（米国連邦取引委員会）や欧州委員会でも問題視されていて、偽のカウントダウンや不当な選択肢の差別化（false hierarchy）などは規制対象にもなっている。
「目立つボタン＝悪」ではないが、
- 過剰な緊急性の煽り
- 選択肢の意図的な隠蔽
- 1つの行動への不当な強制
が組み合わさると、CTAではなくダークパターンになっちゃうので注意が必要。
まとめ
最初は「CTAって何者…？」状態だったが、調べて実際にHTMLを作ってみて次のように整理できた。
- CTAは「ボタン」そのものではなく「行動を促す考え方」
- ボタンを派手にするのではなく、ページの情報の優先順位を整理するのが本質
- やりすぎるとダークパターン化してユーザーの信頼を失う
比較してみるとこんな感じ。
CTAなし → 何をすればいいか迷う
CTAあり（適切） → 次の行動がすぐわかる
CTAやりすぎ → 「選ばされている」感じがして怪しまれる「このページでユーザーに次に何をしてほしいのか？」を整理する視点として、CTAはめちゃくちゃ役立つ概念だと分かった。
参考資料・ソースコード
- W3C, Web Content Accessibility Guidelines (WCAG) 2.2
- W3C, Understanding Success Criterion 2.4.7: Focus Visible
- W3C, Understanding Success Criterion 2.4.4: Link Purpose
- Nielsen Norman Group, Web UX / CTA関連資料
- Federal Trade Commission, Bringing Dark Patterns to Light
- European Commission, Dark patterns / consumer protection sweep
- HubSpot, Calls-to-Action