色とテーマを変えてみようは医療関係者向けだけの内容ですか。

医療分野の例が含まれる場合もありますが、医療関係者だけに限定した内容ではありません。生成AI、AI活用、DX、業務改善、プロトタイプ開発など、一般的なAI学習の事例として読める内容です。

AI初心者でも読めますか。

はい。AIをこれから学ぶ方、数学が苦手な方、仕事でAIを使いたい方にも読み進めやすいように、教材の章と節の流れに沿って整理しています。

サムネイル画像は必ず表示されますか。

はい。教材にcoverUrlが設定されている場合はその画像を表示し、未設定の場合は代替サムネイル画像を表示します。

Flutterアプリケーション開発概論のほかの章も読めますか。

はい。教材トップから章立てを確認でき、前後の節へもページ下部のナビゲーションから移動できます。

色とテーマを変えてみよう | 人生ゲームを作る。サイコロ処理・イベント分岐・プレイヤー管理・データ設計・アニメーション | Flutterアプリケーション開発概論・生成AIオンライン教材

項目	内容
教材名	Flutterアプリケーション開発概論
章	人生ゲームを作る。サイコロ処理・イベント分岐・プレイヤー管理・データ設計・アニメーション
節	色とテーマを変えてみよう
カテゴリ	Flutter / iOS / Android / MacOS / Windows / 基礎から学ぶ / 開発 / アプリ開発
学習内容	生成AI、AI活用、DX、業務改善を実践しながら理解するための教材です。

忙しい方はここだけ見て

この章で触る場所は、主にこの2つです。

AppColors
ThemeData

色を変えたいときは、まず AppColors を見ます。

class AppColors {
  static const Color red = Color(0xffe60012);
  static const Color white = Color(0xffffffff);
  static const Color heading = Color(0xff1b1b1b);
  static const Color text = Color(0xff3c3c3c);
}

例えば、赤色を青色に変えたい場合はここを変更します。

static const Color red = Color(0xff2563eb);

保存したら、アプリを再読み込みします。

大きく変わらない場合は、ホットリスタートします。

この章では、まず 色はAppColorsでまとめて管理している と分かればOKです。

この章でやること

この章では、人生ゲームアプリの色とテーマを見ていきます。

アプリの見た目は、主に次の2つで決まっています。

AppColors
ThemeData

AppColors は、アプリで使う色をまとめている場所です。

ThemeData は、アプリ全体の見た目を決める場所です。

今日のゴール

この章のゴールは、次の3つです。

1. AppColorsが色の置き場だと分かる
2. ThemeDataがアプリ全体の見た目設定だと分かる
3. 色を1か所変えるだけで画面の印象が変わると分かる

最初からデザインを完璧にする必要はありません。

まずは「赤を青に変える」くらいで十分です。

Step 1：AppColorsを探す

lib/main.dart を開きます。

次の名前を検索してください。

class AppColors

このようなコードがあります。

class AppColors {
  static const Color red = Color(0xffe60012);
  static const Color deepRed = Color(0xffcf0001);
  static const Color white = Color(0xffffffff);
  static const Color black = Color(0xff000000);
  static const Color gray = Color(0xffc8c8c8);
  static const Color gray100 = Color(0xfff8f7f6);
  static const Color gray300 = Color(0xffe6e6e6);
  static const Color gray500 = Color(0xffd9d9d9);
  static const Color heading = Color(0xff1b1b1b);
  static const Color text = Color(0xff3c3c3c);
  static const Color textSub = Color(0xff8c8c8c);
  static const Color gold = Color(0xff9d7c00);
  static const Color blue = Color(0xff00a5e6);
  static const Color orange = Color(0xfff58c14);
  static const Color green = Color(0xff28a745);
  static const Color purple = Color(0xff7e57c2);
}

ここが、アプリの色をまとめている場所です。

Step 2：AppColorsとは？

AppColors は、色のメモ帳のようなものです。

例えば、画面のいろいろな場所で赤色を使いたいとします。

毎回このように書くと大変です。

Color(0xffe60012)

そこで、先に名前をつけておきます。

static const Color red = Color(0xffe60012);

すると、別の場所でこう使えます。

AppColors.red

つまり、

AppColors.red = アプリで使う赤色

という意味です。

