---
title: 「収まらない」を仕様にする
tags:  #flutter #figma  
author: [高田 晴彦](https://docswell.com/user/tfandkusu)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/PEX3631VJX.jpg?width=480
description: FlutterKaigi 2026 で発表したスライドです。 https://2026.flutterkaigi.jp/
published: October 29, 26
canonical: https://docswell.com/s/tfandkusu/5R8PGR-Responsive
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/PEX3631VJX.jpg)

「収まらない」を仕様にする
FlutterKaigi 2026
1


# Page. 2

![Page Image](https://bcdn.docswell.com/page/3EKY1Y25JD.jpg)

自己紹介
●
●
●
●
高田 晴彦
株式会社Omiai
Flutter エンジニア
@tfandkusu
○
Qiita / Zenn / Docswell / note /
GitHub / X
2


# Page. 3

![Page Image](https://bcdn.docswell.com/page/L739Q94175.jpg)

免責事項
●
マッチングアプリ Omiai を製品仕様の例として題材にしていますが、実際の製
品仕様と異なることがあります
○
○
○
●
説明のわかりやすさのため簡略化
AB テストの実施
製品仕様の変更
アプリのスクリーンショット中に表示されるユーザの情報は、すべて架空のもの
です
○
写真はすべて生成 AIによるもの
3


# Page. 4

![Page Image](https://bcdn.docswell.com/page/87DG9GQK7G.jpg)

製品仕様の例としての、マッチングアプリ Omiai の紹介
結婚を見据えたお相手を探すサービス
お相手を探す
デート
いいね！を送る
いいね！を受け取る
メッセージ
やりとり
ありがとう！を返す
4


# Page. 5

![Page Image](https://bcdn.docswell.com/page/VJP3Z3L3E8.jpg)

アウトライン
Omiai で発生した「収まらない」事象
「収まらない」に対応した仕様を作る上での課題
解決するための仕組み
5


# Page. 6

![Page Image](https://bcdn.docswell.com/page/2EV4W4QNJQ.jpg)

「収まらない」に対応する仕組み
仕様
実装
動作確認
Widgetbook
表現方法
各種 Widget
Figma のロゴは https://www.ﬁgma.com/ja-jp/using-the-ﬁgma-brand/ から引用
Flutter のロゴは https://ﬂutter.dev/brand から引用
Widgetbook のロゴは https://pub.dev/packages/widgetbook から引用
Addon
6


# Page. 7

![Page Image](https://bcdn.docswell.com/page/57G1D1W5EL.jpg)

Omiai で発生した
「収まらない」事象の紹介
7


# Page. 8

![Page Image](https://bcdn.docswell.com/page/4EQD1D3LJP.jpg)

お相手を探す画面が収まらない
8


# Page. 9

![Page Image](https://bcdn.docswell.com/page/KJ4ZRZ1571.jpg)

小さい端末で、お相手探しにおいて重要である居住地が省略される
iPhone SE
第3世代
iPhone SE
第1世代
収まる
収まらない
収まらなければ
…で省略で実装していた
9


# Page. 10

![Page Image](https://bcdn.docswell.com/page/LE1RQRG2EG.jpg)

縦方向に収まらない
普通の端末
小さい端末
収まらない
ボタンと被って
読めなくなった
10


# Page. 11

![Page Image](https://bcdn.docswell.com/page/GEW1M1K272.jpg)

事象の深掘り：小さい端末とは？
画面の論理ピクセルが小さい
画面密度に関わらず、一定の物理サ
イズ感を保つための抽象化された単
位
iPhone SE
第3世代
iPhone SE
第1世代
横幅 375
論理ピクセル
横幅 320
論理ピクセル
縦幅 667
論理ピクセル
縦幅 568
論理ピクセル
11


# Page. 12

![Page Image](https://bcdn.docswell.com/page/47ZPQPZ4E3.jpg)

ユーザはどのくらい小さい端末を使っているか
横幅 320 論理ピクセル
●
●
iPhone SE 第1世代
Unihertz Jellyシリーズ
ごく少数
横幅 360 論理ピクセル
●
●
●
arrows We2
Galaxy S24
OPPO A38
普通にある
12


# Page. 13

![Page Image](https://bcdn.docswell.com/page/YJ6M6MZG7V.jpg)

本体設定で表示を大きくすると横幅論理ピクセルが320になる
横幅 320
論理ピクセル
収まらない
13


# Page. 14

![Page Image](https://bcdn.docswell.com/page/GJ5Z6ZWXE4.jpg)

本体設定で文字を大きくできる
文字サイズ
文字サイズ
3.12 倍
2倍
収まらない
14


# Page. 15

![Page Image](https://bcdn.docswell.com/page/9E2RMRQQJR.jpg)

「収まらない」事象に対して
どのように対応するか
15


# Page. 16

![Page Image](https://bcdn.docswell.com/page/D7YDXDWY7M.jpg)

「収まらない」に対応した
仕様を作る
16


# Page. 17

![Page Image](https://bcdn.docswell.com/page/VEN6169RE8.jpg)

「収まらない」に対応した仕様の例
改行できるようにする
その分、お相手ユニットの縦幅が増える
17


# Page. 18

![Page Image](https://bcdn.docswell.com/page/Y79L5L2ZJ3.jpg)

「収まらない」に対応した仕様の呼び方
画面が狭い
本体設定で
文字が大きい
収まらない
●
●
対応する仕様
●
厳密にいうと「レスポンシブ」は画面サイズの
変化にレイアウトが応答することを指す
本体設定で文字を大きくすることへの対応は
アクセシビリティ対応と呼ぶのが正しい
厳密さより分かりやすさを重視
レスポンシブ仕様
18


# Page. 19

![Page Image](https://bcdn.docswell.com/page/G78XYXMYED.jpg)

レスポンシブ仕様を作る上での
課題
19


# Page. 20

![Page Image](https://bcdn.docswell.com/page/L7L84839JR.jpg)

仮にレスポンシブ仕様の作成とチーム内の共有を実装者任せにする
画面全体の Figma
PdM
実装者
デザイナー
レスポンシブ仕様作成
おまかせ
仕様の共有方法
決まっていない
20


# Page. 21

![Page Image](https://bcdn.docswell.com/page/4EM6K6DV7W.jpg)

実装者が自らの裁量でレスポンシブ仕様を決めた結果
仕様A
収まらない時は
… で省略
仕様B
改行できるようにする
その分、写真の
縦幅を減らす
21


# Page. 22

![Page Image](https://bcdn.docswell.com/page/PERPXP4W79.jpg)

なぜ写真の縦幅が減るか
SliverGrid をシンプルに
使うとこの仕様になる
CustomScrollView(
slivers: [
SliverGrid(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
mainAxisExtent: 230, // セルの縦幅は固定
),
delegate: SliverChildBuilderDelegate(
(context, index) =&gt; MemberGridUnit(member: members[index]),
childCount: members.length,
) // 以下略
実装都合
プロダクト事情でない
相談なし
22


# Page. 23

![Page Image](https://bcdn.docswell.com/page/P7X3632VEX.jpg)

その後の工程で起こること
QAエンジニアによる検証
PdMによる受け入れテスト
写真は大事なので
面積を減らさないでほしい
この仕様で
合っていますか？
対応工数
手戻り
23


# Page. 24

![Page Image](https://bcdn.docswell.com/page/37KY1YM5ED.jpg)

リリース後に起こること
お相手探しにおいて重要情報である居住地が分からない
コア体験の毀損
問い合わせ発生
信用を失う
修正リリース
手戻り
24


# Page. 25

![Page Image](https://bcdn.docswell.com/page/LJ39Q9Y1J5.jpg)

AI で実装は速くなったが
全体としてあまり速くなっていない
AI を活用して生産性を上げよう
実装
リリース後
不具合対応
検証
実装は速くなったが...
実装
検証
リリース後
不具合対応
全体としてはあまり速くなっていない😢
25


# Page. 26

![Page Image](https://bcdn.docswell.com/page/8JDG9G5KJG.jpg)

レスポンシブ仕様の共有が大事な理由
●
●
「収まらないときに何を残すか」はプロダクトの判断
PdM は以下の観点で総合的に判断して仕様を決定している
○ プロダクト戦略
○ KPI
○ サポートに寄せられた意見
○ 法令
何を残すかは PdM
が最終決定する
26


# Page. 27

![Page Image](https://bcdn.docswell.com/page/VEP3Z3G378.jpg)

レスポンシブ仕様を作る上での課題
いつ決めるかが決まっていない
27


# Page. 28

![Page Image](https://bcdn.docswell.com/page/27V4W46NEQ.jpg)

対応
プロジェクト工程の初期段階で仕様を作り
チーム全体の合意とする
PdM
エンジニア
デザイナー
要求
システム
要件定義
正式
デザイン
ワイヤー
フレーム
レスポンシブ仕様
●
●
●
●
●
●
●
実装
検証
受け入れテスト
リリース
システム監視
効果検証
トラブル対応
チーム全体合意
28


# Page. 29

![Page Image](https://bcdn.docswell.com/page/5JG1D1N57L.jpg)

「収まらない」問題の発見方法
スクロール
できる
有限
スクロール
できない
有限
無限
有限
29


# Page. 30

![Page Image](https://bcdn.docswell.com/page/47QD1DQLEP.jpg)

次の話
いつ決めるかは分かった
どのように表現して共有するか
30


# Page. 31

![Page Image](https://bcdn.docswell.com/page/KE4ZRZN5J1.jpg)

Figma を活用した
レスポンシブ仕様の
表現方法
31


# Page. 32

![Page Image](https://bcdn.docswell.com/page/L71RQR527G.jpg)

Figma はチームで共有できるデザインキャンバス
PdM
デザイナー
エンジニア
QA
Figma のロゴは https://www.ﬁgma.com/ja-jp/using-the-ﬁgma-brand/ から引用
チームの
共通認識
32


# Page. 33

![Page Image](https://bcdn.docswell.com/page/G7W1M152J2.jpg)

Figma でレスポンシブ仕様を表現する
Auto Layout
の活用
コメント
で説明
33


# Page. 34

![Page Image](https://bcdn.docswell.com/page/4JZPQPN473.jpg)

前提：Figma のシート
今回紹介する
Figma ファイルの編集は
フルシートが前提
無料のスタータープランはフルシートだが作成・共有でき
るファイル数に厳しい制限がある
料金表は https://www.ﬁgma.com/ja-jp/pricing/ より引用
34


# Page. 35

![Page Image](https://bcdn.docswell.com/page/YE6M6M8GJV.jpg)

Auto Layout を活用して
レスポンシブ仕様を表現
35


# Page. 36

![Page Image](https://bcdn.docswell.com/page/GE5Z6Z9X74.jpg)

前提：Figma の基本的な使い方
Frame を貼る
その中に図形や画像、
テキストなどを配置
36


# Page. 37

![Page Image](https://bcdn.docswell.com/page/972RMR2QER.jpg)

デフォルトは絶対位置に配置
左上からの
座標で配置
大きさ固定
Frame を
狭くすると
要素が Frame からはみ出る
レスポンシブ仕様を
表現できない
37


# Page. 38

![Page Image](https://bcdn.docswell.com/page/DJYDXDYYJM.jpg)

そこで Auto Layout を活用
Freeform
Horizontal
レスポンシブ仕様を
表現できる
38


# Page. 39

![Page Image](https://bcdn.docswell.com/page/V7N616PR78.jpg)

Auto Layout 活用詳細
Width
● Fixed width (固定幅)
● Hug contents (コンテンツ幅に合わせる)
● Fill container (親 Frame に合わせて広げる)
○ Flutter の Expanded Widget に相当
Height
● Fixed height
● Hug contents
○ 改行に合わせた
縦幅
● Fill container
親 Frame の縦幅にも Hug
contents を設定
39


# Page. 40

![Page Image](https://bcdn.docswell.com/page/YJ9L5L3ZE3.jpg)

Auto Layout の Fill と Hug のイメージ
アイコンは
固定サイズ
Hug
= 抱きしめる
= 要素に合わせた大きさ
Fill = 満たす
40


# Page. 41

![Page Image](https://bcdn.docswell.com/page/GJ8XYXLY7D.jpg)

おすすめ Figma 教材 (日本語)
https://www.ﬁgma.com/community/
ﬁle/1228577958737472070
https://www.ﬁgma.com/community/
ﬁle/1208893106652767526
41


# Page. 42

![Page Image](https://bcdn.docswell.com/page/LJL848L9ER.jpg)

Figma Agents に教えてもらう
42


# Page. 43

![Page Image](https://bcdn.docswell.com/page/47M6K6MVJW.jpg)

コメントで
レスポンシブ仕様を表現
43


# Page. 44

![Page Image](https://bcdn.docswell.com/page/P7RPXPVWJ9.jpg)

Auto Layout では表現できないレスポンシブ仕様の例
通常縦幅の端末
縦幅が狭い端末
写真は正方形
ここまでは
下部ボタンに
隠れて良い
プロフィール情
報が下部ボタン
に隠れるなら
ば、写真の縦幅
を減らす
プロフィール情報
分のスペース確
保
写真の面積が減るのはメンバーユニットの件と
矛盾する判断だが、他に手段が無く、 PdM によ
る総合的な判断に基づく仕様
44


# Page. 45

![Page Image](https://bcdn.docswell.com/page/PJX363ZV7X.jpg)

Figma の Auto Layout では表現できない
親フレームの
横幅に合わせる
縦横比を
維持する
収まらないから縦横比を崩す機能は無い
コメントで表現
45


# Page. 46

![Page Image](https://bcdn.docswell.com/page/3JKY1Y857D.jpg)

Figma で仕様を表現するフォーマット - 画面レイアウトをコンポーネントに分解
画面全体
お相手カード
AppBar
もらったいいね数
お相手プロフィール
ログインステータス
年齢と都道府県
メイン写真
プロフィール項目
お相手カード
写真一覧
ひとつのコンポーネント
お相手プロフィール
下部ボタン
もっと見る
ひとつの Widget クラス
46


# Page. 47

![Page Image](https://bcdn.docswell.com/page/LE39Q921E5.jpg)

Figma で仕様を表現するフォーマット - アプリ仕様の例
背景
● Omiai は最大4枚の
プロフィール写真を
登録できる
お相手のすべての
写真のサムネイル
をクロップで表示す
る
メイン写真
サムネイルをクリック
メイン写真がクリックされた
サムネイルの写真となる
47


# Page. 48

![Page Image](https://bcdn.docswell.com/page/8EDG9GZKEG.jpg)

Figma で仕様を表現するフォーマット
48


# Page. 49

![Page Image](https://bcdn.docswell.com/page/V7P3Z3D3J8.jpg)

表示仕様にレスポンシブ仕様も書く
画面全体
● お相手カード と下部ボタ
ンは重ねる
● お相手カード の最大縦幅
は、お相手プロフィール
が下部ボタン に被らない
ところまでとする
49


# Page. 50

![Page Image](https://bcdn.docswell.com/page/2JV4W41N7Q.jpg)

表示仕様にレスポンシブ仕様も書く
メイン写真
● お相手のプロフィール写
真の1枚目を正方形でク
ロップ表示する
● 親のお相手カード が収ま
らない時は、正方形を崩
して、縦に縮める
50


# Page. 51

![Page Image](https://bcdn.docswell.com/page/5EG1D125JL.jpg)

Figma の Auto Layoutで
表現できても
コメントで
レスポンシブ仕様を書く
51


# Page. 52

![Page Image](https://bcdn.docswell.com/page/4JQD1DPL7P.jpg)

Figma で表現できるレスポンシブ仕様の例
マイベスト(個人的トップ3で価値観を表現)
最大2行
収まらない時は終端 …で省略
本体設定で文字を大きくしたケース
52


# Page. 53

![Page Image](https://bcdn.docswell.com/page/K74ZRZY5E1.jpg)

Figma でテキストの最大行数と収まらない時の...を表現
収まらない時の終端...
を有効
最大行数
縦幅を Hug に設定
53


# Page. 54

![Page Image](https://bcdn.docswell.com/page/LJ1RQR62JG.jpg)

そこまで Figma に精通してなくても
コメントによる説明で目的は果たせる
● 最大2行で表示する
● テキストが収まらない時
は終端...で省略する
チームの
共通認識
54


# Page. 55

![Page Image](https://bcdn.docswell.com/page/GJW1M1W2E2.jpg)

補足
Figma と AI コーディングエージェント
55


# Page. 56

![Page Image](https://bcdn.docswell.com/page/4EZPQP54J3.jpg)

Figma は AI の入力
Figma
MCP
AIコーディング
エージェント
Figma のロゴは https://www.ﬁgma.com/ja-jp/using-the-ﬁgma-brand/ から引用
MCP のロゴは https://modelcontextprotocol.io/ から引用
56


# Page. 57

![Page Image](https://bcdn.docswell.com/page/Y76M6M9GEV.jpg)

Figma で作ったデザインを AI で自動実装
●
●
AI コーディングエー
ジェント
Figma MCP
レスポンシブ
仕様対応
Figma のロゴは https://www.ﬁgma.com/ja-jp/using-the-ﬁgma-brand/ から引用
Flutter のロゴは https://ﬂutter.dev/brand から引用
57


# Page. 58

![Page Image](https://bcdn.docswell.com/page/G75Z6ZNXJ4.jpg)

レスポンシブ仕様を実装するための
各種 Widget
58


# Page. 59

![Page Image](https://bcdn.docswell.com/page/9J2RMR5Q7R.jpg)

AI 時代に Widget を学ぶ意義
AI が書くなら、Widget は知らなくてもいいのでは？
要件定義
の観点
Figma 整備
の観点
59


# Page. 60

![Page Image](https://bcdn.docswell.com/page/DEYDXDKYEM.jpg)

AI 時代に Widget を学ぶ意義
要件定義の観点
「収まらない」ときの選択肢を提
案できる
本人確認済みバッジは
都道府県が収まらない
時は非表示
Flutter の Widget を知っているから提
案できる。要望に即答できる。
60


# Page. 61

![Page Image](https://bcdn.docswell.com/page/VJN616RRJ8.jpg)

AI 時代に Widget を学ぶ意義
Figma 整備の観点
●
●
●
AI はほとんど間違えない
ただし入力には忠実
Figma の設定やコメントが抜けて
いると、意図どおりに実装されない
●
●
目的を
維持できる
崩れたときに AI に任せると、直る
のはコードだけで、Figma は抜け
たまま
Widget を知っていると、コードから
Figma の抜けに気づき、 Figma を
直せる
チームの
共通認識
AI の入力
61


# Page. 62

![Page Image](https://bcdn.docswell.com/page/YE9L5LMZ73.jpg)

どう並べるか
Row と Column
横並びの Row
縦並びの Column
62


# Page. 63

![Page Image](https://bcdn.docswell.com/page/GE8XYX1YJD.jpg)

どのように満たすか
Expanded と Flexible
残りすべてを満たす Expanded
必要な分だけ満たす Flexible
まだ余裕あり
固定幅
必要分
限界まで広がり
改行できる
どちらも ﬂex という重みパラメータがあり、複数あれば、その重さで残りを分け合う
63


# Page. 64

![Page Image](https://bcdn.docswell.com/page/LEL848Q97R.jpg)

縦方向に逃がす
Wrap と OverﬂowBar
収まらないならば改行の Wrap
収まらないならば縦並べに切り替える
OverﬂowBar
収まらないとき
direction プロパティで縦並びも可能
64


# Page. 65

![Page Image](https://bcdn.docswell.com/page/4JM6K61VEW.jpg)

親のサイズを受け取ってからレイアウトを作る
LayoutBuilder
TextPainter で Widget を設置せず計測
親の横幅
&lt;
アイコン横幅 + テキスト横幅 + アイコン横幅
収まらない
アイコン非表示
65


# Page. 66

![Page Image](https://bcdn.docswell.com/page/PJRPXPLWE9.jpg)

Widgetbook を活用した
レスポンシブ仕様の実装確認
66


# Page. 67

![Page Image](https://bcdn.docswell.com/page/PEX363WVJX.jpg)

Widgetbook とは
アプリから独立して画面や Widget を開発、確認できるサンドボックス
アプリをスマホにインストールしなくても、手元の PCのブラウザやデスクトップアプリで確認できる
67


# Page. 68

![Page Image](https://bcdn.docswell.com/page/3EKY1YV5JD.jpg)

多様な Widget 状態を Knob で再現
Knob
表示に反映
実際にアプリを操作
して状態を再現させ
なくて良い
68


# Page. 69

![Page Image](https://bcdn.docswell.com/page/L739Q9M175.jpg)

便利な Addon を提供 - Viewport Addon
Viewport Addon
横幅320
横幅360
横幅375
多様な
画面サイズを
再現
69


# Page. 70

![Page Image](https://bcdn.docswell.com/page/87DG9G6K7G.jpg)

便利な Addon を提供 - TextScale Addon
TextScale Addon
多様な
文字サイズを
再現
70


# Page. 71

![Page Image](https://bcdn.docswell.com/page/VJP3Z3Y3E8.jpg)

Widgetbook を活用したレスポンシブ仕様の実装確認のまとめ
レイアウト状態
Widget
画面
文字サイズ
バリエーション
状態
サイズ
設定
Widgetbook を使えば、手元の PC で確認できる
71


# Page. 72

![Page Image](https://bcdn.docswell.com/page/2EV4W4GNJQ.jpg)

まとめ
72


# Page. 73

![Page Image](https://bcdn.docswell.com/page/57G1D185EL.jpg)

事象と対応
画面が小さい端末で表示できない
本体設定で表示、文字を大きくできる
レスポンシブ仕様を作る
73


# Page. 74

![Page Image](https://bcdn.docswell.com/page/4EQD1D9LJP.jpg)

レスポンシブ仕様をいつ作るか
要求
ワイヤー
フレーム
システム
要件定義
収まらない場所を
特定
正式
デザイン
レスポンシブ仕様
チーム全体合意
74


# Page. 75

![Page Image](https://bcdn.docswell.com/page/KJ4ZRZX571.jpg)

レスポンシブ仕様の表現、実装、動作確認
仕様の表現
実装
動作確認
Widgetbook
●
●
Auto Layout
コメント
チームの
共通認識
AI の入力
●
●
●
●
●
Expanded
Flexible
Wrap
OverﬂowBar
LayoutBuilder
Figma のロゴは https://www.ﬁgma.com/ja-jp/using-the-ﬁgma-brand/ から引用
Flutter のロゴは https://ﬂutter.dev/brand から引用
Widgetbook のロゴは https://pub.dev/packages/widgetbook から引用
●
●
●
Knob
Viewport Addon
TextScale Addon
75


# Page. 76

![Page Image](https://bcdn.docswell.com/page/LE1RQRN2EG.jpg)

一番伝えたいこと
「収まらない」を仕様にする
76


# Page. 77

![Page Image](https://bcdn.docswell.com/page/GEW1M14272.jpg)

「収まらない」を仕様にしないと...
AI で速くはなったが ...
要件定義
実装
検証
リリース
レスポンシブ仕様を
定めない
担当者任せで
ばらつく
小さい端末で表示されない
そもそも仕様は？
大事な情報な
のに読めない
手戻り
トラブル対応
77


# Page. 78

![Page Image](https://bcdn.docswell.com/page/47ZPQP24E3.jpg)

「収まらない」を仕様にする
AI で作れる
要件定義
実装
レスポンシブ仕様を
決める
属人性なく
仕様通りに実装
チーム全体合意
検証
リリース
小さい端末でも
仕様通りと確認
小さい端末だけ
ど大事な情報
は読める
手戻りなし
78


# Page. 79

![Page Image](https://bcdn.docswell.com/page/YJ6M6MVG7V.jpg)

まとめ
「収まらない」を仕様にできるチームと仕組みを作る
手戻りなし
AI 時代のスピードで価値を届ける
79


# Page. 80

![Page Image](https://bcdn.docswell.com/page/GJ5Z6ZDXE4.jpg)

ありがとうございました
80


# Page. 81

![Page Image](https://bcdn.docswell.com/page/LE39Q9M4E5.jpg)

謝辞
●
●
発表内容への助言
○ 株式会社Omiai
■ VPoE 渡邊さん
■ エンジニア 井櫻さん
プロポーザル提出のきっかけ
○ 株式会社Omiai
■ PdM 小林さん
■ デザイナー 大嶺さん
●
●
準備時間の捻出
○ 妻
○ 妻のご家族
日々の癒やし
○ 6月に生まれた息子
81