ディスプレイ比較の重要性/画像が重要な意味を占めるサイトで、何か違うなと感じたら

カラーマネージメント

概要

 状態:-  閲覧数:3,276  投稿日:2011-08-25  更新日:2016-11-13
ちょっと前から、
「画像が重要な意味を占めるサイト」で、なんか違うな、
と感じるようになった。

もっと以前は、ちゃんと表示されていたはずなのに、
どうして?


チェックすべき項目


とりあえずの仮結論
・可能なら複数ディスプレイで確認
・画面解像度
・画像の縦横比率
・色温度

ディスプレイ1台だけでは分からない

 閲覧数:463 投稿日:2016-10-28 更新日:2018-02-26
■1.<ディスプレイの違い>
・これはたった今、気が付いたのだが、ディスプレイの白さが違う。
全然違う。横にディスプレイを並べて、同じページを表示させ、
比較して初めて気が付いた。
古いPCに繋いでいるディスプレイは、画面の白い部分がちゃんと白い。
新しいPCへ繋いでいるディスプレイは、画面の白い部分がちょっと薄茶色い。

と言っても、単独で見る限りはどちらも白色。
横に並べない限り気が付かなかったと思う。

ちなみに、画面の白い部分がちょっと薄茶色いディスプレイは、
アイ・オーデータの液晶ディスプレイ。
シリアルナンバー不具合が判明し修理に出した例のヤツだ。
▽アイ・オー液晶ディスプレイの不具合 | ProgrammingStyle
  http://program.w4c.work/blog/details.php?bid=35

2006年て古いから寿命じゃないの?
とも思うが、

古いPCに繋いでいるDELL製ディスプレイは、
それより前に購入したものだから、古さは必ずしもいい訳にはならないと思う。


だけど、本当に言いたいことは、メーカー云々じゃなくて、
液晶ディスプレイの表示は、単独では評価不能だ、ということ。

白はあくまで、白だし、
比較して初めて分かることもあるってことを、知っといた方がいいのかもしれない。

ちなみに、自動・手動でディスプレイの調整を試みたけど、
どう足掻いても、白い部分は真っ白にはならない。

このディスプレイが、
「画像が重要な意味を占めるサイト」で、なんか違うな、
と感じる理由の一つだと思われる。


次。
■2.<画面解像度の違い>
古いPCと新しいPCでは、OSが異なる。
XPと7。
それぞれ、色々試したけど、結局、標準奨励の解像度に設定した。

当然、画面が表示される領域が異なるのだけど、
その意味するトコは、
実はそれだけではないのかもしれない、というもの。

こちらも単独では気が付かなかったのだが、
同じページを表示したディスプレイを並べてみると、
大きな画像とかは、びっくりするぐらい見え方が違う。

これは、もしかしら、解像度とは関係なく、
■1.<ディスプレイの違い>だけの影響かもしれないし、
■2.<画面解像度の違い>だけの問題かもしれないし、
あるいは。その両方かもしれない。

この辺り、解像度自体をよく理解していないため、なんとも言えないが、
「画像が重要な意味を占めるサイト」で、なんか違うな、と感じたら、
ディスプレイ解像度がどうなっているのか、についても、
もしかしたら、確認した方がよいのかもしれない。




■3.<カメラの縦横標準比率の問題>
これは今回のエントリーとは直接関係ないかもしれないが、
背景に影画像を指定したり、縮小したりしている場合に影響を受けるかもしれないので、
一応書いとくよ。

単独では気が付きにくく、比較して初めて分かるって意味では、
■1.2.と同じなのだが、
デジタルカメラで撮影した際、標準で出力される画像の縦横比率は、カメラ毎に異なる。

何台もカメラを使いこなしている人は気付いてると思うけど、
あれって、カメラ毎に微妙に違うんだよね。
(1pxぐらいしか違わない場合もあるけど…)

コンデジとデジ1でも違うし、デジ1同士でも、メーカーによって異なっている。

なので、複数のカメラを使い分けている人は、
画像の撮り回しには注意が必要。

特に大量の画像をスクリプトで一気に処理したりする際、
この縦横比率については、以外に見落としがちな気がしないでもない…。



で、最終的な結論なのだが、まだ出ていない。
というか多分、こんな感じしか無理かと……。


紙ベースなら、みんなが同じものを見るので、条件は同じ。
しかし、Webベースになるとそうはいかない。

これまで、横幅等レイアウトについては、それなりに注意を払うようにしてきたが、
画像の見え方にまで、注意を払ったことはなかった。

ディスプレイの設定によって、レイアウトが崩れることがあることは承知していたし、
自分なりにターゲットブラウザを設定することである程度対応することはできるが、
しかし、「画像メインのサイト」での画像の見え方までは制御することはできないと思われる。

