Design Lab · Borrow UI · noindex

借りる UI — 参考の実画面 × bakko 当てはめ

文章ではなく画面で示す。先頭4件は Cursor トンマナ短リスト（Mobbin · tokens v0.3）。 左が参考スクショ、右が同じ要素を bakko トークンで再現したモック。

← Concept / tokens v0.3 · Research（203件） · UI catalog · Lab preview

5案と UI 要素の対応

  • A Annotated Editorial Desk
  • B Index & Spine
  • C Curated Dossier & Soft Shelf
  • D Magazine Spine & Issue
  • E Token Discipline & Lab Honesty
E

Cursor

① セクション呼吸 ② UIラベル細さ ③ CTA稀少・実物が証明

参考（実スクショ）
Cursor reference screenshot
bakko 当てはめ（モック）

DESIGN LAB · SECTION

読み解く編集室

セクション間は 80px。CTA は稀少。書影と読む前/後が証明になる。

特集を開く索引へ

product-as-proof · --bk-space-section

借りる（具体 UI）

  • --bk-space-section 80px / --bk-space-block 40px で章の間隔
  • メタラベルは --bk-text-xs + --bk-tracking-label
  • CTAは1画面1系統 — プロダクト（書影・読む前/後）が主役

借りない

ダーク全面 · ネオンメッシュ · 黒ピル量産 · Inter

当てる場所

tokens v0.2 · theme/top セクション間隔 · chrome ラベル

A

Claude

① クリーム床 ② セリフ見出し ③ ghost/solid CTA（角は紙）

参考（実スクショ）
Claude reference screenshot
bakko 当てはめ（モック）

PAPER · SERIF · SCARCE ACCENT

机の上の編集室

紙色の床に、明朝の声。蛍光とテラコッタは稀少に。

続きを読む目次

借りる（具体 UI）

  • 床は --bk-paper / 帯は --bk-paper-wash
  • 見出し明朝 · UIゴシック regular · アクセント稀少
  • action radius = --bk-radius-sm（pill にしない）

借りない

固有フォント丸写し · AIマーケカード群集

当てる場所

tokens v0.2 · book/theme リード · 一次CTA

E

Vercel

① ink三段階 ② hairline構造 ③ クロムはモノトーン

参考（実スクショ）
Vercel reference screenshot
bakko 当てはめ（モック）

見出し — ink-strong

本文 — ink · 14px · leading 1.75

補助 — ink-muted

LABEL — ink-label · tracking 0.06em

hairline で区切る · 色は brand/mark に温存

借りる（具体 UI）

  • --bk-ink-strong / --bk-ink / --bk-ink-muted / --bk-ink-label
  • 構造は --bk-rule-hair · 強い罫は見出し帯のみ
  • 色は brand / mark に温存 — UIクロムに色を増やさない

借りない

青シアングラデ · pure white 既定床 · メトリクス帯ヒーロー

当てる場所

tokens v0.2 · nav/footer · 索引テーブル

E

Linear

① surface段階 ② border-alpha ③ focus ring

参考（実スクショ）
Linear reference screenshot
bakko 当てはめ（モック）
paper
wash
raised · border-surface
recessed · well

借りる（具体 UI）

  • paper → wash → raised → recessed の面階段
  • --bk-border-surface でパネル区切り（影の代わり）
  • --bk-focus-ring をキーボード操作の唯一の強調に

借りない

ダーク既定 · 紫グラデCTA · グロー

当てる場所

tokens v0.2 · utility wells · L6a 周辺

A

Anthropic

① 紙色キャンバス ② セリフの本文声 ③ アクセントは1画面3点以内

参考（実スクショ）
Anthropic reference screenshot
bakko 当てはめ（モック）

デザインという行為に内在する感覚を、読み解くための編集室。

UIラベル · regular ゴシック · アクセントは稀少

借りる（具体 UI）

  • ページ床を #faf9f5 級の温かいクリーム（bakko: --bk-paper #F1EFEA）
  • 長文・リードは明朝・leading 1.75+・measure 560–640
  • CTA/帯/蛍光は「稀少」— 毎行に色を置かない

借りない

黒ピルCTA・宇宙ダーク・Inter 本文

当てる場所

book 本文 · theme リード · about

A

The Marginalian

① 中央の読書列 ② 余白は「読みの対話」— 脚注ではなく横の余白

参考（実スクショ）
The Marginalian reference screenshot
bakko 当てはめ（モック）
読む前
デザイナーやデザインを学ぶ人の多くは、“表層的なスタイリングの差異”や“商業的な賑わい”ばかりに注力し､デザインの価値…
読んだ後
生活者の欲望の水準を底上げするようなデザインの社会的意義･重要性がわかる…

借りる（具体 UI）

  • 本文列は固定 measure — 左右に「空き」を確保
  • 読む前/後・問い/結論を「余白の型」として罫で区切る（既存 DNA）
  • 装飾より「一人の声」の連続性

借りない

Marginalian 級のミニマルヘッダ・広告ゼロ前提

当てる場所

book detail · 読む前/後ブロック

A

Readwise Reader

① 蛍光は本文を侵さない ② 右マージンに注釈 ③ 色は紙の上のマーカー

参考（実スクショ）
Readwise Reader reference screenshot
bakko 当てはめ（モック）

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

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

借りる（具体 UI）

  • 蛍光黄 #F4D21E を「読みどころ」マーカーとして第一級 UI に
  • ハイライト/メモは本文列の外（将来: 右マージン sidenote）
  • ネオン overlay ではなく ink-on-paper 系の muted yellow

借りない

ダーク UI · Inter · キーボードファースト chrome

