From 2d4816b945504b46dc0daa1a0e3231b81597b32d Mon Sep 17 00:00:00 2001
From: umekita <umekita@jig.jp>
Date: Fri, 14 Aug 2026 22:50:05 +0900
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20UI=E3=83=87=E3=82=B6=E3=82=A4?=
 =?UTF-8?q?=E3=83=B3=E3=82=B9=E3=83=A9=E3=82=A4=E3=83=89=E3=82=92=E5=82=99?=
 =?UTF-8?q?=E5=93=81=E8=B2=B8=E5=87=BA=E3=82=A2=E3=83=97=E3=83=AA=E3=81=AE?=
 =?UTF-8?q?=E9=A1=8C=E6=9D=90=E3=81=A7=E7=B5=84=E3=81=BF=E7=9B=B4=E3=81=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

スライドだけ見て復習できるように、章の結論を図の中に入れた。

- ハンズオンの題材を備品貸出アプリにする
  ToDoアプリは完成形を知っている学生が多く、教える前に描かせても
  正解を描いてしまうため
- 図をすべて手書きSVGに差し替える（元資料のPNGへの参照をなくす）
- 章タイトルを日常語にして、実務の呼び方を併記する
  3.1 モノを決める（オブジェクト抽出）など
- スケッチブックを使うハンズオンを3回にする
- 発表台本を design/SCRIPT.md に分離する

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 design/SCRIPT.md                     | 1014 ++++++++++++++++++++++++++
 design/imgs/fig-action-place.svg     |   66 ++
 design/imgs/fig-answer.svg           |   64 ++
 design/imgs/fig-bridge.svg           |   24 +
 design/imgs/fig-collection.svg       |   40 +
 design/imgs/fig-compare.svg          |   99 +++
 design/imgs/fig-extract-demo.svg     |   41 ++
 design/imgs/fig-flow-step1.svg       |   32 +
 design/imgs/fig-flow-step2.svg       |   32 +
 design/imgs/fig-flow-step3.svg       |   32 +
 design/imgs/fig-flow.svg             |   45 ++
 design/imgs/fig-interface.svg        |   32 +
 design/imgs/fig-item-navigation.svg  |   19 +
 design/imgs/fig-item-object.svg      |   24 +
 design/imgs/fig-layout-list.svg      |   32 +
 design/imgs/fig-layout-single.svg    |   40 +
 design/imgs/fig-object-to-screen.svg |   62 ++
 design/imgs/fig-single.svg           |   24 +
 design/imgs/fig-summary.svg          |   78 ++
 design/imgs/fig-tap-a.svg            |   86 +++
 design/imgs/fig-tap-b.svg            |   88 +++
 design/imgs/fig-ui-vs-visual.svg     |   40 +
 design/imgs/fig-ui.svg               |   42 ++
 design/imgs/fig-way-a.svg            |   29 +
 design/slide.md                      |  574 ++++++++++-----
 25 files changed, 2488 insertions(+), 171 deletions(-)
 create mode 100644 design/SCRIPT.md
 create mode 100644 design/imgs/fig-action-place.svg
 create mode 100644 design/imgs/fig-answer.svg
 create mode 100644 design/imgs/fig-bridge.svg
 create mode 100644 design/imgs/fig-collection.svg
 create mode 100644 design/imgs/fig-compare.svg
 create mode 100644 design/imgs/fig-extract-demo.svg
 create mode 100644 design/imgs/fig-flow-step1.svg
 create mode 100644 design/imgs/fig-flow-step2.svg
 create mode 100644 design/imgs/fig-flow-step3.svg
 create mode 100644 design/imgs/fig-flow.svg
 create mode 100644 design/imgs/fig-interface.svg
 create mode 100644 design/imgs/fig-item-navigation.svg
 create mode 100644 design/imgs/fig-item-object.svg
 create mode 100644 design/imgs/fig-layout-list.svg
 create mode 100644 design/imgs/fig-layout-single.svg
 create mode 100644 design/imgs/fig-object-to-screen.svg
 create mode 100644 design/imgs/fig-single.svg
 create mode 100644 design/imgs/fig-summary.svg
 create mode 100644 design/imgs/fig-tap-a.svg
 create mode 100644 design/imgs/fig-tap-b.svg
 create mode 100644 design/imgs/fig-ui-vs-visual.svg
 create mode 100644 design/imgs/fig-ui.svg
 create mode 100644 design/imgs/fig-way-a.svg

