MENU
現役エンジニアが教えない、挫折と苦悩のアプリ開発
  1. ホーム
  2. Flutter
  3. 私のアプリを作る順番

私のアプリを作る順番

Flutter

私なりにアプリを作る順番が見えてきたのでまとめてみます。

目次

1: 企画・設計

  1. 機能のアイデア出し
    これが一番苦しいかも・・
  2. UI/UXの案を大まかに決めます。
    ノートにとりあえず書き出します。
    他アプリとの差別化
    使いやすさなどを重視

2：アプリ名の決定

アプリ名の候補を考える

  • 商標チェック（WEB、App Store、Google Playで検索、Wordressプラグイン名なども検索）
  • App StoreとGoogle Playは英語のプライマリー名が必要
  • 国際展開も考慮する
  • 日本語だと検索されにくいことも考慮

ここでハイブリッド戦略：英語メイン名 + 日本語サブタイトル

理想は下記
シンプルで覚えやすい
短め
発音しやすい
国際的に通用

アプリ名の決定（下記の3つを決定する）

アプリ名を決めたら正式に下記の3つをここで決めます

  • アプリ名：
  • サブタイトル：
  • パッケージ名：

そうするとバンドルIDもここで決まります。

3.アイコンデザイン

以前はアプリが出来上がってからアイコンを決めていましたが
コード実装前に決めるようになりました。

理由：
アイコンで使用したイメージやカラーを基準にカラースキームやフォントを構築できるからです。
例）プライマリーカラーとして
アイコン、ヘッダー、ボタン等に使用

私なりのPoint！

長く付き合う色だから、好きな色が大事
現代のアプリは原色より「くすんだ色」が主流
（Notion、Slack、Figmaなど有名アプリも落ち着いた色）
派手すぎず、地味すぎず・・
そして、ブランディングできる色

512x512pxと1024x1024px、両方ここで用意します

4.カラースキーム決定

アプリ全体の色
アイコンの色をメインカラーにする？
アクセントカラーは？

カラーパレット案（1例です）

プライマリー（くすんだ青）： #4A6B8A
アクセント（オレンジ）：      #FF9500
背景（明るいグレー）：        #F5F5F5
テキスト（ダーク）：          #333333
テキスト（ライト）：          #666666
白：                         #FFFFFF

メインカラー


プライマリー： #XXXXXXX

アイコン背景
ヘッダー
プライマリーボタン
ナビゲーションバー

アクセントカラー


アクセント： #XXXXXXX

重要なボタン（保存、投稿など）
アイコンのハイライト
タブの選択状態
特別な機能のボーダー

サポートカラー

背景： #XXXXXXX
白： #FFFFFF
テキスト（ダーク）： #2C2C2C
テキスト（ライト）： #666666

5. フォント選定

Flutterアプリのフォント戦略
使用箇所ごとに分ける

見出し用フォント – ロゴ、タイトル、重要な情報
本文用フォント – 一般的なテキスト、説明文
英数字専用フォント（オプション）- 数字を美しく表示

Flutterでのフォント実装方法

方法A: Google Fonts パッケージ

dependencies:
  google_fonts: ^6.1.0

メリット：
✅ 簡単に導入
✅ 無料、商用利用OK
✅ 豊富な種類
✅ 自動でダウンロード

方法B: カスタムフォント

flutter:
  fonts:
    - family: CustomFont
      fonts:
        - asset: fonts/CustomFont-Regular.ttf

メリット：
✅ 完全にカスタマイズ可能
⚠️ ライセンス確認必要
⚠️ ファイルサイズ大きい（日本語）

フォント候補

【見出し用フォント】


候補1: Noto Serif JP（セリフ体）
印象： 高級、信頼感、クラシック
適用： アプリ名、見出し、重要な情報

google_fonts: GoogleFonts.notoSerifJP()

メリット：
✅ Googleの公式日本語フォント
✅ 高級感がある
✅ 可読性が高い
✅ ゴールド/ブロンズと相性抜群

候補2: Playfair Display（英語セリフ体）
印象： エレガント、高級、モダン

google_fonts: GoogleFonts.playfairDisplay()

メリット：
✅ アルファベットの表示に最適
✅ 非常にエレガント

候補3: Lora（セリフ体）
印象： 読みやすい、落ち着いた、上品
適用： 見出し

google_fonts: GoogleFonts.lora()

【本文用フォント】読みやすさ重視

候補1: Noto Sans JP（ゴシック体）
印象： シンプル、読みやすい、モダン
適用： 本文、リスト、フォーム

google_fonts: GoogleFonts.notoSansJP()

