Retinaディスプレイの画像がぼやける原因を考えてみた – ゾウデザ

デザイナーハック

AppleのiPhone4以降から搭載されだしたRetinaディスプレイ。

通常のディスプレイと何が違うの?そんなお悩みを持たれている方も多いと思います。

 

そこで今回は通常ディスプレイとRetinaディスプレイの違いについてご紹介させて頂きます。

スポンサードリンク

 

解像度と通常モニタについて

まず解像度のお話になるんですが、フォトショップを使用されている方だとピンとくると思いますが、画像の解像度を設定する際の単位で○○dpiという設定で指定していると思います。

 

まずdpiとは?

dpiは1インチ(2.54センチメートル)内に含まれるピクセル数を表す単位です。

 

例えば72dpiであれば2.54センチメートル内に72ピクセル含まれているという状態です。

通常のモニタであれば72dpiで設定されています。

人間の目で認識できる限界がこの72dpiと言われています。

 

 

Retinaディスプレイについて

続いてRetinaディスプレイについてですが、端末でいえばAppleのiPhone4以降で搭載されています。

 

スマホのサイトを作成する際に画像をなぜ2倍で作成しないといけなかったのか?

答えはこのRetinaに対応させる為です。

 

こちらの図を見て頂くと分かりやすいのですが

disp

iPhoneを例に説明すると、Retinaの解像度は通常ディスプレイのiPhoneの2倍です。

同じピクセル数の画像だとdpiが高くなるにつれて物理的な画像サイズは小さくなります。

 

モニタ上では同じサイズでも、表示される時に画像がぼやけてしまいます。

この為、スマホサイトを作成する際は、320pxの横幅の2倍の640pxでのデザインが求められています。

 

厳密に言えば、通常ディスプレイのスマホサイトでも解像度163dpiの320px幅で画像を作成するのがベストですが、72dpiとさほど視覚的に変わりがないのでスルーされている状況です。

 

ちなみにRetinaの色彩に関してですが通常モニタにくらべてコントラストが高く設定されていますので、写真補正をする際には注意が必要です。

 

 

まとめ

解像度の知識は意外に知ってる様でよく分からないという人が多いです。

 

Webデザインはその都度対応すれば大丈夫なのですが、ポスター等の紙で出力する制作物の場合は写真撮影の段階から十分考慮する必要があります。

 

ぼけぼけの画像のポスターなんてだれも見たくないですから。

 

知識として頭の片隅に置いておいて頂けたら幸いです。

Visited 1 times, 1 visit(s) today

コメント

タイトルとURLをコピーしました