「ボタンが目立たない」を検証可能にする
コントラスト・タップ領域・競合要素・位置の 4 つに分解する
［ページ］の主ボタンに「目立たない」という指摘がありました。測定できる項目に分解してください：1）ボタンの文字と地の色のコントラスト、ボタンとページ背景のコントラスト（それぞれ現状値と目標値を示す）；2）タップ領域のサイズ。44×44 に達しているか；3）同じ画面で、より明るい・大きい・彩度が高い要素はいくつあるか。列挙する；4）ユーザーの走査線上で何番目の視覚的な停留点か；5）この画面の主操作は 1 つだけか。そのうえで改善案を 3 つ示し、それぞれ「変える変数は 1 つだけ」と明記し、想定効果と検証方法（最初のクリックまでの時間、タスク完了率）を添えてください。「大きく太くする」だけで済ませないでください。
使い方
一度に変える変数は 1 つにしてください。そうでないと、クリック率が上がっても再利用できる知識になりません。
向いている場面
- レビューで「このボタンは目立たない」と言われても、どこを変えるか誰も言えません。まず「目立つ」をコントラストと競合要素に換算します。
- リニューアル後に主ボタンのクリック率が下がり、チームは明るい色に変えたがっています。まず、同じ画面に同じ重さのボタンが 2 つ増えていないかを確認します。
向いていない場面
- ボタンが無効状態、または二段階の確認が必要な場合です。目立たないのは意図的で、変えるべきは状態の説明であってボタンではありません。
- 画面に操作が 1 つしかなく、周囲に何もない場合です。すでに最も目立っており、さらに強めると騒がしく見えるだけです。
例
入力
モバイルの決済ページ。「注文を確定」の主ボタンはブランドの淡い青 #7FB3FF に白文字、高さ 40px・幅 343px。同じ画面に「買い物を続ける」のテキストリンクと、上部に赤い割引タグ
得られるもの
文字と地の色は 2.2:1、ボタンとページ背景は 1.4:1 で、どちらも目標（文字 4.5:1、境界 3:1）に届きません。高さ 40px はタップ領域の下限 44px を下回ります。赤い割引タグの方が目を引き、走査の最初の停留点はそちらです。案 A は塗りだけを #0B5FFF に変え、レイアウトを変えずに 6.4:1 にします。案 B は割引タグを淡い枠線に下げ、ボタンを唯一の高彩度要素にします。案 C は高さを 48px にし、内側余白を 12px 足します。検証は最初のクリックまでの時間と送信完了率を、それぞれ 1 週間見ます。
よくある誤用
- 色・サイズ・位置・文言を同時に変える場合です。数値が上がってもどれが効いたか分からず、次に再利用できません。
- 影とグラデーションで目立たせようとする場合です。増えるのは装飾で階層ではなく、ダークモードでは効かなくなります。
こう変えると効く
- 「目立たないのは、副ボタンと同じ見た目だからではないか」に変えます。まず階層の仕組みを見てから、個々のボタンを論じます。
- 「3 つの案それぞれに戻す条件を書く」を足します。期待に届かないときどう戻すかを示す方が、案そのものよりレビューを説得できます。