Webデザインで見落としがちな点

Webデザインで見落としがちな点

Webデザインを行う際、デザイナーが見落としがちな点がいくつかあります。
一つ目は、「いろいろな画面サイズがある」。
紙媒体とWebの最大の違いは、画面サイズが複数あることです。
WebデザインはPC版とSP版の両方を作るのが基本ですが、PCに限定しても16対9のワイド型、4対3のスクエア型など、いろいろなサイズがあります。
例えば、キービジュアルの背景に画像を使うとして、スクエア型の画面では綺麗に表示されていても、ワイド型だと画像が見切れてしまうおそれがあるのです。

二つ目は、「Retinaディスプレイに留意する」。
Retinaディスプレイとは、画像をより美しく表示できるディスプレイのことです。
1pxを2px×2pxで表示することにより、細かな表示が可能になっています。
しかし、100px×100pxのイラストを表示させようとした場合、そのまま100px×100pxの画像を使うと粗い表示になってしまうので、倍の大きさの200px×200pxの画像を用意しなければなりません。

三つ目は、「ロゴなどはSVGで書き出す」。
SVGとは、いわゆるベクターデータの画像です。
一言で言うと、プログラムで描かれたイラストのような物です。
pngやjpgの場合、元のサイズより大きくすると画像が粗くなってしまいますが、SVGであればどれだけ大きくしてもキレイに表示させることが可能なのです。
ただし、グラデーションを用いた画像などだとファイルの容量が多くなるので、ページの表示速度に影響が出るおそれがあります。

四つ目は、「デバイスによってフォントは違う」。
Webデザインでは、基本的にあまり多くのフォントは使いません。
MacとWindowsでもデフォルトで入っているフォントは差異がありますし、iPhoneとAndroidでも使えるフォントは異なっているからです。
昨今は、どのデバイスでも同じ見た目にできるWebフォントという物もありますが、これも使いすぎると表示速度に影響が出るので、多用は禁物です。

コメントは受け付けていません。