diff --git a/design/SCRIPT.md b/design/SCRIPT.md
new file mode 100644
index 00000000..018cf258
--- /dev/null
+++ b/design/SCRIPT.md
@@ -0,0 +1,1014 @@
+# 使いやすいUIデザイン｜発表台本
+
+`design/slide.md` から発表メモを外して、こちらにまとめたもの。
+スライドを送りながらこのファイルを見て話す。
+
+各節の見出しは、対応するスライドの見出し。
+【X分】は目安の時間、`・` から始まる行は進め方の注意。
+
+---
+
+## 1. 使いやすいUIデザイン
+
+【0.5分】
+
+＜台本＞
+改めまして、こんにちは。うめです。
+これから1時間、使いやすいUIデザインの話をします。
+
+・自己紹介は短く。ここは巻いてよい。
+
+---
+
+## 2. この時間の目標
+
+【2分】この1時間の結論。まずこれを言ってから中身に入る。
+
+＜台本＞
+このあとみなさんは、チームで自分たちのアプリを作ります。
+そのとき「どんな画面にする？」を必ず決めることになります。
+今日はその考え方を持って帰ってもらう時間です。
+
+今日は2回、スケッチブックに絵を描いてもらいます。
+と言っても、絵が描けなくても大丈夫です。四角と線だけで足ります。
+色や形をきれいにする話は、最後の3分しかやりません。
+
+・【重要】「絵が描けなくても大丈夫」を言う唯一の場所。省略しない。
+  デザインは「センスの有無」に見えるので、身構える学生が必ず出る。
+・スケッチブックを使うことを、ここで予告しておく。
+  急に「描いてください」と言われると身構えるので、先に言って慣らす。
+・「色と形の話は最後の3分だけ」と先に言っておく。
+  第1章でビジュアルデザインを切り離すので、ここで予告しないと
+  第4章に入ったとき「やらないって言ったのに」になる。
+・コードは1行も書かない、当てません、もここで口にする。
+
+---
+
+## 3. 今日は4本立て
+
+【1.5分】
+
+＜台本＞
+今日はこの4本立てで進めます。
+2番でいきなり手を動かしてもらいます。まだ何も教えていない状態で描きます。
+それから3番で、ちゃんとした作り方を学んで、もう一度描きます。
+
+・【重要】「教える前に描かせる」という進め方を、ここで宣言しておく。
+  言っておかないと、2番のハンズオンで「まだ習ってないのに」と不安になる。
+  できなくていい、それが狙いだ、と先に伝える。
+・章が変わるたびに、この4つのどこにいるかを言うと迷子が出ない。
+
+---
+
+## 4. 1. UIとは
+
+【0.3分】ここから8分。
+
+＜台本＞
+まず、UIとは何かを揃えておきます。
+
+・章扉は速く抜ける。遅れているならここで巻く。
+・第2章・第3章と同じ形の扉にしてある。
+  章の切れ目を同じ見た目で示すと、いま何章にいるかが分かる。
+
+---
+
+## 5. 「UI ＝ 見た目」<br>**ではない**
+
+【1分】第1章の入口。まず思い込みを名指しで外す。
+
+＜台本＞
+はじめに、ひとつだけ外しておきたいことがあります。
+
+UIと聞くと、たぶん色とか形とか、
+きれいな見た目のことを思い浮かべますよね。
+
+でも、UIは見た目のことではありません。
+じゃあ何なのか。次のページで見てみます。
+
+・【重要】否定から入る1枚。「デザイン＝センスのある人がやる見た目の話」
+  という思い込みを持ったまま聞くと、このあとの話が全部
+  「自分には関係ない話」に聞こえてしまう。
+・ここでは答えを言わない。次の1枚への引きにする。
+・図は置いていない。文字だけの1枚を挟むと、逆に強く残る。
+・挙手を取ってもよい：「色や形だと思っていた人？」
+  ただし当てないと約束しているので、手を挙げさせるだけにする。
+
+---
+
+## 6. UIデザインと<br>ビジュアルデザインは別
+
+【1.5分】「見た目ではない」の理由。見た目の話には別の名前があると示す。
+
+＜台本＞
+では、さっきの色や形の話はどこへ行ったのか。
+右のほうです。色や形、フォントを整える話をビジュアルデザインといいます。
+見た目はビジュアルデザインの仕事で、UIデザインとは別なんです。
+
+今日のメインは左です。何を、どこに置くか。骨組みのほうです。
+だから絵が描けなくても大丈夫。四角と線だけで足ります。
+
+右のビジュアルデザインは、最後に3分だけやります。
+やらないわけではなくて、順番があとなだけです。
+
+・【重要】前ページの否定（見た目ではない）の受け皿がこの1枚。
+  「じゃあ見た目の話は何なのか」に名前を与えてから、UIの定義に進む。
+・【重要】ここで第4章を予告する。予告しないと第4章で矛盾する。
+・左の図は色も飾りもない。これがこのあと描いてもらうもの。
+  ここでは名前を出さない（3.3でワイヤーフレームとして定義する）。
+
+---
+
+## 7. **UI** ＝ **User Interface**
+
+【1.5分】ここでようやくUIの定義。前2枚で外堀を埋めてある。
+
+＜台本＞
+では、UIとは何か。言葉から確認します。
+UIは User Interface の略です。
+インターフェースというのは、つなぎ目という意味の言葉です。
+
+図を見てください。左がみなさん、右がサービス。
+アプリでも、Webサイトでも、駅の券売機でも同じです。
+そのあいだにあるのがUIです。
+
+ボタンを押す、文字を読む。
+やりとりは、ぜんぶここを通ります。
+
+だからUIで大事なのは、きれいかどうかではありません。
+迷わず押せるか、入力しやすいか。ちゃんと使えるかどうかです。
+
+今日はこのうち、アプリの画面を扱います。
+
+・「接点」「境界面」という訳語のまま止まらない。
+  図で「あいだにある」と見せてから、やりとりが通る場所だと言う。
+・【重要】「アプリのあいだ」とは言わない。UIはアプリに限らず、
+  券売機・ATM・リモコン・蛇口もUI。定義を狭めない。
+  図の右にPCとスマホを並べてあるのも、1つに限らないと示すため。
+・【重要】そのうえで「今日はアプリの画面を扱う」と範囲を絞る。
+  定義は広く、扱う範囲は狭い。この2段を混ぜない。
+・ここで「きれいさではなく、使えるかどうか」を1回言っておく。
+  第4章で見た目の話をするときに、これが効いてくる。
+・聞かれたら：券売機も蛇口もUIです。押すところ、ひねるところが
+  ユーザーとの接点だから。今日はアプリに絞って話します。
+
+---
+
+## 8. その**あいだ**にあるのは、<br>この**2種類**
+
+【2分】第1章の結論。今日ずっと使う2つの言葉をここで決める。
+
+＜台本＞
+では、そのあいだには何があるのか。ここが今日の答えです。
+2種類しかありません。
+
+1つめ、見せるもの。文字、リスト、画像。
+アプリから情報を受け取るためのものです。読むだけで、さわれません。
+
+2つめ、操作するもの。ボタン、チェックボックス、入力欄。
+アプリに指示を出すためのものです。さわると、中身が変わります。
+
+みなさんが知っているUIの部品は、ぜんぶこのどちらかです。
+新しい部品を見たときも、「これはどっちだ」と考えれば読めます。
+
+だから、UIデザインでやることはこうなります。
+この2種類を、どこに置くか決める。それだけです。
+
+・【重要】章タイトル「1. UIとは」の答えがこの1枚。ここまで
+  「見た目ではない」「見た目の話はビジュアルデザイン」
+  「UIはユーザーとサービスのあいだにあるもの」と積んできた。
+・【重要】見出しの「その あいだ」は、前ページの
+  「ユーザーとサービスのあいだにあるもの」を受けている。
+  前は「UIの部品は2種類に分けられる」にしていたが、
+  前ページが"位置"の話で終わり、ここが急に"構成"の話になるので
+  繋がらなかった。「あいだ」で受け直すと1本になる。
+  ここは口でも「さっきのあいだですね」と言ってつなぐ。
+・台本の最後で「2種類をどこに置くか決めるのがUIデザイン」と言い切る。
+  第1章を「結局なんだったの」で終わらせないため。
+  ここが6枚目の「何を、どこに置くか」の"何を"の答えにもなっている。
+・【重要】「もの」を付けて名詞で呼ぶ。動詞のまま（見せるか操作するか）だと、
+  "置くもの"の分類だと分かりにくい。
+・【検討済み】この2語は厳密には主語が混ざっている。
+  見せる＝アプリが主語、操作する＝ユーザーが主語。
+  主語を揃える案（見るもの／さわるもの）も検討したが、この呼び方を採った。
+  そのぶん、台本で必ず役割を添えて言う：
+    見せるもの → アプリから情報を受け取るためのもの
+    操作するもの → アプリに指示を出すためのもの
+  世の中の解説もUIの役割を「情報を伝える／指示を受け取る」の2つで説明し、
+  部品の分類も「情報表示系／操作系・入力系」で分けている。
+  ここを口で補えば、呼び方のズレは問題にならない。
+・【重要】「操作する」を選んだ理由は2つ。
+  ①「変える」だと誰が変えるのか曖昧。「操作する」ならユーザーがやることだと分かる。
+  ② 第3章の「アクション」に直結する（アクション＝そのモノにできる操作）。
+・「動かす」は使わない。Webアプリケーション概論が「処理＝動かす」を
+  使っているので、同じインターン内でボタン操作とサーバー処理が混ざる。
+・「表示」も言わない。「見せる」で通す。
+・「境界」「情報のやり取り」のような抽象語は出さない。
+  知っている部品の名前で説明するほうが速い。
+・図の色分けがそのまま意味になっている。グレー＝さわれない、
+  水色＝さわれる。以降ずっとこの色の使い方で通す。
+・この2つが、第3章の「ビュー」と「アクション」になる。
+  ここでは言わず、第3章の入口で回収する。
+
+---
+
+## 9. 2. UIを作ってみる
+
+【0.3分】ここから15分。
+
+＜台本＞
+では、さっそく作ってみましょう。
+
+・速く抜ける。次の仕様スライドとセットで読む。
+
+---
+
+## 10. 備品貸出アプリを考えてみよう！
+
+【5.5分】今日の山場のひとつ。教える前に描かせる。
+仕様の提示（1.5分）とハンズオン（4分）を1枚にまとめてある。
+
+＜台本＞
+では、さっそく作ってみましょう。
+作るのは、備品貸出アプリの、お店が使う画面です。
+みなさんが図書委員になったと思ってください。
+
+仕様はこの4つ。
+備品の一覧を見る、備品の名前と数を見る、借りる、返す。
+
+この仕様で、アプリの画面を描いてみてください。
+スケッチブックに、四角と線だけで大丈夫です。
+何画面になってもいいです。4分とります。
+
+まだ何も教えていないので、正解は分かりません。それでいいです。
+今日はこのあと、みなさんが描いたものを見ながら進めます。
+
+（4分待つ。手が止まっている人がいたら「仕様の言葉を
+  そのままボタンにしてもいいですよ」と1回だけ声をかける）
+
+・【重要】題材を備品貸出アプリにしてある理由。
+  ToDoアプリだと、ほとんどの学生が完成形（ToDoが並ぶ画面）を
+  すでに知っているので、教える前に描かせても正解を描いてしまい、
+  このあとの比較が他人事になる。
+  備品貸出アプリは、名前は知っていても自分で注文したことが
+  ある学生は少ない。だから仕様の言葉をそのままボタンにする人が多くなる。
+・【重要】この題材にした決め手は「一覧に収まる」こと。
+  備品は10〜20個なので、一覧から選んでタップするのが自然。
+  図書室の本で考えたこともあったが、蔵書は数千冊あるので
+  一覧から選べず、実運用もバーコードを読む方式だった。
+  それだと「一覧のチェックを1タップ」が成立しない。
+・【重要】この仕様にはCreateとDeleteがない。料理を増やしたり
+  消したりするのは先生の仕事で、借りる側にはできないから。
+  3.1の最後（属性とアクションの答え）でここを回収する。
+  「仕様にないものは作らない」を教える材料になっている。
+・聞かれたら（注文したことがないので分からない）：
+  それでいい。今日は正解を知らない状態で描いてもらう時間。
+・【重要】仕様とハンズオンを1枚にしてある。描いているあいだ、
+  このスライドを出したままにできる。仕様を見ながら描けるので、
+  「なんだっけ」で手が止まらない。
+・【重要】ここは「教える前に解かせる」設計。教育研究では
+  productive failure / pretesting effect と呼ばれていて、
+  先に自分でやってから教わるほうが、教わってからやるより
+  概念の理解が深くなる。初学者ほど効果が大きい。
+・【重要】そのかわり、直後に必ず答え合わせをする（次の3枚）。
+  やりっぱなしにすると効果が消える。フィードバックは即時が条件。
+・失敗させるのが目的なので、うまく描けなくても絶対に責めない。
+  「できなくて大丈夫」「当てません」は口で言う。
+・4行を読み上げるだけにする。ここで抽出の話はまだしない。
+・この仕様カード（左に線が入った形）は今日何度も出てくる。
+  同じ形で出すことで「またここに戻ってきた」が伝わる。
+・聞かれたら：消す機能は今回入れていません。仕様にないものは作りません。
+・机を回って何人かの絵を見ておく。次のスライドで
+  「たぶんこうなりましたよね」と言うための材料にする。
+  ボタンを並べた人が多いはず。そこを拾う。
+・時間がないときは3分でもよい。ただし0分にはしない。
+  ここを削ると、このあとの比較が全部他人事になる。
+
+---
+
+## 11. 機能から**直接**UIを作ると<br>使いにくい
+
+【2分】ハンズオン①の受け止め。結論だけ言って、
+理由はこのあとの3枚で1つずつ確かめる。
+
+＜台本＞
+みなさんの絵を見せてもらいました。だいたいこうなっていましたよね。
+一覧を見る、名前と数を見る、借りる、返す。仕様の4つがそのままボタンになる。
+
+素直な作り方です。間違いではありません。私も最初はこう描きました。
+ただ、この画面で実際に使ってみると、困ることが出てきます。
+このあと、ひとつずつ確かめます。
+
+・【重要】ここで学生の絵を否定しない。責めるのは「機能から直接作る
+  という作り方」であって、描いた人ではない。「間違いではありません」
+  「私も最初はこう描きました」を必ず口で言う。
+  ここで否定すると、次から手が動かなくなる。
+・【重要】理由はここでは言わない。スライドにも書いていない。
+  次の3枚が答え合わせになっている：
+    次のスライド → 完了までタップが2回かかる
+    3枚あと      → ほぼ同じ画面を5枚も作ることになる
+  先に結論だけ置いて、根拠は自分で数えてもらう順にしてある。
+・実際に何人かの絵を指して「これもそうですね」と拾えるとなおよい。
+・仕様の4行とボタンが1対1になっていることを指で示す。
+  自分の絵と見比べてもらう。
+
+---
+
+## 12. ボタンを並べると**2タップ必要**
+
+【1.5分】自分の絵の問題点に気づいてもらう。
+
+＜台本＞
+では、この画面で「タブレット」を借りてみます。
+
+まず「借りる」を押す。これが1回目。
+すると備品の一覧が出てきます。ここからタブレットを選ぶ。これが2回目。
+押したのは2回。あいだに画面が1つ挟まりました。
+
+自分の絵でも同じことをやってみてください。何回押しますか。
+
+・【重要】黒い丸の数がタップの数。1と2を指でさして数える。
+  「1、2。2回ですね」と声に出すと伝わる。
+・【重要】右の画面が「一覧が出る」。ここが次の「画面5枚」に効く。
+  借りるときも一覧、返すときも一覧、と同じ画面が増えていく。
+・自分の絵で数えてもらうのが効く。手を動かした人だけの体験になる。
+・ここでもまだ「悪い」とは言わない。「2回押す」と数だけ言う。
+・図は2画面だが、押した結果チェックが付く画面はあえて描いていない。
+  次のスライドと画面数を揃えて、バッジの数だけを見比べてもらう。
+
+---
+
+## 13. 備品を並べると**1タップ**
+
+【2分】もう1つの作り方を見せる。画面が1枚で済むことも見せる。
+
+＜台本＞
+別の作り方を見てください。
+ボタンではなく、備品そのものを並べました。
+
+同じことをやってみます。タブレットの行のチェックを押す。以上です。
+黒い丸は1つだけ。さっきは2回押していたものが、1回で終わりました。
+
+しかも画面はこの1枚だけです。さっきは押したあとに一覧が出てきました。
+
+もうひとつ見てください。チェックは貸出中の印です。
+だからもう一度押せば、それが返却になります。
+仕様では別々だった「借りる」と「返す」が、
+同じ場所を押すだけで済んでいます。
+
+・【重要】前のスライドは画面が2枚、こちらは1枚。
+  行き来しながら「丸が2つ」「丸が1つ」と見比べてもらうとよい。
+  画面の枚数もちがうことに、ここで気づく人がいる。
+・【重要】仕様の4つが、この1枚に全部入っている。
+    備品の一覧を見る → 一覧そのもの
+    借りる       → チェックを付ける（黒丸1のところ）
+    返す     → 同じチェックを外す
+    名前と数を見る   → 行の右の「>」を押すと詳細
+  やり方Aは仕様4つのためにボタンが4つ必要だったのに、
+  こちらは借りると返すが1か所で済んでいる。ここを必ず指摘する。
+・行の右の「>」を押すと備品の詳細が開く。詳細ビューは3.2で出てくるので、
+  聞かれたら「次の章で出てきます」と答える。
+・ここでは押す回数の話だけにする。画面数は次のスライドで数える。
+・「こっちを描いた人いますか」と聞いてもよい。いたら必ず拾う。
+
+---
+
+## 14. 同じ画面を**何枚も作らずに済む**
+
+【2.5分】主眼のいちばん大事な1枚。数えられる形で差を見せる。
+
+＜台本＞
+2つを並べます。ちがいは手数だけではありません。
+
+左を見てください。ボタンが4つあると、押した先の画面も4つ必要です。
+そして、そのうち3つは「ほぼ同じ備品の一覧」です。
+借りるときも一覧、返すときも一覧、見るときも一覧。同じ画面が3枚。
+全部で5枚の画面を作ることになります。
+
+右は2枚です。一覧と詳細だけ。
+
+ここで減っているのは、同じ画面の重複です。
+一覧が3枚あっても、中身はほとんど同じでした。
+その3枚が1枚になった、というだけの話です。
+
+画面が少なければいい、という話ではありません。
+1枚に全部詰め込んだら、逆に使いにくくなります。
+同じものを何枚も作らなくて済む、というのがここでの得です。
+直す場所も1か所になります。
+
+なぜこうなるのか。
+右は備品という「モノ」を先に置きました。モノは1種類しかないので、
+それを見せる画面も1枚で足ります。
+左はやることを先に置いたので、やることの数だけ画面が増えました。
+
+・【重要】この「同じ画面がたくさんある」が主眼の説得力の中心。
+  タップ数だけでは「1回か2回かの差ならそんなに大事？」で止まる。
+・【重要】「画面は少ないほどよい」と誤解させないこと。
+  1枚に詰め込めば画面数は減るが、使いにくくなる。
+  ここで減っているのは重複であって、画面数そのものが目的ではない。
+  見出しを「使いやすいほど画面が減る」にしていたことがあるが、
+  一般化しすぎで、詰め込みを肯定して聞こえるので変えた。
+・【重要】「なぜモノ起点だと画面が減るのか」は、上の4行で口頭だけ言う。
+  以前はここに日常のたとえを1枚はさんでいた（コンビニのレジ、
+  お店のメニュー表）。どちらも「たとえのほうが分かりにくい」となったので
+  図はやめた。数の差を見せたこの1枚で足りている。
+  たとえを足したくなったら、まずこの4行を言ってみて、
+  それで足りないかを確かめてから。
+・自分の絵が何画面になったか数えてもらう。
+・左の3枚をあえて同じ形で描いてある。無駄が形で見えるようにするため。
+
+---
+
+## 15. 主役にした**備品**を<br>**オブジェクト**と呼ぶ
+
+【1.5分】今日の1語目。比べて納得したあとに名前を付ける。
+
+＜台本＞
+さっき、備品を主役にしたら画面が2枚で足りました。
+この備品のように、アプリの主役になるものに名前があります。
+オブジェクトといいます。
+
+LINEならトーク。Amazonなら商品。備品貸出なら備品です。
+そのアプリで、ユーザーが扱う主役のことです。
+
+第2章のまとめです。オブジェクトを決めてから、画面を作る。
+と言われても、まだピンと来ないと思います。次で確かめます。
+
+・【重要】プログラミングのオブジェクト指向とは別の話、と必ず言う。
+  クラスや継承の話は出さない。名前が似ているだけ。
+・今日覚えて帰る語は4つ。これが1語目。
+  オブジェクト／属性／アクション／ビュー。
+・LINE・Amazonの例は口頭で足す。スライドには置かない（1枚1メッセージ）。
+・ここで手順の話に入らない。抽象的なままなので、
+  次の1枚でさっきの2画面に結びつけてから3ステップに進む。
+
+---
+
+## 16. **備品**を主役にしたから、<br>画面はこの2つになった
+
+【1.5分】抽象と具体をつなぐ1枚。3ステップに入る前の足場。
+
+＜台本＞
+「オブジェクトを決めてから画面を作る」。
+これ、実はさっきもうやっています。
+
+主役を備品に決めましたよね。だから画面はこうなりました。
+備品が並ぶ一覧と、備品が1つだけ見える詳細。この2つです。
+
+ボタンから考えると5画面になりました。
+でも備品から考えると、備品の見え方が2通りあるだけなので、2画面で済みます。
+
+画面を先に考えるのではなく、主役を先に決める。
+そうすると、画面のほうが決まってくる。これが今日いちばん大事なところです。
+
+・【重要】ここがないと「オブジェクトを決めてから画面を作る」が
+  言葉のままで終わる。やり方Bの2画面と結びつけて、初めて意味が通る。
+・「もうやっている」と言うのが効く。新しいことではなく、
+  さっき自分が見たものの言い換えだと分かる。
+・次の3ステップは、この流れを手順に分けただけだと予告する。
+
+---
+
+## 17. 3. UIデザインの流れ
+
+【1.5分】ここから26分。この図が今日の地図になる。
+
+＜台本＞
+オブジェクトから画面を作るには、この3ステップで進めます。
+
+仕様から始めて、まず1番、オブジェクト抽出。
+仕様に出てくるモノを拾い出します。
+次に2番、ビューとナビゲーション。画面と、画面の行き来を決めます。
+最後に3番、レイアウト。どこに何を置くかを決めます。
+
+大事なのは下の矢印です。1回で決まることはありません。
+行き来しながら決めていくものだと思ってください。
+
+・この図はこのあと3回、小節の扉で出てくる。今どこにいるかを毎回示す。
+・「1回で完成させなくていい」と言うと、完璧を目指して固まる学生がほどける。
+・この章の最後にもう一度スケッチブックを使う、と予告しておく。
+
+---
+
+## 18. **ビュー**はモノが見える場所、<br>**アクション**はモノにできること
+
+【2分】第1章と第3章をつなぐ1枚。ここが今日の骨格。
+
+＜台本＞
+ステップの中身に入る前に、言葉を2つ出しておきます。
+今日いちばん大事な2語です。
+
+ビューは、モノが見える場所です。備品が並んでいるところがビュー。
+アクションは、モノにできることです。借りる、返す、がアクション。
+
+図を見てください。第1章で、画面の部品は2種類だと言いました。
+見せるものと、操作するもの。
+見せるものが集まったところが、ビューです。
+操作するものを押したときに起きることが、アクションです。
+
+つまりこれからやるのは、こういうことです。
+まずオブジェクトを決めて、そのオブジェクトが見えるビューを作り、
+そこにアクションを置く。今日の話は全部これです。
+
+・【重要】見出しを定義そのものにしてある。
+  「部品が集まるとビュー」だと部品と領域でレベルが1段ちがうので、
+  2語が何なのかが伝わらなかった。
+  「モノが見える場所」「モノにできること」なら1行で像が結ぶ。
+・【重要】この1枚がないと、第1章が「前置き」で終わる。
+  「見せる／操作する」がそのまま「ビュー／アクション」になると示すことで、
+  第1章から第3章までが1本の線になる。
+・ここで用語を3つ並べておく（オブジェクト／ビュー／アクション）。
+  属性はこのあと出す。
+・話が迷子になったら、この1枚に戻ってくればよい。
+  黒板やホワイトボードがあれば、この2語だけ書いて残しておくとよい。
+
+---
+
+## 19. 3.1 モノを決める
+
+【1分】1つめのステップ。
+
+＜台本＞
+1番、モノを決めます。
+仕様の中からオブジェクトを拾い出して、書き出す作業です。
+
+実務ではこれを「オブジェクト抽出」と呼びます。
+抽出という言葉は硬いですが、やることは拾い出すだけです。
+
+・【重要】ステップ名は日常語（モノを決める）にしてある。
+  実務の呼び方（オブジェクト抽出）は図の下と口頭で添えるだけ。
+  専門語を見出しにすると、何をするステップなのかが伝わらない。
+・【重要】「抽出」は初学者に急に出すと止まる語。必ず「拾い出す」と言い直す。
+・聞かれたら：UMLのクラス図を知っている人は、あのイメージで合っています。
+  ただ知らなくても困りません。スライドには書かない。
+
+---
+
+## 20. モノには**情報**があり、<br>**できること**がある
+
+【2分】今日の2語目と3語目。次の手順の3つめで使うので、先に出す。
+
+＜台本＞
+モノを1つ思い浮かべてください。たとえば備品です。
+備品には2つのものがあります。
+
+1つは情報です。タイトルとか、終わったかどうか。
+これを属性といいます。
+
+もう1つはできることです。作る、書きかえる。
+これがアクションです。さっき出した言葉と同じものです。
+
+この2つを覚えておいてください。次のスライドで使います。
+
+・【重要】この2語を先に出しておかないと、次の「手順は3つ」の
+  3つめ（属性とアクションに分ける）が言葉だけになって伝わらない。
+  もとは手順のあとに置いていたが、それでは手順が読めなかった。
+・「アクション」は少し前のスライド（ビューとアクション）で出した語。
+  同じものだと分かるように「さっきの」と言う。
+・属性は、世の中の記事や本では「プロパティ」と呼ばれることが多い。
+  Figmaでもこの呼び方をする。聞かれたら同じものだと答える。
+・Deno KV との橋：属性は、KVに入れる値そのもの。
+  set するときに何を入れるかを決める作業が、属性を決める作業。
+
+---
+
+## 21. モノを拾い出す手順は3つ
+
+【1.5分】演習の足場。この3つがこのあとの実演の骨。
+
+＜台本＞
+拾い出す手順は3つです。
+
+1つめ、仕様の名詞に線を引きます。名詞はモノの候補です。
+2つめ、同じ名詞をまとめます。備品が4回出てきたら、それは1つの備品です。
+3つめ、まとめたモノの中を、さっきの属性とアクションに振り分けます。
+
+・実務ではもっと細かい工程（粒度を揃える）があるが、今日は3段に圧縮している。
+・図にせず文字だけにしてある。属性とアクションは前のスライドで
+  説明したばかりなので、ここは3行を読み上げるだけでよい。
+・このあと次の1枚で①②を実演し、③は2枚あとで実演する。
+
+---
+
+## 22. 名詞に線を引くと、<br>**備品**だけが残る
+
+【1.5分】手順①②の実演。講師が実際にやってみせる。
+
+＜台本＞
+では実際にやってみます。仕様の4行に線を引いていきます。
+
+1行目「備品の一覧を見る」。名詞は備品。線を引きます。
+動詞は「見る」。丸で囲みます。
+2行目、名詞は備品、それと名前と数。動詞は「見る」。
+3行目、名詞は備品。動詞は「借りる」。
+4行目も名詞は備品。動詞は「返す」。
+
+線を引いたところを見てください。備品が4回出てきます。
+でも全部同じ備品です。だからまとめると1つ。
+仕様が4行あるのに、モノは1つしかありませんでした。これが手順の2つめです。
+
+丸をつけた動詞は、このあとアクションになります。
+線を引いた「名前」「数」は、属性になります。
+
+・【重要】口だけで済ませず、画面を指しながら1行ずつなぞる。
+・オブジェクトが1つしかないことに驚く学生がいる。それが正しい反応。
+・ここではまだ「見るはアクションにしない」を言わない。
+  アクションの説明が2枚あとなので、先に言うと浮く。
+
+---
+
+## 23. 仕様に出てくる**名詞**を<br>書き出してみよう
+
+【1.5分】手を動かして覚える。実演を見た直後にやる。
+
+＜台本＞
+いま私がやったことを、自分でもやってみてください。
+さっきの仕様に出てくる名詞を、スケッチブックに書き出します。
+仕様は書き写さなくていいです。名詞だけ書いてください。1分とります。
+
+（1分待つ。手が止まっている人には「モノの名前です」と1回だけ言う）
+
+何が出ましたか。備品、名前、数。このあたりですね。
+「一覧」を書いた人、いますか。それは正しい反応です。
+ただ、一覧はモノではなくて、モノが並んでいる場所です。
+それはこのあと3.2で出てきます。
+
+・【重要】実演を見た直後にやる。見ているだけでは手が動かない。
+  ここで1分使うと、このあとのハンズオン③で詰まる人が減る。
+・【重要】「一覧」を書く学生が必ず出る。絶対に否定しない。
+  一覧はこのあとビューになるので、「次で出てきます」と受けて伏線にする。
+  ここで正解／不正解にすると、次から手が止まる。
+・書くのは名詞だけ。仕様の書き写しはさせない。時間がもったいない。
+・仕様はスライドに出したままにできないので（このスライドを出すため）、
+  口頭でもう一度読み上げる。一覧を見る、名前と数を見る、借りる、返す。
+・答え合わせは口頭で30秒。次のスライドのアクションの話に自然につながる。
+
+---
+
+## 24. アクションは<br>**つくる・かえる・けす**
+
+【2分】アクションの中身。「見る」を外す理由をここで回収する。
+
+＜台本＞
+アクションは、基本的にこの3つです。つくる、かえる、けす。
+英語だとCreate、Update、Delete。まとめてCRUDと呼ばれます。
+この英語は覚えなくていいです。名前があることだけ知っておいてください。
+
+ここでひとつ。「見る」はアクションに入れません。
+仕様には「備品の一覧を見る」とあるのに、なぜでしょうか。
+
+さっきみなさんが描いた「見る」ボタンを押したら、何が起きますか。
+一覧が出るだけです。何も変わりません。
+押した先にあるのは画面、つまりビューです。
+だからこれはアクションではなく、ビューのほうなんです。
+
+・【重要】ここで右の図の「見る」ボタンを実際に指す。
+  自分が描いた絵にも「見る」ボタンがあるはずなので、そこを指してもらう。
+・「見る＝ビュー」と言えるのは、2枚前で橋を架けたから。
+  橋がないとこの説明は「なんとなく」で終わる。
+・Deno KV との橋：set が つくる・かえる、delete が けす にほぼ対応する。
+  get と list は画面を出すためのもの。
+
+---
+
+## 25. 備品は、属性3つと<br>アクション2つを持つ
+
+【1.5分】手順3。3ステップ全部の入力になる図。
+
+＜台本＞
+最後に振り分けます。
+
+属性。備品が持っている情報は、名前、数、
+それと借りているかどうか。この3つです。
+
+アクション。借りると、返す。この2つです。
+どちらも既にある備品の状態を書きかえているので、Updateですね。
+
+ここで気づいた人はいますか。
+今回、つくる（Create）とけす（Delete）がありません。
+
+備品を増やしたり消したりするのは、先生の仕事です。
+借りる側にはできません。だから仕様に書いていない。
+仕様にないものは、作らない。ここは徹底してください。
+
+これで右の図ができました。備品というオブジェクトが、
+属性3つとアクション2つを持っている。1番のステップは、これで終わりです。
+
+・この図はこのあと2回出てくる（ハンズオン③の入力と、最後のまとめ）。
+・【重要】CreateとDeleteがないことを、必ず口に出す。
+  「3つ習ったのに2つしかない」と不安になる学生がいるので、
+  仕様にないから作らないのだと言い切る。
+  ここは今日いちばん実務に効く話。作らなくていいものを作らない。
+・「借りる」と「返す」が同じUpdateになるところで手が止まる人がいる。
+  どちらも既にある備品の状態を変えている、と言えば通る。
+・聞かれたら：先生が使う管理アプリなら、そこにはCreateとDeleteがある。
+  誰が使うアプリなのかで、アクションは変わる。
+
+---
+
+## 26. 3.2 画面を決める
+
+【1分】2つめのステップ。
+
+＜台本＞
+2番です。画面を決めます。
+
+さっき出した言葉を使います。
+モノが見える場所がビュー。その行き来がナビゲーションです。
+
+ビューは画面まるごとのこともありますし、画面の一部のこともあります。
+
+・【重要】ステップ名は日常語（画面を決める）にしてある。
+  ビューとナビゲーションは、その中身を指す言葉として括弧で添える。
+・【重要】ビューは「画面」と言い切らない。「見える場所」にしておく。
+  画面と言い切ると、あとの「複数のビューを1つにまとめる」が
+  「複数の画面を1つにする？」になって意味が通らなくなる。
+  ステップ名だけは分かりやすさを取って「画面を決める」にしてある。
+・「画面には2種類ある」という断定もしない。
+  ログイン画面や設定画面を思い浮かべた学生がその場で反例を見つけてしまう。
+・HTML/CSS との橋：ビューはHTMLで作る領域そのもの。
+
+---
+
+## 27. ビューは「**一覧**」と<br>「**詳細**」の2種類
+
+【1.5分】ビューの型。2つを並べて対比で見せる。
+
+＜台本＞
+ビューには型があります。大きく2つです。
+
+左がコレクションビュー。同じオブジェクトを複数ならべたものです。
+LINEのトーク一覧、Amazonの商品一覧。備品貸出なら備品が並んだ一覧です。
+大事なのは「同じオブジェクトが」という部分です。
+なんでも並べれば一覧、ではありません。並んでいるのは全部備品です。
+
+右がシングルビュー。1つのオブジェクトの中身を見せるものです。
+LINEでトークを1つ開いた画面、Amazonで商品を1つ開いたページ。
+さっき決めた属性が、ここに出てきます。名前、数。
+属性が見える場所がシングルビューです。
+
+・「同じオブジェクトを複数」を落とさない。ここを落とすと
+  抽出したオブジェクトとビューの対応が切れる。
+・属性とシングルビューが繋がることを言う。抽出が無駄ではなかったと分かる。
+・この2つで全部の画面を説明しようとしない。型が2つある、で止める。
+
+---
+
+## 28. アクションは、そのモノが<br>見えている**ビュー**に置く
+
+【1.5分】アクションをどこに置くかの原則。理由を与える唯一の場所。
+
+＜台本＞
+ビューが決まったら、アクションをどこに置くかです。
+原則は1つ。そのモノが見えている画面に置く。
+
+一覧を見てください。備品が並んでいます。
+どの行も、どの備品なのかが見えています。
+だから、借りるボタンを一覧に置けます。返すも同じです。
+
+詳細を見てください。こちらも備品が1つ見えています。
+だから、同じ借りるボタンをここにも置けます。
+
+逆に、備品が見えていない画面に借りるボタンがあったらどうなるか。
+何を借りるのか分からないので、押したあとに一覧を出すしかありません。
+それが、さっきの2タップでした。
+
+左の一覧のチェックボックス。あれが「押すだけで終わる」やり方の正体です。
+一覧に備品が見えているから、そこにアクションを置けたわけです。
+
+・【重要】ここで やり方B の1タップを回収する。主眼が原則に繋がる瞬間。
+・【重要】この図には つくる・けす を描いていない。仕様にないから。
+  24枚目で3つ習ったのに2つしか出てこないことと揃えてある。
+  以前の図には「＋」とゴミ箱があったが、仕様と矛盾するので外した。
+・暗記させない。「見えているか」だけ考えれば毎回導ける、と伝える。
+・「見えていないとどうなるか」を必ず言う。原則の裏返しを示すと、
+  なぜその原則なのかが腑に落ちる。
+
+---
+
+## 29. ナビゲーションは<br>ビュー同士の行き来
+
+【1.5分】ビュー同士のつなぎ。備品の具体で見せる。
+
+＜台本＞
+ビューが決まったら、次は行き来です。
+どのビューからどのビューに行けるか。これをナビゲーションといいます。
+
+備品貸出アプリで見てみます。ビューは2つ、一覧と詳細。
+一覧から備品を1つ選ぶと詳細に行く。詳細から戻ると一覧に戻る。
+これが備品貸出アプリのナビゲーションです。
+
+チームで作るアプリはオブジェクトがもっと増えます。
+そのときは、まず行き来を全部書き出してから、要らないものを削ります。
+足りないものを思いつくより、目の前にあるものを消すほうが簡単だからです。
+
+これで2番のステップも終わりです。ビューが2つ、行き来が1本。
+
+・抽象の定義だけの1枚を作らない。必ず備品の図と同時に出す。
+・「呼び出し関係」という硬い言い方はしない。行き来で通す。
+・「全部書き出してから削る」は理由とセットで1行だけ言う。
+  この備品貸出アプリでは実演しない（オブジェクトが1つしかないため）。
+
+---
+
+## 30. 3.3 ならべ方を決める
+
+【1分】3つめのステップ。
+
+＜台本＞
+最後、3番です。ならべ方を決めます。実務ではレイアウトと呼びます。
+ビューの中に、何をどこに置くかを決めます。
+
+描くものをワイヤーフレームといいます。
+色も、影も、フォントもつけません。四角と線だけで、置き場所だけを描く図です。
+まさに、さっきスケッチブックに描いてもらったものです。
+
+ビューの数だけ描きます。備品貸出アプリならビューは2つなので、2枚です。
+
+・【重要】未経験者がいちばん分からない語。定義を1文で置くだけなので削らない。
+・「みなさんがもう描いているものです」と言うと、
+  ハンズオン①がここで意味を持つ。難しいものではないと伝わる。
+
+---
+
+## 31. 画面のならべ方には、<br>決まった型がある
+
+【1分】レイアウトの型。ハンズオン②の直前に見せておく。
+
+＜台本＞
+置き方には型があります。ゼロから考えなくていいです。
+
+一覧のならべ方は、だいたいこの3つ。上から下に並べるリスト、
+格子状のグリッド、地図の上に置くマッピング。備品ならリストが素直です。
+
+詳細のほうも3つ。属性とアクションだけ置くもの、
+関連する別のオブジェクトを少し見せるもの、それを一覧で見せるもの。
+今日の備品貸出は1つめです。
+
+もう1つ大事なルール。アクションは、そのオブジェクトの近くに置いてください。
+一覧の下に「削除」ボタンが1つだけあったら、どれが消えるか分かりません。
+
+・この2枚は Material Design が元ネタ。第4章のデザインシステムで繋げる。
+・「アクションは近くに」はここで1文だけ言う。前の原則の続き。
+・既存アプリを真似ていい、と言っておく。ここで発明しなくていい。
+
+---
+
+## 32. 3ステップで、<br>描き直してみよう
+
+【6分】今日の山場。学んだ手順を通しで使う。
+
+＜台本＞
+では、もう一度描いてもらいます。同じ備品貸出アプリです。
+さっきのページは消さずに、新しいページに描いてください。あとで比べます。
+
+手順は3つでしたね。
+1番、オブジェクトを拾い出す。備品でしたね。属性とアクションも出ています。
+2番、ビューを決める。一覧と詳細の2つでしたね。行き来は1本。
+3番、その2つのレイアウトを描く。アクションを、モノの近くに置く。
+
+6分とります。詰まったら手を挙げてください。
+
+・【重要】ここで初めて、3ステップを通しで使う。
+  部分ごとの演習より、通しでやるほうが実際の場面に持っていける。
+・答えは既に全部スライドに出ている（オブジェクト図・ビュー・型）。
+  思い出せない学生のために、前のスライドに戻れるようにしておく。
+・机を回る。手が止まっている人には「一覧と詳細の2枚です」と言えばよい。
+・【重要】最初の絵を消させない。次のスライドで自分のビフォーアフターを
+  見比べてもらうのが、この講義でいちばん記憶に残る瞬間になる。
+・時間がないときは4分でもよい。ここを削ると講義の出口がなくなる。
+
+---
+
+## 33. 答え: 備品貸出アプリの<br>レイアウト
+
+【1.5分】ハンズオン②の答え合わせ。今日の出口。
+
+＜台本＞
+答えです。左が一覧、右が詳細。2画面できました。
+
+一覧には備品が並んでいて、ボタンを押せば借りられます。
+詳細には名前と数が出ていて、ここからも借りられます。
+
+最初に描いた絵と見比べてみてください。
+画面の数が減っていませんか。ボタンが減っていませんか。
+1時間前の自分より、確実に使いやすいものが描けています。
+
+みなさんの図と形が違っても大丈夫です。
+置き場所の理由が言えれば正解です。
+
+・【重要】ビフォーアフターを必ず見比べさせる。ここが今日の成果。
+  「自分で描いたものが変わった」という体験が、知識を使うものに変える。
+・「形が違っても、理由が言えれば正解」を必ず言う。
+  1つの正解を当てる練習ではない。
+・何人かに見せてもらえると場が締まる。ただし指名はしない。
+
+---
+
+## 34. 見た目は、この**4つ**で<br>だいぶよくなる
+
+【1.5分】ここから3分。第1章で予告したところ。
+
+＜台本＞
+最後の章です。冒頭で言ったとおり、ここは3分だけやります。
+
+見た目を整えるのはビジュアルデザインの仕事です。
+難しそうに見えますが、センスの話ではありません。
+知られている原則が4つあって、それを守るだけでだいぶよくなります。
+
+近接。関係のあるものを近づけて、関係ないものは離す。
+さっきの「アクションはモノの近くに」も、実はこれです。
+
+整列。端をそろえる。左端がそろっているだけで整って見えます。
+
+反復。同じ意味のものは、同じ見た目にする。
+ボタンの形が場所ごとに違うと、それだけで読みにくくなります。
+
+コントラスト。大事なものとそうでないものの差を、はっきりつける。
+見出しと本文が同じ大きさだと、どこが大事か分かりません。
+
+この4つは『ノンデザイナーズ・デザインブック』という本のものです。
+
+・第1章で「あとでやります」と予告したことを回収する。
+・「センスの話ではない」と言い切る。「ただ、難しい」で終わらせない。
+・【重要】近接は「アクションはオブジェクトの近くに」と同じだと繋げる。
+  今日話したことが、実は原則の1つだったと分かる。
+・章扉は作っていない。第4章は3分しかないので、扉に1枚使わない。
+
+---
+
+## 35. 見た目は、発明しない。<span class="big">真似る</span>
+
+【1.5分】第4章の締め。許可を渡して閉じる。
+
+＜台本＞
+見た目は発明しなくていいです。
+作ろうとしているものに似たアプリを開いて、同じように置いてください。
+
+最初から完璧なものを作ろうとすると、たいてい完成しません。
+真似て、動かして、あとから直す。それで十分です。
+
+・「真似ていい」を許可として渡す。ここで安心させて終わる。
+・デザインシステム（デジタル庁 / Material Design / HIG）はスライドから外した。
+  定義していない語を出したうえに固有名詞が3つ並ぶだけになり、
+  3分の章では回収できないため。3つとも出典スライドに載せてある。
+・興味がある人には、最後の出典ページを指して
+  「レイアウトの型の図は Material Design のものです」と一言添えればよい。
+
+---
+
+## 36. まとめ
+
+【1.5分】この1枚で今日の全部が読めるようにしてある。
+
+＜台本＞
+今日やったことを1枚にまとめました。
+
+仕様から始めて、1番でオブジェクトを拾い出す。備品が1つ出てきました。
+2番でビューと行き来を決める。一覧と詳細の2つになりました。
+3番でレイアウトを描く。2画面の骨組みができました。
+
+ぜんぶ通して、やっていたことは1つです。オブジェクトから考える。
+機能を並べるのではなく、モノを主役にする。それだけです。
+
+・あとで見返す学生の入口になる1枚。ここは急がない。
+・第2章の結論に戻って閉じる。今日の主眼はこれ1つだった、と示す。
+
+---
+
+## 37. 明日から、自分のチームの<br>アプリでやる
+
+【1分】この講義を「知識」から「使うもの」に変える1枚。
+
+＜台本＞
+このあと、チームでアプリを作り始めます。
+そこで必ず「どんな画面にする？」という話になります。
+
+そのとき、いきなり画面を描き始めないでください。
+まず、作りたいものを文にして、その名詞に線を引いてください。
+出てきたモノが、画面の主役になります。
+
+それだけで、必要な画面がだいたい決まります。
+今日と同じことを、自分たちのアプリでやるだけです。
+
+・直後がチーム開発の講義。ここで橋を渡す。
+・持ち帰る問いを1つ渡す：自分のチームのアプリの主役は何になりそうか。
+・スケッチブックは持ち帰ってもらう。チームで描くときに使える。
+
+---
+
+## 38. 出典・もっと知りたくなったら
+
+【0.5分】
+
+＜台本＞
+出典です。今日の話の中核は1つめの『オブジェクト指向UIデザイン』です。
+オブジェクトから考える、という話はこの本のものです。
+
+もっと知りたくなったら、まずこれを読んでください。
+
+・どこで使ったかを添えてある。5件を並べるだけにしない。
+・「もっと知りたくなったら」の導線として1冊だけ名指しする。
+
+---
+
diff --git a/design/imgs/fig-action-place.svg b/design/imgs/fig-action-place.svg
new file mode 100644
index 00000000..51adcc4c
--- /dev/null
+++ b/design/imgs/fig-action-place.svg
@@ -0,0 +1,66 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1040 470" width="1040" height="470" font-family="system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif">
+  <!-- アクションをどのビューに置くかの原則。
+       備品が見えているビューなら、どちらにも置ける。
+       仕様にあるアクションは「借りる」「返す」だけなので、
+       つくる・けすは描かない（仕様にないものは作らない）。
+       行の形は13枚目の一覧と揃えてある -->
+
+  <!-- ===== コレクションビュー ===== -->
+  <text x="250" y="60" text-anchor="middle" font-size="32" fill="#6b7078">コレクションビュー</text>
+  <rect x="120" y="90" width="260" height="270" rx="10" fill="#ffffff" stroke="#33b1dd" stroke-width="3" />
+  <path d="M120 100 a10 10 0 0 1 10 -10 h240 a10 10 0 0 1 10 10 v38 h-260 z" fill="#33b1dd" />
+  <text x="250" y="123" text-anchor="middle" font-size="30" font-weight="700" fill="#ffffff">備品の一覧</text>
+
+  <!-- 1行目: 貸出中 -->
+  <rect x="136" y="152" width="228" height="58" rx="7" fill="#ffffff" stroke="#e3e6ea" stroke-width="2" />
+  <rect x="146" y="161" width="40" height="40" rx="5" fill="#f1f2f4" stroke="#d3d6db" stroke-width="2" />
+  <rect x="156" y="170" width="20" height="14" rx="1" fill="none" stroke="#6b7078" stroke-width="2" />
+  <path d="M151 192 h30 l-3 -4 h-24 z" fill="none" stroke="#6b7078" stroke-width="2" stroke-linejoin="round" />
+  <rect x="196" y="176" width="60" height="10" rx="5" fill="#c9ced6" />
+  <rect x="268" y="167" width="82" height="28" rx="14" fill="#ffffff" stroke="#33b1dd" stroke-width="2" />
+  <text x="309" y="186" text-anchor="middle" font-size="17" font-weight="700" fill="#1c8fb5">返す</text>
+
+  <!-- 2行目 -->
+  <rect x="136" y="218" width="228" height="58" rx="7" fill="#ffffff" stroke="#e3e6ea" stroke-width="2" />
+  <rect x="146" y="227" width="40" height="40" rx="5" fill="#f1f2f4" stroke="#d3d6db" stroke-width="2" />
+  <rect x="159" y="235" width="14" height="24" rx="2" fill="none" stroke="#6b7078" stroke-width="2" />
+  <rect x="196" y="242" width="60" height="10" rx="5" fill="#c9ced6" />
+  <rect x="268" y="233" width="82" height="28" rx="14" fill="#33b1dd" />
+  <text x="309" y="252" text-anchor="middle" font-size="17" font-weight="700" fill="#ffffff">借りる</text>
+
+  <!-- 3行目 -->
+  <rect x="136" y="284" width="228" height="58" rx="7" fill="#ffffff" stroke="#e3e6ea" stroke-width="2" />
+  <rect x="146" y="293" width="40" height="40" rx="5" fill="#f1f2f4" stroke="#d3d6db" stroke-width="2" />
+  <rect x="158" y="301" width="16" height="24" rx="2" fill="none" stroke="#6b7078" stroke-width="2" />
+  <circle cx="166" cy="308" r="2.6" fill="none" stroke="#6b7078" stroke-width="1.6" />
+  <rect x="196" y="308" width="60" height="10" rx="5" fill="#c9ced6" />
+  <rect x="268" y="299" width="82" height="28" rx="14" fill="#33b1dd" />
+  <text x="309" y="318" text-anchor="middle" font-size="17" font-weight="700" fill="#ffffff">借りる</text>
+
+  <!-- 引き出し: 行ごとにアクションがある -->
+  <line x1="370" y1="247" x2="404" y2="247" stroke="#6b7078" stroke-width="2" />
+  <text x="410" y="240" font-size="28" fill="#202228">借りる</text>
+  <text x="410" y="274" font-size="28" fill="#202228">返す</text>
+
+  <!-- ===== シングルビュー ===== -->
+  <text x="790" y="60" text-anchor="middle" font-size="32" fill="#6b7078">シングルビュー</text>
+  <rect x="660" y="90" width="260" height="270" rx="10" fill="#ffffff" stroke="#33b1dd" stroke-width="3" />
+  <path d="M660 100 a10 10 0 0 1 10 -10 h240 a10 10 0 0 1 10 10 v38 h-260 z" fill="#33b1dd" />
+  <text x="790" y="123" text-anchor="middle" font-size="30" font-weight="700" fill="#ffffff">備品の詳細</text>
+
+  <rect x="690" y="160" width="56" height="56" rx="8" fill="#f1f2f4" stroke="#d3d6db" stroke-width="2" />
+  <rect x="704" y="172" width="28" height="20" rx="2" fill="none" stroke="#6b7078" stroke-width="3" />
+  <path d="M698 202 h40 l-4 -5 h-32 z" fill="none" stroke="#6b7078" stroke-width="3" stroke-linejoin="round" />
+  <rect x="762" y="168" width="120" height="12" rx="6" fill="#c9ced6" />
+  <rect x="762" y="194" width="70" height="12" rx="6" fill="#d3d6db" />
+
+  <!-- 詳細にも同じアクションを置ける -->
+  <rect x="690" y="288" width="190" height="46" rx="23" fill="#33b1dd" />
+  <text x="785" y="319" text-anchor="middle" font-size="28" font-weight="700" fill="#ffffff">借りる</text>
+
+  <line x1="890" y1="311" x2="930" y2="311" stroke="#6b7078" stroke-width="2" />
+  <text x="936" y="321" font-size="28" fill="#202228">借りる</text>
+
+  <!-- ===== 結論 ===== -->
+  <text x="520" y="440" text-anchor="middle" font-size="32" font-weight="700" fill="#1c8fb5">どちらも備品が見えているから、どちらにも置ける</text>
+</svg>
diff --git a/design/imgs/fig-answer.svg b/design/imgs/fig-answer.svg
new file mode 100644
index 00000000..f3e8351e
--- /dev/null
+++ b/design/imgs/fig-answer.svg
@@ -0,0 +1,64 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 460 500" width="460" height="500" font-family="system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif">
+  <!-- ハンズオン③の答え。ビューが2つ、そのあいだを行き来する。
+       行の形は13枚目の一覧と揃えてある -->
+  <defs>
+    <marker id="ans-arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
+      <path d="M0 0 L10 5 L0 10 z" fill="#202228" />
+    </marker>
+  </defs>
+
+  <!-- ===== コレクションビュー ===== -->
+  <rect x="10" y="10" width="440" height="220" rx="10" fill="#ffffff" stroke="#33b1dd" stroke-width="3" />
+  <path d="M10 20 a10 10 0 0 1 10 -10 h420 a10 10 0 0 1 10 10 v30 h-440 z" fill="#33b1dd" />
+  <text x="230" y="42" text-anchor="middle" font-size="22" font-weight="700" fill="#ffffff">備品の一覧</text>
+
+  <!-- 1行目: 貸出中 -->
+  <rect x="24" y="60" width="412" height="50" rx="7" fill="#ffffff" stroke="#e3e6ea" stroke-width="2" />
+  <rect x="34" y="66" width="38" height="38" rx="5" fill="#f1f2f4" stroke="#d3d6db" stroke-width="2" />
+  <rect x="43" y="74" width="20" height="14" rx="1" fill="none" stroke="#6b7078" stroke-width="2" />
+  <path d="M38 96 h30 l-3 -4 h-24 z" fill="none" stroke="#6b7078" stroke-width="2" stroke-linejoin="round" />
+  <rect x="86" y="74" width="110" height="9" rx="4" fill="#c9ced6" />
+  <rect x="86" y="90" width="42" height="7" rx="3" fill="#d3d6db" />
+  <rect x="344" y="71" width="82" height="28" rx="14" fill="#ffffff" stroke="#33b1dd" stroke-width="2" />
+  <text x="385" y="90" text-anchor="middle" font-size="16" font-weight="700" fill="#1c8fb5">返す</text>
+
+  <!-- 2行目 -->
+  <rect x="24" y="116" width="412" height="50" rx="7" fill="#ffffff" stroke="#e3e6ea" stroke-width="2" />
+  <rect x="34" y="122" width="38" height="38" rx="5" fill="#f1f2f4" stroke="#d3d6db" stroke-width="2" />
+  <rect x="46" y="129" width="14" height="24" rx="2" fill="none" stroke="#6b7078" stroke-width="2" />
+  <rect x="86" y="130" width="110" height="9" rx="4" fill="#c9ced6" />
+  <rect x="86" y="146" width="42" height="7" rx="3" fill="#d3d6db" />
+  <rect x="344" y="127" width="82" height="28" rx="14" fill="#33b1dd" />
+  <text x="385" y="146" text-anchor="middle" font-size="16" font-weight="700" fill="#ffffff">借りる</text>
+
+  <!-- 3行目 -->
+  <rect x="24" y="172" width="412" height="50" rx="7" fill="#ffffff" stroke="#e3e6ea" stroke-width="2" />
+  <rect x="34" y="178" width="38" height="38" rx="5" fill="#f1f2f4" stroke="#d3d6db" stroke-width="2" />
+  <rect x="45" y="185" width="16" height="24" rx="2" fill="none" stroke="#6b7078" stroke-width="2" />
+  <circle cx="53" cy="192" r="2.6" fill="none" stroke="#6b7078" stroke-width="1.6" />
+  <rect x="86" y="186" width="110" height="9" rx="4" fill="#c9ced6" />
+  <rect x="86" y="202" width="42" height="7" rx="3" fill="#d3d6db" />
+  <rect x="344" y="183" width="82" height="28" rx="14" fill="#33b1dd" />
+  <text x="385" y="202" text-anchor="middle" font-size="16" font-weight="700" fill="#ffffff">借りる</text>
+
+  <!-- ===== 行き来 ===== -->
+  <line x1="230" y1="240" x2="230" y2="272" stroke="#202228" stroke-width="3" marker-start="url(#ans-arrow)" marker-end="url(#ans-arrow)" />
+
+  <!-- ===== シングルビュー ===== -->
+  <rect x="10" y="282" width="440" height="208" rx="10" fill="#ffffff" stroke="#33b1dd" stroke-width="3" />
+  <path d="M10 292 a10 10 0 0 1 10 -10 h420 a10 10 0 0 1 10 10 v30 h-440 z" fill="#33b1dd" />
+  <text x="230" y="314" text-anchor="middle" font-size="22" font-weight="700" fill="#ffffff">備品の詳細</text>
+  <path d="M42 302 L32 308 L42 314" fill="none" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
+
+  <rect x="34" y="336" width="62" height="62" rx="8" fill="#f1f2f4" stroke="#d3d6db" stroke-width="2" />
+  <rect x="49" y="349" width="32" height="22" rx="2" fill="none" stroke="#6b7078" stroke-width="2.5" />
+  <path d="M42 381 h46 l-5 -6 h-36 z" fill="none" stroke="#6b7078" stroke-width="2.5" stroke-linejoin="round" />
+
+  <text x="112" y="352" font-size="16" fill="#6b7078">名前</text>
+  <rect x="112" y="360" width="130" height="11" rx="5" fill="#c9ced6" />
+  <text x="112" y="390" font-size="16" fill="#6b7078">数</text>
+  <rect x="112" y="398" width="52" height="9" rx="4" fill="#d3d6db" />
+
+  <rect x="34" y="428" width="150" height="34" rx="17" fill="#33b1dd" />
+  <text x="109" y="451" text-anchor="middle" font-size="18" font-weight="700" fill="#ffffff">借りる</text>
+</svg>
diff --git a/design/imgs/fig-bridge.svg b/design/imgs/fig-bridge.svg
new file mode 100644
index 00000000..c85e08ff
--- /dev/null
+++ b/design/imgs/fig-bridge.svg
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1140 380" width="1140" height="380" font-family="system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif">
+  <defs>
+    <marker id="br-arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
+      <path d="M0 0 L10 5 L0 10 z" fill="#33b1dd" />
+    </marker>
+  </defs>
+
+  <text x="200" y="52" text-anchor="middle" font-size="28" fill="#6b7078">画面の部品</text>
+  <text x="860" y="52" text-anchor="middle" font-size="28" fill="#6b7078">今日つかう言葉</text>
+
+  <!-- 見せるもの → ビュー -->
+  <text x="200" y="160" text-anchor="middle" font-size="40" font-weight="700" fill="#202228">見せるもの</text>
+  <text x="480" y="132" text-anchor="middle" font-size="26" fill="#6b7078">が集まると</text>
+  <line x1="400" y1="152" x2="560" y2="152" stroke="#33b1dd" stroke-width="4" marker-end="url(#br-arrow)" />
+  <text x="600" y="152" font-size="44" font-weight="700" fill="#1c8fb5">ビュー</text>
+  <text x="600" y="198" font-size="28" fill="#6b7078">モノが見えているところ</text>
+
+  <!-- 操作するもの → アクション -->
+  <text x="200" y="300" text-anchor="middle" font-size="40" font-weight="700" fill="#202228">操作するもの</text>
+  <text x="480" y="272" text-anchor="middle" font-size="26" fill="#6b7078">がすることが</text>
+  <line x1="400" y1="292" x2="560" y2="292" stroke="#33b1dd" stroke-width="4" marker-end="url(#br-arrow)" />
+  <text x="600" y="292" font-size="44" font-weight="700" fill="#1c8fb5">アクション</text>
+  <text x="600" y="338" font-size="28" fill="#6b7078">モノにできること</text>
+</svg>
diff --git a/design/imgs/fig-collection.svg b/design/imgs/fig-collection.svg
new file mode 100644
index 00000000..2b4f8976
--- /dev/null
+++ b/design/imgs/fig-collection.svg
@@ -0,0 +1,40 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 430" width="400" height="430" font-family="system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif">
+  <!-- コレクションビュー。同じオブジェクトが複数ならんでいる。
+       行の形は13枚目の一覧と揃えてある（アイコン・名前・数・ボタン） -->
+  <rect x="20" y="20" width="360" height="340" rx="12" fill="#ffffff" stroke="#33b1dd" stroke-width="3" />
+  <path d="M20 32 a12 12 0 0 1 12 -12 h336 a12 12 0 0 1 12 12 v44 h-360 z" fill="#33b1dd" />
+  <text x="200" y="62" text-anchor="middle" font-size="36" font-weight="700" fill="#ffffff">備品の一覧</text>
+
+  <!-- ノートPC: 貸出中 -->
+  <rect x="44" y="98" width="312" height="72" rx="8" fill="#ffffff" stroke="#e3e6ea" stroke-width="2" />
+  <rect x="58" y="108" width="52" height="52" rx="6" fill="#f1f2f4" stroke="#d3d6db" stroke-width="2" />
+  <rect x="71" y="120" width="26" height="18" rx="2" fill="none" stroke="#6b7078" stroke-width="2.5" />
+  <path d="M65 147 h38 l-4 -5 h-30 z" fill="none" stroke="#6b7078" stroke-width="2.5" stroke-linejoin="round" />
+  <rect x="124" y="118" width="98" height="12" rx="6" fill="#c9ced6" />
+  <rect x="124" y="142" width="44" height="10" rx="5" fill="#d3d6db" />
+  <rect x="244" y="118" width="98" height="32" rx="16" fill="#ffffff" stroke="#33b1dd" stroke-width="2" />
+  <text x="293" y="140" text-anchor="middle" font-size="19" font-weight="700" fill="#1c8fb5">返す</text>
+
+  <!-- タブレット: 棚にある -->
+  <rect x="44" y="180" width="312" height="72" rx="8" fill="#ffffff" stroke="#e3e6ea" stroke-width="2" />
+  <rect x="58" y="190" width="52" height="52" rx="6" fill="#f1f2f4" stroke="#d3d6db" stroke-width="2" />
+  <rect x="75" y="199" width="18" height="34" rx="3" fill="none" stroke="#6b7078" stroke-width="2.5" />
+  <circle cx="84" cy="228" r="1.6" fill="#6b7078" />
+  <rect x="124" y="200" width="98" height="12" rx="6" fill="#c9ced6" />
+  <rect x="124" y="224" width="44" height="10" rx="5" fill="#d3d6db" />
+  <rect x="244" y="200" width="98" height="32" rx="16" fill="#33b1dd" />
+  <text x="293" y="222" text-anchor="middle" font-size="19" font-weight="700" fill="#ffffff">借りる</text>
+
+  <!-- スピーカー: 棚にある -->
+  <rect x="44" y="262" width="312" height="72" rx="8" fill="#ffffff" stroke="#e3e6ea" stroke-width="2" />
+  <rect x="58" y="272" width="52" height="52" rx="6" fill="#f1f2f4" stroke="#d3d6db" stroke-width="2" />
+  <rect x="74" y="281" width="20" height="34" rx="3" fill="none" stroke="#6b7078" stroke-width="2.5" />
+  <circle cx="84" cy="291" r="3.4" fill="none" stroke="#6b7078" stroke-width="2" />
+  <circle cx="84" cy="305" r="5" fill="none" stroke="#6b7078" stroke-width="2" />
+  <rect x="124" y="282" width="98" height="12" rx="6" fill="#c9ced6" />
+  <rect x="124" y="306" width="44" height="10" rx="5" fill="#d3d6db" />
+  <rect x="244" y="282" width="98" height="32" rx="16" fill="#33b1dd" />
+  <text x="293" y="304" text-anchor="middle" font-size="19" font-weight="700" fill="#ffffff">借りる</text>
+
+  <text x="200" y="404" text-anchor="middle" font-size="32" fill="#6b7078">同じ備品が、並んでいる</text>
+</svg>
diff --git a/design/imgs/fig-compare.svg b/design/imgs/fig-compare.svg
new file mode 100644
index 00000000..f3be7c46
--- /dev/null
+++ b/design/imgs/fig-compare.svg
@@ -0,0 +1,99 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 548" width="1000" height="548" font-family="system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif">
+  <defs>
+    <marker id="cmp-arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
+      <path d="M0 0 L10 5 L0 10 z" fill="#202228" />
+    </marker>
+  </defs>
+
+  <line x1="500" y1="40" x2="500" y2="538" stroke="#e3e6ea" stroke-width="2" stroke-dasharray="8 8" />
+
+  <!-- ============ やり方A ============ -->
+  <text x="235" y="32" text-anchor="middle" font-size="36" font-weight="700" fill="#6b7078">やり方A</text>
+
+  <!-- ボタンが並ぶ画面 -->
+  <rect x="175" y="56" width="120" height="104" rx="8" fill="#f1f2f4" stroke="#d3d6db" stroke-width="2" />
+  <rect x="187" y="66" width="44" height="38" rx="4" fill="#ffffff" stroke="#c9ced6" stroke-width="2" />
+  <rect x="239" y="66" width="44" height="38" rx="4" fill="#ffffff" stroke="#c9ced6" stroke-width="2" />
+  <rect x="187" y="112" width="44" height="38" rx="4" fill="#ffffff" stroke="#c9ced6" stroke-width="2" />
+  <rect x="239" y="112" width="44" height="38" rx="4" fill="#ffffff" stroke="#c9ced6" stroke-width="2" />
+
+  <!-- ボタンごとに画面が生える -->
+  <path d="M235 160 V182 M72 182 H396" fill="none" stroke="#202228" stroke-width="2" />
+  <line x1="72" y1="182" x2="72" y2="200" stroke="#202228" stroke-width="2" marker-end="url(#cmp-arrow)" />
+  <line x1="180" y1="182" x2="180" y2="200" stroke="#202228" stroke-width="2" marker-end="url(#cmp-arrow)" />
+  <line x1="288" y1="182" x2="288" y2="200" stroke="#202228" stroke-width="2" marker-end="url(#cmp-arrow)" />
+  <line x1="396" y1="182" x2="396" y2="200" stroke="#202228" stroke-width="2" marker-end="url(#cmp-arrow)" />
+
+  <!-- 一覧を見るの先: 一覧 -->
+  <rect x="24" y="204" width="96" height="124" rx="6" fill="#f1f2f4" stroke="#d3d6db" stroke-width="2" />
+  <rect x="34" y="216" width="76" height="10" rx="5" fill="#d3d6db" />
+  <rect x="34" y="246" width="76" height="9" rx="4" fill="#c9ced6" />
+  <rect x="34" y="270" width="76" height="9" rx="4" fill="#c9ced6" />
+  <rect x="34" y="294" width="76" height="9" rx="4" fill="#c9ced6" />
+
+  <!-- 名前と数を見るの先: 詳細 -->
+  <rect x="132" y="204" width="96" height="124" rx="6" fill="#f1f2f4" stroke="#d3d6db" stroke-width="2" />
+  <rect x="142" y="216" width="76" height="10" rx="5" fill="#d3d6db" />
+  <rect x="142" y="250" width="60" height="9" rx="4" fill="#c9ced6" />
+  <rect x="142" y="274" width="34" height="9" rx="4" fill="#c9ced6" />
+
+  <!-- 借りるの先: 一覧 -->
+  <rect x="240" y="204" width="96" height="124" rx="6" fill="#f1f2f4" stroke="#d3d6db" stroke-width="2" />
+  <rect x="250" y="216" width="76" height="10" rx="5" fill="#d3d6db" />
+  <rect x="250" y="246" width="76" height="9" rx="4" fill="#c9ced6" />
+  <rect x="250" y="270" width="76" height="9" rx="4" fill="#c9ced6" />
+  <rect x="250" y="294" width="76" height="9" rx="4" fill="#c9ced6" />
+
+  <!-- 返すの先: 一覧 -->
+  <rect x="348" y="204" width="96" height="124" rx="6" fill="#f1f2f4" stroke="#d3d6db" stroke-width="2" />
+  <rect x="358" y="216" width="76" height="10" rx="5" fill="#d3d6db" />
+  <rect x="358" y="246" width="76" height="9" rx="4" fill="#c9ced6" />
+  <rect x="358" y="270" width="76" height="9" rx="4" fill="#c9ced6" />
+  <rect x="358" y="294" width="76" height="9" rx="4" fill="#c9ced6" />
+
+  <text x="72" y="370" text-anchor="middle" font-size="34" fill="#6b7078">一覧</text>
+  <text x="180" y="370" text-anchor="middle" font-size="34" fill="#6b7078">詳細</text>
+  <text x="288" y="370" text-anchor="middle" font-size="34" fill="#6b7078">一覧</text>
+  <text x="396" y="370" text-anchor="middle" font-size="34" fill="#6b7078">一覧</text>
+  <text x="235" y="420" text-anchor="middle" font-size="34" fill="#6b7078">同じ一覧が3枚も要る</text>
+
+  <text x="213" y="480" text-anchor="end" font-size="32" fill="#6b7078">タップ</text>
+  <text x="269" y="480" font-size="44" font-weight="700" fill="#202228">2回</text>
+  <text x="213" y="532" text-anchor="end" font-size="32" fill="#6b7078">画面</text>
+  <text x="269" y="532" font-size="44" font-weight="700" fill="#202228">5枚</text>
+
+  <!-- ============ やり方B ============ -->
+  <text x="760" y="32" text-anchor="middle" font-size="36" font-weight="700" fill="#1c8fb5">やり方B</text>
+
+  <!-- 一覧 -->
+  <rect x="600" y="140" width="130" height="170" rx="8" fill="#ffffff" stroke="#33b1dd" stroke-width="3" />
+  <rect x="614" y="156" width="102" height="13" rx="6" fill="#d3d6db" />
+  <rect x="614" y="186" width="18" height="18" rx="3" fill="#f1f2f4" stroke="#d3d6db" stroke-width="1.6" />
+  <rect x="638" y="191" width="38" height="8" rx="4" fill="#c9ced6" />
+  <rect x="682" y="186" width="34" height="18" rx="9" fill="#ffffff" stroke="#33b1dd" stroke-width="1.6" />
+
+  <rect x="614" y="216" width="18" height="18" rx="3" fill="#f1f2f4" stroke="#d3d6db" stroke-width="1.6" />
+  <rect x="638" y="221" width="38" height="8" rx="4" fill="#c9ced6" />
+  <rect x="682" y="216" width="34" height="18" rx="9" fill="#33b1dd" />
+
+  <rect x="614" y="246" width="18" height="18" rx="3" fill="#f1f2f4" stroke="#d3d6db" stroke-width="1.6" />
+  <rect x="638" y="251" width="38" height="8" rx="4" fill="#c9ced6" />
+  <rect x="682" y="246" width="34" height="18" rx="9" fill="#33b1dd" />
+
+  <line x1="736" y1="225" x2="784" y2="225" stroke="#202228" stroke-width="3" marker-start="url(#cmp-arrow)" marker-end="url(#cmp-arrow)" />
+
+  <!-- 詳細 -->
+  <rect x="790" y="140" width="130" height="170" rx="8" fill="#ffffff" stroke="#33b1dd" stroke-width="3" />
+  <rect x="804" y="156" width="102" height="13" rx="6" fill="#d3d6db" />
+  <rect x="804" y="188" width="102" height="24" rx="4" fill="#ffffff" stroke="#c9ced6" stroke-width="2" />
+  <rect x="804" y="224" width="102" height="66" rx="4" fill="#ffffff" stroke="#c9ced6" stroke-width="2" />
+
+  <text x="665" y="370" text-anchor="middle" font-size="34" fill="#6b7078">一覧</text>
+  <text x="855" y="370" text-anchor="middle" font-size="34" fill="#6b7078">詳細</text>
+  <text x="760" y="420" text-anchor="middle" font-size="34" fill="#6b7078">画面はこの2枚だけ</text>
+
+  <text x="738" y="480" text-anchor="end" font-size="32" fill="#6b7078">タップ</text>
+  <text x="794" y="480" font-size="44" font-weight="700" fill="#1c8fb5">1回</text>
+  <text x="738" y="532" text-anchor="end" font-size="32" fill="#6b7078">画面</text>
+  <text x="794" y="532" font-size="44" font-weight="700" fill="#1c8fb5">2枚</text>
+</svg>
diff --git a/design/imgs/fig-extract-demo.svg b/design/imgs/fig-extract-demo.svg
new file mode 100644
index 00000000..bd359289
--- /dev/null
+++ b/design/imgs/fig-extract-demo.svg
@@ -0,0 +1,41 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 820 400" width="820" height="400" font-family="system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif">
+  <!-- 仕様の4行に、名詞は下線・動詞は点線の囲みをつけたところ。
+       「備品」が4回出てくるが全部同じ備品なので、まとめると1つになる -->
+
+  <!-- 動詞の囲み（文字より先に描く） -->
+  <rect x="306" y="39" width="100" height="52" rx="26" fill="none" stroke="#6b7078" stroke-width="3" stroke-dasharray="6 4" />
+  <rect x="490" y="134" width="100" height="52" rx="26" fill="none" stroke="#6b7078" stroke-width="3" stroke-dasharray="6 4" />
+  <rect x="218" y="229" width="144" height="52" rx="26" fill="none" stroke="#6b7078" stroke-width="3" stroke-dasharray="6 4" />
+  <rect x="350" y="324" width="100" height="52" rx="26" fill="none" stroke="#6b7078" stroke-width="3" stroke-dasharray="6 4" />
+
+  <!-- 備品の一覧を見る -->
+  <text x="40" y="80" font-size="44" fill="#202228">備品</text>
+  <text x="132" y="80" font-size="44" fill="#202228">の一覧を</text>
+  <text x="312" y="80" font-size="44" fill="#202228">見る</text>
+  <line x1="40" y1="94" x2="128" y2="94" stroke="#33b1dd" stroke-width="5" />
+
+  <!-- 備品の名前と数を見る -->
+  <text x="40" y="175" font-size="44" fill="#202228">備品</text>
+  <text x="132" y="175" font-size="44" fill="#202228">の</text>
+  <text x="180" y="175" font-size="44" fill="#202228">名前</text>
+  <text x="272" y="175" font-size="44" fill="#202228">と</text>
+  <text x="320" y="175" font-size="44" fill="#202228">数</text>
+  <text x="368" y="175" font-size="44" fill="#202228">を</text>
+  <text x="496" y="175" font-size="44" fill="#202228">見る</text>
+  <line x1="40" y1="189" x2="128" y2="189" stroke="#33b1dd" stroke-width="5" />
+  <line x1="180" y1="189" x2="268" y2="189" stroke="#33b1dd" stroke-width="5" />
+  <line x1="320" y1="189" x2="364" y2="189" stroke="#33b1dd" stroke-width="5" />
+
+  <!-- 備品を借りる -->
+  <text x="40" y="270" font-size="44" fill="#202228">備品</text>
+  <text x="132" y="270" font-size="44" fill="#202228">を</text>
+  <text x="224" y="270" font-size="44" fill="#202228">借りる</text>
+  <line x1="40" y1="284" x2="128" y2="284" stroke="#33b1dd" stroke-width="5" />
+
+  <!-- 借りた備品を返す -->
+  <text x="40" y="365" font-size="44" fill="#202228">借りた</text>
+  <text x="172" y="365" font-size="44" fill="#202228">備品</text>
+  <text x="264" y="365" font-size="44" fill="#202228">を</text>
+  <text x="356" y="365" font-size="44" fill="#202228">返す</text>
+  <line x1="172" y1="379" x2="260" y2="379" stroke="#33b1dd" stroke-width="5" />
+</svg>
diff --git a/design/imgs/fig-flow-step1.svg b/design/imgs/fig-flow-step1.svg
new file mode 100644
index 00000000..20300ac9
--- /dev/null
+++ b/design/imgs/fig-flow-step1.svg
@@ -0,0 +1,32 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1100 190" width="1100" height="190" font-family="system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif">
+  <!-- 小節の扉で「今どこにいるか」を示す。fig-flow.svg と同じ座標 -->
+  <defs>
+    <marker id="fs1-arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
+      <path d="M0 0 L10 5 L0 10 z" fill="#9aa1ab" />
+    </marker>
+  </defs>
+
+  <rect x="20" y="40" width="140" height="130" rx="10" fill="#ffffff" stroke="#e3e6ea" stroke-width="2" stroke-dasharray="7 5" />
+  <text x="90" y="117" text-anchor="middle" font-size="34" fill="#9aa1ab">仕様</text>
+  <line x1="170" y1="105" x2="200" y2="105" stroke="#9aa1ab" stroke-width="3" marker-end="url(#fs1-arrow)" />
+
+  <rect x="208" y="40" width="220" height="130" rx="10" fill="#e8f6fc" stroke="#33b1dd" stroke-width="3" />
+  <circle cx="253" cy="40" r="26" fill="#33b1dd" />
+  <text x="253" y="50" text-anchor="middle" font-size="28" font-weight="700" fill="#ffffff">1</text>
+  <text x="318" y="95" text-anchor="middle" font-size="30" font-weight="700" fill="#202228">モノを決める</text>
+  <text x="318" y="135" text-anchor="middle" font-size="20" fill="#6b7078">オブジェクト抽出</text>
+  <line x1="438" y1="105" x2="468" y2="105" stroke="#9aa1ab" stroke-width="3" marker-end="url(#fs1-arrow)" />
+
+  <rect x="476" y="40" width="260" height="130" rx="10" fill="#ffffff" stroke="#e3e6ea" stroke-width="2" />
+  <circle cx="521" cy="40" r="26" fill="#c9ced6" />
+  <text x="521" y="50" text-anchor="middle" font-size="28" font-weight="700" fill="#ffffff">2</text>
+  <text x="606" y="95" text-anchor="middle" font-size="30" fill="#9aa1ab">画面を決める</text>
+  <text x="606" y="135" text-anchor="middle" font-size="20" fill="#c9ced6">ビュー・ナビゲーション</text>
+  <line x1="746" y1="105" x2="776" y2="105" stroke="#9aa1ab" stroke-width="3" marker-end="url(#fs1-arrow)" />
+
+  <rect x="784" y="40" width="280" height="130" rx="10" fill="#ffffff" stroke="#e3e6ea" stroke-width="2" />
+  <circle cx="829" cy="40" r="26" fill="#c9ced6" />
+  <text x="829" y="50" text-anchor="middle" font-size="28" font-weight="700" fill="#ffffff">3</text>
+  <text x="924" y="95" text-anchor="middle" font-size="30" fill="#9aa1ab">ならべ方を決める</text>
+  <text x="924" y="135" text-anchor="middle" font-size="20" fill="#c9ced6">レイアウト</text>
+</svg>
diff --git a/design/imgs/fig-flow-step2.svg b/design/imgs/fig-flow-step2.svg
new file mode 100644
index 00000000..234ed230
--- /dev/null
+++ b/design/imgs/fig-flow-step2.svg
@@ -0,0 +1,32 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1100 190" width="1100" height="190" font-family="system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif">
+  <!-- 小節の扉で「今どこにいるか」を示す。fig-flow.svg と同じ座標 -->
+  <defs>
+    <marker id="fs2-arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
+      <path d="M0 0 L10 5 L0 10 z" fill="#9aa1ab" />
+    </marker>
+  </defs>
+
+  <rect x="20" y="40" width="140" height="130" rx="10" fill="#ffffff" stroke="#e3e6ea" stroke-width="2" stroke-dasharray="7 5" />
+  <text x="90" y="117" text-anchor="middle" font-size="34" fill="#9aa1ab">仕様</text>
+  <line x1="170" y1="105" x2="200" y2="105" stroke="#9aa1ab" stroke-width="3" marker-end="url(#fs2-arrow)" />
+
+  <rect x="208" y="40" width="220" height="130" rx="10" fill="#ffffff" stroke="#e3e6ea" stroke-width="2" />
+  <circle cx="253" cy="40" r="26" fill="#c9ced6" />
+  <text x="253" y="50" text-anchor="middle" font-size="28" font-weight="700" fill="#ffffff">1</text>
+  <text x="318" y="95" text-anchor="middle" font-size="30" fill="#9aa1ab">モノを決める</text>
+  <text x="318" y="135" text-anchor="middle" font-size="20" fill="#c9ced6">オブジェクト抽出</text>
+  <line x1="438" y1="105" x2="468" y2="105" stroke="#9aa1ab" stroke-width="3" marker-end="url(#fs2-arrow)" />
+
+  <rect x="476" y="40" width="260" height="130" rx="10" fill="#e8f6fc" stroke="#33b1dd" stroke-width="3" />
+  <circle cx="521" cy="40" r="26" fill="#33b1dd" />
+  <text x="521" y="50" text-anchor="middle" font-size="28" font-weight="700" fill="#ffffff">2</text>
+  <text x="606" y="95" text-anchor="middle" font-size="30" font-weight="700" fill="#202228">画面を決める</text>
+  <text x="606" y="135" text-anchor="middle" font-size="20" fill="#6b7078">ビュー・ナビゲーション</text>
+  <line x1="746" y1="105" x2="776" y2="105" stroke="#9aa1ab" stroke-width="3" marker-end="url(#fs2-arrow)" />
+
+  <rect x="784" y="40" width="280" height="130" rx="10" fill="#ffffff" stroke="#e3e6ea" stroke-width="2" />
+  <circle cx="829" cy="40" r="26" fill="#c9ced6" />
+  <text x="829" y="50" text-anchor="middle" font-size="28" font-weight="700" fill="#ffffff">3</text>
+  <text x="924" y="95" text-anchor="middle" font-size="30" fill="#9aa1ab">ならべ方を決める</text>
+  <text x="924" y="135" text-anchor="middle" font-size="20" fill="#c9ced6">レイアウト</text>
+</svg>
diff --git a/design/imgs/fig-flow-step3.svg b/design/imgs/fig-flow-step3.svg
new file mode 100644
index 00000000..d4e0a1a3
--- /dev/null
+++ b/design/imgs/fig-flow-step3.svg
@@ -0,0 +1,32 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1100 190" width="1100" height="190" font-family="system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif">
+  <!-- 小節の扉で「今どこにいるか」を示す。fig-flow.svg と同じ座標 -->
+  <defs>
+    <marker id="fs3-arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
+      <path d="M0 0 L10 5 L0 10 z" fill="#9aa1ab" />
+    </marker>
+  </defs>
+
+  <rect x="20" y="40" width="140" height="130" rx="10" fill="#ffffff" stroke="#e3e6ea" stroke-width="2" stroke-dasharray="7 5" />
+  <text x="90" y="117" text-anchor="middle" font-size="34" fill="#9aa1ab">仕様</text>
+  <line x1="170" y1="105" x2="200" y2="105" stroke="#9aa1ab" stroke-width="3" marker-end="url(#fs3-arrow)" />
+
+  <rect x="208" y="40" width="220" height="130" rx="10" fill="#ffffff" stroke="#e3e6ea" stroke-width="2" />
+  <circle cx="253" cy="40" r="26" fill="#c9ced6" />
+  <text x="253" y="50" text-anchor="middle" font-size="28" font-weight="700" fill="#ffffff">1</text>
+  <text x="318" y="95" text-anchor="middle" font-size="30" fill="#9aa1ab">モノを決める</text>
+  <text x="318" y="135" text-anchor="middle" font-size="20" fill="#c9ced6">オブジェクト抽出</text>
+  <line x1="438" y1="105" x2="468" y2="105" stroke="#9aa1ab" stroke-width="3" marker-end="url(#fs3-arrow)" />
+
+  <rect x="476" y="40" width="260" height="130" rx="10" fill="#ffffff" stroke="#e3e6ea" stroke-width="2" />
+  <circle cx="521" cy="40" r="26" fill="#c9ced6" />
+  <text x="521" y="50" text-anchor="middle" font-size="28" font-weight="700" fill="#ffffff">2</text>
+  <text x="606" y="95" text-anchor="middle" font-size="30" fill="#9aa1ab">画面を決める</text>
+  <text x="606" y="135" text-anchor="middle" font-size="20" fill="#c9ced6">ビュー・ナビゲーション</text>
+  <line x1="746" y1="105" x2="776" y2="105" stroke="#9aa1ab" stroke-width="3" marker-end="url(#fs3-arrow)" />
+
+  <rect x="784" y="40" width="280" height="130" rx="10" fill="#e8f6fc" stroke="#33b1dd" stroke-width="3" />
+  <circle cx="829" cy="40" r="26" fill="#33b1dd" />
+  <text x="829" y="50" text-anchor="middle" font-size="28" font-weight="700" fill="#ffffff">3</text>
+  <text x="924" y="95" text-anchor="middle" font-size="30" font-weight="700" fill="#202228">ならべ方を決める</text>
+  <text x="924" y="135" text-anchor="middle" font-size="20" fill="#6b7078">レイアウト</text>
+</svg>
diff --git a/design/imgs/fig-flow.svg b/design/imgs/fig-flow.svg
new file mode 100644
index 00000000..3c088375
--- /dev/null
+++ b/design/imgs/fig-flow.svg
@@ -0,0 +1,45 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1100 370" width="1100" height="370" font-family="system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif">
+  <!-- 3ステップの地図。ステップ名は日常語で大きく、
+       実務で使う呼び方を下に小さく添える。
+       専門語だけだと初学者が何をするステップなのか分からない -->
+  <defs>
+    <marker id="flow-arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
+      <path d="M0 0 L10 5 L0 10 z" fill="#202228" />
+    </marker>
+    <marker id="flow-arrow-accent" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
+      <path d="M0 0 L10 5 L0 10 z" fill="#33b1dd" />
+    </marker>
+  </defs>
+
+  <!-- 仕様 -->
+  <rect x="20" y="60" width="140" height="130" rx="10" fill="#ffffff" stroke="#d3d6db" stroke-width="2" stroke-dasharray="7 5" />
+  <text x="90" y="137" text-anchor="middle" font-size="34" fill="#6b7078">仕様</text>
+  <line x1="170" y1="125" x2="200" y2="125" stroke="#202228" stroke-width="3" marker-end="url(#flow-arrow)" />
+
+  <!-- 1. モノを決める -->
+  <rect x="208" y="60" width="220" height="130" rx="10" fill="#f1f2f4" stroke="#d3d6db" stroke-width="2" />
+  <circle cx="253" cy="60" r="26" fill="#33b1dd" />
+  <text x="253" y="70" text-anchor="middle" font-size="28" font-weight="700" fill="#ffffff">1</text>
+  <text x="318" y="115" text-anchor="middle" font-size="30" fill="#202228">モノを決める</text>
+  <text x="318" y="155" text-anchor="middle" font-size="20" fill="#6b7078">オブジェクト抽出</text>
+  <line x1="438" y1="125" x2="468" y2="125" stroke="#202228" stroke-width="3" marker-end="url(#flow-arrow)" />
+
+  <!-- 2. 画面を決める -->
+  <rect x="476" y="60" width="260" height="130" rx="10" fill="#f1f2f4" stroke="#d3d6db" stroke-width="2" />
+  <circle cx="521" cy="60" r="26" fill="#33b1dd" />
+  <text x="521" y="70" text-anchor="middle" font-size="28" font-weight="700" fill="#ffffff">2</text>
+  <text x="606" y="115" text-anchor="middle" font-size="30" fill="#202228">画面を決める</text>
+  <text x="606" y="155" text-anchor="middle" font-size="20" fill="#6b7078">ビュー・ナビゲーション</text>
+  <line x1="746" y1="125" x2="776" y2="125" stroke="#202228" stroke-width="3" marker-end="url(#flow-arrow)" />
+
+  <!-- 3. ならべ方を決める -->
+  <rect x="784" y="60" width="280" height="130" rx="10" fill="#f1f2f4" stroke="#d3d6db" stroke-width="2" />
+  <circle cx="829" cy="60" r="26" fill="#33b1dd" />
+  <text x="829" y="70" text-anchor="middle" font-size="28" font-weight="700" fill="#ffffff">3</text>
+  <text x="924" y="115" text-anchor="middle" font-size="30" fill="#202228">ならべ方を決める</text>
+  <text x="924" y="155" text-anchor="middle" font-size="20" fill="#6b7078">レイアウト</text>
+
+  <!-- 戻り矢印 -->
+  <path d="M924 200 L924 270 L318 270 L318 202" fill="none" stroke="#33b1dd" stroke-width="3" marker-end="url(#flow-arrow-accent)" />
+  <text x="621" y="330" text-anchor="middle" font-size="30" fill="#1c8fb5">行き来しながら決めていく</text>
+</svg>
diff --git a/design/imgs/fig-interface.svg b/design/imgs/fig-interface.svg
new file mode 100644
index 00000000..98ad32c1
--- /dev/null
+++ b/design/imgs/fig-interface.svg
@@ -0,0 +1,32 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1020 300" width="1020" height="300" font-family="system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif">
+  <defs>
+    <marker id="itf-arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
+      <path d="M0 0 L10 5 L0 10 z" fill="#6b7078" />
+    </marker>
+  </defs>
+
+  <!-- ユーザー -->
+  <circle cx="130" cy="100" r="38" fill="#9aa1ab" />
+  <path d="M82 210 Q82 148 130 148 Q178 148 178 210 z" fill="#9aa1ab" />
+  <text x="130" y="262" text-anchor="middle" font-size="32" fill="#202228">ユーザー</text>
+
+  <line x1="215" y1="150" x2="375" y2="150" stroke="#6b7078" stroke-width="3" stroke-dasharray="9 6" marker-start="url(#itf-arrow)" marker-end="url(#itf-arrow)" />
+
+  <!-- UI -->
+  <rect x="390" y="55" width="200" height="190" rx="12" fill="#33b1dd" />
+  <text x="490" y="168" text-anchor="middle" font-size="60" font-weight="700" fill="#ffffff">UI</text>
+
+  <line x1="605" y1="150" x2="765" y2="150" stroke="#6b7078" stroke-width="3" stroke-dasharray="9 6" marker-start="url(#itf-arrow)" marker-end="url(#itf-arrow)" />
+
+  <!-- サービス: アプリだけではないので、複数ならべる -->
+  <rect x="790" y="78" width="120" height="86" rx="6" fill="#ffffff" stroke="#6b7078" stroke-width="3" />
+  <rect x="800" y="88" width="100" height="66" fill="#f1f2f4" />
+  <path d="M836 164 L831 186 L869 186 L864 164 z" fill="#ffffff" stroke="#6b7078" stroke-width="3" />
+  <rect x="818" y="186" width="64" height="8" rx="4" fill="#6b7078" />
+
+  <rect x="925" y="100" width="56" height="98" rx="9" fill="#ffffff" stroke="#6b7078" stroke-width="3" />
+  <rect x="933" y="112" width="40" height="66" fill="#f1f2f4" />
+  <circle cx="953" cy="188" r="4" fill="#9aa1ab" />
+
+  <text x="880" y="262" text-anchor="middle" font-size="32" fill="#202228">サービス</text>
+</svg>
diff --git a/design/imgs/fig-item-navigation.svg b/design/imgs/fig-item-navigation.svg
new file mode 100644
index 00000000..7b2abc19
--- /dev/null
+++ b/design/imgs/fig-item-navigation.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 440 400" width="440" height="400" font-family="system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif">
+  <!-- ビューが2つで、そのあいだを行き来する。これがナビゲーション -->
+  <defs>
+    <marker id="dish-nav-arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
+      <path d="M0 0 L10 5 L0 10 z" fill="#202228" />
+    </marker>
+  </defs>
+
+  <rect x="20" y="20" width="400" height="110" rx="10" fill="#f1f2f4" stroke="#d3d6db" stroke-width="2" />
+  <text x="220" y="70" text-anchor="middle" font-size="34" fill="#202228">備品のコレクション</text>
+  <text x="220" y="106" text-anchor="middle" font-size="25" fill="#6b7078">備品が並ぶ一覧</text>
+
+  <line x1="220" y1="145" x2="220" y2="255" stroke="#202228" stroke-width="3" marker-start="url(#dish-nav-arrow)" marker-end="url(#dish-nav-arrow)" />
+  <text x="238" y="207" font-size="26" fill="#6b7078">行き来する</text>
+
+  <rect x="20" y="270" width="400" height="110" rx="10" fill="#f1f2f4" stroke="#d3d6db" stroke-width="2" />
+  <text x="220" y="320" text-anchor="middle" font-size="34" fill="#202228">備品のシングル</text>
+  <text x="220" y="356" text-anchor="middle" font-size="25" fill="#6b7078">名前と数を見る</text>
+</svg>
diff --git a/design/imgs/fig-item-object.svg b/design/imgs/fig-item-object.svg
new file mode 100644
index 00000000..6a923812
--- /dev/null
+++ b/design/imgs/fig-item-object.svg
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 440" width="400" height="440" font-family="system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif">
+  <!-- 抽出できたオブジェクト。属性3つとアクション2つ。
+       つくる（Create）とけす（Delete）は仕様にないので書かない -->
+  <rect x="20" y="20" width="360" height="400" rx="10" fill="#ffffff" stroke="#33b1dd" stroke-width="3" />
+
+  <!-- ヘッダー -->
+  <path d="M20 30 a10 10 0 0 1 10 -10 h340 a10 10 0 0 1 10 10 v50 h-360 z" fill="#33b1dd" />
+  <text x="200" y="62" text-anchor="middle" font-size="36" font-weight="700" fill="#ffffff">備品</text>
+
+  <!-- 属性 -->
+  <text x="44" y="114" font-size="26" fill="#6b7078">属性</text>
+  <text x="44" y="160" font-size="30" fill="#202228">名前</text>
+  <text x="44" y="200" font-size="30" fill="#202228">数</text>
+  <text x="44" y="240" font-size="30" fill="#202228">借りているか</text>
+
+  <!-- アクション -->
+  <path d="M20 260 h360 v150 a10 10 0 0 1 -10 10 h-340 a10 10 0 0 1 -10 -10 z" fill="#f1f2f4" />
+  <line x1="20" y1="260" x2="380" y2="260" stroke="#33b1dd" stroke-width="2" />
+  <text x="44" y="292" font-size="26" fill="#6b7078">アクション</text>
+  <text x="44" y="338" font-size="30" fill="#202228">借りる</text>
+  <text x="44" y="378" font-size="30" fill="#202228">返す</text>
+
+  <rect x="20" y="20" width="360" height="400" rx="10" fill="none" stroke="#33b1dd" stroke-width="3" />
+</svg>
diff --git a/design/imgs/fig-layout-list.svg b/design/imgs/fig-layout-list.svg
new file mode 100644
index 00000000..9d2d1441
--- /dev/null
+++ b/design/imgs/fig-layout-list.svg
@@ -0,0 +1,32 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 340" width="700" height="340" font-family="system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif">
+  <!-- 一覧のならべ方の型。リスト・グリッド・マッピングの3つ。
+       今日の備品貸出はリストが素直 -->
+
+  <!-- リスト -->
+  <rect x="20" y="20" width="190" height="230" rx="8" fill="#ffffff" stroke="#33b1dd" stroke-width="3" />
+  <rect x="36" y="38" width="158" height="40" rx="5" fill="#f1f2f4" stroke="#d3d6db" stroke-width="2" />
+  <rect x="36" y="86" width="158" height="40" rx="5" fill="#f1f2f4" stroke="#d3d6db" stroke-width="2" />
+  <rect x="36" y="134" width="158" height="40" rx="5" fill="#f1f2f4" stroke="#d3d6db" stroke-width="2" />
+  <rect x="36" y="182" width="158" height="40" rx="5" fill="#f1f2f4" stroke="#d3d6db" stroke-width="2" />
+  <text x="115" y="292" text-anchor="middle" font-size="32" font-weight="700" fill="#1c8fb5">リスト</text>
+  <text x="115" y="326" text-anchor="middle" font-size="24" fill="#6b7078">上から下に並べる</text>
+
+  <!-- グリッド -->
+  <rect x="255" y="20" width="190" height="230" rx="8" fill="#ffffff" stroke="#9aa1ab" stroke-width="2" />
+  <rect x="271" y="38" width="72" height="72" rx="5" fill="#f1f2f4" stroke="#d3d6db" stroke-width="2" />
+  <rect x="357" y="38" width="72" height="72" rx="5" fill="#f1f2f4" stroke="#d3d6db" stroke-width="2" />
+  <rect x="271" y="124" width="72" height="72" rx="5" fill="#f1f2f4" stroke="#d3d6db" stroke-width="2" />
+  <rect x="357" y="124" width="72" height="72" rx="5" fill="#f1f2f4" stroke="#d3d6db" stroke-width="2" />
+  <text x="350" y="292" text-anchor="middle" font-size="32" fill="#6b7078">グリッド</text>
+  <text x="350" y="326" text-anchor="middle" font-size="24" fill="#6b7078">格子状に並べる</text>
+
+  <!-- マッピング -->
+  <rect x="490" y="20" width="190" height="230" rx="8" fill="#ffffff" stroke="#9aa1ab" stroke-width="2" />
+  <path d="M506 200 q40 -60 80 -30 q40 30 78 -20" fill="none" stroke="#e3e6ea" stroke-width="3" />
+  <path d="M506 130 q50 40 90 -10 q40 -50 84 -10" fill="none" stroke="#e3e6ea" stroke-width="3" />
+  <circle cx="548" cy="88" r="13" fill="#c9ced6" />
+  <circle cx="612" cy="152" r="13" fill="#c9ced6" />
+  <circle cx="540" cy="192" r="13" fill="#c9ced6" />
+  <text x="585" y="292" text-anchor="middle" font-size="32" fill="#6b7078">マッピング</text>
+  <text x="585" y="326" text-anchor="middle" font-size="24" fill="#6b7078">地図の上に置く</text>
+</svg>
diff --git a/design/imgs/fig-layout-single.svg b/design/imgs/fig-layout-single.svg
new file mode 100644
index 00000000..3056c650
--- /dev/null
+++ b/design/imgs/fig-layout-single.svg
@@ -0,0 +1,40 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 340" width="700" height="340" font-family="system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif">
+  <!-- 詳細のならべ方の型。属性だけ／関連を少し見せる／関連を一覧で見せる。
+       今日の備品貸出は1つめ -->
+
+  <!-- 属性とアクションだけ -->
+  <rect x="20" y="20" width="190" height="230" rx="8" fill="#ffffff" stroke="#33b1dd" stroke-width="3" />
+  <rect x="36" y="38" width="60" height="60" rx="5" fill="#f1f2f4" stroke="#d3d6db" stroke-width="2" />
+  <rect x="108" y="48" width="86" height="10" rx="5" fill="#c9ced6" />
+  <rect x="108" y="72" width="52" height="9" rx="4" fill="#d3d6db" />
+  <rect x="36" y="118" width="158" height="10" rx="5" fill="#c9ced6" />
+  <rect x="36" y="142" width="120" height="10" rx="5" fill="#c9ced6" />
+  <rect x="36" y="196" width="110" height="30" rx="15" fill="#33b1dd" />
+  <text x="115" y="292" text-anchor="middle" font-size="30" font-weight="700" fill="#1c8fb5">属性だけ</text>
+  <text x="115" y="326" text-anchor="middle" font-size="24" fill="#6b7078">中身とアクション</text>
+
+  <!-- 関連を少し見せる -->
+  <rect x="255" y="20" width="190" height="230" rx="8" fill="#ffffff" stroke="#9aa1ab" stroke-width="2" />
+  <rect x="271" y="38" width="60" height="60" rx="5" fill="#f1f2f4" stroke="#d3d6db" stroke-width="2" />
+  <rect x="343" y="48" width="86" height="10" rx="5" fill="#c9ced6" />
+  <rect x="343" y="72" width="52" height="9" rx="4" fill="#d3d6db" />
+  <line x1="271" y1="118" x2="429" y2="118" stroke="#e3e6ea" stroke-width="2" />
+  <rect x="271" y="132" width="70" height="9" rx="4" fill="#d3d6db" />
+  <rect x="271" y="154" width="48" height="48" rx="5" fill="#f1f2f4" stroke="#d3d6db" stroke-width="2" />
+  <rect x="329" y="154" width="48" height="48" rx="5" fill="#f1f2f4" stroke="#d3d6db" stroke-width="2" />
+  <rect x="387" y="154" width="42" height="48" rx="5" fill="#f1f2f4" stroke="#d3d6db" stroke-width="2" />
+  <text x="350" y="292" text-anchor="middle" font-size="30" fill="#6b7078">関連を少し</text>
+  <text x="350" y="326" text-anchor="middle" font-size="24" fill="#6b7078">別のモノを添える</text>
+
+  <!-- 関連を一覧で見せる -->
+  <rect x="490" y="20" width="190" height="230" rx="8" fill="#ffffff" stroke="#9aa1ab" stroke-width="2" />
+  <rect x="506" y="38" width="52" height="52" rx="5" fill="#f1f2f4" stroke="#d3d6db" stroke-width="2" />
+  <rect x="570" y="48" width="94" height="10" rx="5" fill="#c9ced6" />
+  <rect x="570" y="70" width="52" height="9" rx="4" fill="#d3d6db" />
+  <line x1="506" y1="108" x2="664" y2="108" stroke="#e3e6ea" stroke-width="2" />
+  <rect x="506" y="122" width="158" height="30" rx="4" fill="#f1f2f4" stroke="#d3d6db" stroke-width="2" />
+  <rect x="506" y="160" width="158" height="30" rx="4" fill="#f1f2f4" stroke="#d3d6db" stroke-width="2" />
+  <rect x="506" y="198" width="158" height="30" rx="4" fill="#f1f2f4" stroke="#d3d6db" stroke-width="2" />
+  <text x="585" y="292" text-anchor="middle" font-size="30" fill="#6b7078">関連を一覧で</text>
+  <text x="585" y="326" text-anchor="middle" font-size="24" fill="#6b7078">別のモノを並べる</text>
+</svg>
diff --git a/design/imgs/fig-object-to-screen.svg b/design/imgs/fig-object-to-screen.svg
new file mode 100644
index 00000000..242b6b83
--- /dev/null
+++ b/design/imgs/fig-object-to-screen.svg
@@ -0,0 +1,62 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 360" width="1000" height="360" font-family="system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif">
+  <!-- 主役を1つ決めると、その見え方が2通りあるだけなので画面は2枚で足りる。
+       行の形は13枚目の一覧と揃えてある -->
+  <defs>
+    <marker id="ots-arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
+      <path d="M0 0 L10 5 L0 10 z" fill="#202228" />
+    </marker>
+  </defs>
+
+  <!-- 主役に決めたモノ -->
+  <text x="150" y="46" text-anchor="middle" font-size="28" fill="#6b7078">主役に決めたモノ</text>
+  <rect x="40" y="110" width="220" height="140" rx="12" fill="#ffffff" stroke="#33b1dd" stroke-width="4" />
+  <text x="150" y="198" text-anchor="middle" font-size="52" font-weight="700" fill="#202228">備品</text>
+
+  <line x1="290" y1="180" x2="370" y2="180" stroke="#202228" stroke-width="4" marker-end="url(#ots-arrow)" />
+
+  <!-- できあがる画面 -->
+  <text x="680" y="46" text-anchor="middle" font-size="28" fill="#6b7078">できあがる画面</text>
+
+  <!-- 備品の一覧 -->
+  <rect x="420" y="70" width="220" height="220" rx="10" fill="#ffffff" stroke="#33b1dd" stroke-width="3" />
+  <path d="M420 80 a10 10 0 0 1 10 -10 h200 a10 10 0 0 1 10 10 v34 h-220 z" fill="#33b1dd" />
+
+  <rect x="434" y="122" width="192" height="48" rx="6" fill="#ffffff" stroke="#e3e6ea" stroke-width="2" />
+  <rect x="442" y="130" width="32" height="32" rx="4" fill="#f1f2f4" stroke="#d3d6db" stroke-width="2" />
+  <rect x="450" y="137" width="16" height="11" rx="1" fill="none" stroke="#6b7078" stroke-width="1.8" />
+  <path d="M447 154 h22 l-2 -3 h-18 z" fill="none" stroke="#6b7078" stroke-width="1.8" stroke-linejoin="round" />
+  <rect x="484" y="140" width="58" height="9" rx="4" fill="#c9ced6" />
+  <rect x="556" y="134" width="60" height="24" rx="12" fill="#ffffff" stroke="#33b1dd" stroke-width="2" />
+
+  <rect x="434" y="178" width="192" height="48" rx="6" fill="#ffffff" stroke="#e3e6ea" stroke-width="2" />
+  <rect x="442" y="186" width="32" height="32" rx="4" fill="#f1f2f4" stroke="#d3d6db" stroke-width="2" />
+  <rect x="452" y="192" width="11" height="19" rx="2" fill="none" stroke="#6b7078" stroke-width="1.8" />
+  <rect x="484" y="196" width="58" height="9" rx="4" fill="#c9ced6" />
+  <rect x="556" y="190" width="60" height="24" rx="12" fill="#33b1dd" />
+
+  <rect x="434" y="234" width="192" height="48" rx="6" fill="#ffffff" stroke="#e3e6ea" stroke-width="2" />
+  <rect x="442" y="242" width="32" height="32" rx="4" fill="#f1f2f4" stroke="#d3d6db" stroke-width="2" />
+  <rect x="451" y="248" width="13" height="19" rx="2" fill="none" stroke="#6b7078" stroke-width="1.8" />
+  <circle cx="457" cy="253" r="2.2" fill="none" stroke="#6b7078" stroke-width="1.4" />
+  <rect x="484" y="252" width="58" height="9" rx="4" fill="#c9ced6" />
+  <rect x="556" y="246" width="60" height="24" rx="12" fill="#33b1dd" />
+
+  <text x="530" y="336" text-anchor="middle" font-size="30" fill="#202228">備品の一覧</text>
+
+  <line x1="660" y1="180" x2="700" y2="180" stroke="#202228" stroke-width="3" marker-start="url(#ots-arrow)" marker-end="url(#ots-arrow)" />
+
+  <!-- 備品の詳細 -->
+  <rect x="720" y="70" width="220" height="220" rx="10" fill="#ffffff" stroke="#33b1dd" stroke-width="3" />
+  <path d="M720 80 a10 10 0 0 1 10 -10 h200 a10 10 0 0 1 10 10 v34 h-220 z" fill="#33b1dd" />
+
+  <rect x="746" y="132" width="54" height="54" rx="7" fill="#f1f2f4" stroke="#d3d6db" stroke-width="2" />
+  <rect x="758" y="145" width="30" height="20" rx="2" fill="none" stroke="#6b7078" stroke-width="2.5" />
+  <path d="M752 174 h42 l-4 -5 h-34 z" fill="none" stroke="#6b7078" stroke-width="2.5" stroke-linejoin="round" />
+  <rect x="814" y="140" width="100" height="11" rx="5" fill="#c9ced6" />
+  <rect x="814" y="164" width="56" height="11" rx="5" fill="#d3d6db" />
+
+  <rect x="746" y="212" width="140" height="38" rx="19" fill="#33b1dd" />
+  <text x="816" y="238" text-anchor="middle" font-size="22" font-weight="700" fill="#ffffff">借りる</text>
+
+  <text x="830" y="336" text-anchor="middle" font-size="30" fill="#202228">備品の詳細</text>
+</svg>
diff --git a/design/imgs/fig-single.svg b/design/imgs/fig-single.svg
new file mode 100644
index 00000000..ff9c6c56
--- /dev/null
+++ b/design/imgs/fig-single.svg
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 430" width="400" height="430" font-family="system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif">
+  <!-- シングルビュー。オブジェクトが1つだけ見えていて、属性が並ぶ -->
+  <rect x="20" y="20" width="360" height="340" rx="12" fill="#ffffff" stroke="#33b1dd" stroke-width="3" />
+  <path d="M20 32 a12 12 0 0 1 12 -12 h336 a12 12 0 0 1 12 12 v44 h-360 z" fill="#33b1dd" />
+  <text x="200" y="62" text-anchor="middle" font-size="36" font-weight="700" fill="#ffffff">備品の詳細</text>
+  <path d="M60 48 L46 55 L60 62" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
+
+  <!-- 1つの備品。ノートPCのアイコンを大きく置く -->
+  <rect x="44" y="100" width="90" height="90" rx="10" fill="#f1f2f4" stroke="#d3d6db" stroke-width="2" />
+  <rect x="64" y="122" width="50" height="34" rx="3" fill="none" stroke="#6b7078" stroke-width="3" />
+  <path d="M56 172 h66 l-6 -8 h-54 z" fill="none" stroke="#6b7078" stroke-width="3" stroke-linejoin="round" />
+
+  <text x="152" y="130" font-size="26" fill="#6b7078">名前</text>
+  <text x="152" y="164" font-size="32" fill="#202228">ノートPC</text>
+
+  <text x="44" y="228" font-size="26" fill="#6b7078">数</text>
+  <text x="44" y="262" font-size="32" fill="#202228">3台</text>
+
+  <!-- 借りるアクション -->
+  <rect x="44" y="292" width="180" height="48" rx="24" fill="#33b1dd" />
+  <text x="134" y="324" text-anchor="middle" font-size="28" font-weight="700" fill="#ffffff">借りる</text>
+
+  <text x="200" y="404" text-anchor="middle" font-size="32" fill="#6b7078">備品が、1つだけ見える</text>
+</svg>
diff --git a/design/imgs/fig-summary.svg b/design/imgs/fig-summary.svg
new file mode 100644
index 00000000..e0b0a761
--- /dev/null
+++ b/design/imgs/fig-summary.svg
@@ -0,0 +1,78 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 480" width="1200" height="480" font-family="system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif">
+  <defs>
+    <marker id="sum-arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
+      <path d="M0 0 L10 5 L0 10 z" fill="#202228" />
+    </marker>
+  </defs>
+
+  <!-- 見出し -->
+  <text x="150" y="88" text-anchor="middle" font-size="30" fill="#6b7078">仕様</text>
+
+  <circle cx="450" cy="40" r="18" fill="#33b1dd" />
+  <text x="450" y="48" text-anchor="middle" font-size="32" font-weight="700" fill="#ffffff">1</text>
+  <text x="450" y="88" text-anchor="middle" font-size="30" fill="#202228">モノを決める</text>
+
+  <circle cx="750" cy="40" r="18" fill="#33b1dd" />
+  <text x="750" y="48" text-anchor="middle" font-size="32" font-weight="700" fill="#ffffff">2</text>
+  <text x="750" y="88" text-anchor="middle" font-size="30" fill="#202228">画面を決める</text>
+
+  <circle cx="1050" cy="40" r="18" fill="#33b1dd" />
+  <text x="1050" y="48" text-anchor="middle" font-size="32" font-weight="700" fill="#ffffff">3</text>
+  <text x="1050" y="88" text-anchor="middle" font-size="30" fill="#202228">ならべ方を決める</text>
+
+  <!-- 仕様 -->
+  <rect x="50" y="120" width="200" height="190" rx="8" fill="#f4f5f7" stroke="#b8bec7" stroke-width="2" stroke-dasharray="7 5" />
+  <rect x="72" y="150" width="156" height="12" rx="6" fill="#d3d6db" />
+  <rect x="72" y="190" width="156" height="12" rx="6" fill="#d3d6db" />
+  <rect x="72" y="230" width="156" height="12" rx="6" fill="#d3d6db" />
+  <rect x="72" y="270" width="156" height="12" rx="6" fill="#d3d6db" />
+
+  <line x1="285" y1="225" x2="320" y2="225" stroke="#202228" stroke-width="3" marker-end="url(#sum-arrow)" />
+
+  <!-- オブジェクト -->
+  <rect x="370" y="120" width="160" height="230" rx="8" fill="#ffffff" stroke="#33b1dd" stroke-width="3" />
+  <path d="M370 128 a8 8 0 0 1 8 -8 h144 a8 8 0 0 1 8 8 v36 h-160 z" fill="#33b1dd" />
+  <text x="450" y="151" text-anchor="middle" font-size="32" font-weight="700" fill="#ffffff">備品</text>
+  <rect x="392" y="182" width="116" height="11" rx="5" fill="#c9ced6" />
+  <rect x="392" y="208" width="116" height="11" rx="5" fill="#c9ced6" />
+  <rect x="392" y="234" width="116" height="11" rx="5" fill="#c9ced6" />
+  <path d="M370 258 h160 v84 a8 8 0 0 1 -8 8 h-144 a8 8 0 0 1 -8 -8 z" fill="#f1f2f4" />
+  <line x1="370" y1="258" x2="530" y2="258" stroke="#33b1dd" stroke-width="2" />
+  <rect x="392" y="278" width="116" height="11" rx="5" fill="#c9ced6" />
+  <rect x="392" y="308" width="116" height="11" rx="5" fill="#c9ced6" />
+
+  <line x1="585" y1="225" x2="620" y2="225" stroke="#202228" stroke-width="3" marker-end="url(#sum-arrow)" />
+
+  <!-- ビュー・ナビゲーション -->
+  <rect x="650" y="140" width="72" height="130" rx="6" fill="#f1f2f4" stroke="#b8bec7" stroke-width="2" />
+  <rect x="662" y="156" width="48" height="9" rx="4" fill="#d3d6db" />
+  <rect x="662" y="184" width="48" height="9" rx="4" fill="#c9ced6" />
+  <rect x="662" y="208" width="48" height="9" rx="4" fill="#c9ced6" />
+  <rect x="662" y="232" width="48" height="9" rx="4" fill="#c9ced6" />
+  <text x="686" y="296" text-anchor="middle" font-size="30" fill="#6b7078">一覧</text>
+
+  <line x1="728" y1="205" x2="782" y2="205" stroke="#202228" stroke-width="2" marker-start="url(#sum-arrow)" marker-end="url(#sum-arrow)" />
+
+  <rect x="788" y="140" width="72" height="130" rx="6" fill="#f1f2f4" stroke="#b8bec7" stroke-width="2" />
+  <rect x="800" y="156" width="48" height="9" rx="4" fill="#d3d6db" />
+  <rect x="800" y="182" width="48" height="20" rx="4" fill="#ffffff" stroke="#c9ced6" stroke-width="2" />
+  <rect x="800" y="212" width="48" height="42" rx="4" fill="#ffffff" stroke="#c9ced6" stroke-width="2" />
+  <text x="824" y="296" text-anchor="middle" font-size="30" fill="#6b7078">詳細</text>
+
+  <line x1="885" y1="225" x2="920" y2="225" stroke="#202228" stroke-width="3" marker-end="url(#sum-arrow)" />
+
+  <!-- レイアウト -->
+  <rect x="950" y="140" width="95" height="140" rx="6" fill="#f4f5f7" stroke="#9aa1ab" stroke-width="2" />
+  <rect x="966" y="158" width="63" height="10" rx="2" fill="#c9ced6" />
+  <rect x="966" y="186" width="63" height="10" rx="2" fill="#c9ced6" />
+  <rect x="966" y="210" width="63" height="10" rx="2" fill="#c9ced6" />
+  <rect x="966" y="234" width="63" height="10" rx="2" fill="#c9ced6" />
+  <circle cx="1022" cy="262" r="11" fill="#c9ced6" />
+
+  <rect x="1065" y="140" width="95" height="140" rx="6" fill="#f4f5f7" stroke="#9aa1ab" stroke-width="2" />
+  <rect x="1081" y="158" width="63" height="10" rx="2" fill="#c9ced6" />
+  <rect x="1081" y="186" width="63" height="24" rx="2" fill="none" stroke="#c9ced6" stroke-width="2" />
+  <rect x="1081" y="220" width="63" height="46" rx="2" fill="none" stroke="#c9ced6" stroke-width="2" />
+
+  <text x="600" y="452" text-anchor="middle" font-size="40" font-weight="700" fill="#1c8fb5">オブジェクトから考える</text>
+</svg>
diff --git a/design/imgs/fig-tap-a.svg b/design/imgs/fig-tap-a.svg
new file mode 100644
index 00000000..c36c8fa8
--- /dev/null
+++ b/design/imgs/fig-tap-a.svg
@@ -0,0 +1,86 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-50 0 1210 480" width="1210" height="480" font-family="system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif">
+  <!-- メニューから入ると、対象を選ぶ画面がもう1枚必要になる。
+       業務システムのメニュー画面は実際にこの形が多い。
+       押す場所は画面の外からバッジで指す（中に置くと通知バッジに見える） -->
+  <defs>
+    <marker id="tapa-arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
+      <path d="M0 0 L10 5 L0 10 z" fill="#33b1dd" />
+    </marker>
+    <marker id="tapa-point" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
+      <path d="M0 0 L10 5 L0 10 z" fill="#202228" />
+    </marker>
+  </defs>
+
+  <!-- ===== 画面1: メニュー ===== -->
+  <rect x="20" y="30" width="440" height="320" rx="10" fill="#ffffff" stroke="#33b1dd" stroke-width="3" />
+  <path d="M20 40 a10 10 0 0 1 10 -10 h420 a10 10 0 0 1 10 10 v42 h-440 z" fill="#33b1dd" />
+  <text x="240" y="69" text-anchor="middle" font-size="26" font-weight="700" fill="#ffffff">備品貸出システム</text>
+
+  <rect x="46" y="104" width="184" height="80" rx="8" fill="#f1f2f4" stroke="#d3d6db" stroke-width="2" />
+  <text x="138" y="152" text-anchor="middle" font-size="24" fill="#202228">一覧</text>
+
+  <rect x="250" y="104" width="184" height="80" rx="8" fill="#f1f2f4" stroke="#d3d6db" stroke-width="2" />
+  <text x="342" y="152" text-anchor="middle" font-size="24" fill="#202228">備品情報</text>
+
+  <!-- 貸出: ここを最初に押す -->
+  <rect x="46" y="204" width="184" height="80" rx="8" fill="#33b1dd" />
+  <text x="138" y="252" text-anchor="middle" font-size="24" font-weight="700" fill="#ffffff">貸出</text>
+
+  <rect x="250" y="204" width="184" height="80" rx="8" fill="#f1f2f4" stroke="#d3d6db" stroke-width="2" />
+  <text x="342" y="252" text-anchor="middle" font-size="24" fill="#202228">返却</text>
+
+  <!-- 1回目に押す場所 -->
+  <line x1="18" y1="244" x2="42" y2="244" stroke="#202228" stroke-width="3" marker-end="url(#tapa-point)" />
+  <circle cx="-12" cy="244" r="22" fill="#202228" />
+  <text x="-12" y="255" text-anchor="middle" font-size="28" font-weight="700" fill="#ffffff">1</text>
+
+  <!-- ===== 画面が切り替わる ===== -->
+  <text x="540" y="212" text-anchor="middle" font-size="26" fill="#6b7078">押すと</text>
+  <line x1="480" y1="240" x2="600" y2="240" stroke="#33b1dd" stroke-width="4" marker-end="url(#tapa-arrow)" />
+
+  <!-- ===== 画面2: 備品を選ぶ ===== -->
+  <rect x="620" y="30" width="440" height="320" rx="10" fill="#ffffff" stroke="#33b1dd" stroke-width="3" />
+  <path d="M620 40 a10 10 0 0 1 10 -10 h420 a10 10 0 0 1 10 10 v42 h-440 z" fill="#33b1dd" />
+  <text x="840" y="69" text-anchor="middle" font-size="26" font-weight="700" fill="#ffffff">貸出</text>
+
+  <text x="646" y="106" font-size="20" fill="#6b7078">貸し出す備品を選んでください</text>
+
+  <!-- 選択行 -->
+  <rect x="621" y="122" width="438" height="52" fill="#e8f6fc" />
+  <line x1="646" y1="122" x2="1034" y2="122" stroke="#eceef1" stroke-width="2" />
+  <line x1="646" y1="174" x2="1034" y2="174" stroke="#eceef1" stroke-width="2" />
+  <line x1="646" y1="226" x2="1034" y2="226" stroke="#eceef1" stroke-width="2" />
+  <line x1="646" y1="278" x2="1034" y2="278" stroke="#eceef1" stroke-width="2" />
+
+  <rect x="656" y="132" width="30" height="30" rx="4" fill="#f1f2f4" stroke="#d3d6db" stroke-width="2" />
+  <rect x="663" y="139" width="16" height="11" rx="1" fill="none" stroke="#6b7078" stroke-width="1.8" />
+  <path d="M660 155 h22 l-2 -3 h-18 z" fill="none" stroke="#6b7078" stroke-width="1.8" stroke-linejoin="round" />
+  <text x="700" y="156" font-size="24" fill="#202228">ノートPC</text>
+  <text x="1000" y="156" text-anchor="end" font-size="22" fill="#6b7078">3台</text>
+
+  <rect x="656" y="184" width="30" height="30" rx="4" fill="#f1f2f4" stroke="#d3d6db" stroke-width="2" />
+  <rect x="666" y="190" width="11" height="18" rx="2" fill="none" stroke="#6b7078" stroke-width="1.8" />
+  <text x="700" y="208" font-size="24" fill="#202228">タブレット</text>
+  <text x="1000" y="208" text-anchor="end" font-size="22" fill="#6b7078">5台</text>
+
+  <rect x="656" y="236" width="30" height="30" rx="4" fill="#f1f2f4" stroke="#d3d6db" stroke-width="2" />
+  <rect x="665" y="242" width="13" height="18" rx="2" fill="none" stroke="#6b7078" stroke-width="1.8" />
+  <circle cx="671" cy="247" r="2.2" fill="none" stroke="#6b7078" stroke-width="1.4" />
+  <text x="700" y="260" font-size="24" fill="#202228">スピーカー</text>
+  <text x="1000" y="260" text-anchor="end" font-size="22" fill="#6b7078">1台</text>
+
+  <rect x="656" y="288" width="30" height="30" rx="4" fill="#f1f2f4" stroke="#d3d6db" stroke-width="2" />
+  <rect x="659" y="298" width="12" height="11" rx="1" fill="none" stroke="#6b7078" stroke-width="1.8" />
+  <path d="M671 303 q6 -6 10 0 q4 6 6 0" fill="none" stroke="#6b7078" stroke-width="1.8" />
+  <text x="700" y="312" font-size="24" fill="#202228">延長コード</text>
+  <text x="1000" y="312" text-anchor="end" font-size="22" fill="#6b7078">4本</text>
+
+  <!-- ここでもう一度押さないと借りられない -->
+  <line x1="1090" y1="148" x2="1064" y2="148" stroke="#202228" stroke-width="3" marker-end="url(#tapa-point)" />
+  <circle cx="1120" cy="148" r="22" fill="#202228" />
+  <text x="1120" y="159" text-anchor="middle" font-size="28" font-weight="700" fill="#ffffff">2</text>
+
+  <!-- ===== キャプション ===== -->
+  <text x="240" y="410" text-anchor="middle" font-size="28" fill="#6b7078">まだ借りられない</text>
+  <text x="840" y="410" text-anchor="middle" font-size="28" fill="#1c8fb5">ここでやっと借りられる</text>
+</svg>
diff --git a/design/imgs/fig-tap-b.svg b/design/imgs/fig-tap-b.svg
new file mode 100644
index 00000000..c83fddff
--- /dev/null
+++ b/design/imgs/fig-tap-b.svg
@@ -0,0 +1,88 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 560" width="720" height="560" font-family="system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif">
+  <!-- 備品そのものを並べた画面。最初から備品が見えていて、探す画面が要らない。
+       カート型の標準パターンにしてある：
+         カードを2列で並べる
+         数量はステッパー（− 数 ＋）
+         実行ボタンはフッターに1つ
+       仕様の4つがこの1枚に収まっている：
+         備品の一覧を見る → 一覧そのもの
+         名前と数を見る   → 各カードに出ている
+         借りる           → 数を選んでフッターの借りる
+         返す             → 貸出中のカードから数を戻す -->
+  <defs>
+    <marker id="tapb-arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
+      <path d="M0 0 L10 5 L0 10 z" fill="#202228" />
+    </marker>
+  </defs>
+
+  <rect x="20" y="30" width="520" height="500" rx="10" fill="#ffffff" stroke="#33b1dd" stroke-width="3" />
+  <path d="M20 40 a10 10 0 0 1 10 -10 h500 a10 10 0 0 1 10 10 v44 h-520 z" fill="#33b1dd" />
+  <text x="280" y="70" text-anchor="middle" font-size="28" font-weight="700" fill="#ffffff">備品貸出システム</text>
+
+  <!-- ===== ノートPC: 1台えらんでいる ===== -->
+  <rect x="45" y="94" width="230" height="180" rx="8" fill="#ffffff" stroke="#33b1dd" stroke-width="2" />
+  <rect x="130" y="108" width="60" height="60" rx="7" fill="#f1f2f4" stroke="#d3d6db" stroke-width="2" />
+  <rect x="144" y="121" width="32" height="22" rx="2" fill="none" stroke="#6b7078" stroke-width="2.5" />
+  <path d="M138 153 h44 l-5 -6 h-34 z" fill="none" stroke="#6b7078" stroke-width="2.5" stroke-linejoin="round" />
+  <text x="160" y="196" text-anchor="middle" font-size="21" fill="#202228">ノートPC</text>
+  <text x="160" y="218" text-anchor="middle" font-size="15" fill="#6b7078">3台あり</text>
+  <rect x="86" y="232" width="30" height="28" rx="6" fill="#ffffff" stroke="#9aa1ab" stroke-width="2" />
+  <line x1="94" y1="246" x2="108" y2="246" stroke="#6b7078" stroke-width="2.5" stroke-linecap="round" />
+  <text x="160" y="253" text-anchor="middle" font-size="22" font-weight="700" fill="#202228">1</text>
+  <rect x="204" y="232" width="30" height="28" rx="6" fill="#33b1dd" />
+  <line x1="212" y1="246" x2="226" y2="246" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" />
+  <line x1="219" y1="239" x2="219" y2="253" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" />
+
+  <!-- ===== タブレット ===== -->
+  <rect x="295" y="94" width="230" height="180" rx="8" fill="#ffffff" stroke="#e3e6ea" stroke-width="2" />
+  <rect x="380" y="108" width="60" height="60" rx="7" fill="#f1f2f4" stroke="#d3d6db" stroke-width="2" />
+  <rect x="399" y="118" width="22" height="40" rx="3" fill="none" stroke="#6b7078" stroke-width="2.5" />
+  <circle cx="410" cy="152" r="1.8" fill="#6b7078" />
+  <text x="410" y="196" text-anchor="middle" font-size="21" fill="#202228">タブレット</text>
+  <text x="410" y="218" text-anchor="middle" font-size="15" fill="#6b7078">5台あり</text>
+  <rect x="336" y="232" width="30" height="28" rx="6" fill="#f4f5f7" stroke="#e3e6ea" stroke-width="2" />
+  <line x1="344" y1="246" x2="358" y2="246" stroke="#c9ced6" stroke-width="2.5" stroke-linecap="round" />
+  <text x="410" y="253" text-anchor="middle" font-size="22" fill="#9aa1ab">0</text>
+  <rect x="454" y="232" width="30" height="28" rx="6" fill="#33b1dd" />
+  <line x1="462" y1="246" x2="476" y2="246" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" />
+  <line x1="469" y1="239" x2="469" y2="253" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" />
+
+  <!-- ===== スピーカー ===== -->
+  <rect x="45" y="289" width="230" height="180" rx="8" fill="#ffffff" stroke="#e3e6ea" stroke-width="2" />
+  <rect x="130" y="303" width="60" height="60" rx="7" fill="#f1f2f4" stroke="#d3d6db" stroke-width="2" />
+  <rect x="148" y="313" width="24" height="40" rx="3" fill="none" stroke="#6b7078" stroke-width="2.5" />
+  <circle cx="160" cy="325" r="4" fill="none" stroke="#6b7078" stroke-width="2" />
+  <circle cx="160" cy="342" r="6" fill="none" stroke="#6b7078" stroke-width="2" />
+  <text x="160" y="391" text-anchor="middle" font-size="21" fill="#202228">スピーカー</text>
+  <text x="160" y="413" text-anchor="middle" font-size="15" fill="#6b7078">1台あり</text>
+  <rect x="86" y="427" width="30" height="28" rx="6" fill="#f4f5f7" stroke="#e3e6ea" stroke-width="2" />
+  <line x1="94" y1="441" x2="108" y2="441" stroke="#c9ced6" stroke-width="2.5" stroke-linecap="round" />
+  <text x="160" y="448" text-anchor="middle" font-size="22" fill="#9aa1ab">0</text>
+  <rect x="204" y="427" width="30" height="28" rx="6" fill="#33b1dd" />
+  <line x1="212" y1="441" x2="226" y2="441" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" />
+  <line x1="219" y1="434" x2="219" y2="448" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" />
+
+  <!-- ===== 延長コード ===== -->
+  <rect x="295" y="289" width="230" height="180" rx="8" fill="#ffffff" stroke="#e3e6ea" stroke-width="2" />
+  <rect x="380" y="303" width="60" height="60" rx="7" fill="#f1f2f4" stroke="#d3d6db" stroke-width="2" />
+  <rect x="388" y="324" width="20" height="18" rx="2" fill="none" stroke="#6b7078" stroke-width="2.5" />
+  <path d="M408 333 q11 -10 17 0 q6 10 8 0" fill="none" stroke="#6b7078" stroke-width="2.5" />
+  <text x="410" y="391" text-anchor="middle" font-size="21" fill="#202228">延長コード</text>
+  <text x="410" y="413" text-anchor="middle" font-size="15" fill="#6b7078">4本あり</text>
+  <rect x="336" y="427" width="30" height="28" rx="6" fill="#f4f5f7" stroke="#e3e6ea" stroke-width="2" />
+  <line x1="344" y1="441" x2="358" y2="441" stroke="#c9ced6" stroke-width="2.5" stroke-linecap="round" />
+  <text x="410" y="448" text-anchor="middle" font-size="22" fill="#9aa1ab">0</text>
+  <rect x="454" y="427" width="30" height="28" rx="6" fill="#33b1dd" />
+  <line x1="462" y1="441" x2="476" y2="441" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" />
+  <line x1="469" y1="434" x2="469" y2="448" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" />
+
+  <!-- ===== フッター: 実行ボタンは1つだけ ===== -->
+  <line x1="21" y1="484" x2="539" y2="484" stroke="#e3e6ea" stroke-width="2" />
+  <rect x="140" y="494" width="280" height="40" rx="20" fill="#33b1dd" />
+  <text x="280" y="521" text-anchor="middle" font-size="22" font-weight="700" fill="#ffffff">借りる</text>
+
+  <!-- 押す場所。画面の外から指す -->
+  <line x1="620" y1="514" x2="436" y2="514" stroke="#202228" stroke-width="3" marker-end="url(#tapb-arrow)" />
+  <circle cx="655" cy="514" r="26" fill="#202228" />
+  <text x="655" y="526" text-anchor="middle" font-size="32" font-weight="700" fill="#ffffff">1</text>
+</svg>
diff --git a/design/imgs/fig-ui-vs-visual.svg b/design/imgs/fig-ui-vs-visual.svg
new file mode 100644
index 00000000..deab34b3
--- /dev/null
+++ b/design/imgs/fig-ui-vs-visual.svg
@@ -0,0 +1,40 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 380" width="900" height="380" font-family="system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif">
+  <defs>
+    <marker id="uvv-arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
+      <path d="M0 0 L10 5 L0 10 z" fill="#6b7078" />
+    </marker>
+  </defs>
+
+  <!-- UIデザイン: 骨組み -->
+  <text x="220" y="40" text-anchor="middle" font-size="40" font-weight="700" fill="#1c8fb5">UIデザイン</text>
+  <text x="220" y="80" text-anchor="middle" font-size="28" fill="#6b7078">何を、どこに置くか</text>
+
+  <rect x="120" y="98" width="200" height="220" fill="#ffffff" stroke="#9aa1ab" stroke-width="2" />
+  <rect x="140" y="116" width="160" height="18" fill="#d3d6db" />
+  <rect x="140" y="158" width="160" height="14" fill="#d3d6db" />
+  <rect x="140" y="190" width="160" height="14" fill="#d3d6db" />
+  <rect x="140" y="222" width="160" height="14" fill="#d3d6db" />
+  <rect x="230" y="272" width="70" height="28" fill="#d3d6db" />
+
+  <text x="220" y="360" text-anchor="middle" font-size="32" fill="#1c8fb5">今日のメインはこっち</text>
+
+  <!-- 矢印 -->
+  <text x="445" y="182" text-anchor="middle" font-size="26" fill="#6b7078">見た目をつける</text>
+  <line x1="370" y1="208" x2="520" y2="208" stroke="#6b7078" stroke-width="3" marker-end="url(#uvv-arrow)" />
+
+  <!-- ビジュアルデザイン: 見た目 -->
+  <text x="670" y="40" text-anchor="middle" font-size="40" font-weight="700" fill="#6b7078">ビジュアルデザイン</text>
+  <text x="670" y="80" text-anchor="middle" font-size="28" fill="#6b7078">どんな見た目にするか</text>
+
+  <rect x="570" y="98" width="200" height="220" rx="14" fill="#ffffff" stroke="#33b1dd" stroke-width="3" />
+  <path d="M570 112 a14 14 0 0 1 14 -14 h172 a14 14 0 0 1 14 14 v26 h-200 z" fill="#33b1dd" />
+  <rect x="590" y="156" width="24" height="24" rx="6" fill="#33b1dd" />
+  <rect x="626" y="162" width="124" height="12" rx="6" fill="#c9ced6" />
+  <rect x="590" y="188" width="24" height="24" rx="6" fill="#ffffff" stroke="#9aa1ab" stroke-width="2" />
+  <rect x="626" y="194" width="124" height="12" rx="6" fill="#c9ced6" />
+  <rect x="590" y="220" width="24" height="24" rx="6" fill="#ffffff" stroke="#9aa1ab" stroke-width="2" />
+  <rect x="626" y="226" width="124" height="12" rx="6" fill="#c9ced6" />
+  <rect x="680" y="270" width="70" height="32" rx="16" fill="#33b1dd" />
+
+  <text x="670" y="360" text-anchor="middle" font-size="32" fill="#6b7078">最後に少し触れます</text>
+</svg>
diff --git a/design/imgs/fig-ui.svg b/design/imgs/fig-ui.svg
new file mode 100644
index 00000000..c40b65cc
--- /dev/null
+++ b/design/imgs/fig-ui.svg
@@ -0,0 +1,42 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 470" width="1000" height="470" font-family="system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif">
+  <!-- 左右はどちらも同じくUIの部品なので、箱の塗りとラベルは同格。
+       違いは枠線の色と、部品そのものの色だけで示す。
+       片方だけ塗りを強くすると「UI＝操作するもの」に見えてしまう -->
+
+  <!-- 見せるもの -->
+  <text x="260" y="48" text-anchor="middle" font-size="40" font-weight="700" fill="#202228">見せるもの</text>
+  <rect x="40" y="76" width="440" height="300" rx="14" fill="#fafafa" stroke="#9aa1ab" stroke-width="2" />
+
+  <rect x="90" y="132" width="80" height="12" rx="6" fill="#9aa1ab" />
+  <rect x="90" y="154" width="56" height="12" rx="6" fill="#9aa1ab" />
+  <text x="210" y="162" font-size="36" fill="#202228">文字</text>
+
+  <rect x="90" y="222" width="80" height="10" rx="5" fill="#9aa1ab" />
+  <rect x="90" y="238" width="80" height="10" rx="5" fill="#9aa1ab" />
+  <rect x="90" y="254" width="80" height="10" rx="5" fill="#9aa1ab" />
+  <text x="210" y="252" font-size="36" fill="#202228">リスト</text>
+
+  <rect x="90" y="300" width="80" height="60" rx="6" fill="#ffffff" stroke="#9aa1ab" stroke-width="3" />
+  <circle cx="112" cy="320" r="7" fill="#9aa1ab" />
+  <path d="M98 352 l22 -24 l16 17 l12 -12 l18 19 z" fill="#9aa1ab" />
+  <text x="210" y="342" font-size="36" fill="#202228">画像</text>
+
+  <!-- 操作するもの -->
+  <text x="740" y="48" text-anchor="middle" font-size="40" font-weight="700" fill="#202228">操作するもの</text>
+  <rect x="520" y="76" width="440" height="300" rx="14" fill="#fafafa" stroke="#33b1dd" stroke-width="2" />
+
+  <rect x="570" y="130" width="80" height="40" rx="20" fill="#33b1dd" />
+  <text x="690" y="162" font-size="36" fill="#202228">ボタン</text>
+
+  <rect x="580" y="210" width="60" height="60" rx="12" fill="#33b1dd" />
+  <path d="M594 240 l12 14 l22 -24" fill="none" stroke="#ffffff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" />
+  <text x="690" y="252" font-size="36" fill="#202228">チェック</text>
+
+  <rect x="570" y="308" width="80" height="44" rx="6" fill="#ffffff" stroke="#33b1dd" stroke-width="3" />
+  <rect x="582" y="322" width="34" height="10" rx="5" fill="#c9ced6" />
+  <line x1="628" y1="318" x2="628" y2="342" stroke="#33b1dd" stroke-width="3" />
+  <text x="690" y="342" font-size="36" fill="#202228">入力欄</text>
+
+  <!-- 第1章の結論。スライドだけで復習できるように図に入れてある -->
+  <text x="500" y="448" text-anchor="middle" font-size="36" font-weight="700" fill="#1c8fb5">この2つを、どこに置くか決める</text>
+</svg>
diff --git a/design/imgs/fig-way-a.svg b/design/imgs/fig-way-a.svg
new file mode 100644
index 00000000..76665ab4
--- /dev/null
+++ b/design/imgs/fig-way-a.svg
@@ -0,0 +1,29 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 560 400" width="560" height="400" font-family="system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif">
+  <!-- 仕様の4行をそのままメニューにした画面。
+       スマホに機能ボタンが4つ並ぶトップ画面は現実にないが、
+       業務システムのメニュー画面はこの形が実際に多い。
+       だからPCの管理画面として描いてある -->
+
+  <!-- ウィンドウ -->
+  <rect x="20" y="20" width="520" height="360" rx="10" fill="#ffffff" stroke="#33b1dd" stroke-width="3" />
+  <path d="M20 30 a10 10 0 0 1 10 -10 h500 a10 10 0 0 1 10 10 v44 h-520 z" fill="#33b1dd" />
+  <text x="280" y="60" text-anchor="middle" font-size="28" font-weight="700" fill="#ffffff">備品貸出システム</text>
+
+  <text x="280" y="104" text-anchor="middle" font-size="22" fill="#6b7078">メニューを選んでください</text>
+
+  <!-- 一覧（仕様の1行目） -->
+  <rect x="50" y="124" width="220" height="94" rx="8" fill="#f1f2f4" stroke="#d3d6db" stroke-width="2" />
+  <text x="160" y="180" text-anchor="middle" font-size="26" fill="#202228">一覧</text>
+
+  <!-- 備品情報（仕様の2行目） -->
+  <rect x="290" y="124" width="220" height="94" rx="8" fill="#f1f2f4" stroke="#d3d6db" stroke-width="2" />
+  <text x="400" y="180" text-anchor="middle" font-size="26" fill="#202228">備品情報</text>
+
+  <!-- 貸出（仕様の3行目） -->
+  <rect x="50" y="238" width="220" height="94" rx="8" fill="#f1f2f4" stroke="#d3d6db" stroke-width="2" />
+  <text x="160" y="294" text-anchor="middle" font-size="26" fill="#202228">貸出</text>
+
+  <!-- 返却（仕様の4行目） -->
+  <rect x="290" y="238" width="220" height="94" rx="8" fill="#f1f2f4" stroke="#d3d6db" stroke-width="2" />
+  <text x="400" y="294" text-anchor="middle" font-size="26" fill="#202228">返却</text>
+</svg>
diff --git a/design/slide.md b/design/slide.md
index cdf9e029..721cce26 100644
--- a/design/slide.md
+++ b/design/slide.md
@@ -2,15 +2,252 @@
 marp: true
 theme: uncover
 paginate: true
