くずWebデザイナーのなれの果て

先月参加したSaCSS Vol.4のＬＴ内容です。やっとアップできました。

最近のモニタは大きく安価に、ワイド液晶が主流となりましたが、Web制作では気を付けておくことがおもったより多くあります。今回挙げる内容は理想論に近いので、現実には難しいところあると思いますが、こういった雑学的なことを覚えておくと後役立つと考えています。

モニタの特性

まず、モニタの基本的な特徴を知りましょう。

• 視野角→モニタを左右上下から見ても、色味が変わない制限角度。高価なモニタは視野角が大きいです。
• モニタサイズ→モニタ自体のサイズ。インチ単位で現在では17インチがベースとなります。
• アスペクト比→モニタの縦横の比率。4:3、16:9、16:10などがあり、ワイドテレビの普及で16:9以上が一般的となりそうです。
• 画面解像度→モニタを画面に出力するサイズ。ピクセル単位でサイズにより名称が分かれています。VGAだと1024px×768pxです。
• ドットピッチ→モニタ1ドットの大きさ。モニタサイズにより変化するので、表示される文字の大きさも変わります。

ITmedia流液晶ディスプレイ講座II 第3回　左記リンクにはモニタの画面サイズ、解像度、アスペクト比について詳しく説明しています。

モニタの色味について

モニタは表現される色について独自の特徴を持っています。

• モニタの色温度→モニタの「白」の基準を決めるものでK（ケルビン）で表します。数値が低いと夕焼けのように赤みを帯び、高いとに中の青空のように青みを帯びます。家庭用テレビの基準は9300Kで、PCのモニタも9300K以上が多いですが、制作ではDTP用途の5000K～6500Kあたりを使うところも増えてきています。
• ガンマ値→色の明るさの階調（グラデーション）を表します。階調があっていないモニタでは、基準となるグラデーションカーブを描きません。Winは2.2、Macは1.8が基準でしたが、最近ではMacも2.2になり、統一されつつあります。

wiki 色温度　左記リンクには色温度について説明しています。
ガンマって何？　左記リンクにはガンマ値はどいうものか説明しています。

PCで使われている色の規格

人間が見ることのできる可視光線を表現したものを色空間（カラースペース）と呼びます。デジタルで何かを表現するときには、使用する目的と表現する幅により適切な色空間を選ぶ必要があります。

• sRGB→マイクロソフトが提唱したWindows上で使用するのに決められた色空間です。現在のモニタ表現の制限や、ごく階調の狭いグラデーションではsRGBの方が綺麗に見られることから、Webでよく使われています。表現できる色域が狭いため、今後はAdobeRGBに移行すると見られています。
• AdobeRGB→Adobeが提唱した色空間です。色域が広く鮮やかなため、デジタル一眼レフカメラやDTPで好まれています。Macでは標準の色空間となっています。

カラースペース　左記リンクで色空間（カラースペース）について説明されています。

カラーマネジメント

グラフィックカード、OS、モニタ、デジカメ、スキャナ、プリンタで色の表現方法はバラバラです。各機械同士で表現する色空間が違うため、色を統一していく必要があります。これをカラーマネジメントと呼びます。

• キャリブレーション→個別での色の調整を指します。モニタでよく使われ、ソフトウェア、ハードウェアがあり、キャリブレートできる種類により価格帯が違います。高価なモニタにはモニタ自体にキャリブレート機能がついてるもののあります。
• カラーマッチング→別々な機器で色を合わせること言います。例えばモニタとプリンターの色味を合わせる場合などです。

カラーマッチング　左記リンクにカラーマッチングの説明があります。
よくわかるカラーマネージメント　左記リンクにカラーマネジメントを始めとした、モニタの色について詳しく解説しています。EIZOは国産モニタ開発の老舗で色環境についても考えられているメーカーとして人気があります。

OS、ブラウザの色表現

OSやブラウザによっても表現できる色が違います。

• 色を表現できるOSはMacで、ColorSyncと呼ばれるOSレベルでの色を合わせる機能が搭載されています。WindowsはVistaからある程度の色表現が可能となりました。
• ブラウザでは、IEは色表現できません。Firefox、Safariでは色味を合わせて表示できるようになっています。
• モニタのプロパティで設定できる色のチャンネルはRGB各8bitの24bitで、16,777,216色が発色できるようになっています。32bitカラーは残り8bitを使用していません。
• 新しいPhotoshopでは1チャンネル16bitモードで扱うことができるようになりました。細かい調整が可能なため、加工時には重宝しますが、出力時には8bitにしなければなりません。

液晶ディスプレイとカラーマネージメント 編　左記リンクはカラーマネジメントを中心とした、ブラウザ間の色環境について説明しています。
miyahan.comは液晶モニタのハード面から色についてとても詳しく解説されています。非常に参考になるサイトです。

Web制作時のTIPS

上記の話を踏まえたおまけTIPSです。

• モニタサイズは17インチ～19インチの画面解像度は1024px×768pxのXGA（アスペクト比4:3）をベースにすると良いです。
• Webサイトの横幅の最大は大手企業のサイト幅と各ブラウザの領域を考慮し、950px前後を目安とすると作りやすいです。
  ※だからといってクライアントの意向を無視したサイトサイズはナンセンスです。
• 水平線区切りのデザインで見られるように、大きいモニタで見るユーザーを考え、左右に繰り返し画像を埋めるなどのテクニックがあります。
• メインコンテンツの1行文字数は40文字以内を基準とする動きがあります。
• 一般家庭のPCの約5割は文字サイズを中以上で使用しています。ここからブラウザの文字は可変単位を使うことが必須と言えます。
• 制作ブラウザは最近のブラウザシェアやCSSの適応度、色味などの条件を考慮して、Firefoxを中心に他ブラウザでチェックすると良いでしょう。

w3counter　左記リンクはモニタやブラウザの世界シェアについての情報が月ごとに掲載されています。Web制作に携わる人には必須と呼べるサイトです。
Market Share Home　同様にコチラもシェア別結果を掲載しているサイトです。
カラーマネジメント講座　第1回　カラーマネジメントに関する解説を動画で行っています。かなり分かりやすいと思います。