ページの本文へ

カラー

・メインカラー、サブカラー、アクセントカラーを設定し、構成用途によって配色する

・配色のバランスを意識し、一貫性をもって使用する

・アクセシビリティに配慮した配色を行う

サイトの色計画

用途別のカラー設定

使用する色には、メインカラー、サブカラー、アクセントカラーの3つの役割があります。
メインカラーは、サイトの印象を決定する役割を担います。サイトコンセプトやユーザーに与えたい印象に沿った色を選択します。
サブカラーは、メインカラーを補う役割を持ちます。メインカラーの印象を強める、または別の印象を加える色を選択します。
アクセントカラーは、要素を強調する役割を持ちます。他のカラーと比較して目を引く色を選択し、箇所を限定して使用することで、ユーザーの注意をひきつけます。
これらをバランスよく配色し、一貫性を持って使用することで、サイト全体に統一した印象を与えることができ、情報の視認性も高めることができます。

メインカラーと配色の方向性

本サイトでは、第一のメインカラーとして、ロゴマークでも使われている藍色を使用しています。
全体の配色として色数を抑えながら、同じトーンの色調を配色とすることで、落ち着いていてシンプル=わかりやすい印象を表現しています。

メインカラー:藍色、墨、白

藍色は「落ち着いた」印象からシンプルさ、わかりやすさを表現しています。ロゴやトップページ、グローバルナビゲーションなどで使用しています。
墨は主に文字色として、完全に黒ではなく濃い灰色とすることで僅かに柔らかい印象を与えています。
白は背景色として使用しています。

サブカラー:青色、灰色、白銀色

青色はコンテンツエリアにおけるテキストリンク色に用いており、一般的なブラウザのリンク色を踏襲しています。
灰色や白銀色は「落ち着き」や「控えめさ」を印象付け、メインカラーを補助します。主に罫線や、第二の背景色としてコンテンツを差別化するための補助色として使用しています。

アクセントカラー:紅色

アクセントカラーの紅色はメインカラーとサブカラーでは補いきれない機能的な識別用途として用います。例として重要なお知らせの見出し等に用いることで、ユーザーの注意を喚起する役割を担っています。

用途別カラー一覧

配色の例

コントラスト

配色に際しては、前景色と背景色のコントラストを適切に設定する必要があります。
充分なコントラストが無いと、色弱者のユーザーが情報を識別しにくくなり、アクセシビリティが低下します。あらゆるユーザーが、等しく使いやすいデザインを意識することが重要です。
本サイトでは、日本工業規格が定めるwebサイトの設計指針、JIS X 8341-3:2016に基づく試験を実施し、カラー設計に関するアクセシビリティを確保しています。

コントラスト

文字の配色

基本の文字色

基本の文字色として以下のように配色します。
背景:白、本文:墨、リンク文字:青色、アクセント:紅色

基本の文字色

このページの先頭へ