+style: |
+  /* 見出しは2行になっても、行の長さが揃うようにする */
+  section h1,
+  section h2 {
+    letter-spacing: 1px;
+    line-height: 1.25;
+    text-wrap: balance;
+  }
+
+  section li {
+    line-height: 1.5;
+  }
+
+  /* 見出しと本文、図のまわりの余白をそろえる */
+  section h2 {
+    margin: 0 0 0.5em;
+  }
+
+  section p:has(img) {
+    margin: 0.5em 0 0;
+  }
+
+  /* 箇条書きは内容の幅で中央に置き、見出しと中心をそろえる */
+  section ul,
+  section ol {
+    display: table;
+    margin: 0 auto 0.3em;
+  }
+
+  /* ヘッダーがあるスライドは、上に余白を足して見出しとぶつからないようにする */
+  section[data-header] {
+    padding-top: 76px;
+  }
+
+  /* 箇条書きの点を、見出しと同じアクセントカラーの四角にする */
+  section ul {
+    list-style: none;
+    padding-left: 0;
+  }
+
+  section ul > li {
+    padding-left: 1.1em;
+    position: relative;
+  }
+
+  section ul > li::before {
+    background: var(--color-highlight-heading);
+    border-radius: 3px;
+    content: "";
+    height: 0.36em;
+    left: 0;
+    position: absolute;
+    top: 0.6em;
+    width: 0.36em;
+  }
+
+  /* 番号は、丸バッジにして順序を目立たせる */
+  section ol {
+    counter-reset: item;
+    list-style: none;
+    padding-left: 0;
+  }
+
+  section ol > li {
+    counter-increment: item;
+    padding-left: 1.9em;
+    position: relative;
+  }
+
+  section ol > li::before {
+    background: var(--color-highlight-heading);
+    border-radius: 50%;
+    color: var(--color-background);
+    content: counter(item);
+    font-size: 0.6em;
+    font-weight: 700;
+    height: 1.65em;
+    left: 0;
+    letter-spacing: 0;
+    line-height: 1.65em;
+    position: absolute;
+    text-align: center;
+    top: 0.45em;
+    width: 1.65em;
+  }
+
+  /* 目次は行間を広げる */
+  section.agenda li {
+    margin-bottom: 0.4em;
+  }
+
+  /* 章の扉は、見出しを大きくしてアクセントカラーの下線を引く */
+  section.chapter h2 {
+    font-size: 2.1em;
+  }
+
+  section.chapter h2::after {
+    background: var(--color-highlight-heading);
+    border-radius: 3px;
+    content: "";
+    display: block;
+    height: 6px;
+    margin: 0.45em auto 0;
+    width: 2.2em;
+  }
+
+  /* 小節の扉は、章の扉より1段小さくして親子関係がわかるようにする */
+  section.chapter.sub h2 {
+    font-size: 1.5em;
+  }
+
+  /* 章の結論は、囲み枠にして「あとで戻ってくる場所」にする */
+  section.point h2 {
+    color: var(--color-header);
+    font-size: 1.1em;
+  }
+
+  section.point h2 + p {
+    background: var(--color-background-code);
+    border: 3px solid var(--color-highlight-heading);
+    border-radius: 12px;
+    display: table;
+    font-size: 1.35em;
+    font-weight: 700;
+    /* 見出しと同じ字間にしないと、中心がわずかにずれて見える */
+    letter-spacing: 1px;
+    line-height: 1.4;
+    margin: 0 auto;
+    padding: 0.7em 1em;
+    text-wrap: balance;
+  }
+
+  /* 手を動かすスライドは、見出しの上にラベルを置いて説明と見分けられるようにする */
+  section.exercise h3 {
+    background: var(--color-highlight-heading);
+    border-radius: 999px;
+    color: var(--color-background);
+    display: table;
+    font-size: 0.6em;
+    letter-spacing: 2px;
+    margin: 0 auto 0.5em;
+    padding: 0.2em 1.1em;
+  }
+
+  /* つくるアプリの仕様は、カードに入れて何度でも同じ形で見せる */
+  section.spec ul {
+    background: var(--color-background-code);
+    border-left: 6px solid var(--color-highlight-heading);
+    border-radius: 6px;
+    display: table;
+    font-size: 1.15em;
+    padding: 0.6em 1.3em;
+  }
+
+  /* 仕様のどこに注目しているかを、色でも示す */
+  section.spec li strong {
+    color: var(--color-highlight-heading);
+  }
+
+  /* 仕様カードの上に置くラベル */
+  section.spec h2 + p {
+    font-size: 0.8em;
+  }
+
+  /* 見出しのなかで、いちばん言いたい一語だけを大きくする */
+  section h2 .big {
+    color: var(--color-highlight-heading);
+    display: block;
+    font-size: 1.5em;
+    margin-top: 0.15em;
+  }
+
+  /* 図を並べる表は、罫線を消してラベルを控えめにする */
+  section table > thead > tr > th {
+    border-bottom: none;
+    color: var(--color-header);
+    font-size: 0.7em;
+    font-weight: 400;
+  }
+
+  /* テキストと図を1行に並べ、余った幅をスライドの左右に均等に配る。
+     bg right は図をパネル中央に固定するので、テキストとのあいだだけが空く */
+  section.split {
+    text-align: left;
+  }
+
+  section.split header {
+    text-align: center;
+  }
+
+  section.split .cols {
+    align-items: center;
+    display: flex;
+    gap: 56px;
+    justify-content: center;
+    width: 100%;
+  }
+
+  /* 行頭を揃えるため、左のテキストは1つの塊にする。
+     幅を固定しないと、テキスト量の差で図の位置がスライドごとに動き、
+     送ったときにガタつく。入りきらないときは flex が縮めてくれる */
+  section.split .txt {
+    width: 640px;
+  }
+
+  section.split .cols p:has(img) {
+    margin: 0;
+  }
+
+  section.split h2 {
+    font-size: 1.3em;
+  }
+
+  section.split ul,
+  section.split ol {
+    font-size: 0.95em;
+    margin-left: 0;
+  }
+
+  section.split p {
+    font-size: 0.95em;
+  }
+
+  /* リンクが多いスライドは、文字を小さくして1行に収める */
+  section.small ul {
+    font-size: 0.7em;
+  }
 ---
 
 # 使いやすいUIデザイン
 