画像の内容の面白さで勝負するサイトならばそれ程気にする必要はないのかもしれないが、
大きな画像を掲載して、それをメインコンテンツとしているサイトの場合には、
ユーザ環境によっては、必ずしもこちらの意図したレベルの画像が表示されているか、どうかを確認する方法はない、と…。


ここまで書いて、FLASHを使えばどうだろうか?
という気もしたが、

jQuery全盛の時代にFLASHは、という気がしないでもない。

というより、正直に言うと、AS3がよく分からない…。


まあ、でも、ユーザ側の見え方はともかく、
製作者側の環境ぐらいは何とかしたいのだが…。


あれか、この古いPCに繋いでいるDELLのディスプレイを、
新しいPCへ繋げばいいのか…。


あーでも、そうすると、
画像系アプリを利用する際、画面が小さくなってやり辛いんだよね。


あー、もう、どうしようかー。


こんなエントリー書くより、
ディスプレイ買えば、一発で解決する気もするが…。


モニタの「白」を正しく設定する
デジタル写真の必修科目・カラーマネージメント講座
色温度は、D50かD65か
PC表示とスマートフォン表示の色の違い



ICCプロファイル



類似度ページランキング
順位 ページタイトル抜粋
1 ディスプレイ比較の重要性/画像が重要な意味を占めるサイトで、何か違うなと感じたら 90
2 GIMPで「レイヤーとして開く」を選択した画像、の位置情報(x,y)を表示させる方法が分からない 34
3 自分の環境でスプライト画像を作成したい 34
4 プルダウンメニュー(セレクトボックス)要素を右揃えしようと思ったけど、出来なかったのでメモ 33
5 モバイルデザイン1 / スマホサイトのベースとなるフレームワークを検討 32
6 デジカメで撮影した画像で就職用写真を作成する。4cm×3cmの画像を用意したが、最終的にセブン‐イレブンで印刷したため関係なかった 30
7 Chrome プロファイルが壊れている、と毎回表示されるが、英語なのでどうしたら良いか分からない 30
8 画面幅に応じて取得ディレクトリパスを変更したい 29
9 組積造。高さが異なる要素を、上からレンガ状に配置 28
10 トリミングする際、範囲を決定する入力ボックスが表示されなかったら 28
11 いい感じのロゴを見つけたら、そのサイトへのリンクを張っていくページ 27
12 良い感じのWebデザインを発見したら、その場で確認後、このエントリーへ追記していく 27
13 レイアウトがどうしても崩れるときは、div marginへマイナス値が設定されていないか、確かめる 27
14 レスポンシブスマホサイトで、意図せず横スクロールが発生する場合は、URLを折り返し表示するよう設定 27
15 Dreamweaver8で、デフォルトのワークスペースレイアウトを指定するやり方 → 結局、分からず 27
16 作成した素材がどうしても見つからないときは、「png形式」を疑ってみる 27
17 主要サイトの横幅と、メイン広告の大きさを調査 26
18 リストタグではない、リスト内画像の縦位置調整 26
19 「レイアウト崩れ」がどうしても解決しない → Chrome「デベロッパーツール」で怪しいと思った要素を、正常表示されるまで削除し続けていく 26
20 WebサイトをHTML5で作成したら、IE8で、グローバルナビゲーション表示がおかしくなった 26
2024/11/23 1:31 更新
週間人気ページランキング / 11-16 → 11-22
順位 ページタイトル抜粋 アクセス数
1 鉄道会社毎のカラーコード | カラーコード(色) 12
2 FontAwesomeでアイコンが□(四角)になって表示されない Forbidden  | Font Awesome(フォント) 10
3 Design 0 8
3 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 8
4 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 6
5 「東京都」のカラーコード取得は難しい | カラーコード(色) 5
5 Fireworks で背景画像透明化 | Fireworks CS3(Fireworks) 5
6 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 4
7 「:after擬似要素」は、Chromeの「要素を検証」で確認できない | 擬似(CSS) 3
7 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 3
7 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 3
7 個人的によく見返すエントリーへのLinkなど | その他 3
7 RGB ⇔ Lab | 色変換(色) 3
7 「Google Chrome」の文字が突然ギザギザで表示されるようになったら、「chrome://flags/#top-chrome-md」へアクセス後、右上の「Reset all」ボタンをクリックします。 | Google Chrome(ブラウザ) 3
7 色モデルイメージ図 | 色変換(色) 3
8 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 2
8 ICCプロファイル | カラーマネージメント(色) 2
8 パッケージ化されてない拡張機能 | Chrome 拡張機能 2
8 空間的 / 可逆な JPEG ファイルの読み込みは実行されません | Photoshop CS3(Photoshop) 2
8 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 2
2024/11/23 1:01 更新