恵比寿のWebサイト制作・Webデザインチームのブログ。Webデザインやコーディング、SEO対策まで幅広く手掛けています。

恵比寿のデザイン制作チームのブログです。

Webデザイン、
Web制作、
SEO対策の
ご依頼・ご相談

Contact

色のバリアフリーを考慮したサイト作りのためのツール

投稿日:2018-04-17 更新日:




color_vision

公的なホームページや病院など多くの人が閲覧するサイトでは、様々な要素に気をつけなければなりません。
ユニバーサルデザインが多く広まっている今日、どんな人にも見やすいサイト作りを念頭においておくことが重要です。

今回は色覚異常の人にとってそのサイトのデザインがどう見えるかシミュレーションで確認できるツールを紹介します。

Chromatic Vision Simulator

http://asada.tukusi.ne.jp/webCVS/

 

左上に並ぶ C P D Tは色覚の種類です。

  • C型(Common) ・・・ 一般的な見え方
  • P型(Protanope) ・・・ 赤系の色を感じにくい
  • D型(Deuteranope) ・・・ 緑系の色を感じにくい
  • T型(Tritanope) ・・・ 青系の色を感じにくい

 

まず、下の図のように
「フォルダを開く」アイコンから画像をアップロードします。

CVS_1

 

左上に並ぶ「C」「P」「D」「T」の各アイコンをクリックすると、見え方のシミュレートができます。

CVS_2

 

元画像と比べたい場合はレイアウトのアイコンで左右や上下で見比べたり、
複数の見え方を同時に比べることができます。

CVS_3

 

また、右上にある「矢印」アイコンで回転や反転して表示することも可能です。
アップロードした画像をページを繊維しても保存しておく機能もあります。

CVS_4

Photoshopを使って色覚を確認する方法

表示(V)→校正設定→P型(1覚)色覚 またはD型色覚の表示により確認することができます。
設定を取り消したい場合は表示(V)→色の校正(L)のチェックを外すことで元に戻ります。

CVS_ps_5

 

おしゃれな配色のデザインができあがったとしても、様々な要素を考慮して、第一にユーザーにとって使いやすいサイトを作ることを常に意識していきましょう。




この記事をシェアする

  • Twitter
  • Facebook
  • BookmarkB!
  • Pocket

Related Entries

この記事を書いた人

TOM

TOM

Webデザイナー、UI/UXデザインと共にJavascript、PHP等のプログラミング言語について日々勉強中。