-<!-- textlint-disable ja-technical-writing/ja-no-mixed-period -->  
+<!-- textlint-disable ja-technical-writing/ja-no-mixed-period -->
 
 ---
 
-## 目次
+<!-- _class: point -->
+
+## この時間の目標
+
+**チームで作るアプリの画面**を<br>自分で考えられるようになる
+
+---
+
+<!-- _class: agenda -->
+
+## 今日は4本立て
 
 1. UIとは
 2. UIを作ってみる
@@ -20,347 +257,342 @@ paginate: true
 ---
 
 <!-- header: 1. UIとは -->
+<!-- _class: chapter -->
 
 ## 1. UIとは
 
 ---
 
-## User Interface (UI)
+## 「UI ＝ 見た目」<br>**ではない**
 
-UIは、ユーザーと情報の境界。情報をやり取りする
+**UI**と聞くと、<br>色や形を思い浮かべがち
 
-![ui-sample](./imgs/design-ui-sample.png)
+---
+
+## UIデザインと<br>ビジュアルデザインは別
+
+![height:330px](./imgs/fig-ui-vs-visual.svg)
 
 ---
 
-## UIは、情報の**表示**と**操作**を提供する
+## **UI** ＝ **User Interface**
 
-- ユーザーに**情報を表示**する
-- **情報の操作**をユーザーに提供する
+ユーザーと**サービス**の<br>**あいだ**にあるもの
 
