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

Webデザイン

カテゴリー:  閲覧数:424 配信日:2016-10-28 10:38


■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表示とスマートフォン表示の色の違い


週間人気ページランキング / 4-12 → 4-18
順位 ページタイトル抜粋 アクセス数
1 16進数カラーコード / 2進数 29
2 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 17
3 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 13
4 Design 0 11
5 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 10
5 RGB ⇔ Lab | 色変換(色) 10
6 RGBの種類 / ビットカラー | RGB(色) 9
7 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 8
8 「bgcolor」「background-color」「background」の違い | CSS 7
9 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 6
9 「z-index」効果を打ち消すスタイルシートは、「z-index:auto;」 6
10 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 5
10 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 5
11 画像大きさ | 他サイト調査(HTML) 3
11 カラーコード / 色コード | カラーコード(色) 3
11 「属性」「プロパティ」「アトリビュート」の違い | CSS 3
11 イラスト素材 | デザイン 3
11 HSLとHSVの違い | 色変換(色) 3
11 「Google Chrome」の文字が突然ギザギザで表示されるようになったら、「chrome://flags/#top-chrome-md」へアクセス後、右上の「Reset all」ボタンをクリックします。 | Google Chrome(ブラウザ) 3
12 使用していないCSSをチェックする、標準的な方法を知りたい | CSS 2
2024/4/19 1:01 更新
指定期間人気ページランキング / 2020-5-30 → 2024-4-18
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 8122
2 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 4342
3 血の色 / #b30000 / #360800 / #ff0000 | 色 3476
4 Design 0 3397
5 RGBの種類 / ビットカラー | RGB(色) 2443
6 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 2340
7 「bgcolor」「background-color」「background」の違い | CSS 1770
8 コズミックブルーが何色か分からない | 色 1697
9 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 1696
10 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 1526
11 「属性」「プロパティ」「アトリビュート」の違い | CSS 1524
12 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 1457
13 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 1410
14 16進数カラーコード / 2進数 1384
15 Chrome でキャッシュを効かさない | Google Chrome(ブラウザ) 1223
16 HSLとHSVの違い | 色変換(色) 1130
17 使用していないCSSをチェックする、標準的な方法を知りたい | CSS 1008
18 黒体 / 色温度 / D65(6500K)/ D50(5000K)/ K | 色 965
19 「:after擬似要素」は、Chromeの「要素を検証」で確認できない | 擬似(CSS) 956
20 GIFアニメーション | 画像 912
2024/4/19 1:01 更新