SaaSのPrimary Actionは何色がいい？主要操作を目立たせる配色

TIPS

SaaS（インターネット経由で利用する業務ソフト）の管理画面では、保存、検索、新規作成など多くの操作が並びます。その中で最も重要な操作をPrimary Action（その画面で中心となる主操作）と呼びます。主操作には何色がよいのでしょうか。特定の色が正解なのではなく、周囲の背景から見つけやすく、ボタンの文字を読める色を選び、配置や言葉でも役割を伝えることが大切です。

主操作の色は「青かどうか」より役割と周囲の色で決める

例えば請求書一覧では、「請求書を新規作成」が中心の操作なら、一覧の見出しの近くに目立つボタンとして置きます。一方、「CSVを書き出す」や「表示条件を変更する」は必要な機能でも、新規作成と同じ強さで並べる必要はありません。どれを主操作にするかは、その画面で達成してほしい目的によって決まります。

青は候補の一つですが、必須ではありません。ブランドの緑や紫を使う場合も、背景との明るさの差と文字の読みやすさを確かめます。また、色だけで押せることを示さず、角丸の形、十分な余白、「作成する」のような動作が分かるラベルを組み合わせます。主操作を強調するために、同じ領域のボタンすべてを鮮やかな色で塗らないことも重要です。

請求書一覧の主要ボタンを作る配色例

ここでは、外側の画面背景を薄い青灰色 #F8FAFC、一覧のパネルを白 #FFFFFF、見出しを濃い青灰色 #1F2937、補足文をグレー #475569にします。主操作のボタンには青 #1D4ED8、ボタン文字には白 #FFFFFFを指定します。HEX（#から始まる色コード）で色を具体的に決めておくと、同じ画面内で再利用しやすくなります。

白文字 #FFFFFFと青いボタン背景 #1D4ED8のコントラスト比は約6.70:1です。これはWCAG 2.2（WEBコンテンツを利用しやすくするための基準）が通常サイズの文字に原則求める4.5:1を上回ります。青 #1D4ED8と白いパネル #FFFFFFの差も約6.70:1、外側の薄い青灰色 #F8FAFCとは約6.41:1で、ボタンの形を見分けるための十分な明暗差があります。

マウスを重ねたときの色は濃い青 #1E40AFにし、白文字 #FFFFFFとの比率は約8.72:1です。キーボードでボタンを選んだときは、さらに濃い青灰色 #0F172Aの外枠を表示します。この枠線と白いパネル #FFFFFFのコントラスト比は約17.85:1です。色の変化だけでなく、枠線の追加でも操作位置が分かるようにします。

以下はHTML（ページの内容と構造を書く記述）とCSS（文字や背景などの見た目を指定する記述）の簡単な例です。

<section class="invoice-panel">
  <h3>請求書一覧</h3>
  <p>作成済みの請求書を確認できます。</p>
  <button type="button" class="saas-primary-action">
    請求書を新規作成
  </button>
</section>

.invoice-panel {
  background-color: ■#FFFFFF;
  color: ■#1F2937;
  padding: 24px;
}
.invoice-panel p { color: ■#475569; }
.saas-primary-action {
  background-color: ■#1D4ED8;
  color: ■#FFFFFF;
  border: 0;
  border-radius: 8px;
  padding: 12px 20px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.saas-primary-action:hover {
  background-color: ■#1E40AF;
}
.saas-primary-action:focus-visible {
  outline: 3px solid ■#0F172A;
  outline-offset: 3px;
}

このコードは見た目の例であり、「請求書を新規作成」を押した後の処理は含みません。実装時には作成フォームを開く処理などを接続し、画面が狭いときにもラベルが切れないか確かめてください。

ブランドカラーへの変更と公開前の確認ポイント

別の色に変更するときは、まずボタンの背景と文字を一組で確認します。次に、ボタンとパネルの境界、ホバー時の文字、キーボード操作時の枠線を、実際に隣接する色との組み合わせで調べます。WCAG 2.2では通常サイズの文字に原則4.5:1、操作部品を見分けるために必要な視覚情報に原則3:1のコントラストを求めます。ただし、数値だけで画面全体の使いやすさが保証されるわけではありません。

削除など取り消しにくい操作を、主操作と同じ色・位置で不用意に目立たせないことも大切です。実行できないボタンは色を薄くするだけでなく、なぜ操作できないのかを近くに示します。最後に、グレースケール表示、文字の拡大、スマートフォン表示、キーボード操作で、主操作が自然に見つかるかを確認しましょう。

HueRollでは色の候補や選択した色と白・黒とのコントラストを確認できます。一方、任意の2色の比較やWCAG適合の自動判定はできません。候補を探した後は、実際の画面で接する色の組み合わせを別途確認してください。