どんなアプリでも背景があると思います。もちろん単色でもいいのですが、背景のグラフィックを少し工夫するだけでデザイン全体の質感が上がります。iOSの場合は、Phoneでは画面のサイズが2種類、Padでも2種類しかないので、背景にグラフィックを使ったとしても最大で4種類の解像度を用意すればいいだけです。Androidの場合は電話だけでも最低3種類は必要です。例えば下は今夏(2013年)の最新モデルでの解像度です。フルHD、HD、QHD(クオーターHD)の3種類の端末があります。

density_models

背景に写真などのグラフィックを使いたい場合、一番単純な方法はこれら解像度毎の背景グラフィックを用意する方法です。もしくは、縦横比が同じ(16:9)であれば、最大サイズ、この場合はフルHDだけ用意して、他のそれより小さな解像度の場合は縮小する、ということもできます。そうすればリソースの数を少なくすることができますが、表示するたびに縮小するとややパフォーマンスに影響があるかもしれません。

background_001

同じ絵を表示しなくてもいい場合は、サイズに合わせて絵をクロップ(トリミング)することもできます。この場合、どの部分をクロップするかはコードで指定します。下の例は天地左右のセンターに配置して、はみ出した部分をクロップする設定の場合です。

background_002

それでも、Nexus 10のような非常に大きな解像度の端末(2,560x1,600ピクセル)では1枚の背景が1Mを超えてしまいます。その場合は小さなグラフィックを用意してそれをタイリングすることも可能です。よくWEBデザインで使われる手法ですね。こうすることで少ないリソースでどの解像度でも背景にグラフィックを置くことができます。タイリングはWEBとは違って上下、左右の指定はできません。オプションとしては反転してタイリングするmirrorと、オリジナルの境界を越えて描画された場合に端の1ピクセルの色をタイリングするclampがあります。このオプションを使えばiTuneでのアルバム内曲名表示のように、アルバムの色によって背景色を変えるようなことも可能です。

background_003

Androidの場合、背景グラフィックは解像度毎に用意する必要があると思われがちですが、上のようなオプションを使って工夫することでリソースを最小限にしつつ、デザインの質感を向上することができますので、単純な単色だけでなく可能性を探ってみてはどうでしょうか。

Tags: