1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Android開発30日間マスターシリーズ - Day 6:リソース管理とデザイン - drawable、values、色・文字・画像の適切な管理方法

Last updated at Posted at 2025-09-08

1. なぜリソース管理が重要なのか?

Androidアプリ開発では、UIのデザイン要素(画像、色、文字列など)をコード(Kotlinファイル)から分離して、リソースファイルとして管理することが強く推奨されています。

リソース管理のメリット

  • メンテナンス性の向上: デザインの変更があった場合、XMLファイルやリソースファイルを編集するだけで済み、コード全体を書き換える必要がありません
  • 多言語対応(ローカライゼーション): 同じレイアウトを使いながら、文字列リソースを切り替えるだけで、アプリを簡単に多言語化できます
  • 多様なデバイス対応: 画面サイズや解像度、ダークモードなど、デバイスの特性に合わせて最適なリソースを自動的に読み込ませることができます
  • 再利用性の向上: 一度定義したリソースは、アプリ内のどこからでも参照できるため、同じ値を何度も記述する必要がありません

Android Studioのプロジェクトビューでは、app/src/main/res/ディレクトリ以下に、リソースタイプごとにフォルダが分かれています。

2. 主要なリソースフォルダの詳細

drawable フォルダ

画像ファイルやアイコン、図形などの視覚的要素を格納します。

ベクターアセット(推奨)

XMLで記述されたベクター形式のグラフィック。解像度に依存しないため、あらゆる画面サイズで鮮明に表示されます。

<!-- res/drawable/ic_favorite.xml -->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">
    <path
        android:fillColor="#FF000000"
        android:pathData="M12,21.35l-1.45,-1.32C5.4,15.36 2,12.28 2,8.5 2,5.42 4.42,3 7.5,3c1.74,0 3.41,0.81 4.5,2.09C13.09,3.81 14.76,3 16.5,3 19.58,3 22,5.42 22,8.5c0,3.78 -3.4,6.86 -8.55,11.54L12,21.35z"/>
</vector>

ビットマップ画像

.png.jpg.webp形式の画像ファイル。画面密度別に複数のバージョンを用意することを推奨します。

res/
  drawable-mdpi/    # 1x (基準)
  drawable-hdpi/    # 1.5x
  drawable-xhdpi/   # 2x
  drawable-xxhdpi/  # 3x
  drawable-xxxhdpi/ # 4x

Shape Drawable

XMLで定義する図形。ボタンの背景や区切り線などに活用できます。

<!-- res/drawable/rounded_button.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="8dp"/>
    <solid android:color="@color/primary_color"/>
    <stroke 
        android:width="2dp" 
        android:color="@color/border_color"/>
</shape>

values フォルダ

色、文字列、寸法、スタイルなど、UIデザインで共通して使用する値を一元管理します。

colors.xml - 色の定義

<resources>
    <!-- Primary brand colors -->
    <color name="primary">#FF6200EE</color>
    <color name="primary_variant">#FF3700B3</color>
    <color name="secondary">#FF03DAC6</color>
    
    <!-- Text colors -->
    <color name="text_primary">#DE000000</color>
    <color name="text_secondary">#99000000</color>
    
    <!-- Background colors -->
    <color name="background">#FFFFFF</color>
    <color name="surface">#F5F5F5</color>
    <color name="error">#B00020</color>
</resources>

活用のコツ:

  • アルファ値を含む色定義: #AARRGGBB形式(例:#80FF0000は50%透明の赤)
  • Material Designのカラーパレットを参考にする
  • ダークモード対応のため、values-night/colors.xmlも用意する

strings.xml - 文字列の定義

<resources>
    <string name="app_name">My Application</string>
    <string name="welcome_message">ようこそ、%1$sさん!</string>
    <string name="item_count">%1$d個のアイテム</string>
    
    <!-- 複数形対応 -->
    <plurals name="numberOfItems">
        <item quantity="one">%d item</item>
        <item quantity="other">%d items</item>
    </plurals>
</resources>

多言語対応の実装:

res/
  values/strings.xml         # デフォルト(英語)
  values-ja/strings.xml      # 日本語
  values-ko/strings.xml      # 韓国語
  values-zh-rCN/strings.xml  # 中国語(簡体字)

dimens.xml - 寸法の定義

