Slide 1

Slide 1 text

Flutterチームから作る組織の越境文化 【Flutter特集】Flutter開発の裏側 ~各社が向き合う課題と挑戦~

Slide 2

Slide 2 text

今城 洸幸 Imajo Takeyuki @imasirooo プロフィール Flutterエンジニア。 「良いもの作るなら何でもする」をモットーに働いています。 デザインにも興味あってFlutter デザインの記事をよく書いてます。 (Xのプロフィールから飛べます。) 経歴 2019年に新卒で面白法人カヤック 2023年〜SODAに転職 趣味 、 子どもと遊ぶこと。毎朝5:30から強制的に遊ばされています。 料理、フットサル、アニメ

Slide 3

Slide 3 text

SODAに入ったら成長できる!と思って、興味を持って欲し い。 転職考えていない人も「この課題あるある」とか「あ、これう ちでもできそう」思ってくれたら嬉しい。 話すトピック Flutterチームから始める越境文化の取り組み #デザインシステム #ギルド #ClaudeCodeAction #Devin 今日の期待値

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

C2Cマーケットプレイス 正規品を安心して購入できるC2Cマーケットプレイス。 スニダンが取引の間で真贋鑑定をすることで、偽造品の心配をすること なく取引ができる

Slide 6

Slide 6 text

直近で、MAUは600万人 事業規模

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

12人

Slide 9

Slide 9 text

12人 ↓ 3ヶ月で新しく Flutterリポジトリにコミットした人数 (Flutterエンジニアを除く) それまではほぼ0だった。

Slide 10

Slide 10 text

何のグラフ?

Slide 11

Slide 11 text

1.5ヶ月でFlutterメンバーがバックエンドにコミットした数。 5人(最近もっとメンバー増えているが)

Slide 12

Slide 12 text

Flutterエンジニアのリソースやチーム構成の課題でリファクタリングができていなかった。 Flutterにチャレンジしたい人がたくさんいたが、できていなかった。 バックエンドエンジニア、PM、デザイナーがFlutterにコミットできる環境を作った。 結果、Flutterエンジニアは大事なことに集中できる環境ができた。 組織全体の越境ムーブを作る

Slide 13

Slide 13 text

具体的な課題

Slide 14

Slide 14 text

同じ画面なのに4つの実装に分かれている 新品スニーカー 中古スニーカー 新品アパレル 中古アパレル ( ) * 7

Slide 15

Slide 15 text

Flutterチームが直面していた課題

Slide 16

Slide 16 text

SODAのスクラムチーム チームA Flutter Flutter Go Go Go PdM QE チームB Flutter Flutter Go Go Go PdM QE チームC Flutter Go Go Go PdM QE チームD Go Go Go PdM QE

Slide 17

Slide 17 text

Flutterメンバーがいないチームへのヘルプ チームA Flutter Flutter Go Go Go PdM QE チームB Flutter Flutter Go Go Go PdM QE チームC Flutter Go Go Go PdM QE チームD Flutter Go Go Go PdM QE

Slide 18

Slide 18 text

改善をするためのチーム 改善チーム Flutter Flutter Flutter

Slide 19

Slide 19 text

生成AI進化してきたし、越境できるのでは? そうすればFlutterメンバーは大事な課題に集中できる。 でもモバイルってシミュレータ動かしたり、デザイン関係 したりでハードル高くない?

Slide 20

Slide 20 text

越境しやすい環境を作る

Slide 21

Slide 21 text

デザインシステムを整え、簡単にUIを作れる環境。 最初のハードルを下げるFlutter勉強会を毎週行う。 Flutterギルドでモチベーションを上げる環境。 DevinやClaude Code Actionsで環境構築すらいらない環境。 越境しやすい環境を作る

Slide 22

Slide 22 text

デザインシステムをデザイナーと構築する

Slide 23

Slide 23 text

デザインシステムを構築するFlutterの実装

Slide 24

Slide 24 text

Haptic Feedbackもpackage化。

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

インターフェイスやコメントを充実させる FigmaのVariantに対応する名前付きコンストラクタ。 doc commentを必須に。

Slide 27

Slide 27 text

FigmaMCP Flutter Figma

Slide 28

Slide 28 text

Flutter勉強会で最初のハードルを下げる環境。

Slide 29

Slide 29 text

SODA Flutter Guild モチベーション維持のためのギルドをメンバーが開設。 Flutter習得に合わせてのランク。 GFI的なクエスト。

Slide 30

Slide 30 text

DevinやClaude Code Actionsで環境構築すらいらない環境。 デザイナーやPM向けに簡単に文字修正とかできる環境。 Claude Code Action Devin

Slide 31

Slide 31 text

3ヶ月で12人もの新規コミッターが誕生。 ただ増えただけではなく、FlutterいないチームでもFlutter開発するムーブ。 品質はcode rabbitや人によるレビューで担保。モブプロも。 その結果、Flutterエンジニアは大事な課題に向き合える。 大リファクタも今年度に終わる予定。 テストカバレッジも40%から60%に。 バックエンドギルドも誕生。 逆にFlutterエンジニアがBEに越境する頻度も増えた。 結果、どうなったか。

Slide 32

Slide 32 text

越境は正義なのか 自分自身、全員が絶対に越境するべきという考えではありません。 元々Flutterをやってみたいという人がそれなりにいた。 ちょろっとできる人を増やすのではなく、ちゃんとFlutterできる・やりたいって人を増やし たい。 小手先ではなく文化を作る。

Slide 33

Slide 33 text

まとめ。 越境する文化を作り、自分たちも大事な課題に向き合えた。 規模が大きいサービスでも、技術的にも組織的にもチャレンジする”余裕”がある。

Slide 34

Slide 34 text

おわり。