Repository navigation
Philosophy
DESIGN.md の設計判断は、本家の PHILOSOPHY.md に4本の柱として書かれています。ここではその要点と、そこから何が導かれるかを扱います。
→ 全体像は Home
:::message
引用について: 本家の PHILOSOPHY.md は英語で書かれています。このページの日本語の引用は筆者による訳です。原文は本家リポジトリを参照してください。
:::
生成されたデザインの品質は、値の精度よりも、意図がどれだけ明確に記述されているかで決まる。
#1A1C1E と書いても、モデルはそれが「なぜ黒ではないのか」を知りません。「純黒ではない、グラファイト寄りの温かいインク」と書いて初めて、その色を罫線や図版のストロークにどう展開すべきかを判断できます。
トークンは値を固定し、散文は判断の仕方を伝えます。後者がないと、書いていない場面すべてでモデルが独自に判断します。そして書いていない場面は、いつでも大半です。
PHILOSOPHY.md の模範例は、機械可読な部分が名前1行だけで、残りは全部プロースです。
---
name: Technical Handout
---
## Overview
古い伝統ある大学の、大学院レベルの計算機科学の講義ハンドアウト。
読者は大学院生と研究エンジニアで、セミナー冒頭で配られた紙を読んでいる。
このハンドアウトは簡素で、情報密度が高く、第一印象を良くすることに
まるで関心がない。読者は自分がなぜそこにいるかを知っており、
ハンドアウトの仕事は誘惑することではなく、働くことである。
これで DESIGN.md として成立します。 色も書体も余白も1つも指定されていませんが、この記述から導かれる UI は、ほぼ一意に定まります。
「1970年代の、古い伝統ある大学の大学院講義ハンドアウト」は完結した世界を喚起する。一色のインク、たっぷりの余白、読みやすいサイズのセリフ、装飾の不在。その一文が、十数個の数値より多くの有用な情報を運ぶ。値の背後にある理由を運ぶからだ。
「モダン、クリーン、信頼感、プレミアム」は何も喚起しない。モデルはそれらの語が指す領域の中心に何かを作り、結果は典型的に凡庸になる。
形容詞は領域を描き、具体的な参照は点を描く。
「モデルが知っていて、かつ視覚的な特徴が際立つもの」です。
| 効く | 効きにくい |
|---|---|
| 1970年代の大学講義ハンドアウト | レトロな感じ |
| 駅の発車標 | インフォメーショナル |
| 医療機器の操作パネル | プロフェッショナル |
| 美術館の図録 | 高級感がある |
| 同人誌即売会のカタログ | 親しみやすい |
コツは、「業界」ではなく「具体的な物体・場面」を指すことです。
「金融系っぽく」は業界で、領域を指します。「Bloomberg ターミナル」は物体で、点を指します。
ここが実務上いちばん効く性質です。
十分に具体的な参照は、その制約を自動的に運ぶ。モデルは講義ハンドアウトが何であるかを知っており、それが何でないかも知っている。グローもグラデーションも使わない。列挙する必要がない。犬と名指せば、犬が鳴かないことも伝わる。
続けてこう書かれています。
長くとりとめのない Don't リストは、記述が曖昧すぎた兆候であることが多い。
これは運用上のシグナルとして使えます。「あれもこれも禁止したい」と感じたら、まず Overview に戻って参照を具体化する。 禁止を足すより早く解決することが多い。
そのうえで、「強い参照 ＋ 意図的な Do/Don't リスト」の組み合わせが最良とされています。参照から導けない、そのプロダクト固有の判断だけを Don't に書く、という切り分けです。
原典の例より:
- Don't タイトルページにヒーロー要素を置かない。本物のハンドアウトの1ページ目は「コンテンツの1ページ目」であって、雑誌の表紙ではない。
- Don't Bold を使わない。どこにも。
- Do 控えめなサイズ差を信頼する。セクションタイトルは本文の約1.9倍であって、5倍ではない。
- Do ページに余白が残ることを許す。3分の2で終わるページは正しく、埋め足りないのではない。
「Bold を使わない」だけでは、強調が必要な場面でモデルが困ります。「控えめなサイズ差を信頼する」という代替がセットで書かれているから、判断できる。
禁止だけを書くと、その穴を別の方法で埋められます。 埋め方まで書いてはじめて制約になります。
標準化されているのは、あらゆるデザインシステムに共通する最小限だけです。色・タイポグラフィ・余白・角丸・コンポーネント。
モーション、アイコノグラフィ、エレベーション、文字ケース、行長は、意図的に開けてあります。
あるチームのモーショントークンは CSS のイージング曲線。別のチームのそれはバッファブロック単位の音声時定数。正しい形は各システム固有であり、フォーマットはすでにそれを定義できる。
独自のカテゴリを足しても、仕様変更は必要ありません。
リンタはこれらの値を受け入れ、エージェントは散文を読む。トークン自体が指示ではなくコンテキストだから、仕様変更は必要なかった。
この「開けてある」性質が実際に使われている証拠は、実物から見えること にあります。仕様に無いセクションが、実物の過半数に定着しています。
正直に書いておきます。
散文の質は機械で検証できません。 検証ツールは値の整合性（壊れた参照、コントラスト比、未使用トークン）を見ますが、散文は読みません。つまりこの形式が最も重要だと主張している部分を、この形式のツールは一切評価しません。
矛盾というより、構造的な非対称です。散文の質を自動判定できるなら、それはもうデザインができるということなので。
実務上の意味は1つです。「検証を通った DESIGN.md」は、良さについて何も保証していません。 品質の担保は、参照を具体的にしておくこと、そして人間が出力を見ることに残ります。