✨

AIを活用してFlutterのスケルトンスクリーンの開発を自動化した話

2025/7/31

こんにちは、PentagonでFlutterアプリ開発を担当している川崎です。
スケルトンUI開発において、AIを活用することで劇的な効率化を実現できることをご存知でしょうか？
今回は、Flutter向けの人気パッケージ shimmer を使ったスケルトンUI開発で、AIが如何に開発効率を向上させるかを実体験をもとに紹介します。

【こんな人に読んでほしい】

AI活用による開発効率化に興味がある
スケルトンUI開発の時間を大幅に短縮したい
プレースホルダーやスケルトンUIを手軽に実装したい

【この記事を読むメリット】

AIを活用したスケルトンUI開発の効率的なワークフローを理解できる
Shimmer.fromColors を活用したローディングスケルトンの実装手順を理解できる
修正不要で即座に本番適用可能なAI生成コードの実現方法がわかる

【結論】

AI活用により、従来のスケルトンUI開発にかかる時間を大幅に短縮し、開発者はコア機能の実装により集中できるようになります。
正常系UI実装後にAIにスケルトン生成を依頼することで、修正不要の完璧なコードが生成可能です。

この記事の前提

Flutter 3.27.3
shimmer: ^3.0.0（または最新バージョン）

※この記事は、筆者の実際の開発体験をもとに一部生成AIで執筆しております。

AI活用による効率的なスケルトン開発

この記事で最も注目すべき点は、AIを活用した開発効率化です。

今回のスケルトンコードは、正常系のUIを先に作成し、そのコードからAIに「スケルトンコードを作成して」と依頼したところ、一切修正せずに完璧なコードが生成できました。これは以下のような開発フローの可能性を示しています：

正常系UIの実装 → 通常通り機能を完成させる
AIにスケルトン生成を依頼 → 既存コードを元に自動生成
即座に本番適用 → 修正不要でそのまま使用可能

このアプローチにより、従来のスケルトンUI開発にかかる時間を大幅に短縮できます。AIがコードの構造を理解し、適切なShimmerアニメーションを配置してくれるため、開発者はコア機能の実装により集中できるようになります。

実際に使用したAIプロンプト

今回のスケルトンコード生成では、以下のようなシンプルなプロンプトを使用しました：

下記のコードをもとにスケルトンコードを生成してください

[ここに正常系のWidgetコード全体を貼り付け]

このプロンプトの優れた点は、複雑な指示が不要であることです。AIは既存のUIコードの構造を分析し、以下を自動的に判断してくれます：

どの部分をShimmerで置き換えるべきか
適切なサイズとシェイプの設定
レイアウト構造の維持
カラーとアニメーション設定

結果として、手動でのスケルトンUI実装に比べて 90%以上の時間短縮 を実現できました。

1. shimmer の実装例 (VideoCommentShimmerView)

以下は、コメントリスト中の1件分を表すスケルトンUIの実装例です。

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

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.symmetric(horizontal: 16),
      decoration: const BoxDecoration(
        color: colorGrayFA,
        borderRadius: BorderRadius.all(Radius.circular(8)),
      ),
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // ヘッダ（件数・矢印は非表示）
            Row(
              children: [
                Text('コメント', style: textStyle(const [bold, fontSize15])),
                spaceW6,
                // 件数部分の shimmer
                Shimmer.fromColors(
                  baseColor: Colors.grey.shade300,
                  highlightColor: Colors.grey.shade100,
                  child: Container(
                    width: 30,
                    height: 14,
                    color: Colors.white,
                  ),
                ),
              ],
            ),
            spaceH8,
            // アイコン shimmer + テキスト shimmer x2
            Row(
              children: [
                // 丸型 shimmer
                ClipOval(
                  child: Shimmer.fromColors(
                    baseColor: Colors.grey.shade300,
                    highlightColor: Colors.grey.shade100,
                    child: Container(width: 40, height: 40, color: Colors.white),
                  ),
                ),
                spaceW12,
                // テキスト2行 shimmer
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: List.generate(2, (_) {
                      return Padding(
                        padding: const EdgeInsets.only(bottom: 4),
                        child: Shimmer.fromColors(
                          baseColor: Colors.grey.shade300,
                          highlightColor: Colors.grey.shade100,
                          child: Container(
                            width: double.infinity,
                            height: 12,
                            color: Colors.white,
                          ),
                        ),
                      );
                    }),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

実装例のポイント解説

Shimmer.fromColors
- baseColor：グラデーションの暗い色
- highlightColor：グラデーションの明るい色
- child：アニメーションをかけるウィジェット（Containerなど）
ClipOval や Container で任意のシェイプを作成し、そこにShimmerを適用しています。

その他によく使われるプロパティ

Shimmerをより細かくカスタマイズしたい場合は、以下のプロパティを活用できます。

プロパティ	型	説明
`direction`	`ShimmerDirection`	アニメーションの方向（`ltr`, `rtl`, `ttb`, `btt`）
`period`	`Duration`	1往復のアニメーションにかかる時間
`enabled`	`bool`	`true`でアニメーション有効；`false`で静的プレースホルダー
`loop`	`int?`	アニメーションのループ回数（`null`で無限ループ）
`child`	`Widget`	シェイプを表現するウィジェット

これらのプロパティを組み合わせることで、アプリのデザインに最適なShimmerアニメーションを作成できます。

2. シェイプ別パターンの特徴と使いどころまとめ

用途に応じて適切なプレースホルダーのシェイプを選ぶことで、ユーザーにとってより直感的なローディング体験を提供できます。

パターン	概要	効果的な場面
テキストプレースホルダー	横長の矩形でテキスト行を模したシェイプ	リストアイテムの本文や段落テキスト
アバタープレースホルダー	円形でユーザーアイコンを想起させるシェイプ	プロフィール画像やコメント投稿者
カードプレースホルダー	矩形＋角丸でカードUIを模倣	商品一覧やカード型UIの読み込み中
グリッドプレースホルダー	複数の矩形を格子状に並べて一覧を模擬	サムネイル一覧やフォトギャラリー

各シェイプパターンは、実際のコンテンツの構造に合わせて設計することで、よりリアルなローディング体験を演出できます。

まとめ

shimmer を使えば、数行のコードでスムーズなグラデーションアニメーションが実現可能
テキスト／アイコン／カードなど任意のシェイプに対して適用でき、読み込み中のUXを大幅に向上
baseColor／highlightColor／direction／period を調整することで、アプリに最適な演出にチューニング可能
AIを活用することで、スケルトンUI開発の効率を劇的に向上させることができる

ぜひ目的に応じたプレースホルダーを導入し、Flutterアプリの「読み込み中」体験をよりリッチに演出してみてください！