-![height:150px](./imgs/design-ui.svg)
+![height:280px](./imgs/fig-interface.svg)
 
 ---
 
-## UIデザインとビジュアルデザインは別
-
-- ビジュアルデザインは、表現や装飾を重視
-  - 色や形、フォントなどを考える
-- UIデザインは、UserInterfaceの設計を重視
-  - 情報の表示と操作を考える
+## その**あいだ**にあるのは、<br>この**2種類**
 
-今回は**UIデザイン**の話
+![height:420px](./imgs/fig-ui.svg)
 
 ---
 
 <!-- header: 2. UIを作ってみる -->
+<!-- _class: chapter -->
 
-## 早速UIを作ってみよう
+## 2. UIを作ってみる
 
 ---
 
-## ToDoアプリを考えてみる
+<!-- _class: exercise spec -->
 
----
+### ハンズオン ①
 
-## やってみよう: ToDoアプリのUI
+## 備品貸出アプリを考えてみよう！
 
-- ToDo一覧を**見る**
-- 新しいToDoを**追加する**
-- 追加したToDoを**完了にする**
-- ToDoのタイトルと詳細を**書く**
+学校の備品を借りるアプリ
 
-これらの機能が実現できるアプリ
+- 備品の一覧を**見る**
+- 備品の**名前と数を見る**
+- 備品を**借りる**
+- 借りた備品を**返す**
 
 ---
