PowerCMS ブログ

明けましておめでとうございます。
デザイナーの OGU です。本年もよろしくお願いいたします。

年末年始はイベントが多いため、いろんな色が店頭や web サイトでも使われてとてもカラフルですよね。 そんな色たちにはいろんな意味や役割があります。いくつご存じでしょうか？

色の役割とは？

快さの演出

花や景色をみて、美しい、きれいと感じますか？みなさんそれぞれに美しいと思う景色や情景があるのではないでしょうか？

イメージの表現

同じ風景でも季節や時間によってイメージがかわります。それを1年中楽しめる日本は貴重ですね。 また色から連想するものもあります。水色や青を使うと水や空のイメージを表現できたりします。

見えやすさの調整

自然界でいう、「保護色」や柄が動物の目のように見える「威嚇色」などがあります。動物の世界ではメスの気をひくためにオスのほうが鮮やかな色をしている場合がありますね。

象徴

赤い鳥居は神社を連想させたり、国旗やシンボルマークの色は理念や理想などの象徴が多いですね。

区別

自然界でいうと、トマトなどが緑から赤に変化して熟していることがわかるなど。スポーツの試合では選手と審判の色分けなどで見られます。

統一

ユニフォームや制服など、同じところに所属しているという仲間意識を育てたりという機能があります。

サイトで扱う商品やサービスで異なるカラーリング

上記のように色はいろいろな役割や意味を持っています。各社でもテーマカラーをもっているところもありますね。弊社はコーポレートサイトをリニューアルしてから青味の色を使用しています。

暖色系のイメージ

太陽、トマト、オレンジ、明るい、元気などを連想させます。赤には食欲を増進させる効果があるともいいますので食べ物に関するサイトに多く見られます。

青色系

空、海、水、さわやか、静か、きれい、などを連想させます。やはり水や空に関するサービスや商品が多く見られます。静かで落ち着いたイメージがあるためコーポレートカラーとして使用している場合も多いのではないでしょうか。

寒色系

寒色系は青だけではなく、緑や紫なども含みます。きれい、静かな、上品などを連想させます。自然を彷彿させる緑のイメージは優しさを感じることも多く医療関係でよく見かけます。

色のイメージとアクセシビリティ

ここで少しアクセシビリティのお話をさせていただきます。様々なコーポレートカラーがありその中で背景色と文字色のコントラストを保つ必要が出てきます。

コントラスト比を保つために

文字の色を変えればいい場合もありますが、文字色を白から黒に変えたことで色として受ける印象が変わってしまう場合や他の画像の背景色と文字色に問題がない場合もありますよね。その場合、背景色を変更可能であれば少しずつ色の濃さを調整してコントラスト比を保つようにします。

また背景色に薄い色を使用している時は文字に枠線をひいて、その枠線と文字のコントラスト比を4.5：1に保つようにします。弊社開発の ColorTester を開き、色の16進法を入力して色のコントラスト比を確認しながら調整してみてください。コントラスト比がいくつかすぐにわかります。

背景色と文字色のコントラスト比を保つには、色に制限があるように見えますが、枠線をつけたり、影を付けたりすることでも補うことができます。
アクセシビリティ対応は難しい、大変というイメージがあると思います。しかしあまり難しいと気負いせず、元の色に少しの手を加えるなどして出来ることから少しずつ配慮していくのはいかがでしょうか？

アルファサードの web アクセシビリティの取り組み

弊社では、web アクセシビリティ向上への取り組みとして、無償ツールの提供の他、「 JIS X 8341-3」への準拠を支援する「 PowerCMS 8341」の開発・提供、各種サポートサービスを行っています。評価版もございますので、実際にお試しの上、安心してお使いいただけます。お気軽にお問い合わせください。

Web アクセシビリティに関する弊社製品・サービス

PowerCMS 8341

「 JIS X 8341-3:2016」準拠支援ツール

導入事例：公益財団法人 長寿科学振興財団様 「 Web アクセシビリティへの対応と、PowerCMS クラウドの使いやすさ、運用への安心感が選定の決め手となりました。」

自治体向けクラウド版 CMS

「 PowerCMS 8341」が付属し、「 JIS X 8341-3:2016」に準拠したテーマを設定済みの、自治体向けのコンテンツ管理システム

ColorTester

「 JIS X 8341-3:2010」（ WCAG 2.0）の達成基準に基づき、画像の背景色と前景色のコントラストを確認するソフトウェア

ColorQuest

スクリーン上の色の名前を表示するソフトウェア