A.C.O.のカルチャーとノウハウを伝えるメディア

気に入ったらいいね!してね

A.C.O.のカルチャーとノウハウを伝えるメディア

高解像度モニターで画像をぼかすモンスター「レティーナン」が現れた!

WEB MONSTERS

高解像度モニターで画像をぼかすモンスター「レティーナン」が現れた!
IKENO

IKENO

IKENO

IKENO

 

画像をぼかしてRatina対応を迫ってくる 「レティーナン」

日々忙殺されるweb制作者の間で存在が囁かれる「webモンスター」を皆様はご存知だろうか。懸命に働く労働者に突如として襲いかかる者もいれば、そっと手を差し伸べてくれるありがたいヤツもいるといわれている。「webモンスター」ではそんなモンスターたちの攻略方法を考えるぞ。

レティーナン

「レティーナン」

ぼかしレベル:★★★★★★★★

Ratinaディスプレイなど高解像度モニターで表示した時に画像がぼやけて見えることがあるが、実は裏で手を引いているのがこの「レティーナン」だ。せっかく制作したサイトがぼけて見えた時の制作者への精神的・工数的ダメージは大きいだろう。ぼけて見えるのは自分の目が疲れているせいだと思っていたらレティーナンのせいだった。。という経験は皆覚えがあるのではないだろうか?目を細めてサイトを見つめている仲間がいたらレティーナンが出現しているのかもしれない。古いサイトほどレティーナンの出現率は上がるので注意が必要だ。

おすすめ攻略方法

「2倍!2倍!」
対応するためには2倍サイズの高解像度のデータが必要だぞ(100 x 100pxで表示させたいなら200 x 200pxの画像を用意)。その上でHTMLに本来表示させたい幅(width)と高さ(height)を指定してあげることでぼやけて見えた画像もはっきり見えるはず。他にも対応方法はさまざまあるがRetinaディスプレイの時のみ適したサイズの画像を表示させるJavaScriptを使う方法もある。画像が大きくなるとサイトの読み込み速度に影響を与えるため画像圧縮するなどデータの軽量化も必須だ。

おすすめ武器

「waifu2x-multi」
人工知能を活用して画像を高品質に拡大できるサービス「waifu2x-multi」。 複数の画像もまとめて処理できるぞ。

waifu2x-multi

「ブルーライト 眼鏡」
長時間画面を見つめているとどうしても目が疲れてきてしまう。そんな時は疲れの要因になると噂されているブルーライトをカットできる眼鏡を装備しよう。しかし、デザイナーは色が変わって見えてしまうため注意が必要だぞ。

Amazon「ブルーライト 眼鏡」

経験値

レティーナンを倒し続けることでRatina対応と読み込み速度のバランス対応が上手くなるぞ。うっかりレティーナン対策を忘れてしまっている仲間がいたら、笑顔で肩を叩いて「2倍!2倍!」と連呼しよう。新しい解像度のモニターが出るたびに新種のレティーナンも出現するため、歴戦の猛者もゆめゆめ油断なさらぬように。

攻略者の声

web Designer 増田 優子の場合

Ratina対応がなんぼのもんじゃい

Retina対応はいつも抱える悩みです。対処方法は色々あるけれど、私はちまちま電卓をたたき、確認時には目を酷使することでレティーナンを撃退していますね。今では、ぼやけた画像を見つけると直したくなって震えがとまらなくなりますwww

  • masuda

    増田優子 | YUKO MASUDA

    日々レティーナンと戦うデザイン担当。新しいiPhoneが出るたびに解像度に(((((((( ;゚Д゚)))))))ガクガクブルブルしています。

WRITER

ikeno

池野 将司

MASASHI IKENO
WEB ANALYST / WEB DESIGNER

武蔵野美術大学デザイン情報学科卒業。デザイン制作会社にて企業サイトや紙媒体のデザインを経て、現在に至る。アクセス解析、デザイン担当。グロース・マネジメント部所属。

IKENO'S POSTS

illustration 池野将司

A.C.O. JOURNAL by A.C.O. Inc.

A.C.O. のカルチャーとノウハウを伝えるオウンドメディア

A.C.O. Journal

気に入ったら
いいねしてね!

Facebook で A.C.O. の最新情報を配信中です!

A.C.O. パートナーカモン!

BACK TO HOME