Step 3：色コードの見方

Flutterの色は、このように書きます。

Color(0xffe60012)

少し難しく見えますが、最初はこう考えてください。

0xff + 色コード

赤色の部分はここです。

e60012

例えば、青色ならこうです。

Color(0xff2563eb)

緑色ならこうです。

Color(0xff16a34a)

0xff は消さずに、その後ろの6文字を変えます。

Step 4：メインカラーを変えてみる

今回のアプリでは、赤がメインカラーです。

static const Color red = Color(0xffe60012);

この赤は、ボタンや現在地表示などに使われています。

試しに、青に変えてみます。

static const Color red = Color(0xff2563eb);

名前は red のままですが、色だけ青になります。

初心者のうちは、名前まで変えなくて大丈夫です。

名前を変えると、他のコードも直す必要がある
↓
最初は色コードだけ変える

この方が安全です。

Step 5：保存して確認する

変更したら保存します。

Macの場合です。

command + S

Windowsの場合です。

Ctrl + S

アプリが起動中なら、ターミナルで r を押します。

大きく反映されない場合は、R を押します。

青色に変わっていれば成功です。

Step 6：ThemeDataを探す

次に、アプリ全体のテーマ設定を見ます。

main.dart の上の方に、次のコードがあります。

theme: ThemeData(
  fontFamilyFallback: const <String>[
    'YakuHanJPs',
    'Roboto',
    'Hiragino Kaku Gothic ProN',
    'ヒラギノ角ゴ ProN W3',
    'Arial',
    'ncomJp',
    'sans-serif',
  ],
  colorScheme: ColorScheme.fromSeed(
    seedColor: AppColors.red,
    brightness: Brightness.light,
  ),
  scaffoldBackgroundColor: AppColors.white,
  useMaterial3: true,
),

ここが、アプリ全体のテーマです。

Step 7：ThemeDataとは？

ThemeData は、アプリ全体の見た目ルールです。

例えば、

メインカラー
背景色
文字の雰囲気
AppBarの見た目
Material 3を使うか

などを決めています。

今回のコードでは、特にここが大事です。

colorScheme: ColorScheme.fromSeed(
  seedColor: AppColors.red,
  brightness: Brightness.light,
),

seedColor は、アプリ全体の基準になる色です。

今は AppColors.red が使われています。

Step 8：背景色を確認する

背景色はここで決めています。

scaffoldBackgroundColor: AppColors.white,

これは、

画面全体の背景を白にする

という意味です。

例えば、少しグレーにしたい場合はこうします。

scaffoldBackgroundColor: AppColors.gray100,

ただし、最初は白のままでOKです。

白背景は見やすく、教材でも扱いやすいです。

Step 9：AppBarのテーマを見る

少し下に、この設定もあります。

appBarTheme: const AppBarTheme(
  backgroundColor: AppColors.white,
  surfaceTintColor: AppColors.white,
  elevation: 0,
  centerTitle: false,
),

これは、上部バーの見た目を決めています。

設定	意味
`backgroundColor`	AppBarの背景色
`surfaceTintColor`	Material 3の色かぶりを調整
`elevation`	影の強さ
`centerTitle`	タイトルを中央にするか

今の設定は、白背景で影なしです。

すっきりした画面にするための設定です。

Step 10：おすすめの色セット

色を変えると、アプリの雰囲気がかなり変わります。

まずは、メインカラーだけ変えてみましょう。

青系：学習アプリ・ビジネス向け

static const Color red = Color(0xff2563eb);
static const Color deepRed = Color(0xff1d4ed8);

緑系：お金・資産形成ゲーム向け

static const Color red = Color(0xff16a34a);
static const Color deepRed = Color(0xff15803d);

紫系：少しゲーム感を出したい方向け

static const Color red = Color(0xff7c3aed);
static const Color deepRed = Color(0xff6d28d9);

黒系：シンプルで大人っぽい方向け

static const Color red = Color(0xff111827);
static const Color deepRed = Color(0xff000000);

最初は、red と deepRed だけ変えれば十分です。

Step 11：文字色はあまり変えなくてOK

文字色は、ここで決めています。

static const Color heading = Color(0xff1b1b1b);
static const Color text = Color(0xff3c3c3c);
static const Color textSub = Color(0xff8c8c8c);

