追補ノート（2026年4月18日）
本連載は2026年4月16日に執筆を完了したのですが、公開準備を進めていた翌17日、Anthropic Labs から Claude Design が発表されました。連載で論じてきた「AIがデザインシステムを読む時代」が、製品として具体化した瞬間です。
この発表を受けて、連載に 第6回「追補 — 予測が実装になった一週間」 を書き下ろしました。第1〜5回の本文は執筆時のまま残し、「予測が実装に追い抜かれた瞬間」の記録として公開します。
DESIGN.md を読むということ
前回、DESIGN.md の9つのセクション構成を紹介しました。フォーマットとしての仕組みは分かったけれど、「実際に書くとどうなるのか」という手触りは、まだ掴めていないかもしれません。
今回は、VoltAgent の awesome-design-md に収録された書き起こしの中から、Linear、Stripe、Notion の三本を精読していきます。繰り返しますが、これらは各社公式の文書ではなく、VoltAgent が各社のサイトを観察し、DESIGN.md フォーマットに翻訳した第三者の書き起こしです。なお VoltAgent は、同じコレクションをブラウザで読みやすく閲覧できるフロントエンドサイト getdesign.md も運営しており（同サイトのフッターに "Maintained by VoltAgent team" と明記）、本稿で各ブランドの書き起こしにリンクする際はこちらを参照します。
それでもなお、この三本を読むことには大きな意味があります。理由は二つ。ひとつは、一流ブランドのビジュアルを言語化するとはどういう粒度と精度の作業なのか、実例を通じて体感できること。もうひとつは、美意識の選択が、ビジネス戦略の選択と地続きであることが、文章から透けて見えてくること。
読むことは、書くことの最良の準備です。これから見ていく三本を、自分の仕事に置き換えながら読んでみてください。
Linear：暗闇を設計する
Linear の DESIGN.md を読み始めると、最初のセクション「Visual Theme & Atmosphere」で、いきなり引き込まれます。
書き手は Linear のビジュアルをこう描写しています：近黒のキャンバス #08090a の上にコンテンツが浮かび上がる。ダークテーマを「後から塗ったもの」ではなく、暗闇そのものがネイティブの媒体として設計されている。情報の密度は、白い不透明度の微細なグラデーション（rgba(255,255,255,0.05) から rgba(255,255,255,0.08)）によって管理されている、と。
ここで注目したいのは、書き手が技術的な数値を並べながら、同時にそれを比喩で包んでいることです。「白い不透明度のグラデーション」は CSS の記述ですが、それが「暗闇がネイティブの媒体」という表現と一体になっている。数値と詩が共存する——これが良い DESIGN.md の文章の特徴です。
タイポグラフィのセクションに進むと、もう一つの特徴が見えてきます。
Linear のタイポグラフィは、Inter Variable という可変フォント上に構築されています。そしてこのブランドを象徴するウェイトが 510 です。400（レギュラー）でも 500（ミディアム）でもなく、その中間。可変フォントだからこそ可能な、1単位の精度の選択です。
ただし、ここには注意深く読むべき点があります。Linear が実サイトで実際に weight 510 だけを使っているわけではありません。たとえばTyp.io による Linear の実 CSS 抽出を見ると、見出しに weight 600 や 800、本文には weight 400 が使われていて、ページや場面によって複数のウェイトが混在しています。つまり、weight 510 は「Linear の全てのテキストを覆うルール」ではなく、ナビゲーションや主要な UI ラベルといった"ブランドの顔"にあたる場面で選び抜かれた、象徴的なウェイトだと理解するのが正確です。
書き手はこの 510 の選択を "a subtle emphasis that doesn't shout（叫ばない控えめな強調）" と表現しています。これは Linear の DESIGN.md 原文に verbatim で現れる一節で、標準ウェイトから1単位だけずらすというミクロな選択が、インターフェイス全体の"温度"を決めている、という観察です。
Linear.app のトップページ。近黒のキャンバスに浮かぶ Inter Variable weight 510 のテキスト。400 でも 500 でもない、その中間の重み。
ディスプレイサイズのレタースペーシングも特徴的です。72px で -1.584px、48px で -1.056px、32px で -0.704px——サイズに比例して段階的にきつくなる字間の制御。書き手はこれを "feel engineered rather than designed（デザインされたというより、工学的に設計された）" と評しています。こちらも DESIGN.md 原文からの verbatim です。
ここにビジネスとの接点があります。 Linear はプロジェクト管理ツールです。その顧客はエンジニアであり、プロダクトマネージャーです。「工学的に設計された」という印象が、まさに Linear の顧客が無意識に求めている体験と一致しています。weight-510 の控えめな精密さ、-1.584px の工学的な字間。ブランドのビジュアルは、顧客が自分自身に感じていたい美意識を映し出している。
Stripe：叫ばないことの贅沢
Stripe の書き起こしを開くと、最初のセクションから Linear とは全く異なる空気が流れ出します。
白いキャンバス #ffffff に、深いネイビー #061b31 の見出し。そしてブランドの錨となる紫 #533afd——書き手は DESIGN.md 原文で、この紫を "reads as confident and premium（自信に満ちたプレミアムな紫として読める）" と表現しています。エンタープライズソフトウェアの冷たい紫ではない、という観察です。
ただし、ここで小さな注意書きを挟ませてください。Stripe の公式ブランドアセット（Stripe Newsroom）で示されている公式カラーは、実は少し違います。「Downriver」こと #0A2540 と、「Stripe Indigo / Cornflower Blue」こと #635BFF がそれで、awesome-design-md の観察値（#061b31 と #533afd）とは微妙にズレています。書き手がどの画面を見て HEX 値を拾ったかによって、この種のズレは簡単に生まれます。これは第1回で強調した「書き手の観察と公式設計意図のズレ」の、ささやかだが無視できない実例です。後で第三者の書き起こしをそのまま実装に使う場合、こうした差分は必ず一度、公式ソースで突き合わせるべきだという示唆になります。
Stripe.com のトップページ。Söhne var weight 300 の「ささやくような権威」が、白いキャンバスの上に浮かぶ。
そしてもちろん、Stripe の真骨頂はタイポグラフィにあります。ヘッドラインに採用されているのは Klim Type Foundry の Söhne の可変版（sohne-var）で、2020年のサイトリデザインで、それまで使われていた Camphor に替わって全面的に導入された書体です。そのウェイトが 300。
ウェイト 300。これは一般的な感覚からすると、かなり軽い。通常、ヒーローセクションのヘッドラインは 600 や 700 で力強く打ち出すのが定石です。書き手はこの選択を、原文の Hierarchy テーブルで "whisper-weight authority（ささやきの重さで語る権威）" と注記しています。叫ばなくても聞こえるほど自信があるから、声を落とせる。
この表現は、Stripe のビジネスと完全に呼応しています。Stripe は決済インフラです。その顧客企業の裏側で、何兆円もの取引を静かに処理している存在。表に出て目立つ必要がない。インフラであるということは、存在を主張しないということ。weight-300 は、その思想をタイポグラフィに翻訳した選択です。
もうひとつ、Stripe の書き起こしで見逃せないのは影の設計です。多くのサイトが無色のドロップシャドウ（rgba(0,0,0,0.1) のような）を使う中、Stripe は青みがかった影を使います。rgba(50,50,93,0.25) ——この RGB の 50,50,93 という値は、ネイビー・パープルの色味です。影ですら、ブランドカラーに染まっている。
書き手は DESIGN.md 原文でこの効果を "like elements are floating in a twilight sky（要素が薄暮の空に浮かんでいるようだ）" と表現しています。影という最も地味な CSS プロパティに、ブランドの世界観を溶け込ませる。この徹底ぶりは、観察者がよほど注意深く、かつ詩的な語彙を持っていなければ、見逃すか言語化できない類のものです。
Notion：居心地を設計する
三本目は Notion です。Linear の暗闇、Stripe のささやき——それらとは全く異なる原理で、Notion は自分の空間を作っています。
Notion の書き起こしでは、Notion を "warm minimalism, serif headings, soft surfaces" と要約しています。この "warm minimalism"（温かいミニマリズム）は、矛盾を含んだ表現です。ミニマリズムは通常、冷たさと結びつく。余計なものを削ぎ落とした空間は、往々にして無機的で、近寄りがたい印象を与えます。しかし Notion は、余計なものを削ぎ落としながら、温度を残している。
Notion のトップページ。余白の広さとインターフェイスの柔らかさが、知的作業のための「居場所」を作り出す。
Notion が興味深いのは、フォントについてのアプローチです。プラットフォームのデフォルトフォントは Inter ——Linear と同じサンセリフです。しかし Notion はユーザーに対して、ページごとにデフォルト（サンセリフ）、セリフ、モノスペースの三種を切り替える自由を与えています（Notion ヘルプセンター：Style & customize your page）。
この「選ばせる」という設計思想が、Notion のブランドの核にあります。Notion は「万人に一つの正解を押し付ける」のではなく、「あなたの知的作業に合った環境を、あなた自身が整える」というスタンスを取っている。フォント選択はその象徴です。小説を書く人はセリフを選ぶかもしれない。コードのメモにはモノスペースが合うかもしれない。ビジネス文書ならデフォルトのサンセリフ。道具を使う人が道具を整える。この哲学が、Notion の「温かさ」の正体です。
そして "soft surfaces"。角丸、柔らかな影、余白の広さ——UI の端々に、「ここにいていいんだ」という感覚を作る要素が散りばめられています。Linear が暗闇の精密工学で「プロのためのツール」感を演出するのと対照的に、Notion は柔らかさで「あなたの場所」感を作る。
ここにもビジネスとの接点があります。 Notion の顧客は、毎日何時間もその画面の中で過ごす人たちです。ドキュメントを書き、データベースを整理し、プロジェクトを管理する。滞在時間が長いプロダクトにとって、冷たいミニマリズムは疲れる。温かいミニマリズムは、長く居ても心地よい空間を作ります。フォントを選ばせるのも同じ理由で、「自分で整えた空間」は「与えられた空間」より居心地が良い。
三本を並べて見えてくること
Linear、Stripe、Notion。三本の DESIGN.md を並べて読むと、ある共通のパターンが浮かび上がります。
すべてのビジュアル上の選択が、ビジネス上の選択と地続きであるということです。
Linear は weight-510 と -1.584px のレタースペーシングで「工学的精密さ」を表現し、エンジニアという顧客層の美意識に寄り添っています。Stripe は weight-300 と青みがかった影で「静かなインフラとしての自信」を体現し、決済基盤としての在り方をビジュアルに翻訳しています。Notion は温かな余白とフォント選択の自由で「あなたの居場所」を作り出し、長時間滞在するユーザーの心理に応えています。
どのブランドも、「きれいだから」ではなく「顧客がそこに何を感じるべきか」を起点にして、ビジュアルの選択を行っている。DESIGN.md を書くときの第一セクション「Visual Theme & Atmosphere」が、単なる「おしゃれな雰囲気の説明」ではなくビジネス文脈の宣言として機能していることが、三本を比較すると鮮明に見えてきます。
そしてもうひとつ。
これらの「ビジネスとビジュアルの接続」を言語化しているのは、Linear や Stripe や Notion の中の人ではありません。第三者の観察者です。優れた書き手は、ブランドの当事者でなくても、ビジュアルの選択の背後にあるビジネス上の意図を読み取れる。これは、デザイナーにとって非常に示唆的な事実です。
クライアントのブランドを「きれいに作る」だけでなく、「なぜその色なのか、なぜその余白なのか、なぜそのフォントなのか」をビジネスの言葉で説明できるデザイナーは、顧客からの信頼が根本的に違います。DESIGN.md を読むという訓練は、この能力を静かに鍛えてくれます。
「読む」ときの規律：第1回の教訓を忘れない
ただし、ここで第1回の教訓を思い出してください。
awesome-design-md の書き起こしは、観察者の解釈です。Linear のウェイト 510 が「叫ばない控えめな強調」であるという解釈は、書き手の読みです。Stripe の weight-300 が「ささやきの重さで語る権威」であるという表現は、書き手の比喩です。Linear や Stripe がその意図で選んだのかどうかは、当事者に聞くまで分かりません。
第1回で見た cv01（数字の 1 の代替形）と ss03（丸い引用符）の例を思い出してください。書き手が「タイポグラフィ・アイデンティティの根幹」と断じた二つの機能は、実際には相当に微細な変更でした。書き手の解釈と、公式の設計意図は、必ずしも一致しません。本稿で触れた Stripe の HEX 値のズレも、同じ系統のささやかな証拠です。
だからこそ、DESIGN.md を「読む」ときには、二つの異なる能力を同時に使う必要があります。
ひとつは、書き手の言葉に耳を傾け、そこに込められた観察の豊かさを吸収する能力。もうひとつは、書き手の解釈を鵜呑みにせず、自分の目で検証する批判的思考。
この二つは矛盾しません。優れた美術批評を読むときと同じです。批評家の言葉から作品の新しい見方を学びつつ、最終的には自分の目で作品を見る。DESIGN.md を読むとは、そういう行為です。
小さな実験
今回の実験は、少しだけ踏み込みます。
あなたが最近関わったプロジェクト——自分の案件でも、好きなプロダクトでもいいのですが——を一つ選んでください。そして、そのプロダクトのトップページを開いて、こう自問してみてください。
「このプロダクトの顧客は、この画面に何を感じるべきか。そして、ビジュアルのどの要素が、その感情を作っているか。」
Linear のように「工学的な精密さ」かもしれません。Stripe のように「静かな自信」かもしれません。Notion のように「知的な居心地」かもしれません。あるいは、既存のどのブランドにも似ていない、独自の空気感かもしれません。
それが言葉にできたとき、DESIGN.md の第一セクションは、もう書けたも同然です。
そしてもし、言葉がすぐに浮かばないとしても、それは問題ではありません。Linear の書き起こしを読む前に、-1.584px のレタースペーシングを「工学的」と表現できる人はほとんどいなかったはずです。Stripe を読む前に、weight-300 を「ささやきの権威」と呼べる人もいなかったはずです。読むことで語彙が増える。語彙が増えれば、見えるものも増える。
次回は、視点を変えます。個別のブランドの「読み方」から離れて、世界のデザインチームが DESIGN.md やデザインシステム全体をどう再構築しているかを見ていきます。Spotify が直面した「デザインシステムが迂回される問題」、Indeed が4,300のプロトタイプを量産したパイプライン、そしてデザイナー個人が Claude Code と Figma を組み合わせて切り拓いている新しい実践について。
言葉を武器に変える方法を知ったら、次はその武器をどう運用するか。それが第4回のテーマです。
参考文献
VoltAgent / awesome-design-md（GitHub リポジトリ） — 55を超えるブランドの DESIGN.md 書き起こしコレクション（MIT ライセンス）
getdesign.md — VoltAgent チームがメンテナンスするフロントエンドサイト（フッターに "Maintained by VoltAgent team" と明記）。awesome-design-md の各書き起こしをブラウザで読みやすく閲覧できる
Inter Variable（rsms.me/inter） — Linear / Notion のデフォルトフォント
Klim Type Foundry — Söhne — Stripe が採用する書体シリーズ
MDN Web Docs: Variable fonts guide — ウェイト 510 のような1単位精度がなぜ可能かの技術背景
Typ.io: Inter UI in action on linear.app — Linear 実サイトのフォント指定サンプル（実際に使われているウェイトが観察できる）
Typ.io: Sohne in action on stripe.com — Stripe 実サイトの sohne-var 指定サンプル（weight 300 / 500 の実利用が確認できる）
Brandfetch: Stripe brand assets — Stripe 公式カラー
#635BFF/#0A2540の参照Fonts In Use: Stripe website (2020) — Stripe の 2020 年サイトリデザインで Camphor から Söhne へ切り替わった経緯の一次記録
この記事をシェアする
