開発者向けサイトの配色はどう決める？コードと文章を読みやすくする方法
開発者向けサイトでは、操作手順を説明する文章と、実際に使うコードを交互に読むことがあります。説明文が薄かったり、コード中の色が多すぎたりすると、必要な行を追いにくくなります。ここでは架空の入力チェック用ツールの導入ページを例に、文章とコードをそれぞれ読み取りやすくする配色を考えます。
説明文とコードには別の背景を用意し、強調色の役割を絞る
まず説明文は明るい背景と濃い文字色で統一します。設定手順、注意事項、見出しに毎回違う色を使うのではなく、見出しの大きさ・余白・番号で情報の順序を示しましょう。説明文内のリンクは色に加えて下線を付け、クリックできることが分かるようにします。
一方、コードブロック（複数行のプログラムをまとめて表示する領域）は、文章とは背景を変えると見つけやすくなります。コードの通常文字には明るい色を使い、コメント（動作せず説明のために書く行）には少し控えめな色、キーワード（プログラムの文法上の役割を持つ語）には別の明るい色を割り当てます。こうした役割別の着色をシンタックスハイライトと呼びます。
重要なのは、色を増やすことではありません。コードの字下げや記号、行間も残し、キーワードとコメントの区別を色だけに依存させないことです。本文とコードを切り替えて読めるよう、どちらも実際の背景と文字の組み合わせで確認します。
入力チェックのコード例に使う7色の組み合わせ
架空の入力チェック用ツールを説明するページとして、次の役割を設定します。HEXコードは、色を「#」と6桁の英数字で表す指定方法です。
- ページ背景：青みのある白 #F7F9FC ― 説明文や操作手順を載せる背景。
- 本文・見出し：濃い青灰 #253448 ― 解説と番号付き手順の文字。
- コード領域の背景：濃紺 #172635 ― コードをまとめる面。
- 通常のコード文字：淡い白 #F1F5F9 ― 関数名や記号、通常のコード。
- コメント：明るいグレー青 #B6C4CC ― コード内の説明行。
- キーワード：淡い琥珀色 #F6C981 ―
constやifなどの語。 - リンク・操作ボタン：深い青 #1A6086 ― 参考項目へのリンクと「コードをコピー」のボタン。
例えば、背景#F7F9FCの説明文を#253448で書き、その直後に背景#172635のコード例を配置します。コードの通常文字を#F1F5F9、コメントを#B6C4CC、キーワードを#F6C981にすると、同じコード領域の中で役割を見分ける補助になります。
次は配色を示すための例で、使われている関数は架空のものです。
// 入力を確認する架空の関数
const result = checkInput(value);
if (result.ok) {
showResult(result);
}説明文の下線付きリンクは#1A6086にし、ページ背景#F7F9FCとのコントラスト比を約6.50:1確保します。「コードをコピー」のボタンも背景を#1A6086、文字を#F1F5F9にすると約6.26:1です。コピー操作が成功した場合は、色の変化だけでなく「コピーしました」と表示します。
コントラスト比は隣り合う色の明るさの差を表します。本文#253448とページ背景#F7F9FCは約11.97:1、通常のコード文字#F1F5F9と濃紺#172635は約14.04:1、コメント#B6C4CCと濃紺は約8.61:1、キーワード#F6C981と濃紺は約9.96:1です。いずれもWCAG 2.2のレベルAAで通常サイズの文字に求める4.5:1以上を満たします。コード領域そのものとページ背景も約14.59:1の差があります。
コードを読み違えないために最後に確認すること
文字の大きさと折り返しを確かめます。スマートフォンで長いコード行を無理に折り返すと、字下げや記号の位置を追いにくくなる場合があります。必要に応じてコード領域を横スクロールにし、文章側は通常の折り返しで読みやすく保ちます。
色に依存しないコード表示にします。コメントには記号も残し、変更前後のコードを示す場合は「追加」「削除」などを文字や記号で併記します。構文ごとの色分けは理解を助ける補助であり、色だけで命令の意味やエラーを伝えないようにします。
リンク・コピー操作も実画面で確認します。押せる場所には下線やボタンの形を用い、キーボード操作時に今選んでいる場所を示す枠（フォーカス表示）を残します。コードの文字色を追加・変更するときは、すべての文字をそのコード背景と組み合わせて測り直しましょう。読みやすい開発者向けサイトは、派手な着色よりも文章とコードの役割がはっきりしていることが大切です。