アプリにはテキストと色しか含めることができませんが、ロゴやイラストなどの視覚要素を追加することをおすすめします。Android には、アプリにグラフィックを追加するための特におすすめの方法があります。また、グラフィック効果を作成したり、モーションを追加したりするためのさまざまなライブラリが用意されています。
Android アセットはドローアブルと呼ばれます。ドローアブルは、画面に描画されるリソースの一種です。これには、ビットマップ、シェイプ、ベクターが含まれますが、これらに限定されません。
画像やグラフィックを作成する際は、次の点に注意してください。
- アセットに不変のテキストを含めないでください。
- 可能な限り、最初にベクター形式を使用します。
- 解決バケットのアセットを提供します。
- 背景画像とテキストの間には十分なスクリムを入れます。
- Android では、グラデーション、色付け、ぼかしなど、さまざまな画像効果を実現できますが、その一部はパフォーマンス コストが高くなります。
- アニメーション ベクター型ドローアブルは、小さな UI アニメーション向けのスケーラブルな形式を提供します。
Android 向けのアセットをエクスポートする方法
- アセット名は小文字にします。
- SVG 形式でエクスポートするシンプルなアセットを設定します。
- 写真などの複雑な画像を WebP、PNG、JPG 形式でエクスポートできます。
- 次の表に示すように、適切な解像度のスケーリングを設定します。
| 画面サイズ | 規模 |
|---|---|
mdpi |
×1 |
hdpi |
1.5 倍 |
xhdpi |
×2 |
xxhdpi |
×3 |
xxxhdpi |
×4 |
必要に応じて、Android Studio を使用して SVG をベクター型ドローアブル（VD）に変換できます。次の画像のように、引き継ぎの解像度に対応するディレクトリにアセットを整理します。たとえば、フォルダ名に画面サイズを含めます。
アセットタイプ
Android では、次のアセットタイプがサポートされています。
ベクター
ベクター グラフィックは可逆形式です。つまり、拡大縮小しても視覚情報が失われません。ベクトルは、画像を作成するために塗りつぶされた数学的ポイントで構成されています。
ベクター形式
Android では、ベクター画像形式として SVG とベクター型ドローアブルがサポートされています。
ベクター型ドローアブルは SVG によく似ていますが、XML ベースです。また、グラデーションなどのさまざまな属性もサポートしています。サポートされている機能の詳細については、VectorDrawable をご覧ください。Vector Asset Studio を使用して SVG をベクター型ドローアブルに変換できます。
ユースケース
アイコンはサイズが小さいため、ベクター形式を使用して作成することをおすすめします。アイコンにモーションを追加するには、アニメーション化されたベクター型ドローアブルを使用します。
- イラストは、ユーザーを誘導したり、コンセプトを説明したり、アイデアを表現したりするのに役立つグラフィックスです。通常はブランドのスタイルを表します。
- 全体のデザインや主要な情報の説明に使用されるヒーロー イラストは、他のコンテンツの中でも特に強調されます。
- スポットのイラストは小さく、通常はインラインで、周囲のコンテンツをサポートします。
ラスター
非可逆グラフィック（圧縮やスケーリングによって操作されると細部が失われてしまうグラフィック）は、画像を構成するピクセルで構成されます。ラスター グラフィックは、写真や複雑なグラデーションなどの詳細な画像によく使用されます。拡大縮小すると細部が失われるため、これらの画像の複数の解像度をエクスポートします。
ラスター形式
Android でサポートされているラスター画像形式は、PNG、GIF、JPG、WebP です。
ユースケース
ユースケースとしては、幅広いカラーパレットとグラデーションにつながるさまざまなテクスチャを含む画像や、過度に複雑なベジェポイントのセットを持つ画像などがあります。ユースケースには、商品の写真、場所の詳細など、非常に詳細な写真アセットを含めることもできます。
サイズ調整
アセットを作成する際は、次の点に留意してください。
解決バケット
アプリでは、画面密度の範囲またはバケットに基づいてビットマップ グラフィックを提供する必要があります。オペレーティング システムは、これらのバケットを使用して、問題のデバイスに適切なグラフィックを自動的に表示します。各バケットにアセットを提供することで、すべてのデバイスで高忠実度のグラフィックを表示できるようにします。
パディング
アイコンや同様の小さいアセットには、アセットに十分なタップ ターゲット スペースを確保し、一貫したサイズを確保するために、固有の（組み込み）パディングを含める必要があります。
ファイル名
Android アセットは小文字で、解像度のサフィックスは含まれません。
ファイルやプロジェクトを整理できるように、命名規則と構造に一貫性を持たせます。たとえば、アイコンに接頭辞「ic_...」を付けると、プロジェクト内のすべてのアイコンを整理でき、開発中にアイコンをすばやく識別できます。
その他のアプリアセット
アプリアイコン
ランチャー アイコンはホーム画面にあります。システム UI には、モノクロ通知、ステータスバー、ウィジェットなどのモノクロ アイコンがあります。
アプリアイコンを、アダプティブ アイコンの場合はベクター型ドローアブル、レガシー アイコンの場合は PNG としてフォーマットします。アプリアイコンの作成とプレビューについて詳しくは、アプリアイコンの設計とプレビューをご覧ください。
スプラッシュ画面
Android 12 以降では、アプリの起動時にアプリアイコンを表示するアニメーション化されたスプラッシュ画面を表示できます。
位置
画像の拡大縮小と画面上での位置に注目してください。画像のスケーリングを設定するために、Fit、Crop、FillHeight、FillWidth、FillBounds、Inside、None を使用できます。
画像を特定の形にクリップして、追加の効果を作成することもできます。
レスポンシブな切り抜き
画像をレスポンシブに表示するには、さまざまなブレークポイント範囲で画像を切り抜く方法を定義します。異なるブレークポイントで、切り抜きにより次の処理を実行できます。
- 1 つの固定比率を維持します。
- さまざまなアスペクト比に適応します。
- 画像の高さを一定に保ちます。
比率を 1 つに維持する
画像サイズ設定では、ブレークポイントの範囲全体で 1 つの固定比率を保持できます。
異なるアスペクト比に適応する
ブレークポイントの範囲に合わせて、画像の比率を変えることができます。たとえば、図 9 では、ブレークポイント間の画像比率が 1:1 から 16:9 に変化しています。
画像の高さを固定
画像サイズは、ブレークポイントの範囲内およびブレークポイントの範囲内で、固定された高さと流動的な幅を維持できます。画像の高さは固定されますが、ブレークポイント間の幅は可変です。
エフェクト
Android には、さまざまな画像効果が組み込まれています。一般的な影響は次のとおりです。
勾配
Compose で、ブラシを使用して画面上に何かを描画します。さまざまなブラシを使用して、さまざまな色やグラデーションで図形を描画できます。組み込みのグラデーション ブラシを使用して、さまざまなグラデーション効果を実現できます。これらのブラシを使用すると、グラデーションの元となる色のリストを指定できます。
グラデーション ブラシでは、カラーストップとタイリングを追加して、より高度なグラデーションを行うことができます。ただし、ストップが発生する色とパーセンテージのリストを指定する必要があります。コンテナやシェイプを使用して、グラデーション、単色の塗りつぶし、画像を切り抜きます。
ぼかし
画像にぼかし効果を適用するには、Modifier.blur() メソッドを使用してぼかし率を指定します。ぼかしはパフォーマンスに影響する可能性があり、Android 12 以降を搭載したデバイスでのみ使用できます。そのため、慎重に使用してください。詳細については、画像コンポーザブルをぼかすをご覧ください。
ブレンドモード
Android では、デザイン ソフトウェアと同様のブール演算やブレンドモード（ユニオンや乗算など）を使用して、画像を変更できます。詳細については、BlendMode をご覧ください。
色合い
ブレンドモードと塗りつぶしを使用して、アセットの色合いを調整します。これにより、単一のアセットに異なる色を適用できるため、生成されるアセットの量を減らすことができます。
モーション
グラフィックをプログラマティックにアニメーション化して、モーション ファイルをアップロードする代わりにモーション グラフィックを作成できます。これにより、柔軟性が高まり、アセット リソースが小さくなります。
アニメーション化されたベクター型ドローアブルを使用すると、小さな UI アニメーションを作成できます。それ以外の場合は、Compose でキーフレームを使用したアニメーション化に関する記事をご覧ください。画像効果の詳細については、画像をカスタマイズするをご覧ください。