-## 機能から**直接**UIを作ると、使いにくい
 
-- 同じ画面がたくさんある
-- ToDoがすぐ表示されない
-- 機能を選択してToDoが表示
+<!-- _class: split -->
 
-![bg contain right:40%](./imgs/design01.png)
+<div class="cols">
+<div class="txt">
 
----
+## 機能から**直接**UIを作ると<br>使いにくい
 
-## 機能を**抽象化**してUIを作ると、使いやすい
+</div>
 
+![h:330](./imgs/fig-way-a.svg)
 
-![bg contain right:40%](./imgs/design02.png)
+</div>
 
 ---
 
-## 機能からオブジェクトを抽出する
+## ボタンを並べると**2タップ必要**
 
-- オブジェクトを基準にUIを考える
-- 機能から直接UIを作らない
+![height:410px](./imgs/fig-tap-a.svg)
 
 ---
 
-## **オブジェクトを抽出**してから、UIを作ろう
+## 備品を並べると**1タップ**
+
+![height:480px](./imgs/fig-tap-b.svg)
 
 ---
 
-<!-- header: 3. UIデザインの流れ -->
+## 同じ画面を**何枚も作らずに済む**
 
-## 3. UIデザインの流れ
+![height:470px](./imgs/fig-compare.svg)
 
 ---
 
-## UIデザインの流れの図
+<!-- _class: point -->
 
-![height:460px](./imgs/design-flow.svg)
+## 主役にした**備品**を<br>**オブジェクト**と呼ぶ
 
----
+**オブジェクト**を決めてから、<br>画面を作る
 
-<!-- header: 3.1. UIデザインの流れ オブジェクト抽出 -->
+LINEならトーク、Amazonなら商品
 
-## 3.1 オブジェクト抽出
+---
 
-- 機能から**オブジェクト**を抽出
-- オブジェクトは、**属性**と**アクション**を持つ
-- わかる人向け: UMLのクラス図のようなイメージ
+## **備品**を主役にしたから、<br>画面はこの2つになった
+
+![height:360px](./imgs/fig-object-to-screen.svg)
 
 ---
 
-## オブジェクトとは、ユーザーが操作する対象物
+<!-- header: 3. UIデザインの流れ -->
+<!-- _class: chapter -->
 
-- オブジェクトの詳細やプロパティとして、属性を持つ
+## 3. UIデザインの流れ
 
----
+![height:340px](./imgs/fig-flow.svg)
 
-## アクションは**C(R)UD**で考える
+---
 
-CRUDは、Create Read Update Delete
+## **ビュー**はモノが見える場所、<br>**アクション**はモノにできること
 
-- Readはビューで実現する。アクションにしない
+![height:340px](./imgs/fig-bridge.svg)
 
 ---
 
-## ToDoアプリで、オブジェクト抽出
+<!-- header: 3.1 モノを決める -->
+<!-- _class: chapter sub -->
+
+## 3.1 モノを決める
 
-- ToDo一覧を見る
-- 新しいToDoを追加する
-- 追加したToDoを完了にする
-- ToDoのタイトルと詳細を書く
+仕様から**オブジェクト**を拾い出す
+
+![height:180px](./imgs/fig-flow-step1.svg)
 
 ---
 
-## ToDoアプリで、オブジェクトは**ToDo**だけ
+## モノには**情報**があり、<br>**できること**がある
 
-- **ToDo**一覧を見る
-- 新しい**ToDo**を追加する
-- 追加した**ToDo**を完了にする
-- **ToDo**のタイトルと詳細を書く
+- 持っている情報を**属性**という
+- できることが**アクション**
 
 ---
 
-## ToDoアプリで、ToDoの属性は**タイトル・詳細・完了したか**
+## モノを拾い出す手順は3つ
 
-- ToDo一覧を見る
-- 新しいToDoを追加する
-- 追加したToDoを**完了**にする
-- ToDoの**タイトル**と**詳細**を書く
+1. 名詞に**線**を引く
+2. 同じものを**まとめる**
+3. **属性**と**アクション**に分ける
 
 ---
 
-## ToDoアプリで、ToDoのアクションは**Create・Update**
+## 名詞に線を引くと、<br>**備品**だけが残る
 
-- ToDo一覧を**見る** (Read)
-- 新しいToDoを**追加する** (Create)
-- 追加したToDoを**完了にする** (Update)
-- ToDoのタイトルと詳細を**書く** (Update)
+![height:340px](./imgs/fig-extract-demo.svg)
 
 ---
 
-## ToDoアプリのオブジェクトを抽出した結果
+<!-- _class: exercise -->
+
+### ハンズオン ②
 
-- オブジェクトは、**ToDo**
-- ToDoの属性は、**タイトル・詳細・完了したか**
-- ToDoのアクションは、**Create・Update**
+## 仕様に出てくる**名詞**を<br>書き出してみよう
 
-![bg height:460px right:30%](./imgs/design-todo01.svg)
+スケッチブックに、思いつくものを全部（**1分**）
 
 ---
 
-## オブジェクト抽出ができました
+<!-- _class: split -->
 
-![height:460px](./imgs/design-todo01.svg)
+<div class="cols">
+<div class="txt">
 
----
+## アクションは<br>**つくる・かえる・けす**
 
-<!-- header: 3.2. UIデザインの流れ ビュー・ナビゲーション -->
+英語でCreate・Update・Delete
 
-## 3.2. ビュー・ナビゲーション
+**見る**はアクションにしない。<br>押した先にあるのは画面だけ
 
----
+</div>
 
-## ビューとは、ユーザーに情報を表示する領域
+![h:300](./imgs/fig-way-a.svg)
 
-例えば、リストやフォームやページなど
-ビューには、**コレクションビュー**と**シングルビュー**がある
+</div>
 
 ---
 
-## コレクションビューは**同じオブジェクトを複数**表示する
-
-**Create**・**Delete**アクションを配置する
+<!-- _class: split -->
 
-オブジェクトによっては、Updateアクションも配置
+<div class="cols">
+<div class="txt">
 
----
+## 備品は、属性3つと<br>アクション2つを持つ
 
-## シングルビューは**1つのオブジェクト**を表示する
+- 属性は<br>**名前・数・借りているか**
+- アクションは<br>**借りる・返す**
 
-**Update**・**Delete**アクションを配置する
+**つくる・けす**は、先生の仕事。<br>だから仕様になく、作らない
 
----
+</div>
 
-## ナビゲーションとは、ビュー同士の呼び出し関係
+![h:440](./imgs/fig-item-object.svg)
 
-どのビューからどのビューに遷移できるか
+</div>
 
 ---
 
-## まず、遷移できるナビゲーションを全て書き出す
+<!-- header: 3.2 画面を決める -->
+<!-- _class: chapter sub -->
 
