2013.09.2 13:47

これからはRetinaを考慮して画像制作をするべき!?

カテゴリー:Web

タグ:

今更な話題ですが。

急に思い立ち、当サイトに表示されるrssとsnsのアイコンを新しく作成しました。しかし、iPhone5で確認したところ、画像がぼやけてしまい、みっともないことに。。

原因はRetinaディスプレイでした。最新のiPhoneや、Retina対応のMacBookやiPadだとディスプレイの解像度が高いので、普通に画像を表示するとぼやけてしまいます。

どうすれば解決できるかは既に他サイトで解説されています。

参考

BlogをRetina対応 – とりあえず、画像素材を4倍の解像度に

Retinaディスプレイ用にデザインするときの注意点と対策方法をまとめてみました

要は画像素材の幅×高さをそれぞれ2倍で作成して、imgタグのwidthとheightは通常のサイズで指定するということですね。上のサイトだと4倍とありますが、幅2倍×高さ2倍で4倍なのでしょうきっと。。

で、対応する必要性ですが、新規でサイトを制作するなら必須かなと個人的には思います。最近はApple社製の端末を持っている方多いですからね。。(自分も含め)

なので、新規にWebデザインを起こす時はサイズを大きめにしよう!幅960pxのサイトなら1920pxのサイズでデザインデータを作る!

一番の問題は、今回作ったアイコンはRetinaを考慮して作っていなかったので、画像ファイルを根本的に修正しなきゃいけないということ。。アイコンのパスデータとか残してなかったからいちからやり直しだー。

単純な画像だっただけまだマシでしょうか。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>