メリット：
✅ 最も読みやすい日本語フォント
✅ Googleの公式
✅ どんな画面でも綺麗
✅ ウェイトが豊富（Light, Regular, Bold等）

候補2: Zen Kaku Gothic New（ゴシック体）
印象： 親しみやすい、モダン、温かい
適用： 本文

google_fonts: GoogleFonts.zenKakuGothicNew()

メリット：
✅ 読みやすい
✅ 少し丸みがあって優しい
✅ イベント管理アプリに合う

候補3: Roboto（英語サンセリフ）
印象： クリーン、モダン、プロフェッショナル
適用： 英語部分、数字

google_fonts: GoogleFonts.roboto()

メリット：
✅ Material Designの標準
✅ 読みやすい
✅ 数字が美しい

推奨組み合わせ例

見出し：  Noto Serif JP（セリフ体）
本文：    Noto Sans JP（ゴシック体）
アプリ名： Playfair Display（英語セリフ）

印象：高級感、信頼感、プロフェッショナル

使い分け例：

アプリ名 → Playfair Display
画面タイトル → Noto Serif JP
本文 → Noto Sans JP

プラン B: モダン・シンプル路線

見出し：  Zen Kaku Gothic New（ゴシック）
本文：    Noto Sans JP（ゴシック体）
英語：    Roboto

印象：

  • モダン、親しみやすい、使いやすい
  • 読みやすさ最優先
  • カジュアルすぎず、堅苦しすぎず

プラン C: バランス型

見出し： Noto Serif JP（セリフ体） - Bold本文： Noto Sans JP（ゴシック体） - Regular
英語： Roboto - Medium
数字： Roboto - Bold

印象：

セリフとサンセリフの良いとこ取り
視覚的なメリハリがある
読みやすさと高級感の両立

6.フォントサイズ

見出し

dartfontSize: 24.0
fontWeight: FontWeight.bold
fontFamily: 'Noto Serif JP'
color: #42567b


サブタイトル

dartfontSize: 18.0
fontWeight: FontWeight.w600
fontFamily: 'Noto Sans JP'
color: #42567b


本文

dartfontSize: 16.0
fontWeight: FontWeight.normal
fontFamily: 'Noto Sans JP'
color: #2C2C2C


キャプション

dartfontSize: 14.0
fontWeight: FontWeight.normal
fontFamily: 'Noto Sans JP'
color: #666666


ボタンテキスト

dartfontSize: 16.0
fontWeight: FontWeight.bold
fontFamily: 'Noto Sans JP'
color: #FFFFFF

これでデザイン方向性を決めます。

7.コード実装

pubspec.yaml


yamldependencies:
flutter:
sdk: flutter
google_fonts: ^6.1.0

flutter:
uses-material-design: true

カラー定義ファイル作成
lib/constants/app_colors.dart

import 'package:flutter/material.dart';

class AppColors {
  // プライマリーカラー
  static const Color primary = Color(#123456);    
  static const Color accent = Color(#123456);    
  
  // 背景色
  static const Color background = Color(#123456); 
  static const Color white = Color(#123456);
  
  // テキスト色
  static const Color textDark = Color(#123456); 
  static const Color textLight = Color(#123456);   
  
  // その他
  static const Color border = Color(#123456);
  static const Color error = Color(#123456);
  static const Color success = Color(#123456);
}

テーマ設定ファイル
lib/constants/app_theme.dart

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'app_colors.dart';

class AppTheme {
  static ThemeData get theme {
    return ThemeData(
      // カラースキーム
      primaryColor: AppColors.primary,
      scaffoldBackgroundColor: AppColors.background,
      
      // テキストテーマ
      textTheme: TextTheme(
        // 大見出し（画面タイトル等）
        headlineLarge: GoogleFonts.notoSerifJP(
          fontSize: 28,
          fontWeight: FontWeight.bold,
          color: AppColors.primary,
          letterSpacing: 0.5,
        ),
// AppBar テーマ
      appBarTheme: AppBarTheme(
        backgroundColor: AppColors.primary,
        elevation: 0,
        centerTitle: true,
        titleTextStyle: GoogleFonts.notoSerifJP(
          fontSize: 20,
          fontWeight: FontWeight.bold,
          color: Colors.white,
        ),
        iconTheme: IconThemeData(
          color: Colors.white,
        ),
      ),

main.dart での適用

import 'package:flutter/material.dart';
import 'constants/app_theme.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'WP EventPost',
      theme: AppTheme.theme,
      home: // あなたのホーム画面,
    );
  }
}
Flutter
目次