それぞれの役割はこうです。

色	役割
`heading`	見出しや大事な文字
`text`	通常の本文
`textSub`	補足や小さい文字

初心者のうちは、この3つは変えなくてOKです。

黒やグレー系の文字は、読みやすさに関わるためです。

Step 12：イベント色も確認する

イベントの種類ごとに、色が変わります。

例えば、収入イベントは緑、出費イベントは赤です。

Color _eventColor(EventCategory category, int cashChange) {
  switch (category) {
    case EventCategory.income:
      return AppColors.green;
    case EventCategory.expense:
      return AppColors.red;
    case EventCategory.work:
      return AppColors.blue;
    case EventCategory.health:
      return AppColors.orange;
    case EventCategory.family:
      return AppColors.purple;
    case EventCategory.investment:
      return AppColors.gold;
    case EventCategory.chance:
      return AppColors.green;
    case EventCategory.trouble:
      return AppColors.red;
  }
}

ここは、イベントの意味が分かりやすくなるように色を分けています。

最初は変更しなくて大丈夫です。

Step 13：なぜ色をまとめるの？

色を AppColors にまとめる理由は、あとから変えやすくするためです。

もし、画面のあちこちに直接こう書いていたら大変です。

Color(0xffe60012)

全部探して変更しないといけません。

でも、AppColors.red にしておけば、1か所変えるだけで多くの場所に反映されます。

色を1か所にまとめる
↓
あとから変えやすい
↓
デザインが崩れにくい

実務でも、とても大事な考え方です。

よくあるエラーと直し方

1. 色を変えたのに反映されない

保存していない可能性があります。

command + S

または、

Ctrl + S

で保存してください。

そのあと、ターミナルで r を押します。

2. `Color` の書き方でエラーになる

悪い例です。

static const Color red = Color(#2563eb);

正しくはこちらです。

static const Color red = Color(0xff2563eb);

# は使いません。

Flutterでは、基本的に 0xff をつけます。

3. 色コードの文字数が足りない

悪い例です。

Color(0xff2563e)

正しくはこちらです。

Color(0xff2563eb)

0xff の後ろは6文字です。

4. 名前を変えてエラーになった

例えば、こう変えるとエラーになることがあります。

static const Color mainBlue = Color(0xff2563eb);

でも、他の場所ではまだこう使っています。

AppColors.red

この場合、red が見つからずエラーになります。

初心者のうちは、名前は変えずに色コードだけ変えるのがおすすめです。

触ってみよう

まずは、メインカラーを青に変えてみましょう。

変更前です。

static const Color red = Color(0xffe60012);
static const Color deepRed = Color(0xffcf0001);

変更後です。

static const Color red = Color(0xff2563eb);
static const Color deepRed = Color(0xff1d4ed8);

保存して、r を押します。

画面のボタンや現在地の色が青っぽくなったら成功です。

この章で覚えること

この章で覚えることは、3つだけです。

1. AppColorsに色をまとめている
2. ThemeDataでアプリ全体の見た目を決めている
3. 最初は色コードだけ変えると安全

まずはこれだけで大丈夫です。

やる気を維持するコツ

色を変えると、アプリの印象が一気に変わります。

コードの中身を全部理解していなくても、

赤を青に変えた
緑にした
ゲームっぽく紫にした

だけで、自分のアプリ感が出ます。

小さく変えて、すぐ確認する。

これが続けるコツです。

チェックリスト

□ AppColorsを見つけた
□ redの色コードを確認した
□ ThemeDataを見つけた
□ seedColorを確認した
□ scaffoldBackgroundColorを確認した
□ 色コードの書き方を理解した
□ メインカラーを1回変えてみた
□ 保存した
□ r または R で再読み込みした
□ 画面の色が変わった

まとめ

この章では、アプリの色とテーマを確認しました。

色は AppColors にまとめています。

アプリ全体の見た目は ThemeData で設定しています。

初心者のうちは、クラス名や変数名は変えずに、色コードだけ変えるのが安全です。

次の章では、ゲームで使うデータを整理します。マス、プレイヤー、イベントがどのようなデータで作られているのかを見ていきます。

色とテーマを変えてみよう

この節で学べること

目次

ここから