Survey v5/Token sets/Concept/ UI system /Lab preview/Site

UI System — Atoms から画面まで

粒だけ見てもわからないので、対照キャプチャ → 部品 → 画面の塊 → ページ骨格まで一気に並べた。 構造ベンチは Oku、 材料は bakko 聖域＋Claude 紙床。サイト版の切替は Token sets。 固定提案は tokens-proposed.css v0.3（本番未適用）。

Map

階層の見取り図

  1. Atoms紙色 · インク · マーク · 書影well · ラベル · リンク · WIP · タブ下線
  2. MoleculesSection head · Book tile · Book row · Rail item · Index row · 読む前/後 · Highlighter
  3. OrganismsLibrary shelf · Theme dossier · Book hero · Publications index · Header
  4. PagesLibrary（Oku二欄） · Book detail · Theme · Home 骨格

下に行くほど「画面として読める」。判断は Pages / Organisms を先に見て、気になったら Molecules に戻るのが早い。

Compare

Oku（構造）↔ bakko（材料）

左がベンチ、右がトークンで組んだ標本。レイアウトの借り方と、色・型の聖域を同時に見る。

Oku · profile / library
Oku profile library
bakko · Library shelf organism

読む前

5 冊すべて見る →
BY DESIGNBY DESIGNRalph Caplan
Watches Tell More Than TimeWatches Tell More Than TimeDel Coates
Sketching User ExperiencesSketching User ExperiencesBill Buxton
Oku · to-read grid
Oku to read grid
Claude · Publications（索引の材料）
Anthropic publications
借りる
書影をデータの単位にする · セクション見出し＋件数 · レール活性面 · 索引行の三欄
借りない
純白床 · 黒ピル量産 · ソーシャルフィード主役 · グラフUI
聖域
紙色 · 蛍光黄 · テラコッタ · 明朝＋ゴシック · 読む前/後 · WIP · 6層 · 登録数

Tokens · v0.3

言語の棚

サイト版を切り替えて採用を決める本線は /design-lab/tokens。 ここは固定提案（proposed）の棚卸し。

Surface
paper--bk-paper
wash--bk-paper-wash
raised--bk-paper-raised
recessed--bk-paper-recessed
Ink · Brand · Mark
strong--bk-ink-strong
ink--bk-ink
muted--bk-ink-muted
label--bk-ink-label
brand--bk-brand
link--bk-brand-deep
mark--bk-mark
rule--bk-rule
Space rhythm
  • --bk-space-28px
  • --bk-space-316px
  • --bk-space-424px
  • --bk-space-532px
  • --bk-space-648px
  • --bk-space-section80px
Library structure（Oku → bakko）
  • --bk-rail-* ナビレール幅・活性面
  • --bk-tile-* 書影タイルの隙間・余白・罫
  • --bk-row-* 一覧行
  • --bk-tab-underline · --bk-index-rule
  • --bk-cover-well* Soft well · r2（ラボ採用）

Atoms

最小の粒

Type voice

見出しは明朝 — 読み解くための声

UIはゴシック（regular）

by 原研哉 · 2003 · graphic

1,361

蛍光ペンの印

Link · WIP · Tag · Action

『デザインのデザイン』を読み解く

WIP

Cover well · Soft well · r2
デザインのデザイン
デザインのデザイン

井は recessed、角は紙寄り。アートは 2px まで。

Label · Hairline · Tab
Library
読む前読んでいる読んだ後

Molecules

組み合わせ（単体で意味が通る単位）

Section head

読む前

5 冊すべて見る →
Book tile
BY DESIGNBY DESIGNRalph CaplanWatches Tell More Than TimeWatches Tell More Than TimeDel CoatesSketching User ExperiencesSketching User ExperiencesBill BuxtonThoughts on Interaction Design, Second EditionThoughts on Interaction Design, Second EditionJon KolkoThe Essential Persona LifecycleThe Essential Persona LifecycleTamara Adlin · John Pruitt
Book row
Rail item
Index row · Publications 型
  • デザインのデザインlife2003
  • いいデザイナーは、見ためのよさから考えないlife2015
  • デザインのめざめlife2014
  • クリストファー・アレグザンダーの思考の軌跡life2015
Headline · bakko

特集から探す

テーマ別に読み解いた本をまとめています。

Highlighter · 聖域

＼ここが読み解くポイント！／

デザインによる生活者の欲望のエデュケーションを説く､原研哉氏のデザイン哲学｡

