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

Webデザイン

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


週間人気ページランキング / 12-6 → 12-12
順位 ページタイトル抜粋 アクセス数
1 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 69
2 Design 0 4
2 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 4
2 効果を打ち消すスタイルシート | CSS 4
2 鉄道会社毎のカラーコード | カラーコード(色) 4
2 ログイン 4
3 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 3
3 Illustratorでaiファイルを保存する際、下位バージョンでも開けるよう保存する | Illustrator CS3(Illustrator) 3
3 Adobe Camera Raw 4.0 | Photoshop 3
4 max-width: 100%の効果を打ち消すには、max-width: none; | CSS 2
4 「display:flex;」を設定している「
  • タグ」内の「タグ」クリック範囲を拡大する | Flexible Box Layout Module(CSS)
  • 2
    4 RGB ⇔ Lab | 色変換(色) 2
    4 「テキストリンク」と「ボタン」の使い分け 2
    4 Fireworks で背景画像透明化 | Fireworks CS3(Fireworks) 2
    4 CSSトラブル対応(CSS) カテゴリー 2
    4 RGB ⇔ XYZ / CIE RGB / sRGB(D65) / sRGB(C) / Adobe RGB / NTSC RGB 2
    4 「Google Chrome」を再起動するためには「chrome://restart」へアクセスします。 | Google Chrome(ブラウザ) 2
    4 ユーザコメント一覧ページ 2
    4 SeaMonkey 2.7.2 2
    4 ページ読み込みが完了しない | Google Chrome(ブラウザ) 2
    2025/12/13 1:01 更新
    指定期間人気ページランキング / 2020-5-30 → 2025-12-12
    順位 ページタイトル抜粋 アクセス数
    1 RGB ⇔ Lab | 色変換(色) 8879
    2 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 4597
    3 Design 0 3797
    4 血の色 / #b30000 / #360800 / #ff0000 | 色 3782
    5 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 2762
    6 RGBの種類 / ビットカラー | RGB(色) 2714
    7 「bgcolor」「background-color」「background」の違い | CSS 2060
    8 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 1962
    9 16進数カラーコード / 2進数 1871
    10 コズミックブルーが何色か分からない | 色 1858
    11 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 1701
    12 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 1696
    13 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 1684
    14 「属性」「プロパティ」「アトリビュート」の違い | CSS 1610
    15 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Google Chrome(ブラウザ) 1530
    16 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 1521
    17 Chrome でキャッシュを効かさない | Google Chrome(ブラウザ) 1376
    18 「東京都」のカラーコード取得は難しい | 色 1361
    19 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 1215
    20 「西武鉄道株式会社」のブランドカラーは、3色(#3366CC、#66CCFF、#33CC66) | 色 1190
    2025/12/13 1:01 更新