お使いのブラウザは、バージョンが古すぎます。

このサイトは、Internet Explore8・Internet Explore9には対応しておりません。
恐れ入りますが、お使いのブラウザをバージョンアップしていただきますよう宜しくお願いいたします。

アプリの画像素材は、ベクター&ディスプレイ等倍サイズで作成→拡大した方がラク

どうもこんにちは、JBです。

iOSの端末諸々 & Androidの多解像度対応などをしていると、作成する画像の数がどうしても多くなりますよね!
今までは「大は小を兼ねる」的に考えて、大きいサイズのものを作って縮小していたのですが、タイトル通りの流れで作ったら早いんじゃないかということに気付きました。

多解像度対応は大変

端末の解像度も、2倍やら3倍やらxxxdpiやらと、もうカオス状態になってきました。
「大きいのを作ってから縮小したらいいやー」と、リサイズや実表示のことをあまり考えずにUI素材などを作ると、「何だかにじんで汚い…」という事態になりかねません。特に細いラインアイコンは汚くなりがちです。そしてにじみを調整する日々。自己嫌悪に陥ります。

サイズ縮小

等倍サイズを拡大すればにじまない

にじまないようにディスプレイ等倍サイズ・@2x・@3xの画像を作るとなると、公約数だか公倍数だかを考えて位置や形を考えなければなりません。これが結構厄介なのですが、整数で倍にするなら、一番小さいヤツを作って拡大すればにじまないじゃないか!面倒な計算も必要ないじゃないか!
サイズ拡大
ラスター画像的な素材には適応できませんが、アイコンやフラットデザインのパーツならば、ベクターで作っている方も多いのではないでしょうか?
ベクターデータなら画像が荒れる心配がないので、拡大し放題です。

ちなみにIllustratorで作っている場合、そのままだとにじみが分かりません。
メニューバーの表示 > ピクセルプレビューをオンにして、ピクセル表示されるようにしておきましょう!
ピクセルプレビュー

Androidは整数倍じゃない…

Androidの場合は、ldpi〜xxxdpiまで、整数倍だけではカバーできません。開発側と必要なdpiリソースをあらかじめすり合わせて、どうしたら作業が少なくて済むかを考えます。大体ldpi(120)とmdpi(160)を倍にしていけば、大抵のdpiに対応できますかね(tvdpiはできませんが…)。

解像度の種類 dpi Density(px/dpi)
ldpi 120dpi 0.75px/dpi
mdpi 160dpi 1px/dpi
tvdpi 233dpi 1.33px/dpi
hdpi 240dpi 1.5px/dpi
xhdpi 320dpi 2px/dpi
xxdpi 480dpi 3px/dpi
xxxdpi 640dpi 4px/dpi
Androidの解像度一覧

mdpiは1dp=1pxなので、これを基準に作るのが一番やりやすいです。mdpiを0.75倍してにじみなどを調整すれば、ldpiができます(ldpiの端末なんてほとんどないんですが…)。
「大きい解像度の画像だけくれればいいよ!」と言われることも多いかもしれませんが、その場合は思う存分大きく作れば良いと思います。ただ、一応小さくしたときの見え方も考えておいた方がいいですかね。

iOSの素材をPDFにしやすい

Xcode6から、画像素材としてPDFが使えるようになりました。

そんなわけで、私の元に開発の方から「フラットな素材はPDFで頼む」とのお達しが。Xcode6では、PDFのベクターデータを拡大してラスター変換出力してくれるので、@2xや@3xの画像を作る必要がありません(むしろジャギるらしい)。これならディスプレイ等倍のモノだけ作ればOKだし、見え方の確認もしっかりできます。

これでリソースの数が大幅に減らせる…!というわけですが、容量が減るとは限りません。単純な図形なら、pngよりもPDFの方が重いということもあります。これは「すべてのリソース(等倍と@2X、@3X)をpngファイルで書き出した場合の総容量」と「等倍サイズのPDFの総容量」などを比較して、アプリの容量と相談しながら選んだらいいかと思います。

まとめ

いかがだったでしょうか?

どんどん作るものが増えているので、できる限り手間を省いて作業をしたいところですよね!開発中に対応端末や解像度が増えそうな場合、最初のうちから対応しやすいように考えて作っておくと、後々の作業と後悔がグンと減ると思いますよ!
私はついこの間、死ぬほど後悔したばかりです。これからは気をつけます…。

それではー!

コメントをどうぞ

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


お気軽にお問い合わせください。

日本VTR実験室では、お仕事のご依頼、ブログ・コラムのご感想などを受け付けております。
アプリ開発・コンテンツ制作でお困りでしたら、お気軽にご相談ください。
ご連絡お待ちしております。

お問い合わせはこちらから

03-3541-1230

info@nvtrlab.jp

電話受付対応時間:平日AM9:30〜PM6:00