「収まらない」を仕様にする
-- Views
October 29, 26
スライド概要
FlutterKaigi 2026 で発表したスライドです。
https://2026.flutterkaigi.jp/
Android Engineer at Omiai Inc.
関連スライド
各ページのテキスト
「収まらない」を仕様にする FlutterKaigi 2026 1
自己紹介 ● ● ● ● 高田 晴彦 株式会社Omiai Flutter エンジニア @tfandkusu ○ Qiita / Zenn / Docswell / note / GitHub / X 2
免責事項 ● マッチングアプリ Omiai を製品仕様の例として題材にしていますが、実際の製 品仕様と異なることがあります ○ ○ ○ ● 説明のわかりやすさのため簡略化 AB テストの実施 製品仕様の変更 アプリのスクリーンショット中に表示されるユーザの情報は、すべて架空のもの です ○ 写真はすべて生成 AIによるもの 3
製品仕様の例としての、マッチングアプリ Omiai の紹介 結婚を見据えたお相手を探すサービス お相手を探す デート いいね！を送る いいね！を受け取る メッセージ やりとり ありがとう！を返す 4
アウトライン Omiai で発生した「収まらない」事象 「収まらない」に対応した仕様を作る上での課題 解決するための仕組み 5
「収まらない」に対応する仕組み 仕様 実装 動作確認 Widgetbook 表現方法 各種 Widget Figma のロゴは https://www.figma.com/ja-jp/using-the-figma-brand/ から引用 Flutter のロゴは https://flutter.dev/brand から引用 Widgetbook のロゴは https://pub.dev/packages/widgetbook から引用 Addon 6
Omiai で発生した 「収まらない」事象の紹介 7
お相手を探す画面が収まらない 8
小さい端末で、お相手探しにおいて重要である居住地が省略される iPhone SE 第3世代 iPhone SE 第1世代 収まる 収まらない 収まらなければ …で省略で実装していた 9
縦方向に収まらない 普通の端末 小さい端末 収まらない ボタンと被って 読めなくなった 10
事象の深掘り：小さい端末とは？ 画面の論理ピクセルが小さい 画面密度に関わらず、一定の物理サ イズ感を保つための抽象化された単 位 iPhone SE 第3世代 iPhone SE 第1世代 横幅 375 論理ピクセル 横幅 320 論理ピクセル 縦幅 667 論理ピクセル 縦幅 568 論理ピクセル 11
ユーザはどのくらい小さい端末を使っているか 横幅 320 論理ピクセル ● ● iPhone SE 第1世代 Unihertz Jellyシリーズ ごく少数 横幅 360 論理ピクセル ● ● ● arrows We2 Galaxy S24 OPPO A38 普通にある 12
本体設定で表示を大きくすると横幅論理ピクセルが320になる 横幅 320 論理ピクセル 収まらない 13
本体設定で文字を大きくできる 文字サイズ 文字サイズ 3.12 倍 2倍 収まらない 14
「収まらない」事象に対して どのように対応するか 15
「収まらない」に対応した 仕様を作る 16
「収まらない」に対応した仕様の例 改行できるようにする その分、お相手ユニットの縦幅が増える 17
「収まらない」に対応した仕様の呼び方 画面が狭い 本体設定で 文字が大きい 収まらない ● ● 対応する仕様 ● 厳密にいうと「レスポンシブ」は画面サイズの 変化にレイアウトが応答することを指す 本体設定で文字を大きくすることへの対応は アクセシビリティ対応と呼ぶのが正しい 厳密さより分かりやすさを重視 レスポンシブ仕様 18
レスポンシブ仕様を作る上での 課題 19
仮にレスポンシブ仕様の作成とチーム内の共有を実装者任せにする 画面全体の Figma PdM 実装者 デザイナー レスポンシブ仕様作成 おまかせ 仕様の共有方法 決まっていない 20
実装者が自らの裁量でレスポンシブ仕様を決めた結果 仕様A 収まらない時は … で省略 仕様B 改行できるようにする その分、写真の 縦幅を減らす 21
なぜ写真の縦幅が減るか SliverGrid をシンプルに 使うとこの仕様になる CustomScrollView( slivers: [ SliverGrid( gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 2, mainAxisExtent: 230, // セルの縦幅は固定 ), delegate: SliverChildBuilderDelegate( (context, index) => MemberGridUnit(member: members[index]), childCount: members.length, ) // 以下略 実装都合 プロダクト事情でない 相談なし 22
その後の工程で起こること QAエンジニアによる検証 PdMによる受け入れテスト 写真は大事なので 面積を減らさないでほしい この仕様で 合っていますか？ 対応工数 手戻り 23
リリース後に起こること お相手探しにおいて重要情報である居住地が分からない コア体験の毀損 問い合わせ発生 信用を失う 修正リリース 手戻り 24
AI で実装は速くなったが 全体としてあまり速くなっていない AI を活用して生産性を上げよう 実装 リリース後 不具合対応 検証 実装は速くなったが... 実装 検証 リリース後 不具合対応 全体としてはあまり速くなっていない😢 25
レスポンシブ仕様の共有が大事な理由 ● ● 「収まらないときに何を残すか」はプロダクトの判断 PdM は以下の観点で総合的に判断して仕様を決定している ○ プロダクト戦略 ○ KPI ○ サポートに寄せられた意見 ○ 法令 何を残すかは PdM が最終決定する 26
レスポンシブ仕様を作る上での課題 いつ決めるかが決まっていない 27
対応 プロジェクト工程の初期段階で仕様を作り チーム全体の合意とする PdM エンジニア デザイナー 要求 システム 要件定義 正式 デザイン ワイヤー フレーム レスポンシブ仕様 ● ● ● ● ● ● ● 実装 検証 受け入れテスト リリース システム監視 効果検証 トラブル対応 チーム全体合意 28
「収まらない」問題の発見方法 スクロール できる 有限 スクロール できない 有限 無限 有限 29
次の話 いつ決めるかは分かった どのように表現して共有するか 30
Figma を活用した レスポンシブ仕様の 表現方法 31
Figma はチームで共有できるデザインキャンバス PdM デザイナー エンジニア QA Figma のロゴは https://www.figma.com/ja-jp/using-the-figma-brand/ から引用 チームの 共通認識 32
Figma でレスポンシブ仕様を表現する Auto Layout の活用 コメント で説明 33
前提：Figma のシート 今回紹介する Figma ファイルの編集は フルシートが前提 無料のスタータープランはフルシートだが作成・共有でき るファイル数に厳しい制限がある 料金表は https://www.figma.com/ja-jp/pricing/ より引用 34
Auto Layout を活用して レスポンシブ仕様を表現 35
前提：Figma の基本的な使い方 Frame を貼る その中に図形や画像、 テキストなどを配置 36
デフォルトは絶対位置に配置 左上からの 座標で配置 大きさ固定 Frame を 狭くすると 要素が Frame からはみ出る レスポンシブ仕様を 表現できない 37
そこで Auto Layout を活用 Freeform Horizontal レスポンシブ仕様を 表現できる 38
Auto Layout 活用詳細 Width ● Fixed width (固定幅) ● Hug contents (コンテンツ幅に合わせる) ● Fill container (親 Frame に合わせて広げる) ○ Flutter の Expanded Widget に相当 Height ● Fixed height ● Hug contents ○ 改行に合わせた 縦幅 ● Fill container 親 Frame の縦幅にも Hug contents を設定 39
Auto Layout の Fill と Hug のイメージ アイコンは 固定サイズ Hug = 抱きしめる = 要素に合わせた大きさ Fill = 満たす 40
おすすめ Figma 教材 (日本語) https://www.figma.com/community/ file/1228577958737472070 https://www.figma.com/community/ file/1208893106652767526 41
Figma Agents に教えてもらう 42
コメントで レスポンシブ仕様を表現 43
Auto Layout では表現できないレスポンシブ仕様の例 通常縦幅の端末 縦幅が狭い端末 写真は正方形 ここまでは 下部ボタンに 隠れて良い プロフィール情 報が下部ボタン に隠れるなら ば、写真の縦幅 を減らす プロフィール情報 分のスペース確 保 写真の面積が減るのはメンバーユニットの件と 矛盾する判断だが、他に手段が無く、 PdM によ る総合的な判断に基づく仕様 44
Figma の Auto Layout では表現できない 親フレームの 横幅に合わせる 縦横比を 維持する 収まらないから縦横比を崩す機能は無い コメントで表現 45
Figma で仕様を表現するフォーマット - 画面レイアウトをコンポーネントに分解 画面全体 お相手カード AppBar もらったいいね数 お相手プロフィール ログインステータス 年齢と都道府県 メイン写真 プロフィール項目 お相手カード 写真一覧 ひとつのコンポーネント お相手プロフィール 下部ボタン もっと見る ひとつの Widget クラス 46
Figma で仕様を表現するフォーマット - アプリ仕様の例 背景 ● Omiai は最大4枚の プロフィール写真を 登録できる お相手のすべての 写真のサムネイル をクロップで表示す る メイン写真 サムネイルをクリック メイン写真がクリックされた サムネイルの写真となる 47
Figma で仕様を表現するフォーマット 48
表示仕様にレスポンシブ仕様も書く 画面全体 ● お相手カード と下部ボタ ンは重ねる ● お相手カード の最大縦幅 は、お相手プロフィール が下部ボタン に被らない ところまでとする 49
表示仕様にレスポンシブ仕様も書く メイン写真 ● お相手のプロフィール写 真の1枚目を正方形でク ロップ表示する ● 親のお相手カード が収ま らない時は、正方形を崩 して、縦に縮める 50
Figma の Auto Layoutで 表現できても コメントで レスポンシブ仕様を書く 51
Figma で表現できるレスポンシブ仕様の例 マイベスト(個人的トップ3で価値観を表現) 最大2行 収まらない時は終端 …で省略 本体設定で文字を大きくしたケース 52
Figma でテキストの最大行数と収まらない時の...を表現 収まらない時の終端... を有効 最大行数 縦幅を Hug に設定 53
そこまで Figma に精通してなくても コメントによる説明で目的は果たせる ● 最大2行で表示する ● テキストが収まらない時 は終端...で省略する チームの 共通認識 54
補足 Figma と AI コーディングエージェント 55
Figma は AI の入力 Figma MCP AIコーディング エージェント Figma のロゴは https://www.figma.com/ja-jp/using-the-figma-brand/ から引用 MCP のロゴは https://modelcontextprotocol.io/ から引用 56
Figma で作ったデザインを AI で自動実装 ● ● AI コーディングエー ジェント Figma MCP レスポンシブ 仕様対応 Figma のロゴは https://www.figma.com/ja-jp/using-the-figma-brand/ から引用 Flutter のロゴは https://flutter.dev/brand から引用 57
レスポンシブ仕様を実装するための 各種 Widget 58
AI 時代に Widget を学ぶ意義 AI が書くなら、Widget は知らなくてもいいのでは？ 要件定義 の観点 Figma 整備 の観点 59
AI 時代に Widget を学ぶ意義 要件定義の観点 「収まらない」ときの選択肢を提 案できる 本人確認済みバッジは 都道府県が収まらない 時は非表示 Flutter の Widget を知っているから提 案できる。要望に即答できる。 60
AI 時代に Widget を学ぶ意義 Figma 整備の観点 ● ● ● AI はほとんど間違えない ただし入力には忠実 Figma の設定やコメントが抜けて いると、意図どおりに実装されない ● ● 目的を 維持できる 崩れたときに AI に任せると、直る のはコードだけで、Figma は抜け たまま Widget を知っていると、コードから Figma の抜けに気づき、 Figma を 直せる チームの 共通認識 AI の入力 61
どう並べるか Row と Column 横並びの Row 縦並びの Column 62
どのように満たすか Expanded と Flexible 残りすべてを満たす Expanded 必要な分だけ満たす Flexible まだ余裕あり 固定幅 必要分 限界まで広がり 改行できる どちらも flex という重みパラメータがあり、複数あれば、その重さで残りを分け合う 63
縦方向に逃がす Wrap と OverflowBar 収まらないならば改行の Wrap 収まらないならば縦並べに切り替える OverflowBar 収まらないとき direction プロパティで縦並びも可能 64
親のサイズを受け取ってからレイアウトを作る LayoutBuilder TextPainter で Widget を設置せず計測 親の横幅 < アイコン横幅 + テキスト横幅 + アイコン横幅 収まらない アイコン非表示 65
Widgetbook を活用した レスポンシブ仕様の実装確認 66
Widgetbook とは アプリから独立して画面や Widget を開発、確認できるサンドボックス アプリをスマホにインストールしなくても、手元の PCのブラウザやデスクトップアプリで確認できる 67
多様な Widget 状態を Knob で再現 Knob 表示に反映 実際にアプリを操作 して状態を再現させ なくて良い 68
便利な Addon を提供 - Viewport Addon Viewport Addon 横幅320 横幅360 横幅375 多様な 画面サイズを 再現 69
便利な Addon を提供 - TextScale Addon TextScale Addon 多様な 文字サイズを 再現 70
Widgetbook を活用したレスポンシブ仕様の実装確認のまとめ レイアウト状態 Widget 画面 文字サイズ バリエーション 状態 サイズ 設定 Widgetbook を使えば、手元の PC で確認できる 71
まとめ 72
事象と対応 画面が小さい端末で表示できない 本体設定で表示、文字を大きくできる レスポンシブ仕様を作る 73
レスポンシブ仕様をいつ作るか 要求 ワイヤー フレーム システム 要件定義 収まらない場所を 特定 正式 デザイン レスポンシブ仕様 チーム全体合意 74
レスポンシブ仕様の表現、実装、動作確認 仕様の表現 実装 動作確認 Widgetbook ● ● Auto Layout コメント チームの 共通認識 AI の入力 ● ● ● ● ● Expanded Flexible Wrap OverflowBar LayoutBuilder Figma のロゴは https://www.figma.com/ja-jp/using-the-figma-brand/ から引用 Flutter のロゴは https://flutter.dev/brand から引用 Widgetbook のロゴは https://pub.dev/packages/widgetbook から引用 ● ● ● Knob Viewport Addon TextScale Addon 75
一番伝えたいこと 「収まらない」を仕様にする 76
「収まらない」を仕様にしないと... AI で速くはなったが ... 要件定義 実装 検証 リリース レスポンシブ仕様を 定めない 担当者任せで ばらつく 小さい端末で表示されない そもそも仕様は？ 大事な情報な のに読めない 手戻り トラブル対応 77
「収まらない」を仕様にする AI で作れる 要件定義 実装 レスポンシブ仕様を 決める 属人性なく 仕様通りに実装 チーム全体合意 検証 リリース 小さい端末でも 仕様通りと確認 小さい端末だけ ど大事な情報 は読める 手戻りなし 78
まとめ 「収まらない」を仕様にできるチームと仕組みを作る 手戻りなし AI 時代のスピードで価値を届ける 79
ありがとうございました 80
謝辞 ● ● 発表内容への助言 ○ 株式会社Omiai ■ VPoE 渡邊さん ■ エンジニア 井櫻さん プロポーザル提出のきっかけ ○ 株式会社Omiai ■ PdM 小林さん ■ デザイナー 大嶺さん ● ● 準備時間の捻出 ○ 妻 ○ 妻のご家族 日々の癒やし ○ 6月に生まれた息子 81