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

画像をぼかして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倍！」と連呼しよう。新しい解像度のモニターが出るたびに新種のレティーナンも出現するため、歴戦の猛者もゆめゆめ油断なさらぬように。

• #デザイン
• #デジタルコミュニケーション
• #働き方