FlutterKaigi2026＿Tanaka.pdf

FlutterKaigi2026にてTanakaさんが登壇した資料です。
『今だからこそできる、創造的 Flutter アニメーション戦略と Shader の可能性』
https://2026.flutterkaigi.jp/#timetable

Transcript

1. 今だからこそできる、創造的 Flutter アニメーション戦略と Shader の可能性 Yoshihiro Tanaka UPSIDER Inc.) UPSIDER © 2026 UPSIDER.inc
2. Yoshihiro Tanaka UPSIDER Inc. Mobile Group Engineering Manager 2023年に UPSIDER 入社。Android/Flutter が得意。 法人カード「UPSIDER」/ PRESIDENT CARD / 法人カード基盤の外部提供におけるアプ リ開発を主導し、バックエンド、デザイン、プロダクトマネジメントまで幅広く担当している。 UPSIDER © 2026 UPSIDER.inc
4. App Overview UPSIDER / PRESIDENT CARD アプリ概要 01 / APP SHOWCASE 02 / APP SHOWCASE UPSIDER App PRESIDENT CARD App UPSIDER 上場のための法人カード 経営者のために設計された法人カード 最大10億円の限度額を持つ年会費・発行手数 料無料の法人カード。会社全体の経費管理・業 務効率化に特化している。 UPSIDER の価値を引き継ぎながら、高い還元 率などをもち、経営者への特典にも焦点を当て ている。 主な特徴 : 主な特徴 : • リアルタイムでの利用通知・明細確認 • ポイントの交換 • 不正利用・3DS などの通知・確認 • ラウンジといった各種特典の利用 • カードの一時ロック • チャットボット • 証憑のアップロード © 2026 UPSIDER.inc
5. AI & Engineering Agenda 01 Animation の導入コスト 02 導入事例 03 導入戦略 04 まとめ UPSIDER © 2026 UPSIDER.inc
6. 導入コスト UPSIDER © 2026 UPSIDER.inc
7. Animation Development アニメーション開発を阻んでいた試作コストと属人性の壁 複雑なアニメーションをプロダクトに導入する上では2つの大きな技術的壁が存在していた 01 / BOTTLENECK 02 / BOTTLENECK 試作コスト 属人性 頭の中にあるイメージを形にするためには、時に複雑な数式を自力で構 築し、パラメータを微調整する工程が不可欠であり、アイデアから試作ま でに数日から数週間程度の時間を要していた。 特に Fragment Shader の実装には GLSL の知識が必要であり、書ける エンジニアが限定されていた。 その結果、「工数が見合わない」という理由で見送られるケースが多かっ た。 UPSIDER 仮に実装できたとしてもデバッグが困難であり、担当者が不在になると誰 も保守できないという、チーム全体のスキルとして定着させにくい構造的 な課題があった。 © 2026 UPSIDER.inc
8. Animation Development AI による試作サイクルの短縮と属人性からの解放 01 / BOTTLENECK 02 / BOTTLENECK 試作コスト 属人性 AI の活用により、開発フローが変化 属人性から解放され、求められるスキルが変化 • • ピースがひらひらと回転しながら落ちてほしいと伝えることで Animation の原型ができる 成果物を見ながらフィードバックを繰り返すことで試作が可能になる UPSIDER • どのようなユーザー体験を提供したいかを具体的に想像する力 • そのイメージを正確に言語化し AI に伝える力が、アウトプットの品質 を左右する © 2026 UPSIDER.inc
9. AI & Engineering AI による開発サイクル STEP 01 STEP 02 OPTIONAL STEP 03 STEP 04 Prompting Design Prototyping Migrate Claude / Gemini v0 / Claude Code Design Claude Code / Codex Claude Code / Codex 想像を形にする下準備 静止画でのイメージ可視化 軽量環境での高速検証 実プロダクトへの組み込み 初めから design に投げると token を無駄に消費してしまったり、自分 の中でも concept が固まっていな かったりするため、まずは対話で思 考を整理する。 Animation を全て形にするのでは なく、あくまで最終形を静止画で書 き出すイメージ。Confetti などでは この step はスキップした。 軽量な app または web app など を使って試作する。実際の app を 用いると build 時間がかかったり、 token を余分に消費したりするた め、Flutter の新規の app や Web app で動作確認する。 ある程度形になったら実際の app に取り入れ、挙動を確認する。パ フォーマンス問題や世界観の不一 致などをこの段階で洗い出し微調 整する。 UPSIDER © 2026 UPSIDER.inc
10. AI & Engineering Fragment Shader の試作サイクル Playground での試作 試作をする上で、Flutter app を逐一更新・build していると時間が かかるため、これらを確認するためだけの playground を作って確 認している。 新しい shader を試す場所を体系化することで思いついてから実 装してみるまでが高速化できる。 UPSIDER © 2026 UPSIDER.inc
11. 導入事例 UPSIDER © 2026 UPSIDER.inc
12. Case Study 事例：Confetti 01 / 特別なモーメント ポイント交換の特別感の創出 ポイントの交換はアプリを使用する上で、一つの重要な区切りでもある ため、ポイントをキャッシュバックへの充当、各種マイルやポイントへの 交換といった形で使用した際に特別感を感じられるよう、Confetti を実 装した。 Glyph の表示など、これまでであれば調査も含め時間がかかっていた 部分が AI により開発を大幅に高速化することができた。 Battery Saver が有効な device などでは表現を簡素化する処理を入 れ、端末の発熱などを抑えている。 UPSIDER © 2026 UPSIDER.inc
13. Case Study 事例：Number Reel 02 / 日常的な画面操作 貯めることのモチベーション創出 スロットマシンのような演出で、何かが起きている動的な感覚と確定時 のユーザーの注目を自然に引き出し、かつ色が変わることで「貯めるこ とのモチベーション」を自然に得られることを目標とした。 当初はカウントアップ方式だったがポイント数に応じて速度などが変わ り一貫性が保てないことから、現行のような形に。 この仕様変更は実装も含めほぼ書き直しとなったが、AI による実装の 高速化により、ほとんど工数が膨らむことなく実現できた。 ポイント数の確認という機能と両立するため、起動時一度しか表示しな いといった制限を設けている。 UPSIDER © 2026 UPSIDER.inc
14. Case Study 事例：Onboarding 02 / 日常的な画面操作 邪魔しない静かな煌めき 静かにカードが立体感を演出することで、実体のメタルカードを感じさ せ、申し込み前のモチベーションを静かに高めることを目的としていま す。 3D object として表示する案もあったが、デバイスへの負荷や実装を 考慮し、画像を transform しての実装。 また、傾きに応じた表示や、ホームへの導入などは検証過程でユー ザー操作の邪魔になることが分かり、表示頻度は少なくとも効果が出る 画面にのみ導入された。 UPSIDER © 2026 UPSIDER.inc
15. Case Study 他事例 着手の判断がしやすくなっている いずれも以前なら工数に見合わないとして見送っていた類のもので、これらが開発が数時間で回るようになったことで実現できた。 UPSIDER © 2026 UPSIDER.inc
16. 導入戦略・まとめ UPSIDER © 2026 UPSIDER.inc
17. Strategy 過剰にしないための原則 入れすぎないための原則を定める 01 / GUIDELINE 02 / GUIDELINE パフォーマンス & バッテリー 再生時間の最適化 • 滞在時間の長い画面での制御 • 「待たせない」設計思想 重い処理を伴うアニメーションをホーム画面や一覧画面に配置しない。 作品を長く見せたい制作者側の心理を排し、ユーザーを待たせない方針を徹 底する。 • 特別な瞬間への限定 リッチな演出は一瞬の体験に絞り、ユーザーが最も期待する「安定してすぐア クションを取れること」を最優先する。 • 設定に応じた調整 • テスト反映と再生回数の制御 社内テストのフィードバックを尊重して時間を短めに設定するか、頻出画面で は初回のみ再生するなどの工夫を取り入れる。 Battery Saver モードなどが有効な場合はアニメーションを自動的にスキップ または簡素化する。 UPSIDER © 2026 UPSIDER.inc
18. Overview / Key Takeaways Flutter アニメーション開発と今後の展望 01 02 03 試作・検証サイクルの高速化 戦略的判断の重要性 人間の役割と表現力 AI の進化により、Flutter におけるアニメーションの 試作・検証サイクルは高速化した。 速く作れるようになったからこそ、何を作るべきかを 見極める戦略的な判断がこれまで以上に重要性を 増している。 頭の中にある抽象的なイメージを具体的に想像する 力と、それを的確に言語化する力が品質に直結す る。 これだけ工数がかかったのだから一度導入してみ る、といったことが無くなり、導入可否の判断も取りや すくなっている。 プロダクト全体の世界観の統一や、UX の文脈に 沿った適切な演出の判断は、依然として人間の役割 であり、エンジニアとデザイナーが責任を持ち取り組 む必要がある。 かつて高い壁であった fragment shader の利用や 複雑な animation の構築も開発のブロッカーではな くなった。 UPSIDER © 2026 UPSIDER.inc
19. Event App UPSIDER Quest 01 / KEY FEATURES クイズ・隠し要素 Flutter や Fintech, UPSIDER に関わるクイズを複数用意しています。また、アプリ内にいくつか隠し要素もあるので、ぜひ探して みてください！ 02 / KEY FEATURES 限定ノベルティ クイズやアンケートへの回答でポイントを付与し、限定ノベルティと交換できます。他にもブースには UPSIDER / PRESIDENT CARD app のデモや、各種ノベルティを用意しております！ぜひお立ち寄りください。 UPSIDER © 2026 UPSIDER.inc