<resources>
    <!-- Margins -->
    <dimen name="margin_tiny">4dp</dimen>
    <dimen name="margin_small">8dp</dimen>
    <dimen name="margin_medium">16dp</dimen>
    <dimen name="margin_large">24dp</dimen>
    
    <!-- Text sizes -->
    <dimen name="text_size_small">12sp</dimen>
    <dimen name="text_size_medium">16sp</dimen>
    <dimen name="text_size_large">20sp</dimen>
    <dimen name="text_size_title">24sp</dimen>
    
    <!-- Component sizes -->
    <dimen name="button_height">48dp</dimen>
    <dimen name="icon_size">24dp</dimen>
</resources>

単位の使い分け:

  • dp (density-independent pixels): レイアウトの寸法、マージン、パディング
  • sp (scale-independent pixels): テキストサイズ(ユーザーのフォント設定を反映)
  • px: ピクセル単位(非推奨、特殊な場合のみ)

styles.xml - スタイルの定義

<resources>
    <!-- ボタンのスタイル -->
    <style name="AppButton" parent="Widget.MaterialComponents.Button">
        <item name="android:textSize">@dimen/text_size_medium</item>
        <item name="android:textColor">@color/white</item>
        <item name="backgroundTint">@color/primary</item>
        <item name="cornerRadius">8dp</item>
    </style>
    
    <!-- テキストのスタイル -->
    <style name="TextAppearance.App.Title">
        <item name="android:textSize">@dimen/text_size_title</item>
        <item name="android:textColor">@color/text_primary</item>
        <item name="android:fontFamily">@font/roboto_bold</item>
    </style>
</resources>

3. リソースの参照方法

XMLレイアウトファイルから

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/welcome_message"
    android:textColor="@color/text_primary"
    android:textSize="@dimen/text_size_medium"
    android:drawableStart="@drawable/ic_favorite"
    style="@style/TextAppearance.App.Title"/>

Kotlinコードから

// 文字列の取得
val welcomeText = getString(R.string.welcome_message, userName)

// 色の取得
val primaryColor = ContextCompat.getColor(this, R.color.primary)

// 寸法の取得
val margin = resources.getDimensionPixelSize(R.dimen.margin_medium)

// Drawableの取得
val icon = ContextCompat.getDrawable(this, R.drawable.ic_favorite)

// 複数形の処理
val itemCountText = resources.getQuantityString(
    R.plurals.numberOfItems, 
    count, 
    count
)

4. ベストプラクティス

命名規則

  • colors.xml: 用途_説明 (例: text_primary, background_dark)
  • strings.xml: 画面_用途_説明 (例: login_button_submit, home_title_welcome)
  • dimens.xml: 種類_サイズ (例: margin_small, text_size_large)
  • drawable: 種類_説明_状態 (例: ic_favorite_filled, bg_button_pressed)

リソース修飾子の活用

res/
  layout/           # デフォルトレイアウト
  layout-land/      # 横向き用
  layout-sw600dp/   # タブレット用(最小幅600dp)
  
  values/           # デフォルト
  values-night/     # ダークモード用
  values-v31/       # API 31以上用

パフォーマンスの考慮

  • ベクターアセットを優先的に使用(ファイルサイズが小さく、スケーラブル)
  • 大きな画像は適切に圧縮(WebP形式を検討)
  • 使用しないリソースは削除(Android Studioの「Remove Unused Resources」機能を活用)

5. 実践例:テーマカラーの一元管理

<!-- res/values/colors.xml -->
<resources>
    <!-- Base colors -->
    <color name="seed_color">#FF6200EE</color>
    
    <!-- Generated shades -->
    <color name="primary_100">#E1BEE7</color>
    <color name="primary_200">#CE93D8</color>
    <color name="primary_500">@color/seed_color</color>
    <color name="primary_700">#7B1FA2</color>
    <color name="primary_900">#4A148C</color>
</resources>

<!-- res/values-night/colors.xml -->
<resources>
    <!-- Dark theme overrides -->
    <color name="primary_500">#BB86FC</color>
    <color name="background">#121212</color>
    <color name="surface">#1E1E1E</color>
</resources>

まとめ

今回は、Androidアプリ開発におけるリソース管理の重要性と、実践的な管理方法について詳しく学びました。

重要なポイント:

  • リソースファイルを使用することで、コードとデザインを分離し、保守性と拡張性を向上させる
  • drawableフォルダには視覚的要素を、valuesフォルダには共通値を適切に整理する
  • 命名規則を統一し、リソース修飾子を活用して多様なデバイスに対応する
  • ベクターアセットやスタイルを活用して、効率的で一貫性のあるデザインを実現する

これらのリソース管理の基礎をしっかりと理解することで、スケーラブルで保守しやすいAndroidアプリを開発できるようになります。次回は、今回学んだリソースを活用して、実際に魅力的なUIを構築する方法について学んでいきましょう。

参考リンク

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?