-1. **コレクション**から**シングル**へナビゲーション
-2. 別オブジェクトからのナビゲーション
+## 3.2 画面を決める
 
-![bg contain right:40%](./imgs/design-view.svg)
+モノが見える場所（**ビュー**）と、<br>その行き来（**ナビゲーション**）
 
----
+![height:180px](./imgs/fig-flow-step2.svg)
 
-## その後、ビュー・ナビゲーションを削る
+---
 
-- 複数のビューを1つのビューにまとめる
-- 必要のないナビゲーションをなくす
+## ビューは「**一覧**」と<br>「**詳細**」の2種類
 
-![bg contain right:40%](./imgs/design-navigation.svg)
+| コレクションビュー（一覧） | シングルビュー（詳細） |
+| --- | --- |
+| ![height:380px](./imgs/fig-collection.svg) | ![height:380px](./imgs/fig-single.svg) |
 
 ---
 
-## ToDoアプリで、ビュー
+## アクションは、そのモノが<br>見えている**ビュー**に置く
 
-- ToDoリストが並ぶコレクションビュー
-- ToDoのタイトルと詳細があるシングルビュー
+![height:380px](./imgs/fig-action-place.svg)
 
 ---
 
-## ToDoアプリで、ナビゲーション
+<!-- _class: split -->
 
-![height:300px](./imgs/design-todo02.svg)
+<div class="cols">
+<div class="txt">
 
----
+## ナビゲーションは<br>ビュー同士の行き来
 
-<!-- header: 3.3. UIデザインの流れ レイアウト-->
+一覧から備品を選ぶと詳細へ。<br>詳細から戻ると一覧へ
 
-## 3.3 レイアウト
+オブジェクトが増えたら、<br>まず全部書き出してから削る
 
----
+</div>
 
-## ビュー・ナビゲーションから、レイアウトを考える
+![h:380](./imgs/fig-item-navigation.svg)
 
-- いわゆるワイヤーフレーム
-- ビューの数だけレイアウトを考える
-- 既存アプリを参考にしよう
+</div>
 
 ---
 
-## コレクションビューのレイアウト3種
+<!-- header: 3.3 ならべ方を決める -->
+<!-- _class: chapter sub -->
 
-- リスト :scroll:
-- グリッド :hash:
-- マッピング :globe_with_meridians:
+## 3.3 ならべ方を決める
 
-![bg contain right:50%](./imgs/design05.png)
+**レイアウト**。色や飾りはつけず、<br>置き場所だけを描く（**ワイヤーフレーム**）
 
----
+![height:180px](./imgs/fig-flow-step3.svg)
 
-## シングルビューのレイアウト3種
+---
 
-- 属性とアクションだけ
-- 関連オブジェクトをプレビュー
-- 関連オブジェクトのコレクションビューを含む
+## 画面のならべ方には、<br>決まった型がある
 
-![bg contain right:40%](./imgs/design04.png)
+| 一覧のならべ方 | 詳細のならべ方 |
+| --- | --- |
+| ![height:250px](./imgs/fig-layout-list.svg) | ![height:250px](./imgs/fig-layout-single.svg) |
 
 ---
 
-## アクションは**オブジェクトの近く**にレイアウトする
+<!-- _class: exercise -->
 
----
+### ハンズオン ③
 
-## やってみよう: ToDoアプリで、レイアウト
+## 3ステップで、<br>描き直してみよう
 
-| オブジェクト | ナビゲーション |
-| --- | --- |
-| ![height:300px](./imgs/design-todo01.svg) | ![height:300px](./imgs/design-todo02.svg) |
+1. **モノ**を決める
+2. **画面**を決める
+3. **ならべ方**を決める
+
+新しいページに。<br>最初の絵は消さないでください
 
 ---
 
-## ToDoアプリで、レイアウト
+<!-- _class: split -->
 
-- ToDoリストが並ぶコレクションビュー
-- ToDoのタイトルと詳細があるシングルビュー
+<div class="cols">
+<div class="txt">
 
-![bg contain right](./imgs/design03.png)
+## 答え: 備品貸出アプリの<br>レイアウト
 
----
+- 備品が並ぶ<br>**コレクションビュー**
+- 備品1つが見える<br>**シングルビュー**
+
+最初の絵と、<br>見比べてみてください
 
-## UIデザインの流れのまとめ
+</div>
 
-1. オブジェクト抽出
-2. ビュー・ナビゲーション
-3. レイアウト
+![h:420](./imgs/fig-answer.svg)
+
+</div>
 
 ---
 
 <!-- header: 4. ビジュアルデザイン -->
 
-## 4. ビジュアルデザイン
-
----
+## 見た目は、この**4つ**で<br>だいぶよくなる
 
-## ビジュアルデザインは、UIの**見た目**をデザインする
+- **近接**: 関係あるものを近づける
+- **整列**: 端をそろえる
+- **反復**: 同じものは同じ見た目にする
+- **コントラスト**: 差をはっきりつける
 
 ---
 
-## ビジュアルデザインのポイント
+## 見た目は、発明しない。<span class="big">真似る</span>
 
-- 既存のビジュアルデザインを真似て作る
-- ビジュアルデザインを学ぶと個性が出せる
-- ただ、難しい
+似たようなアプリを見て、<br>同じように置けばいい
 
 ---
 
-## ビジュアルデザインの例
+<!-- header: "" -->
 
-- **デザイン4つの基本原則**
-  - コントラスト 反復 整列 近接
-- **デザインシステム**
-  - ビューやナビゲーション、ビジュアルデザインを体系立ててまとめたもの
-  - アプリ全体で一貫したデザインにできる
+## まとめ
 
-例えば、デジタル庁のデザインシステムやMaterialDesign
+![height:440px](./imgs/fig-summary.svg)
 
 ---
 
-<!-- header: "" -->
+## 明日から、自分のチームの<br>アプリでやる
 
-## まとめ
+仕様を書いたら、**名詞に線を引く**
 
-- UIとは、情報の表示と操作を提供する
-- UIデザインは、オブジェクトから考える
-- UIデザインの流れは、オブジェクト抽出、ビュー・ナビゲーション、レイアウト
-- ビジュアルデザインは、UIの見た目をデザインする
+それだけで、つくる画面が見えてくる
 
 ---
 
-## 出典
+<!-- _class: small -->
+
+## 出典・もっと知りたくなったら
 
-- デジタル庁デザインシステムウェブサイト <https://design.digital.go.jp/>
-- オブジェクト指向UIデザイン <https://amzn.asia/d/4vxk6h5>
-- ノンデザイナーズ・デザインブック <https://amzn.asia/d/6LvdOd9>
-- MaterialDesignGuidelines <https://m3.material.io/>
+- オブジェクト指向UIデザイン（今日の中核） <https://amzn.asia/d/4vxk6h5>
+- ノンデザイナーズ・デザインブック（4つの原則） <https://amzn.asia/d/6LvdOd9>
+- デジタル庁デザインシステム <https://design.digital.go.jp/>
+- MaterialDesignGuidelines（レイアウトの型） <https://m3.material.io/>
 - HumanInterfaceGuidelines <https://developer.apple.com/design/human-interface-guidelines>
+

From 9d8659bd550d63f52cb1c5a3761e2df5ccc93fba Mon Sep 17 00:00:00 2001
From: Niina Umekita <niina.umekita@gmail.com>
Date: Sat, 15 Aug 2026 21:38:57 +0900
Subject: [PATCH 2/2] =?UTF-8?q?=E4=B8=8D=E8=A6=81=E3=81=AA=E3=83=95?=
 =?UTF-8?q?=E3=82=A1=E3=82=A4=E3=83=AB=E5=89=8A=E9=99=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 design/SCRIPT.md | 1014 ----------------------------------------------
 1 file changed, 1014 deletions(-)
 delete mode 100644 design/SCRIPT.md