読む前 → 読んだ後 · 聖域
読む前
デザイナーやデザインを学ぶ人の多くは、“表層的なスタイリングの差異”や“商業的な賑わい”ばかりに注力し､デザインの価値を下げてしまっている...
読んだ後
デザインには､生活者の“デザインへの期待値”や“欲望の水準”を左右する力があると気づくことで、生活者の欲望の水準を底上げするようなデザインの社会的意義･重要性がわかる！

Organisms

画面の塊（ここから「サイト」に見える）

Library shelf · 複数セクション

読んでいる

3 冊すべて見る →

読む前

5 冊すべて見る →
BY DESIGNBY DESIGNRalph CaplanWatches Tell More Than TimeWatches Tell More Than TimeDel CoatesSketching User ExperiencesSketching User ExperiencesBill BuxtonThoughts on Interaction Design, Second EditionThoughts on Interaction Design, Second EditionJon KolkoThe Essential Persona LifecycleThe Essential Persona LifecycleTamara Adlin · John Pruitt
Theme dossier
人とデザインの関係を紐解く14冊

Theme 01

人とデザインの関係を紐解く14冊

デザインの起源や歴史、その行末について。デザイナー、建築家、アートディレクター、クリエイティブ・ディレクターたちが、それぞれの目線から「デザイン」を語る書籍をまとめました。

Book hero · 詳細の頭
デザインのデザイン

life · 2003/10/21

デザインのデザイン

原研哉

デザインによる生活者の欲望のエデュケーションを説く､原研哉氏のデザイン哲学｡

本編を読む
Header · 本番コンポーネント

読み解くデザイン

“デザイン”をもっと身近にするブックガイド現在の書籍登録数：1361冊

本番 Header。字重はラボの editorial を別プレビューで確認。

Pages

画面骨格（スクロールして「サイト」として判断）

Page · Library（Oku 二欄 × bakko 紙色）
LibraryThemesLayers

読む前

5 冊すべて見る →
BY DESIGNBY DESIGNRalph CaplanWatches Tell More Than TimeWatches Tell More Than TimeDel CoatesSketching User ExperiencesSketching User ExperiencesBill BuxtonThoughts on Interaction Design, Second EditionThoughts on Interaction Design, Second EditionJon KolkoThe Essential Persona LifecycleThe Essential Persona LifecycleTamara Adlin · John Pruitt

読んでいる

3 冊
Page · Book detail（頭＋聖域ブロック）
デザインのデザイン

life · pastime

デザインのデザイン

原研哉 · 岩波書店

＼ここが読み解くポイント！／

デザインによる生活者の欲望のエデュケーションを説く､原研哉氏のデザイン哲学｡

読む前
デザイナーやデザインを学ぶ人の多くは、“表層的なスタイリングの差異”や“商業的な賑わい”ばかりに注力し､デザインの価値を下げてしまっている...
読んだ後
デザインには､生活者の“デザインへの期待値”や“欲望の水準”を左右する力があると気づくことで、生活者の欲望の水準を底上げするようなデザインの社会的意義･重要性がわかる！
  1. 問い / 取り組み / 結論
  2. アウトライン
  3. Appendix · 関連本
Page · Theme

人とデザインの関係を紐解く14冊

デザインの起源や歴史、その行末について。デザイナー、建築家、アートディレクター、クリエイティブ・ディレクターたちが、それぞれの目線から「デザイン」を語る書籍をまとめました。

人とデザインの関係を紐解く14冊
Page · Home 骨格
  1. Header — 本番コンポーネント
  2. Theme dossiers — 特集を dossier 単位で
  3. Layer shelves ×6 — 聖域の階段
  4. DesignRegionMap — 索引の俯瞰
  5. About · Footer

本番で確認 → トップ · 特集 · 本の詳細

Apply

本番のどこに載せるか

トップ / 特集一覧borrow Section head · Theme dossier · tile リズムkeep skew 帯 · 6層 · 登録数
本の詳細borrow 書影 well · Index メタ階層 · 余白keep 読む前/後 · Highlighter · 問い/取り組み/結論
索引 / 系譜borrow Book row · Publications 行keep 日付 · レイヤー色の意味
個人の棚（将来）borrow Rail · Tabs · To Read / Reading / Readkeep 紙色 · 明朝見出し

次の判断材料: Library ページ骨格を本番に近づけるか / Theme dossier を先に作るか / Book detail の余白だけ先に整えるか。