追補ノート（2026年4月18日）
本連載は2026年4月16日に執筆を完了したのですが、公開準備を進めていた翌17日、Anthropic Labs から Claude Design が発表されました。連載で論じてきた「AIがデザインシステムを読む時代」が、製品として具体化した瞬間です。
この発表を受けて、連載に 第6回「追補 — 予測が実装になった一週間」 を書き下ろしました。第1〜5回の本文は執筆時のまま残し、「予測が実装に追い抜かれた瞬間」の記録として公開します。
静かな地殻変動
一行のプロンプトで、UIが立ち上がる。
Claude Code や Cursor のようなAIコーディングエージェントが当たり前の道具になった2026年の今、デザイナーの仕事場では静かな地殻変動が起きています。以前なら数時間かけて組み立てていたランディングページの骨格が、自然言語の指示だけで数十秒のうちに生成される。エンジニアが Figma を開かずに実装を進め、ときには Figma を一度も経由せずに UI が完成していく光景も、もう珍しくありません。
この流れは、デザイナーにとって脅威なのでしょうか。それとも追い風なのでしょうか。
結論から言えば、どちらでもあります。正確に言うなら、これまで「デザイナー」と呼ばれていた職能のうち、何が本当に価値ある部分だったのかが、いま世界中で問い直されているということです。そしてその問い直しの最前線に、ひとつの新しい道具が現れました。
それが DESIGN.md という、たった一枚のテキストファイルです。
AI が描く世界が、どこか似通って見える理由
AIコーディングエージェントの出力を眺めていると、あることに気づきます。
世界中のスタートアップのランディングページが、少しずつ似てきている。Inter というフォント、紫のグラデーション、白背景、角丸のカード、似たような余白、似たようなボタン。個別にはどれも悪くないのに、並べて見ると区別がつかない。
Anthropic が Claude Code 用の frontend-design スキル を発表した際の 公式ブログ記事 には、この現象に対する明確な名前が書かれています。"distributional convergence"（分散収束）。大規模言語モデルは訓練データの統計的中心に向かって出力を収束させる性質を持つ。つまり AI は、放っておくと世界中で最もありふれたものを描き続けるのです。
これは AI の怠慢ではありません。AI の本質的な性質です。平均値を生成する機械が、平均値を生成している。それだけのことです。
平均を見抜けるのは誰か
ここで問題が生まれます。
AI が平均値を出力し続けるなら、その平均値を「これは平均だ」と見抜ける人間がどこかにいなければ、世界のデジタルプロダクトは無限に凡庸へと向かってしまう。では、平均を見抜けるのは誰でしょうか。
平均を見抜ける目は、平均から外れたものを大量に見てきた目です。
ありふれた紫のグラデーションを「ありふれている」と感じるためには、ありふれていないグラデーションを数多く見てきた経験が必要です。Inter フォントが気になるためには、Inter とは違うフォントの表情を知っている必要があります。デフォルトのボタンが物足りなく思えるためには、デフォルトではないボタンの存在を知っていなければなりません。
この感覚を、長年鍛え続けてきた職能があります。デザイナーです。
AI時代に訪れるのは、デザイナーの失業ではなく、むしろその逆かもしれません。AI が出力する凡庸さを見抜き、そこから外れた方向へ進路を指し示せる人間の価値が、これまで以上に希少になる時代です。敵は AI ではなく、凡庸。そしてその凡庸と戦える目を持っているのは、普段から美術館に足を運び、古書を読み、映画を観て、建築を眺め、工芸に触れてきた人たちです。
Linear が cv01 にこだわる理由
ここで、これから紹介する実例について、少し前置きをしておきます。
これから引用していくのは、Linear や Stripe が自社で公開している DESIGN.md ではありません。VoltAgent というチームが GitHub 上で公開している awesome-design-md というオープンソースプロジェクトの成果物で、各社の Web サイトを徹底的に観察し、その視覚言語を言葉に翻訳した第三者による書き起こしです。
VoltAgent が GitHub で公開している awesome-design-md。60を超えるブランドの DESIGN.md 風書き起こしが、MIT ライセンスで公開されている。
しかし、それでも驚くべきことに、これから見ていく文章を読むと、Linear らしさ、Stripe らしさが、痛いほど鮮明に伝わってきます。この事実は、二つのことを同時に示しています。ひとつは、一流ブランドには、第三者が観察してなお汲み取れるほどの一貫性が宿っているということ。もうひとつは、観察する目と言葉にする力があれば、自分がそのブランドの中の人でなくても、ビジュアルを精密に言語化できるということです。
この前提のうえで、いくつかの実例を見ていきましょう。
たとえば、プロジェクト管理ツール Linear のサイトを分析した DESIGN.md には、こう書かれています。
Inter Variable を、OpenType featurecv01とss03を有効にしたうえで全テキストに使うこと。これは装飾ではなく、Linear のタイポグラフィ・アイデンティティの根幹である。
Linear.app のトップページ。近黒（#08090a）のキャンバスの上に、Inter Variable で組まれたテキストが浮かぶ。
さらにこう続きます。
ディスプレイサイズでは、攻撃的なネガティブ・レタースペーシング（72px で -1.584px、48px で -1.056px）を使う。これは Inter を大きく表示したときの"凡庸さ"を避け、工学的に設計されたような引き締まった印象を作るため。
この記述は、Linear のサイトを観察した人物が、Inter を知り尽くし、Inter が大きく表示されたときに陥る凡庸さを骨身で知っていることを示しています。Inter の凡庸さを知らない人には、"-1.584px" という数字は絶対に書けません。なぜ -1.5px ではなく -1.584px なのか、そこに根拠のある偏執がある。
ブランドは、言葉に結晶する
同じことが、他のブランドを分析した DESIGN.md にも見られます。
Stripe を分析したファイルには "weight-300 elegance"（軽さ 300 のエレガンス）という表現が出てきます。なぜ 400 でも 500 でもなく 300 なのか。決済インフラという「信頼性」を売る事業において、重厚さは権威の記号にもなりますが、同時に古臭さの記号にもなります。Stripe はその境界線上で、わずかに軽さに振ることで、テクノロジー企業としての"現在形"を保っている。weight-300 を選ぶ判断の背後には、weight-400 が陥る可能性と weight-500 が滑り落ちる可能性の両方が見えている目があります。
Apple を分析したファイルには "premium white space, SF Pro, cinematic imagery"（プレミアムな余白、SF Pro、映画的な画像）という記述があります。"cinematic" という言葉は、映画を大量に観てきた人間にしか書けない言葉です。どのような画面比、どのような色温度、どのような光の当て方を「映画的」と呼ぶのか。それは映像文化の蓄積なしには語れません。
Notion を分析したファイルは "warm minimalism, serif headings, soft surfaces"。knowledge work（知的労働）のための空間を、温かく・柔らかく設計するという意思表示です。ミニマリズムには冷たいミニマリズムも温かいミニマリズムもあります。その違いが分かる人間だけが、Notion という体験を言葉で定着できる。
上から Stripe、Apple、Notion。同じ「ミニマル」でも、まったく異なる体温と密度を持つ。これを言葉の粒度で言い分けられるか否かが、DESIGN.md の書き手の力量になる。
これらの文章は、Figma の画面のなかからは生まれません。美術館、古典、映画、建築、工芸、タイポグラフィの歴史、音楽、文学。書き手が普段何を摂取してきたかの総和が、DESIGN.md に置ける言葉の解像度を規定します。
ただし、書き手の言葉を鵜呑みにしないこと
ここで、冷や水を一杯。
先ほど紹介した Linear の書き起こしには、「cv01 と ss03 を有効にすること。これが Linear のタイポグラフィ・アイデンティティの根幹である」と書かれていました。それらしく聞こえる記述です。しかしこの二つの OpenType feature が実際に何をする機能なのか、Inter 公式ドキュメントで確認すると、少し様子が違ってきます。
Inter 公式（rsms.me/inter）の OpenType feature 一覧。cv01 = Alternate one、ss03 = Round quotes & commas と定義されている。
cv01は「数字の 1 を代替デザインに変える」機能ss03は「引用符（" '）とカンマを丸い形に変える」機能
です。つまり書き手が「Linear のタイポグラフィ・アイデンティティの根幹」と呼んだ二つの機能は、
- 画面に現れる数字の「1」の見た目を、ほんの少し別形にする
- 引用符とカンマを、角張ったものから丸いものに変える
という、相当に細部の話だったわけです。
ここで考えさせられることが、二つあります。
ひとつは、それでもなお「cv01 と ss03 を有効化する」という選択には、Linear らしい偏執が宿っているかもしれないということ。数字の 1 をわずかに別の形にする。カンマと引用符を丸くする。ほとんどの人が気づかない違いに、ブランドの末端まで意志を通す。そういう見方は、できます。
もうひとつは、しかしもっと大事な話で、この解釈が書き手による推測である可能性です。Linear 公式の設計意図を、書き手が完璧に読み切れたとは限らない。もしかすると Linear は、OpenType feature を一通り有効化する技術者的な設定をしただけで、cv01 や ss03 に特別な思い入れはないかもしれない。あるいは、別の機能を入れたかったのに誤って ss03 が混ざっていた、というだけかもしれない。本当のところは、Linear の中の人に聞くまで分かりません。
実際、Inter 公式ドキュメントを丁寧に読むと、cv01 と cv11 は別の機能であることがわかります。cv01 は数字の1の代替、cv11 は Single-story a（小文字 a を一階建てに変える）機能です。書き起こし文化のなかでは、この二つが取り違えられて語られることも起こり得る——それほど Inter の character variant は数が多く、細かい。一次資料に当たる習慣がなければ、誰でも似た番号を混同しかねない領域なのです。
これは DESIGN.md を扱ううえで、最も大事な規律を示しています。
他人の目を通して書かれた言葉を、鵜呑みにしない。
awesome-design-md は驚異的な観察眼の産物です。しかし書き起こしは書き起こしであって、原典ではない。DESIGN.md を自社の仕事に取り入れるときも、公開されたブランドの DESIGN.md を参照するときも、そこに書かれた「なぜ」を自分の目で検証する工程を、必ず挟むこと。
これは AI 時代の教訓として、とりわけ重く響きます。AI が生成する DESIGN.md、他人が書き起こした DESIGN.md、AI に書かせた設計意図の解説——それらはすべて、書き手（あるいは書き手を代行した機械）の解釈が混ざっています。検証せずに次の設計に渡せば、そこで誤読が固定化される。そしてそれを再び AI が学習して、誤読が増殖していく。
これを防ぐには、自分の目で見る習慣が、やはり最後の砦になります。
観察し、言葉にする、という仕事
さて、もうひとつ大切なことを付け加えておきます。書き手の解釈を検証する必要はあるにせよ、awesome-design-md というプロジェクトそのものが示した価値は、紛れもなく大きい。
先ほど書いたように、これらの文章を書いたのは、Linear や Stripe の中の人ではありません。VoltAgent という外部チームが、各社のサイトを丁寧に観察し、書き起こしたものです。彼らはおそらく、Linear のデザイナーでもなければ Stripe の社員でもない。それでもこれだけの解像度で、各ブランドの本質に迫る言葉を置けている。
これが意味することは、デザイナーにとって、とても希望のある話だと私は思います。
Figma を開いて一つ一つのピクセルを動かす仕事は、AI がどんどん上達していく領域です。しかし他者のビジュアルを観察し、その本質を言葉に翻訳する仕事は、これからむしろ希少になる。そしてこの仕事は、デザイナーが普段から鍛えてきた"見る目"が、そのまま武器になる領域です。
自分の手でビジュアルを作ることだけが、デザイナーの仕事ではありません。見て、見抜いて、言葉にすることも、デザイナーの大切な仕事です。そしてその能力は、AI 時代にむしろ価値を上げていきます。
awesome-design-md の書き手たちが示したのは、技術の話ではなく、観察眼と言語化力がひとつの作品になりうるという事実でした。そしてその作品ですら、受け手は検証の目を持ち続ける。この往復のなかで、デザインシステムは育っていきます。
DESIGN.md は鏡である
ここまで読んで、DESIGN.md というものの性格が、少し見えてきたかもしれません。
これは、AI に指示を出すための設定ファイルではありません。もっと深い意味を持つ書類です。
DESIGN.md は、書き手が普段何を見てきたか、何を読んできたか、何に心を動かされてきたか、の鏡です。そこに "moonlight"（月光）と書ける人は、月光の微妙なグラデーションを知っています。"cinematic"（映画的）と書ける人は、映画のフレームの呼吸を知っています。"elegance"（エレガンス）と書ける人は、凡庸なエレガンスと本物のエレガンスの違いを、おそらく自分の皮膚で知っています。
そしてこの"鏡"は、これから数年間にわたって、デザイナーの職能を根本から問い直す装置になっていきます。
これまで、デザイナーの仕事は多くの場合、Figma の画面の中で完結していました。色を選び、余白を調整し、タイポグラフィを組み、実装へと手渡す。この工程のうち、「色を選び、余白を調整し、タイポグラフィを組む」部分は、AI が急速に上達している領域です。残念ながらこの部分だけで勝負する時代ではなくなりつつあります。
一方、「なぜその色なのか、なぜその余白なのか、なぜそのタイポなのか」を言葉で説明できる能力は、AI がまだ全く届いていない領域です。そしてこの能力は、デザイナーが普段から蓄積してきたインプットの厚みに、そのまま比例します。
AI時代のデザイナーが持つ最大の武器は、実は昔から同じものでした。見続けること、触れ続けること、読み続けること。ただ、その武器の希少価値が、これから劇的に上がっていくだけです。
小さな実験
ここで、ひとつ試してみてほしいことがあります。
あなたが最近関わったプロジェクト、あるいは好きなブランドを、ひとつ思い浮かべてください。そして、そのブランドのビジュアル・アイデンティティを3行で Claude や ChatGPT に説明してみてください。色コードやフォント名ではなく、そのブランドが世界の中でどういう"表情"をしているのかを、比喩でもいいので言葉にしてみる。
書けましたでしょうか。
もし少しでも手応えがあれば、それは DESIGN.md の最初のセクションを半分書けたことと同じです。逆に、手が止まったとしても、それはこれから取り組む価値のある課題を発見した瞬間にほかなりません。どちらであっても、収穫のある実験です。
この連載では、これから4回にわたって、DESIGN.md というフォーマットの実際の姿と、世界中のデザインチームがこの新しい道具をどう使い始めているかを見ていきます。
次回（第2回：DESIGN.md という新しいフォーマットの衝撃）は、DESIGN.md というフォーマットそのものに踏み込みます。Google Stitch が公開した仕様、VoltAgent が公開している60を超えるブランド分のコレクション、そして README.md / AGENTS.md / DESIGN.md という三層構造の新しい考え方について、具体的に見ていく予定です。
AI の凡庸さと戦う最前線に立てるのは、デザイナー以外にいません。その戦いのための新しい武器を、一緒に見ていきましょう。
参考文献
Google Stitch — DESIGN.md Overview — DESIGN.md フォーマットの公式仕様
VoltAgent / awesome-design-md — 68ブランドの DESIGN.md 書き起こしコレクション（MIT ライセンス）
Improving frontend design through Skills（Anthropic 公式ブログ） — "distributional convergence"（分散収束）という用語と、それに抗うための「約400トークンのプロンプト」をスキルに仕立てた経緯を解説した一次資料（2025年11月12日公開）
Anthropic
frontend-designスキル本体 — 上記ブログ記事で解説された中核プロンプトを含む、Claude Code 用のスキル定義ファイルInter font family — Inter の OpenType feature（cv01 = Alternate one、ss03 = Round quotes & commas、cv11 = Single-story a 等）の公式定義
この記事をシェアする