diff --git a/design/SCRIPT.md b/design/SCRIPT.md
deleted file mode 100644
index 018cf258..00000000
--- a/design/SCRIPT.md
+++ /dev/null
@@ -1,1014 +0,0 @@
-# 使いやすいUIデザイン｜発表台本
-
-`design/slide.md` から発表メモを外して、こちらにまとめたもの。
-スライドを送りながらこのファイルを見て話す。
-
-各節の見出しは、対応するスライドの見出し。
-【X分】は目安の時間、`・` から始まる行は進め方の注意。
-
----
-
-## 1. 使いやすいUIデザイン
-
-【0.5分】
-
-＜台本＞
-改めまして、こんにちは。うめです。
-これから1時間、使いやすいUIデザインの話をします。
-
-・自己紹介は短く。ここは巻いてよい。
-
----
-
-## 2. この時間の目標
-
-【2分】この1時間の結論。まずこれを言ってから中身に入る。
-
-＜台本＞
-このあとみなさんは、チームで自分たちのアプリを作ります。
-そのとき「どんな画面にする？」を必ず決めることになります。
-今日はその考え方を持って帰ってもらう時間です。
-
-今日は2回、スケッチブックに絵を描いてもらいます。
-と言っても、絵が描けなくても大丈夫です。四角と線だけで足ります。
-色や形をきれいにする話は、最後の3分しかやりません。
-
-・【重要】「絵が描けなくても大丈夫」を言う唯一の場所。省略しない。
-  デザインは「センスの有無」に見えるので、身構える学生が必ず出る。
-・スケッチブックを使うことを、ここで予告しておく。
-  急に「描いてください」と言われると身構えるので、先に言って慣らす。
-・「色と形の話は最後の3分だけ」と先に言っておく。
-  第1章でビジュアルデザインを切り離すので、ここで予告しないと
-  第4章に入ったとき「やらないって言ったのに」になる。
-・コードは1行も書かない、当てません、もここで口にする。
-
----
-
-## 3. 今日は4本立て
-
-【1.5分】
-
-＜台本＞
-今日はこの4本立てで進めます。
-2番でいきなり手を動かしてもらいます。まだ何も教えていない状態で描きます。
-それから3番で、ちゃんとした作り方を学んで、もう一度描きます。
-
-・【重要】「教える前に描かせる」という進め方を、ここで宣言しておく。
-  言っておかないと、2番のハンズオンで「まだ習ってないのに」と不安になる。
-  できなくていい、それが狙いだ、と先に伝える。
-・章が変わるたびに、この4つのどこにいるかを言うと迷子が出ない。
-
----
-
-## 4. 1. UIとは
-
-【0.3分】ここから8分。
-
-＜台本＞
-まず、UIとは何かを揃えておきます。
-
-・章扉は速く抜ける。遅れているならここで巻く。
-・第2章・第3章と同じ形の扉にしてある。
-  章の切れ目を同じ見た目で示すと、いま何章にいるかが分かる。
-
----
-
-## 5. 「UI ＝ 見た目」<br>**ではない**
-
-【1分】第1章の入口。まず思い込みを名指しで外す。
-
-＜台本＞
-はじめに、ひとつだけ外しておきたいことがあります。
-
-UIと聞くと、たぶん色とか形とか、
-きれいな見た目のことを思い浮かべますよね。
-
-でも、UIは見た目のことではありません。
-じゃあ何なのか。次のページで見てみます。
-
-・【重要】否定から入る1枚。「デザイン＝センスのある人がやる見た目の話」
-  という思い込みを持ったまま聞くと、このあとの話が全部
-  「自分には関係ない話」に聞こえてしまう。
-・ここでは答えを言わない。次の1枚への引きにする。
-・図は置いていない。文字だけの1枚を挟むと、逆に強く残る。
-・挙手を取ってもよい：「色や形だと思っていた人？」
-  ただし当てないと約束しているので、手を挙げさせるだけにする。
-
----
-
-## 6. UIデザインと<br>ビジュアルデザインは別
-
-【1.5分】「見た目ではない」の理由。見た目の話には別の名前があると示す。
-
-＜台本＞
-では、さっきの色や形の話はどこへ行ったのか。
-右のほうです。色や形、フォントを整える話をビジュアルデザインといいます。
-見た目はビジュアルデザインの仕事で、UIデザインとは別なんです。
-
-今日のメインは左です。何を、どこに置くか。骨組みのほうです。
-だから絵が描けなくても大丈夫。四角と線だけで足ります。
-
-右のビジュアルデザインは、最後に3分だけやります。
-やらないわけではなくて、順番があとなだけです。
-
-・【重要】前ページの否定（見た目ではない）の受け皿がこの1枚。
-  「じゃあ見た目の話は何なのか」に名前を与えてから、UIの定義に進む。
-・【重要】ここで第4章を予告する。予告しないと第4章で矛盾する。
-・左の図は色も飾りもない。これがこのあと描いてもらうもの。
-  ここでは名前を出さない（3.3でワイヤーフレームとして定義する）。
-
----
-
-## 7. **UI** ＝ **User Interface**
-
-【1.5分】ここでようやくUIの定義。前2枚で外堀を埋めてある。
-
-＜台本＞
-では、UIとは何か。言葉から確認します。
-UIは User Interface の略です。
-インターフェースというのは、つなぎ目という意味の言葉です。
-
-図を見てください。左がみなさん、右がサービス。
-アプリでも、Webサイトでも、駅の券売機でも同じです。
-そのあいだにあるのがUIです。
-
-ボタンを押す、文字を読む。
-やりとりは、ぜんぶここを通ります。
-
-だからUIで大事なのは、きれいかどうかではありません。
-迷わず押せるか、入力しやすいか。ちゃんと使えるかどうかです。
-
-今日はこのうち、アプリの画面を扱います。
-
-・「接点」「境界面」という訳語のまま止まらない。
-  図で「あいだにある」と見せてから、やりとりが通る場所だと言う。
-・【重要】「アプリのあいだ」とは言わない。UIはアプリに限らず、
-  券売機・ATM・リモコン・蛇口もUI。定義を狭めない。
-  図の右にPCとスマホを並べてあるのも、1つに限らないと示すため。
-・【重要】そのうえで「今日はアプリの画面を扱う」と範囲を絞る。
-  定義は広く、扱う範囲は狭い。この2段を混ぜない。
-・ここで「きれいさではなく、使えるかどうか」を1回言っておく。
-  第4章で見た目の話をするときに、これが効いてくる。
-・聞かれたら：券売機も蛇口もUIです。押すところ、ひねるところが
-  ユーザーとの接点だから。今日はアプリに絞って話します。
-
----
-
-## 8. その**あいだ**にあるのは、<br>この**2種類**
-
-【2分】第1章の結論。今日ずっと使う2つの言葉をここで決める。
-
-＜台本＞
-では、そのあいだには何があるのか。ここが今日の答えです。
-2種類しかありません。
-
-1つめ、見せるもの。文字、リスト、画像。
-アプリから情報を受け取るためのものです。読むだけで、さわれません。
-
-2つめ、操作するもの。ボタン、チェックボックス、入力欄。
-アプリに指示を出すためのものです。さわると、中身が変わります。
-
-みなさんが知っているUIの部品は、ぜんぶこのどちらかです。
-新しい部品を見たときも、「これはどっちだ」と考えれば読めます。
-
-だから、UIデザインでやることはこうなります。
-この2種類を、どこに置くか決める。それだけです。
-
-・【重要】章タイトル「1. UIとは」の答えがこの1枚。ここまで
-  「見た目ではない」「見た目の話はビジュアルデザイン」
-  「UIはユーザーとサービスのあいだにあるもの」と積んできた。
-・【重要】見出しの「その あいだ」は、前ページの
-  「ユーザーとサービスのあいだにあるもの」を受けている。
-  前は「UIの部品は2種類に分けられる」にしていたが、
-  前ページが"位置"の話で終わり、ここが急に"構成"の話になるので
-  繋がらなかった。「あいだ」で受け直すと1本になる。
-  ここは口でも「さっきのあいだですね」と言ってつなぐ。
-・台本の最後で「2種類をどこに置くか決めるのがUIデザイン」と言い切る。
-  第1章を「結局なんだったの」で終わらせないため。
-  ここが6枚目の「何を、どこに置くか」の"何を"の答えにもなっている。
-・【重要】「もの」を付けて名詞で呼ぶ。動詞のまま（見せるか操作するか）だと、
-  "置くもの"の分類だと分かりにくい。
-・【検討済み】この2語は厳密には主語が混ざっている。
-  見せる＝アプリが主語、操作する＝ユーザーが主語。
-  主語を揃える案（見るもの／さわるもの）も検討したが、この呼び方を採った。
-  そのぶん、台本で必ず役割を添えて言う：
-    見せるもの → アプリから情報を受け取るためのもの
-    操作するもの → アプリに指示を出すためのもの
-  世の中の解説もUIの役割を「情報を伝える／指示を受け取る」の2つで説明し、
-  部品の分類も「情報表示系／操作系・入力系」で分けている。
-  ここを口で補えば、呼び方のズレは問題にならない。
-・【重要】「操作する」を選んだ理由は2つ。
-  ①「変える」だと誰が変えるのか曖昧。「操作する」ならユーザーがやることだと分かる。
-  ② 第3章の「アクション」に直結する（アクション＝そのモノにできる操作）。
-・「動かす」は使わない。Webアプリケーション概論が「処理＝動かす」を
-  使っているので、同じインターン内でボタン操作とサーバー処理が混ざる。
-・「表示」も言わない。「見せる」で通す。
-・「境界」「情報のやり取り」のような抽象語は出さない。
-  知っている部品の名前で説明するほうが速い。
-・図の色分けがそのまま意味になっている。グレー＝さわれない、
-  水色＝さわれる。以降ずっとこの色の使い方で通す。
-・この2つが、第3章の「ビュー」と「アクション」になる。
-  ここでは言わず、第3章の入口で回収する。
-
----
-
-## 9. 2. UIを作ってみる
-
-【0.3分】ここから15分。
-
-＜台本＞
-では、さっそく作ってみましょう。
-
-・速く抜ける。次の仕様スライドとセットで読む。
-
----
-
-## 10. 備品貸出アプリを考えてみよう！
-
-【5.5分】今日の山場のひとつ。教える前に描かせる。
-仕様の提示（1.5分）とハンズオン（4分）を1枚にまとめてある。
-
-＜台本＞
-では、さっそく作ってみましょう。
-作るのは、備品貸出アプリの、お店が使う画面です。
-みなさんが図書委員になったと思ってください。
-
-仕様はこの4つ。
-備品の一覧を見る、備品の名前と数を見る、借りる、返す。
-
-この仕様で、アプリの画面を描いてみてください。
-スケッチブックに、四角と線だけで大丈夫です。
-何画面になってもいいです。4分とります。
-
-まだ何も教えていないので、正解は分かりません。それでいいです。
-今日はこのあと、みなさんが描いたものを見ながら進めます。
-
-（4分待つ。手が止まっている人がいたら「仕様の言葉を
-  そのままボタンにしてもいいですよ」と1回だけ声をかける）
-
-・【重要】題材を備品貸出アプリにしてある理由。
-  ToDoアプリだと、ほとんどの学生が完成形（ToDoが並ぶ画面）を
-  すでに知っているので、教える前に描かせても正解を描いてしまい、
-  このあとの比較が他人事になる。
-  備品貸出アプリは、名前は知っていても自分で注文したことが
-  ある学生は少ない。だから仕様の言葉をそのままボタンにする人が多くなる。
-・【重要】この題材にした決め手は「一覧に収まる」こと。
-  備品は10〜20個なので、一覧から選んでタップするのが自然。
-  図書室の本で考えたこともあったが、蔵書は数千冊あるので
-  一覧から選べず、実運用もバーコードを読む方式だった。
-  それだと「一覧のチェックを1タップ」が成立しない。
-・【重要】この仕様にはCreateとDeleteがない。料理を増やしたり
-  消したりするのは先生の仕事で、借りる側にはできないから。
-  3.1の最後（属性とアクションの答え）でここを回収する。
-  「仕様にないものは作らない」を教える材料になっている。
-・聞かれたら（注文したことがないので分からない）：
-  それでいい。今日は正解を知らない状態で描いてもらう時間。
-・【重要】仕様とハンズオンを1枚にしてある。描いているあいだ、
-  このスライドを出したままにできる。仕様を見ながら描けるので、
-  「なんだっけ」で手が止まらない。
-・【重要】ここは「教える前に解かせる」設計。教育研究では
-  productive failure / pretesting effect と呼ばれていて、
-  先に自分でやってから教わるほうが、教わってからやるより
-  概念の理解が深くなる。初学者ほど効果が大きい。
-・【重要】そのかわり、直後に必ず答え合わせをする（次の3枚）。
-  やりっぱなしにすると効果が消える。フィードバックは即時が条件。
-・失敗させるのが目的なので、うまく描けなくても絶対に責めない。
-  「できなくて大丈夫」「当てません」は口で言う。
-・4行を読み上げるだけにする。ここで抽出の話はまだしない。
-・この仕様カード（左に線が入った形）は今日何度も出てくる。
-  同じ形で出すことで「またここに戻ってきた」が伝わる。
-・聞かれたら：消す機能は今回入れていません。仕様にないものは作りません。
-・机を回って何人かの絵を見ておく。次のスライドで
-  「たぶんこうなりましたよね」と言うための材料にする。
-  ボタンを並べた人が多いはず。そこを拾う。
-・時間がないときは3分でもよい。ただし0分にはしない。
-  ここを削ると、このあとの比較が全部他人事になる。
-
----
-
-## 11. 機能から**直接**UIを作ると<br>使いにくい
-
-【2分】ハンズオン①の受け止め。結論だけ言って、
-理由はこのあとの3枚で1つずつ確かめる。
-
-＜台本＞
-みなさんの絵を見せてもらいました。だいたいこうなっていましたよね。
-一覧を見る、名前と数を見る、借りる、返す。仕様の4つがそのままボタンになる。
-
-素直な作り方です。間違いではありません。私も最初はこう描きました。
-ただ、この画面で実際に使ってみると、困ることが出てきます。
-このあと、ひとつずつ確かめます。
-
-・【重要】ここで学生の絵を否定しない。責めるのは「機能から直接作る
-  という作り方」であって、描いた人ではない。「間違いではありません」
-  「私も最初はこう描きました」を必ず口で言う。
-  ここで否定すると、次から手が動かなくなる。
-・【重要】理由はここでは言わない。スライドにも書いていない。
-  次の3枚が答え合わせになっている：
-    次のスライド → 完了までタップが2回かかる
-    3枚あと      → ほぼ同じ画面を5枚も作ることになる
-  先に結論だけ置いて、根拠は自分で数えてもらう順にしてある。
-・実際に何人かの絵を指して「これもそうですね」と拾えるとなおよい。
-・仕様の4行とボタンが1対1になっていることを指で示す。
-  自分の絵と見比べてもらう。
-
----
-
-## 12. ボタンを並べると**2タップ必要**
-
-【1.5分】自分の絵の問題点に気づいてもらう。
-
-＜台本＞
-では、この画面で「タブレット」を借りてみます。
-
-まず「借りる」を押す。これが1回目。
-すると備品の一覧が出てきます。ここからタブレットを選ぶ。これが2回目。
-押したのは2回。あいだに画面が1つ挟まりました。
-
-自分の絵でも同じことをやってみてください。何回押しますか。
-
-・【重要】黒い丸の数がタップの数。1と2を指でさして数える。
-  「1、2。2回ですね」と声に出すと伝わる。
-・【重要】右の画面が「一覧が出る」。ここが次の「画面5枚」に効く。
-  借りるときも一覧、返すときも一覧、と同じ画面が増えていく。
-・自分の絵で数えてもらうのが効く。手を動かした人だけの体験になる。
-・ここでもまだ「悪い」とは言わない。「2回押す」と数だけ言う。
-・図は2画面だが、押した結果チェックが付く画面はあえて描いていない。
-  次のスライドと画面数を揃えて、バッジの数だけを見比べてもらう。
-
----
-
-## 13. 備品を並べると**1タップ**
-
-【2分】もう1つの作り方を見せる。画面が1枚で済むことも見せる。
-
-＜台本＞
-別の作り方を見てください。
-ボタンではなく、備品そのものを並べました。
-
-同じことをやってみます。タブレットの行のチェックを押す。以上です。
-黒い丸は1つだけ。さっきは2回押していたものが、1回で終わりました。
-
-しかも画面はこの1枚だけです。さっきは押したあとに一覧が出てきました。
-
-もうひとつ見てください。チェックは貸出中の印です。
-だからもう一度押せば、それが返却になります。
-仕様では別々だった「借りる」と「返す」が、
-同じ場所を押すだけで済んでいます。
-
-・【重要】前のスライドは画面が2枚、こちらは1枚。
-  行き来しながら「丸が2つ」「丸が1つ」と見比べてもらうとよい。
-  画面の枚数もちがうことに、ここで気づく人がいる。
-・【重要】仕様の4つが、この1枚に全部入っている。
-    備品の一覧を見る → 一覧そのもの
-    借りる       → チェックを付ける（黒丸1のところ）
-    返す     → 同じチェックを外す
-    名前と数を見る   → 行の右の「>」を押すと詳細
-  やり方Aは仕様4つのためにボタンが4つ必要だったのに、
-  こちらは借りると返すが1か所で済んでいる。ここを必ず指摘する。
-・行の右の「>」を押すと備品の詳細が開く。詳細ビューは3.2で出てくるので、
-  聞かれたら「次の章で出てきます」と答える。
-・ここでは押す回数の話だけにする。画面数は次のスライドで数える。
-・「こっちを描いた人いますか」と聞いてもよい。いたら必ず拾う。
-
----
-
-## 14. 同じ画面を**何枚も作らずに済む**
-
-【2.5分】主眼のいちばん大事な1枚。数えられる形で差を見せる。
-
-＜台本＞
-2つを並べます。ちがいは手数だけではありません。
-
-左を見てください。ボタンが4つあると、押した先の画面も4つ必要です。
-そして、そのうち3つは「ほぼ同じ備品の一覧」です。
-借りるときも一覧、返すときも一覧、見るときも一覧。同じ画面が3枚。
-全部で5枚の画面を作ることになります。
-
-右は2枚です。一覧と詳細だけ。
-
-ここで減っているのは、同じ画面の重複です。
-一覧が3枚あっても、中身はほとんど同じでした。
-その3枚が1枚になった、というだけの話です。
-
-画面が少なければいい、という話ではありません。
-1枚に全部詰め込んだら、逆に使いにくくなります。
-同じものを何枚も作らなくて済む、というのがここでの得です。
-直す場所も1か所になります。
-
-なぜこうなるのか。
-右は備品という「モノ」を先に置きました。モノは1種類しかないので、
-それを見せる画面も1枚で足ります。
-左はやることを先に置いたので、やることの数だけ画面が増えました。
-
-・【重要】この「同じ画面がたくさんある」が主眼の説得力の中心。
-  タップ数だけでは「1回か2回かの差ならそんなに大事？」で止まる。
-・【重要】「画面は少ないほどよい」と誤解させないこと。
-  1枚に詰め込めば画面数は減るが、使いにくくなる。
-  ここで減っているのは重複であって、画面数そのものが目的ではない。
-  見出しを「使いやすいほど画面が減る」にしていたことがあるが、
-  一般化しすぎで、詰め込みを肯定して聞こえるので変えた。
-・【重要】「なぜモノ起点だと画面が減るのか」は、上の4行で口頭だけ言う。
-  以前はここに日常のたとえを1枚はさんでいた（コンビニのレジ、
-  お店のメニュー表）。どちらも「たとえのほうが分かりにくい」となったので
-  図はやめた。数の差を見せたこの1枚で足りている。
-  たとえを足したくなったら、まずこの4行を言ってみて、
-  それで足りないかを確かめてから。
-・自分の絵が何画面になったか数えてもらう。
-・左の3枚をあえて同じ形で描いてある。無駄が形で見えるようにするため。
-
----
-
-## 15. 主役にした**備品**を<br>**オブジェクト**と呼ぶ
-
-【1.5分】今日の1語目。比べて納得したあとに名前を付ける。
-
-＜台本＞
-さっき、備品を主役にしたら画面が2枚で足りました。
-この備品のように、アプリの主役になるものに名前があります。
-オブジェクトといいます。
-
-LINEならトーク。Amazonなら商品。備品貸出なら備品です。
-そのアプリで、ユーザーが扱う主役のことです。
-
-第2章のまとめです。オブジェクトを決めてから、画面を作る。
-と言われても、まだピンと来ないと思います。次で確かめます。
-
-・【重要】プログラミングのオブジェクト指向とは別の話、と必ず言う。
-  クラスや継承の話は出さない。名前が似ているだけ。
-・今日覚えて帰る語は4つ。これが1語目。
-  オブジェクト／属性／アクション／ビュー。
-・LINE・Amazonの例は口頭で足す。スライドには置かない（1枚1メッセージ）。
-・ここで手順の話に入らない。抽象的なままなので、
-  次の1枚でさっきの2画面に結びつけてから3ステップに進む。
-
----
-
-## 16. **備品**を主役にしたから、<br>画面はこの2つになった
-
-【1.5分】抽象と具体をつなぐ1枚。3ステップに入る前の足場。
-
-＜台本＞
-「オブジェクトを決めてから画面を作る」。
-これ、実はさっきもうやっています。
-
-主役を備品に決めましたよね。だから画面はこうなりました。
-備品が並ぶ一覧と、備品が1つだけ見える詳細。この2つです。
-
-ボタンから考えると5画面になりました。
-でも備品から考えると、備品の見え方が2通りあるだけなので、2画面で済みます。
-
-画面を先に考えるのではなく、主役を先に決める。
-そうすると、画面のほうが決まってくる。これが今日いちばん大事なところです。
-
-・【重要】ここがないと「オブジェクトを決めてから画面を作る」が
-  言葉のままで終わる。やり方Bの2画面と結びつけて、初めて意味が通る。
-・「もうやっている」と言うのが効く。新しいことではなく、
-  さっき自分が見たものの言い換えだと分かる。
-・次の3ステップは、この流れを手順に分けただけだと予告する。
-
----
-
-## 17. 3. UIデザインの流れ
-
-【1.5分】ここから26分。この図が今日の地図になる。
-
-＜台本＞
-オブジェクトから画面を作るには、この3ステップで進めます。
-
-仕様から始めて、まず1番、オブジェクト抽出。
-仕様に出てくるモノを拾い出します。
-次に2番、ビューとナビゲーション。画面と、画面の行き来を決めます。
-最後に3番、レイアウト。どこに何を置くかを決めます。
-
-大事なのは下の矢印です。1回で決まることはありません。
-行き来しながら決めていくものだと思ってください。
-
-・この図はこのあと3回、小節の扉で出てくる。今どこにいるかを毎回示す。
-・「1回で完成させなくていい」と言うと、完璧を目指して固まる学生がほどける。
-・この章の最後にもう一度スケッチブックを使う、と予告しておく。
-
----
-
-## 18. **ビュー**はモノが見える場所、<br>**アクション**はモノにできること
-
-【2分】第1章と第3章をつなぐ1枚。ここが今日の骨格。
-
-＜台本＞
-ステップの中身に入る前に、言葉を2つ出しておきます。
-今日いちばん大事な2語です。
-
-ビューは、モノが見える場所です。備品が並んでいるところがビュー。
-アクションは、モノにできることです。借りる、返す、がアクション。
-
-図を見てください。第1章で、画面の部品は2種類だと言いました。
-見せるものと、操作するもの。
-見せるものが集まったところが、ビューです。
-操作するものを押したときに起きることが、アクションです。
-
-つまりこれからやるのは、こういうことです。
-まずオブジェクトを決めて、そのオブジェクトが見えるビューを作り、
-そこにアクションを置く。今日の話は全部これです。
-
-・【重要】見出しを定義そのものにしてある。
-  「部品が集まるとビュー」だと部品と領域でレベルが1段ちがうので、
-  2語が何なのかが伝わらなかった。
-  「モノが見える場所」「モノにできること」なら1行で像が結ぶ。
-・【重要】この1枚がないと、第1章が「前置き」で終わる。
-  「見せる／操作する」がそのまま「ビュー／アクション」になると示すことで、
-  第1章から第3章までが1本の線になる。
-・ここで用語を3つ並べておく（オブジェクト／ビュー／アクション）。
-  属性はこのあと出す。
-・話が迷子になったら、この1枚に戻ってくればよい。
-  黒板やホワイトボードがあれば、この2語だけ書いて残しておくとよい。
-
----
-
-## 19. 3.1 モノを決める
-
-【1分】1つめのステップ。
-
-＜台本＞
-1番、モノを決めます。
-仕様の中からオブジェクトを拾い出して、書き出す作業です。
-
-実務ではこれを「オブジェクト抽出」と呼びます。
-抽出という言葉は硬いですが、やることは拾い出すだけです。
-
-・【重要】ステップ名は日常語（モノを決める）にしてある。
-  実務の呼び方（オブジェクト抽出）は図の下と口頭で添えるだけ。
-  専門語を見出しにすると、何をするステップなのかが伝わらない。
-・【重要】「抽出」は初学者に急に出すと止まる語。必ず「拾い出す」と言い直す。
-・聞かれたら：UMLのクラス図を知っている人は、あのイメージで合っています。
-  ただ知らなくても困りません。スライドには書かない。
-
----
-
-## 20. モノには**情報**があり、<br>**できること**がある
-
-【2分】今日の2語目と3語目。次の手順の3つめで使うので、先に出す。
-
-＜台本＞
-モノを1つ思い浮かべてください。たとえば備品です。
-備品には2つのものがあります。
-
-1つは情報です。タイトルとか、終わったかどうか。
-これを属性といいます。
-
-もう1つはできることです。作る、書きかえる。
-これがアクションです。さっき出した言葉と同じものです。
-
-この2つを覚えておいてください。次のスライドで使います。
-
-・【重要】この2語を先に出しておかないと、次の「手順は3つ」の
-  3つめ（属性とアクションに分ける）が言葉だけになって伝わらない。
-  もとは手順のあとに置いていたが、それでは手順が読めなかった。
-・「アクション」は少し前のスライド（ビューとアクション）で出した語。
-  同じものだと分かるように「さっきの」と言う。
-・属性は、世の中の記事や本では「プロパティ」と呼ばれることが多い。
-  Figmaでもこの呼び方をする。聞かれたら同じものだと答える。
-・Deno KV との橋：属性は、KVに入れる値そのもの。
-  set するときに何を入れるかを決める作業が、属性を決める作業。
-
----
-
-## 21. モノを拾い出す手順は3つ
-
-【1.5分】演習の足場。この3つがこのあとの実演の骨。
-
-＜台本＞
-拾い出す手順は3つです。
-
-1つめ、仕様の名詞に線を引きます。名詞はモノの候補です。
-2つめ、同じ名詞をまとめます。備品が4回出てきたら、それは1つの備品です。
-3つめ、まとめたモノの中を、さっきの属性とアクションに振り分けます。
-
-・実務ではもっと細かい工程（粒度を揃える）があるが、今日は3段に圧縮している。
-・図にせず文字だけにしてある。属性とアクションは前のスライドで
-  説明したばかりなので、ここは3行を読み上げるだけでよい。
-・このあと次の1枚で①②を実演し、③は2枚あとで実演する。
-
----
-
-## 22. 名詞に線を引くと、<br>**備品**だけが残る
-
-【1.5分】手順①②の実演。講師が実際にやってみせる。
-
-＜台本＞
-では実際にやってみます。仕様の4行に線を引いていきます。
-
-1行目「備品の一覧を見る」。名詞は備品。線を引きます。
-動詞は「見る」。丸で囲みます。
-2行目、名詞は備品、それと名前と数。動詞は「見る」。
-3行目、名詞は備品。動詞は「借りる」。
-4行目も名詞は備品。動詞は「返す」。
-
-線を引いたところを見てください。備品が4回出てきます。
-でも全部同じ備品です。だからまとめると1つ。
-仕様が4行あるのに、モノは1つしかありませんでした。これが手順の2つめです。
-
-丸をつけた動詞は、このあとアクションになります。
-線を引いた「名前」「数」は、属性になります。
-
-・【重要】口だけで済ませず、画面を指しながら1行ずつなぞる。
-・オブジェクトが1つしかないことに驚く学生がいる。それが正しい反応。
-・ここではまだ「見るはアクションにしない」を言わない。
-  アクションの説明が2枚あとなので、先に言うと浮く。
-
----
-
-## 23. 仕様に出てくる**名詞**を<br>書き出してみよう
-
-【1.5分】手を動かして覚える。実演を見た直後にやる。
-
-＜台本＞
-いま私がやったことを、自分でもやってみてください。
-さっきの仕様に出てくる名詞を、スケッチブックに書き出します。
-仕様は書き写さなくていいです。名詞だけ書いてください。1分とります。
-
-（1分待つ。手が止まっている人には「モノの名前です」と1回だけ言う）
-
-何が出ましたか。備品、名前、数。このあたりですね。
-「一覧」を書いた人、いますか。それは正しい反応です。
-ただ、一覧はモノではなくて、モノが並んでいる場所です。
-それはこのあと3.2で出てきます。
-
-・【重要】実演を見た直後にやる。見ているだけでは手が動かない。
-  ここで1分使うと、このあとのハンズオン③で詰まる人が減る。
-・【重要】「一覧」を書く学生が必ず出る。絶対に否定しない。
-  一覧はこのあとビューになるので、「次で出てきます」と受けて伏線にする。
-  ここで正解／不正解にすると、次から手が止まる。
-・書くのは名詞だけ。仕様の書き写しはさせない。時間がもったいない。
-・仕様はスライドに出したままにできないので（このスライドを出すため）、
-  口頭でもう一度読み上げる。一覧を見る、名前と数を見る、借りる、返す。
-・答え合わせは口頭で30秒。次のスライドのアクションの話に自然につながる。
-
----
-
-## 24. アクションは<br>**つくる・かえる・けす**
-
-【2分】アクションの中身。「見る」を外す理由をここで回収する。
-
-＜台本＞
-アクションは、基本的にこの3つです。つくる、かえる、けす。
-英語だとCreate、Update、Delete。まとめてCRUDと呼ばれます。
-この英語は覚えなくていいです。名前があることだけ知っておいてください。
-
-ここでひとつ。「見る」はアクションに入れません。
-仕様には「備品の一覧を見る」とあるのに、なぜでしょうか。
-
-さっきみなさんが描いた「見る」ボタンを押したら、何が起きますか。
-一覧が出るだけです。何も変わりません。
-押した先にあるのは画面、つまりビューです。
-だからこれはアクションではなく、ビューのほうなんです。
-
-・【重要】ここで右の図の「見る」ボタンを実際に指す。
-  自分が描いた絵にも「見る」ボタンがあるはずなので、そこを指してもらう。
-・「見る＝ビュー」と言えるのは、2枚前で橋を架けたから。
-  橋がないとこの説明は「なんとなく」で終わる。
-・Deno KV との橋：set が つくる・かえる、delete が けす にほぼ対応する。
-  get と list は画面を出すためのもの。
-
----
-
-## 25. 備品は、属性3つと<br>アクション2つを持つ
-
-【1.5分】手順3。3ステップ全部の入力になる図。
-
-＜台本＞
-最後に振り分けます。
-
-属性。備品が持っている情報は、名前、数、
-それと借りているかどうか。この3つです。
-
-アクション。借りると、返す。この2つです。
-どちらも既にある備品の状態を書きかえているので、Updateですね。
-
-ここで気づいた人はいますか。
-今回、つくる（Create）とけす（Delete）がありません。
-
-備品を増やしたり消したりするのは、先生の仕事です。
-借りる側にはできません。だから仕様に書いていない。
-仕様にないものは、作らない。ここは徹底してください。
-
-これで右の図ができました。備品というオブジェクトが、
-属性3つとアクション2つを持っている。1番のステップは、これで終わりです。
-
-・この図はこのあと2回出てくる（ハンズオン③の入力と、最後のまとめ）。
-・【重要】CreateとDeleteがないことを、必ず口に出す。
-  「3つ習ったのに2つしかない」と不安になる学生がいるので、
-  仕様にないから作らないのだと言い切る。
-  ここは今日いちばん実務に効く話。作らなくていいものを作らない。
-・「借りる」と「返す」が同じUpdateになるところで手が止まる人がいる。
-  どちらも既にある備品の状態を変えている、と言えば通る。
-・聞かれたら：先生が使う管理アプリなら、そこにはCreateとDeleteがある。
-  誰が使うアプリなのかで、アクションは変わる。
-
----
-
-## 26. 3.2 画面を決める
-
-【1分】2つめのステップ。
-
-＜台本＞
-2番です。画面を決めます。
-
-さっき出した言葉を使います。
-モノが見える場所がビュー。その行き来がナビゲーションです。
-
-ビューは画面まるごとのこともありますし、画面の一部のこともあります。
-
-・【重要】ステップ名は日常語（画面を決める）にしてある。
-  ビューとナビゲーションは、その中身を指す言葉として括弧で添える。
-・【重要】ビューは「画面」と言い切らない。「見える場所」にしておく。
-  画面と言い切ると、あとの「複数のビューを1つにまとめる」が
-  「複数の画面を1つにする？」になって意味が通らなくなる。
-  ステップ名だけは分かりやすさを取って「画面を決める」にしてある。
-・「画面には2種類ある」という断定もしない。
-  ログイン画面や設定画面を思い浮かべた学生がその場で反例を見つけてしまう。
-・HTML/CSS との橋：ビューはHTMLで作る領域そのもの。
-
----
-
-## 27. ビューは「**一覧**」と<br>「**詳細**」の2種類
-
-【1.5分】ビューの型。2つを並べて対比で見せる。
-
-＜台本＞
-ビューには型があります。大きく2つです。
-
-左がコレクションビュー。同じオブジェクトを複数ならべたものです。
-LINEのトーク一覧、Amazonの商品一覧。備品貸出なら備品が並んだ一覧です。
-大事なのは「同じオブジェクトが」という部分です。
-なんでも並べれば一覧、ではありません。並んでいるのは全部備品です。
-
-右がシングルビュー。1つのオブジェクトの中身を見せるものです。
-LINEでトークを1つ開いた画面、Amazonで商品を1つ開いたページ。
-さっき決めた属性が、ここに出てきます。名前、数。
-属性が見える場所がシングルビューです。
-
-・「同じオブジェクトを複数」を落とさない。ここを落とすと
-  抽出したオブジェクトとビューの対応が切れる。
-・属性とシングルビューが繋がることを言う。抽出が無駄ではなかったと分かる。
-・この2つで全部の画面を説明しようとしない。型が2つある、で止める。
-
----
-
-## 28. アクションは、そのモノが<br>見えている**ビュー**に置く
-
-【1.5分】アクションをどこに置くかの原則。理由を与える唯一の場所。
-
-＜台本＞
-ビューが決まったら、アクションをどこに置くかです。
-原則は1つ。そのモノが見えている画面に置く。
-
-一覧を見てください。備品が並んでいます。
-どの行も、どの備品なのかが見えています。
-だから、借りるボタンを一覧に置けます。返すも同じです。
-
-詳細を見てください。こちらも備品が1つ見えています。
-だから、同じ借りるボタンをここにも置けます。
-
-逆に、備品が見えていない画面に借りるボタンがあったらどうなるか。
-何を借りるのか分からないので、押したあとに一覧を出すしかありません。
-それが、さっきの2タップでした。
-
-左の一覧のチェックボックス。あれが「押すだけで終わる」やり方の正体です。
-一覧に備品が見えているから、そこにアクションを置けたわけです。
-
-・【重要】ここで やり方B の1タップを回収する。主眼が原則に繋がる瞬間。
-・【重要】この図には つくる・けす を描いていない。仕様にないから。
-  24枚目で3つ習ったのに2つしか出てこないことと揃えてある。
-  以前の図には「＋」とゴミ箱があったが、仕様と矛盾するので外した。
-・暗記させない。「見えているか」だけ考えれば毎回導ける、と伝える。
-・「見えていないとどうなるか」を必ず言う。原則の裏返しを示すと、
-  なぜその原則なのかが腑に落ちる。
-
----
-
-## 29. ナビゲーションは<br>ビュー同士の行き来
-
-【1.5分】ビュー同士のつなぎ。備品の具体で見せる。
-
-＜台本＞
-ビューが決まったら、次は行き来です。
-どのビューからどのビューに行けるか。これをナビゲーションといいます。
-
-備品貸出アプリで見てみます。ビューは2つ、一覧と詳細。
-一覧から備品を1つ選ぶと詳細に行く。詳細から戻ると一覧に戻る。
-これが備品貸出アプリのナビゲーションです。
-
-チームで作るアプリはオブジェクトがもっと増えます。
-そのときは、まず行き来を全部書き出してから、要らないものを削ります。
-足りないものを思いつくより、目の前にあるものを消すほうが簡単だからです。
-
-これで2番のステップも終わりです。ビューが2つ、行き来が1本。
-
-・抽象の定義だけの1枚を作らない。必ず備品の図と同時に出す。
-・「呼び出し関係」という硬い言い方はしない。行き来で通す。
-・「全部書き出してから削る」は理由とセットで1行だけ言う。
-  この備品貸出アプリでは実演しない（オブジェクトが1つしかないため）。
-
----
-
-## 30. 3.3 ならべ方を決める
-
-【1分】3つめのステップ。
-
-＜台本＞
-最後、3番です。ならべ方を決めます。実務ではレイアウトと呼びます。
-ビューの中に、何をどこに置くかを決めます。
-
-描くものをワイヤーフレームといいます。
-色も、影も、フォントもつけません。四角と線だけで、置き場所だけを描く図です。
-まさに、さっきスケッチブックに描いてもらったものです。
-
-ビューの数だけ描きます。備品貸出アプリならビューは2つなので、2枚です。
-
-・【重要】未経験者がいちばん分からない語。定義を1文で置くだけなので削らない。
-・「みなさんがもう描いているものです」と言うと、
-  ハンズオン①がここで意味を持つ。難しいものではないと伝わる。
-
----
-
-## 31. 画面のならべ方には、<br>決まった型がある
-
-【1分】レイアウトの型。ハンズオン②の直前に見せておく。
-
-＜台本＞
-置き方には型があります。ゼロから考えなくていいです。
-
-一覧のならべ方は、だいたいこの3つ。上から下に並べるリスト、
-格子状のグリッド、地図の上に置くマッピング。備品ならリストが素直です。
-
-詳細のほうも3つ。属性とアクションだけ置くもの、
-関連する別のオブジェクトを少し見せるもの、それを一覧で見せるもの。
-今日の備品貸出は1つめです。
-
-もう1つ大事なルール。アクションは、そのオブジェクトの近くに置いてください。
-一覧の下に「削除」ボタンが1つだけあったら、どれが消えるか分かりません。
-
-・この2枚は Material Design が元ネタ。第4章のデザインシステムで繋げる。
-・「アクションは近くに」はここで1文だけ言う。前の原則の続き。
-・既存アプリを真似ていい、と言っておく。ここで発明しなくていい。
-
----
-
-## 32. 3ステップで、<br>描き直してみよう
-
-【6分】今日の山場。学んだ手順を通しで使う。
-
-＜台本＞
-では、もう一度描いてもらいます。同じ備品貸出アプリです。
-さっきのページは消さずに、新しいページに描いてください。あとで比べます。
-
-手順は3つでしたね。
-1番、オブジェクトを拾い出す。備品でしたね。属性とアクションも出ています。
-2番、ビューを決める。一覧と詳細の2つでしたね。行き来は1本。
-3番、その2つのレイアウトを描く。アクションを、モノの近くに置く。
-
-6分とります。詰まったら手を挙げてください。
-
-・【重要】ここで初めて、3ステップを通しで使う。
-  部分ごとの演習より、通しでやるほうが実際の場面に持っていける。
-・答えは既に全部スライドに出ている（オブジェクト図・ビュー・型）。
-  思い出せない学生のために、前のスライドに戻れるようにしておく。
-・机を回る。手が止まっている人には「一覧と詳細の2枚です」と言えばよい。
-・【重要】最初の絵を消させない。次のスライドで自分のビフォーアフターを
-  見比べてもらうのが、この講義でいちばん記憶に残る瞬間になる。
-・時間がないときは4分でもよい。ここを削ると講義の出口がなくなる。
-
----
-
-## 33. 答え: 備品貸出アプリの<br>レイアウト
-
-【1.5分】ハンズオン②の答え合わせ。今日の出口。
-
-＜台本＞
-答えです。左が一覧、右が詳細。2画面できました。
-
-一覧には備品が並んでいて、ボタンを押せば借りられます。
-詳細には名前と数が出ていて、ここからも借りられます。
-
-最初に描いた絵と見比べてみてください。
-画面の数が減っていませんか。ボタンが減っていませんか。
-1時間前の自分より、確実に使いやすいものが描けています。
-
-みなさんの図と形が違っても大丈夫です。
-置き場所の理由が言えれば正解です。
-
-・【重要】ビフォーアフターを必ず見比べさせる。ここが今日の成果。
-  「自分で描いたものが変わった」という体験が、知識を使うものに変える。
-・「形が違っても、理由が言えれば正解」を必ず言う。
-  1つの正解を当てる練習ではない。
-・何人かに見せてもらえると場が締まる。ただし指名はしない。
-
----
-
-## 34. 見た目は、この**4つ**で<br>だいぶよくなる
-
-【1.5分】ここから3分。第1章で予告したところ。
-
-＜台本＞
-最後の章です。冒頭で言ったとおり、ここは3分だけやります。
-
-見た目を整えるのはビジュアルデザインの仕事です。
-難しそうに見えますが、センスの話ではありません。
-知られている原則が4つあって、それを守るだけでだいぶよくなります。
-
-近接。関係のあるものを近づけて、関係ないものは離す。
-さっきの「アクションはモノの近くに」も、実はこれです。
-
-整列。端をそろえる。左端がそろっているだけで整って見えます。
-
-反復。同じ意味のものは、同じ見た目にする。
-ボタンの形が場所ごとに違うと、それだけで読みにくくなります。
-
-コントラスト。大事なものとそうでないものの差を、はっきりつける。
-見出しと本文が同じ大きさだと、どこが大事か分かりません。
-
-この4つは『ノンデザイナーズ・デザインブック』という本のものです。
-
-・第1章で「あとでやります」と予告したことを回収する。
-・「センスの話ではない」と言い切る。「ただ、難しい」で終わらせない。
-・【重要】近接は「アクションはオブジェクトの近くに」と同じだと繋げる。
-  今日話したことが、実は原則の1つだったと分かる。
-・章扉は作っていない。第4章は3分しかないので、扉に1枚使わない。
-
----
-
-## 35. 見た目は、発明しない。<span class="big">真似る</span>
-
-【1.5分】第4章の締め。許可を渡して閉じる。
-
-＜台本＞
-見た目は発明しなくていいです。
-作ろうとしているものに似たアプリを開いて、同じように置いてください。
-
-最初から完璧なものを作ろうとすると、たいてい完成しません。
-真似て、動かして、あとから直す。それで十分です。
-
-・「真似ていい」を許可として渡す。ここで安心させて終わる。
-・デザインシステム（デジタル庁 / Material Design / HIG）はスライドから外した。
-  定義していない語を出したうえに固有名詞が3つ並ぶだけになり、
-  3分の章では回収できないため。3つとも出典スライドに載せてある。
-・興味がある人には、最後の出典ページを指して
-  「レイアウトの型の図は Material Design のものです」と一言添えればよい。
-
----
-
-## 36. まとめ
-
-【1.5分】この1枚で今日の全部が読めるようにしてある。
-
-＜台本＞
-今日やったことを1枚にまとめました。
-
-仕様から始めて、1番でオブジェクトを拾い出す。備品が1つ出てきました。
-2番でビューと行き来を決める。一覧と詳細の2つになりました。
-3番でレイアウトを描く。2画面の骨組みができました。
-
-ぜんぶ通して、やっていたことは1つです。オブジェクトから考える。
-機能を並べるのではなく、モノを主役にする。それだけです。
-
-・あとで見返す学生の入口になる1枚。ここは急がない。
-・第2章の結論に戻って閉じる。今日の主眼はこれ1つだった、と示す。
-
----
-
-## 37. 明日から、自分のチームの<br>アプリでやる
-
-【1分】この講義を「知識」から「使うもの」に変える1枚。
-
-＜台本＞
-このあと、チームでアプリを作り始めます。
-そこで必ず「どんな画面にする？」という話になります。
-
-そのとき、いきなり画面を描き始めないでください。
-まず、作りたいものを文にして、その名詞に線を引いてください。
-出てきたモノが、画面の主役になります。
-
-それだけで、必要な画面がだいたい決まります。
-今日と同じことを、自分たちのアプリでやるだけです。
-
-・直後がチーム開発の講義。ここで橋を渡す。
-・持ち帰る問いを1つ渡す：自分のチームのアプリの主役は何になりそうか。
-・スケッチブックは持ち帰ってもらう。チームで描くときに使える。
-
----
-
-## 38. 出典・もっと知りたくなったら
-
-【0.5分】
-
-＜台本＞
-出典です。今日の話の中核は1つめの『オブジェクト指向UIデザイン』です。
-オブジェクトから考える、という話はこの本のものです。
-
-もっと知りたくなったら、まずこれを読んでください。
-
-・どこで使ったかを添えてある。5件を並べるだけにしない。
-・「もっと知りたくなったら」の導線として1冊だけ名指しする。
-
----
-