CTAボタンは色だけでなく「主役・押した先・クリック前の不安」で設計する
同じ文言でも、色替えだけでは押しにくさが残る。目立たせ方・遷移先の予告・不安への答えを、形・質感・あしらいの指示として渡す。
どんな問題を解決するか / いつ使うか
LPや広告のボタンが「詳しくはこちら」のまま平坦なとき。AIにボタン案を出させるとき、色コードだけ指定して失敗しがちなとき。CTAボタンは「送信する」ではなく、押した後に起きることの言葉にする と併用する。
やり方
- 文言・フォントサイズを先に固定せず、まず次の3点を決める:
- 主役を目立たせる（周囲より視線が行く）
- 押した先を見せる（何が起きるかがボタン周辺から分かる）
- クリック前の不安に答える（料金・手間・リスクの一文や補助表示）
- AIへの指示では、色だけでなく形・質感・あしらいを指定する（立体・ツヤ・すりガラス・イラストなど）。投稿では見た目だけを変えた12案の見本が示されている。
- 作りたい印象（信頼・緊急・やさしい等）から質感を選び、文言は別タスクで CTAボタンは「送信する」ではなく、押した後に起きることの言葉にする に揃える。
注意点・対応状況
- 装飾過多はアクセシビリティやブランドガイドと衝突しうる。コントラストとタップ領域を落とさない。
- 12案の個別プロンプト全文は画像側。必要なら元投稿の図を参照する。
出典
- 投稿者: @kawai_design
- 投稿: @kawai_design · 2026-10-11
- 収集日: 2026-10-12（JST）