レスポンシブデザインやリキッドデザインでオブジェクトがぼやけて表示されているとなんだが残念な気分になります。そんな僕がレスポンシブデザインやリキッドデザインで特に気をつけているポイントをご紹介します。

可変するオブジェクトと固定するオブジェクトの見極め

オブジェクトがぼやけてしまう要因は大きく分けて次の二つです。

• 表示領域よりもオブジェクトが小さい
• ピクセルがずれている

表示領域よりも画像などのオブジェクトが小さい

表示領域よりも小さい画像オブジェクトを綺麗に見せるための解決作は理屈的には簡単です。大きいオブジェクトに差し替えればいいだけです。 とは言え、差し替える大きな画像が無い場合も多く存在するのでそんな簡単な問ではありません。

選択肢としては

• 現状維持
• 要素の差し替え
• レイアウト変更

になります。クライアントの要望によってはデザイナーの腕だけでは解決できないポイントでもあります。

ピクエルがずれて表示がぼやける

ピクセルがずれて表示がぼやける問題は単にオブジェクトを大きくすれば解決するというほど単純な問題ではありません。Retinaディスプレイに対応するために大きめに画像を制作したが比率が合わなくて、ぼやけてしまうなどもよくある話です。

パスで制作されたオブジェクトと写真の扱い

パスで制作されたオブジェクトと写真の取り扱いは厳密に分けておいた方が無難です。その中でも利用頻度の高い「フォント」と「アイコン」は特に気をつけておきたいポイントです。

例えば、画像フォントを等倍のサイズのまま使用するとRetinaに対応していないディスプレイでは綺麗に表示されますが、Retinaに対応しているディスプレイでは倍の大きさでオブジェクトを使用する必要があります。

パスで制作されたオブジェクト

レスポンシブでよくある問題で倍比率にならない画像

• Retinaのスマホでwidth300pxの画像
• RetinaじゃないPCでwidth250pxの画像

この場合の正解は500pxの画像を用意する、もしくは別々の画像を用意するです。500pxで画像を制作しておくとPCでもRetinaディスプレイのスマホでも綺麗に見えます。

これがPCのwidth180pxスマホのwidth300pxなら完全に別画像で作った方が無難です360pxの画像を300pxで表示してもあまりRetinaでは綺麗に表示されません。かといって600pxの画像を用意してもPCでの表示がぼやけてしまいます。

別々の画像を用意すればワンソースと言うメリットをうまく活かせていない気もしますがjsで切り替えて別の画像に差し替えるのは許容範囲でしょう。

写真の場合

上記例の写真版の場合はRetinaサイズで制作しておけば通常のPCでも綺麗に表示されます。厳密には綺麗に表示されていないのですが、綺麗に見えるのでそこは厳密性を求めなくても大丈夫なポイントです。

パスで制作されたオブジェクトと写真とでは扱いが異なるのです。

あくまでも主役は情報

デザイン的に気をつけているポイントをご紹介しましたがあくまでもWebサイトの主役は情報ですので、合わせてモバイルファーストに即した情報配置にすることにも留意したいですね。