NPO・非営利団体のWEBサイトに合う配色は？活動内容を伝えやすくする色選び
NPO（非営利団体）のWEBサイトでは、活動の目的を伝えるだけでなく、実際に何をしているか、どのように参加・支援できるかを見つけやすくする必要があります。温かそうな色を増やすだけでは、活動報告や参加方法が埋もれることもあります。架空の河川清掃団体を例に、活動内容を主役にしながら支援の入口も分かりやすくする配色を考えます。
活動報告を読みやすくし、参加と寄付は言葉で区別する
まず、訪問者が確認したい内容を「活動の目的」「活動報告」「参加方法」「寄付の案内」に分けます。活動の目的は短い文章で伝え、報告には取り組んだ内容・実施場所・確認できた結果を整理します。ページの大部分は明るい背景と濃い文字色で統一し、内容の違いは見出しと余白で示すと、装飾より説明を優先できます。
清掃活動の写真を使う場合は、写真を主役にしながらも、日付や説明文を読める単色の面に置きましょう。風景や参加者の写真は色がさまざまなので、その上に文字を直接重ねる場合は重なる部分ごとにコントラストを確認する必要があります。
「清掃活動に参加する」と「寄付の方法を見る」は異なる行動です。両方を強い色のボタンにすると、どちらが主要な案内なのか分かりにくくなる場合があります。例では参加案内を塗りつぶしボタン、寄付の案内を下線付きリンクとし、色だけで用途を区別しない構成にします。目立たせたい操作に絞って使う色をアクセントカラーと呼びます。
川辺の清掃活動を伝える6色の配色例
地域の川辺を清掃する架空の非営利団体の紹介ページを想定します。HEXコードは、色を「#」と6桁の英数字で指定する表記です。次の6色に役割を固定します。
- 全体の背景：温かみのあるオフホワイト #F8F7F2 ― 活動の目的、参加方法、団体紹介。
- 見出し・本文：濃い緑がかったグレー #283B37 ― 活動内容、実施場所、寄付の説明。
- 日付などの補足文字・必要な枠線：落ち着いた灰緑 #566A61 ― 更新日、写真の説明、報告欄の輪郭。
- 活動報告の面：淡い緑 #E8F1EA ― 清掃の取り組みや活動記録をまとめる場所。
- 参加ボタン・案内リンク：深い青緑 #235F53 ― 「清掃活動に参加する」ボタンと下線付きリンク。
- 参加ボタンの文字：白 #FFFFFF ― 青緑のボタンに載せる文字。
ページ全体を#F8F7F2にし、活動目的や活動報告の見出しは#283B37で統一します。活動の様子を伝える欄は#E8F1EAにして、説明文を#283B37、実施日などの補足を#566A61で表示します。この団体と活動内容は配色を説明するための架空の例です。清掃量や参加人数といった実績の数値を掲載する場合は、実際の記録に基づいて確認します。
参加の入口は背景#235F53に文字#FFFFFFの「清掃活動に参加する」ボタンを置きます。寄付の案内は同じ#235F53の文字を使った「寄付の方法を確認する」という下線付きリンクにすると、色を増やさず操作の種類を区別できます。寄付の受け付け方法・送金先・使い道は、運営団体が確認した正確な情報だけを記載します。
コントラスト比は、隣り合う2色の相対的な明るさの差です。本文#283B37と全体背景#F8F7F2は約11.05:1、補足文字#566A61と同じ背景は約5.39:1、活動報告の文字#283B37と淡い緑#E8F1EAは約10.28:1、ボタンの白文字#FFFFFFと深い青緑#235F53は約7.41:1です。いずれもWCAG 2.2（WEBコンテンツを利用しやすくするための指針）のレベルAAで通常サイズの文字に求める4.5:1以上を満たします。参加ボタンと全体背景の差も約6.91:1あり、操作部品の視覚的な識別に必要な3:1を上回ります。
活動報告と支援の導線で調整したいこと
淡い面の違いだけを情報の区切りにしない。活動報告の淡い緑#E8F1EAと全体背景#F8F7F2の比は約1.08:1しかありません。報告欄の輪郭が必要なら、灰緑#566A61の線を使うと淡い面との比は約5.01:1です。「最近の活動」「参加方法」といった見出しや余白も併用します。
支援方法と活動実績は事実に合わせて更新する。参加募集を停止したらボタンの色を薄くするだけでなく「現在は募集していません」と明記します。寄付を受け付けていない場合も、押せそうなリンクを残さないようにします。活動の回数・費用・寄付金の用途については、確認していない数字や成果を作らず、実際に公開できる情報を用います。
スマートフォンでも目的から支援方法へ進めるか確認する。活動の説明、最新の報告、参加・寄付の案内を順序よく配置し、リンクには下線を残します。キーボード操作で選択中の要素を示す枠（フォーカス表示）も周囲の背景と区別できるようにします。非営利団体らしい特定の色を探すより、活動が正確に伝わり、参加方法が分かる色の役割を優先しましょう。