デザインブログ

8e59eb4aa29ce1b551b409bed0416068_s

WEBデザイン

同じ色でも違って見える原因!

ホームページ制作をやっていてたまにあることを書いてみたいと思います!!
今回の記事はモニター上に表示されるカラーについてです。

同じカラー数値であっても、さまざまな要因によって見え方が違ってくることがあります…
なかには解決できないものがあるので、そのときの対処法をまとめます。

画面の特性によって変わる見え方<

img

 

同じ液晶であっても、そのパネルの性能や視野角によって違って見えることがあります。場合によっては同じモニターであっても、搭載している液晶パネルが異なることもあって、どの環境でも同じようにみせるということは事実上不可能な場合があります!!!

環境によって変わる色については最も大きな問題になりますが、これは解決できない問題です。。。

色の面積によっても変わる見え方

img-02

 

 

上の図はいずれも同じ色を使ったものであるが、その形状や大きさによって、色は異なってみます。
また背景の色によっても色は変わって見えてしまうため、数値だけで見え方をコントロールはできないです。

色には面積効果と呼ばれる効果があり、同じ色であっても面積が大きければ大きいほど明るく鮮やかに見えてくることがあります。

背景色と文字や図の色で対比現象が起きてしまい、色は周囲の色などのさまざまな要因で変化してしまうので、
色の扱いについて注意して扱ってみるといいかもしれません。

今回のデザインブログは以上です!!!

この記事が気に入ったら
いいね!お願いします。

最新情報をお届けします

関連記事

  1. e6773cd0fee5bafc1a6ce28a05353fb0_s

    WEBデザイン

    絶対に抑えておきたいホームページの配色の面積と方法!!

    ホームページを制作する際に色の面積、配色がサイトのイメージを左右する大…

  2. 20160721blog_img1

    WEBデザイン

    WEBデザインには欠かせないフォント特集!!

    ホームページをデザインする上で、重要な要素となる「フォント」について、…

  3. 1381cdd3d8ee353b0371001e5c2e87eb_s

    WEBデザイン

    サイト全体のイメージとターゲットユーザを考える!!

    新規でホームページ制作またはサイトリニューアルを行う際にターゲットユー…

  4. 6aadbba7da65b2c127d6d010932a6fbd_s

    WEBデザイン

    ホームページリニューアルの失敗しないための注意点!!

    今使用しているホームページも古くそろそろリニューアルどきと感じて、…

  5. _shared_img_thumb_PAK85_kakomaretairoenpitu1278_TP_V

    WEBデザイン

    ホームページの見やすさの視認性と読みやすさの可読性!!

    せっかくホームページを作っても見づらかったり、読みにくかった経験はござ…

おすすめ記事

  1. ice_screenshot_20160831-012703
  2. 20160825blog
  3. CoverVid
  4. 20160810blog1
  5. 9eebd6ae3e003dafbcb134405e540da0_s
  6. 20160801blog
  7. 20160630_1

最近の記事

  1. ドラッグ&ドロップ機能を可能にするモーダルポップアッププラグ…
  2. スクロールする際に画像をフェードさせるJavascriptプ…
  3. レスポンシブ対応!!自動フルスクリーン背景スライドの作成方法…
  4. Googleが公表するSEOランキングの3大要素!
  5. RTLテキスト対応JQueryのコンテンツスライダー・グライ…

アーカイブ

  1. 05

    SEO対策

    SEO上メリットの大きいタイトル要素とホームページの特徴づけについて
  2. 20160900blog

    SEO対策

    Googleが公表するSEOランキングの3大要素!
  3. CoverVid

    動くホームページブログ!!

    背景にフルスクリーン動画を表示させる「covervid.js」の紹介です!
  4. 9eebd6ae3e003dafbcb134405e540da0_s

    制作ツールブログ!!

    OSの入ったSSD(Cドライブ)をコピー(クローン)、交換方法!!
  5. e6773cd0fee5bafc1a6ce28a05353fb0_s

    WEBデザイン

    絶対に抑えておきたいホームページの配色の面積と方法!!