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

Webデザイン

カテゴリー:  閲覧数:498 配信日: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表示とスマートフォン表示の色の違い


週間人気ページランキング / 3-3 → 3-9
順位 ページタイトル抜粋 アクセス数
1 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 7
2 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 6
2 RGB ⇔ Lab | 色変換(色) 6
3 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 5
3 このエントリーの結論 / 変更するまで /変更後 5
3 鉄道会社毎のカラーコード | カラーコード(色) 5
3 「東京都」のカラーコード取得は難しい | カラーコード(色) 5
4 色モデルイメージ図 | 色変換(色) 3
4 24ビットカラーにおけるHLS要素範囲 / 最小値 ~ 最大値 3
4 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 3
5 G'MIC | GIMP 系(ソフトウェア) 2
5 16進数カラーコード / 2進数 2
5 「bgcolor」「background-color」「background」の違い | CSS 2
5 「line-height」効果を打ち消すスタイルシートは、「line-height:normal; 2
5 「display:flex;」を設定している「
  • タグ」内の「タグ」クリック範囲を拡大する | Flexible Box Layout Module(CSS)
  • 2
    5 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 2
    5 FontAwesomeでアイコンが□(四角)になって表示されない Forbidden  | Font Awesome(フォント) 2
    6 「OOCSS」とは別の考え方? | 命名規則(コーディングルール) 1
    6 効果を打ち消すスタイルシート | CSS 1
    6 2系(Bootstrap) カテゴリー 1
    2025/3/10 1:01 更新
    指定期間人気ページランキング / 2020-5-30 → 2025-3-9
    順位 ページタイトル抜粋 アクセス数
    1 RGB ⇔ Lab | 色変換(色) 8523
    2 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 4532
    3 血の色 / #b30000 / #360800 / #ff0000 | 色 3682
    4 Design 0 3649
    5 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 2663
    6 RGBの種類 / ビットカラー | RGB(色) 2609
    7 「bgcolor」「background-color」「background」の違い | CSS 1929
    8 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 1815
    9 16進数カラーコード / 2進数 1789
    10 コズミックブルーが何色か分からない | 色 1777
    11 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 1633
    12 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 1625
    13 「属性」「プロパティ」「アトリビュート」の違い | CSS 1580
    14 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 1500
    15 Chrome でキャッシュを効かさない | Google Chrome(ブラウザ) 1345
    16 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Google Chrome(ブラウザ) 1304
    17 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 1168
    18 HSLとHSVの違い | 色変換(色) 1144
    19 「東京都」のカラーコード取得は難しい | 色 1065
    20 使用していないCSSをチェックする、標準的な方法を知りたい | CSS 1046
    2025/3/10 1:01 更新