当てる場所

Highlighter · copy ブロック · 将来 margin notes

C

Obys' Design Books

① 書影＝物体 ② 影より「凹面 well」 ③ グリッドの下の編集リズム

参考（実スクショ）
Obys' Design Books reference screenshot
bakko 当てはめ（モック）

L6a · soft well · r2 — 影より面の差

借りる（具体 UI）

  • 書影をカード化せず、recessed well（--bk-paper-recessed）に置く
  • 角は L6a: max 2px — 紙の角、UI の角丸ではない
  • 表紙群の横リズム＝特集の「棚」

借りない

全ページスタック + GSAP · 紙テクスチャ写真

当てる場所

theme shelf · index 書影 · L6a ラボ採用

C

Dederde

① 章立て＝ムード名 ② 書影+一行エッセイ ③ 統計バッジで埋めない

参考（実スクショ）
Dederde reference screenshot
bakko 当てはめ（モック）

Graphic 系譜

視覚表現の先人へ辿り着く本の並び。

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

借りる（具体 UI）

  • 特集トップを「Fantasy Worlds」的な章見出し + 書影列に
  • カード shadow/glow なし — headline 帯 + 書影 + リード
  • verified jacket 的な「編集が選んだ」静かな欄

借りない

cinematic dark · ebook 訴求

当てる場所

/theme 一覧 · 特集表層

B

TM Research Archive

① 索引表 ② 年次/カバー/書体フィルタ ③ 装飾 < 分類

参考（実スクショ）
TM Research Archive reference screenshot
bakko 当てはめ（モック）
LayerKeyword冊数
graphicdesign-process42
interactionusability28
serviceservice-design19

借りる（具体 UI）

  • 6層マップ・keyword を「表形式索引」として信頼表示
  • 罫線は hairline（--bk-rule-hair）— 行の区切りだけ
  • 俯瞰（filter/legend）を消さない

借りない

学術 DB の無骨グレー · 2000s UI

当てる場所

DesignRegionMap · keyword 一覧

B

Connected Papers

① 左: リスト ② 中: 俯瞰グラフ ③ 右: 詳細ペイン

参考（実スクショ）
Connected Papers reference screenshot
bakko 当てはめ（モック）

参照元

  • 『デザインのデザイン』
  • 『写真の構え』
  • …

詳細 · abstract

借りる（具体 UI）

  • references グラフを 3ペイン（list / map / detail）
  • ノード大＝参照数 · 色＝6層（--bk-layer-*）
  • Prior/Derivative 的「系譜の起点/末端」

借りない

force graph 常時アニメ · グラフのみで本文を置き去り

当てる場所

book reference ブロック · ranking 系譜

D

BRUTUS.jp

① 太い見出しゴシック ② 特集色の FILE 帯 ③ タイト行送りタイト

参考（実スクショ）
BRUTUS.jp reference screenshot
bakko 当てはめ（モック）

特集から探す

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

借りる（具体 UI）

  • headline 帯（skew テラコッタ）＝雑誌の章区切り
  • 特集ごとのアクセント色 → bakko は layer 色で代用
  • 英字ラベル + 和文見出しの混植（Futura×ゴシック思想）

借りない

動的 KV · 会員墙 · 白 #fff ベタ

当てる場所

top featured · theme header

D

Five Books

① 専門家×5冊×対話 ② リストではなく dossier 型

参考（実スクショ）
Five Books reference screenshot
bakko 当てはめ（モック）

編集部が選ぶ 5 冊 — 人とデザインの関係を紐解く14冊

  1. 『デザインのデザイン』一行リード

借りる（具体 UI）

  • 特集＝「5冊で理解する」インタビュー/list 骨格
  • 表紙 + タイトル + 一行リードの反復リズム
  • カード grid ではなく editorial 行

借りない

Amazon アフィ色 · 英語のみ UI

当てる場所

theme dossier · 特集内部

B

千夜千冊

① 白×黒×赤アクセント ② 連想リンク網 ③ 棚を歩く導線

参考（実スクショ）
千夜千冊 reference screenshot
bakko 当てはめ（モック）

design-process · 原研哉 · 白 · 余白

借りる（具体 UI）

  • キーワード/参照を「張り巡らされたリンク」で — 索引性
  • 書影はアクcent — 本文は黒の質量
  • 多層カテゴリの俯瞰（登録数は減らさない）

借りない

情報密度そのまま · 2000s テーブル

当てる場所

keyword · book 相互リンク

E

Klim Type Foundry

① グリッド可視化 ② タイポ階層の厳密さ ③ 余白で権威

参考（実スクショ）
Klim Type Foundry reference screenshot
bakko 当てはめ（モック）

見出し 24px / 本文 14px / 1.75

借りる（具体 UI）

  • column grid を lab で toggle できる規律（開発時）
  • 見出し/本文/キャプションのサイズ階段をトークン固定
  • motion 120–220ms · ease 1種

借りない

白on黒反転 · font shop UX

当てる場所

全コンポーネント · tokens-proposed

E

Are.na tokens

① 色・余白・型サイズの単一ソース ② エイリアス運用

参考（実スクショ）
Are.na tokens reference screenshot
bakko 当てはめ（モック）
--bk-paper
--bk-mark
--bk-brand
--bk-paper-recessed

借りる（具体 UI）

  • hex 直書き → --bk-* エイリアスだけで組む
  • 同じ役割＝同じトークン（罫/リンク/書影幅）
  • ラボ preview で cover/weight を仮適用（既存）

借りない

Are.na の channel UI · SNS 的並置

当てる場所

main.css 段階置換 · design-lab/*