AIエージェントに「日本語のダッシュボードを作って」と頼むと、和文フォントが抜け落ち、行間が詰まり、句読点が行頭に来るUIが返ってくる。awesome-design-md-jp はこの「AIが日本語UIを壊す」問題を、378サイト分のDESIGN.md（デザイン仕様書）で埋めるプロジェクトだ。AIエージェント全般の見取り図は AIエージェントフレームワーク比較2026｜LangGraph・CrewAI・Dify等9種をStar数・実コードで検証 をご覧ください。
WHAT BREAKS壊れ方と直し方
AIが壊す日本語UIは、DESIGN.mdの数行で直る
AIに任せると
DESIGN.mdに書く値
AIに任せると: 和文フォント未指定でシステム任せ
DESIGN.mdに書く値: 和文フォントのフォールバックチェーン
AIに任せると: line-height 1.4〜1.5で本文が詰まる
DESIGN.mdに書く値: line-height 1.5〜2.0
AIに任せると: letter-spacing 0で長文が読みにくい
DESIGN.mdに書く値: letter-spacing 0.04〜0.1em
AIに任せると: 句読点や括弧が行頭に来る
DESIGN.mdに書く値: line-break: strict
30秒でわかる awesome-design-md-jp
- ・Google Stitchの「DESIGN.md」を日本語タイポグラフィ向けに拡張したOSS。MIT・885スター（2026-07-31）
- ・freee・MUJI・任天堂・虎屋など378サイトのDESIGN.mdを収録（当初182から倍増）
- ・本家との差は和文フォント・行間と字間・禁則・palt/kern・和欧混植の5観点
- ・CLIは無い。対象サイトのDESIGN.mdをコピーし、CLAUDE.md / AGENTS.md から参照させる
- ・各社の公開CSSから抽出した参考実装で、公式デザインシステムではない
awesome-design-md-jp とは — 378サイトの日本語UI DESIGN.md集
awesome-design-md-jpは、kzhrknt氏が2026年4月6日に公開した日本語版DESIGN.md集だ。DESIGN.mdは「色・フォント・余白・コンポーネント・Do’s and Don’ts」をコーディングエージェントが機械的に読める形で書いたマークダウン仕様書で、AGENTS.md（プロジェクトの作り方）と並べてリポジトリのルートに置き、AIがUIを生成するたびに参照させる。
BY THE NUMBERS数字で見る
収録は当初の182から378サイトに倍増
378サイト
収録したDESIGN.md
当初は182サイト
885スター
GitHub
2026-07-31 時点・MIT
9セクション
テンプレートの構成
Typographyに和文の8項目
伸びの背景には、海外で先に話題になった本家awesome-design-md（VoltAgent、9万スター超）がある。本家はVercel、Stripe、Linear、Notionなど欧米ブランドを集めた一方、日本語UIの仕様は欠けていた。DESIGN.mdの書き方・最小テンプレートは design.mdとは？AIエージェントに一貫UIを生成させるデザイン仕様書の書き方入門 にまとめてあり、本記事は日本語拡張に絞る。
日本語タイポグラフィがAIのUI生成で壊れる理由
原因は、欧文ベースの学習データと欧文向けのCSSパターンが優先されることにある。READMEが挙げる「日本語UIで欠落しがちな仕様」は6点だ。和文フォントのフォールバックチェーン、欧文用のline-height、ゼロのletter-spacing、禁則処理、palt・kernなどのOpenType機能、和欧混植の比率。どれもCSSとフォントの組み合わせで防げるが、AIに毎回口頭で説明するのは現実的でない。DESIGN.mdのTypography Rulesに固定値で書いておけば、Claude CodeやCursorは生成のたびにそこを参照する。
| 観点 | 欧文の標準 | 日本語の推奨 | 理由 |
|---|---|---|---|
| 本文 line-height | 1.4〜1.5 | 1.5〜2.0 | 漢字の上下バランスを取り、視線移動を楽にする |
| 本文 letter-spacing | 0 | 0.04〜0.1em | 全角文字の詰まりを緩和し、可読性を上げる |
| 見出し letter-spacing | -0.02em〜0 | 0〜0.05em | 詰めすぎないことで漢字の重みを保つ |
| 禁則処理 | 不要 | line-break: strict | 句読点・括弧の行頭・行末ルールを守る |
| OpenType palt | 用途次第 | 見出しに有効 | 仮名・約物のプロポーショナル詰め |
数値はサイトによって異なるが、大事なのは「項目として書き残す」ことだ。AIは項目が存在しない領域には踏み込まないことが多く、Typography Rulesに数行加えるだけで生成結果が変わる。
awesome-design-md-jp の収録範囲とテンプレート
収録はビジネスSaaSからファッション、伝統工芸、ホテル、公共・政府まで広い。
| カテゴリ | 収録サイト例 |
|---|---|
| ビジネスSaaS | freee、SmartHR、MoneyForward、Sansan、Cybozu、STORES、Mercari、PayPay |
| 開発者向けプラットフォーム | Qiita、Zenn、connpass、Notion日本語版、STUDIO |
| メディア・出版 | note、WIRED.jp、BRUTUS、Casa BRUTUS、POPEYE、Pen Online、日経電子版 |
| 大企業コーポレート | Toyota、Sony、Panasonic、Canon、FUJIFILM、SHARP、任天堂、Yamaha、SUBARU |
| アパレル・小売 | UNIQLO、GU、BEAMS、UNITED ARROWS、sacai、ISSEY MIYAKE、mina perhonen |
| 伝統工芸・老舗 | 虎屋、SOU・SOU、中川政七商店、土屋鞄、Maruni木工、HASAMI、HOSOO、HARIO、能作 |
| 化粧品・ビューティ | 資生堂、POLA、ORBIS、KOSÉ、SHIRO、IPSA、Aesop、shu uemura、THREE |
| ホテル・空間 | 星野リゾート、アマン東京、TRUNK(HOTEL)、SANU、GINZA SIX、東京ミッドタウン、teamLab |
| 公共・政府 | デジタル庁、グッドデザイン賞、森美術館、21_21 DESIGN SIGHT |
| 食・飲料 | Calbee、KIRIN、SAPPORO、Suntory、伊藤園、カゴメ、HIGASHIYA、Soup Stock |
同じ形式でまったく異なるトーンが並ぶ。SaaSの freee はブルー基調の業務UI、虎屋は明朝体ベースの余白の効いた和のUIだ。明朝体のUIや余白を活かしたラグジュアリーUIは、本家には無い方向性になる。
design-md/freee/preview-screenshot.png
design-md/toraya/preview-screenshot.png各サイトのDESIGN.mdは design-md/[サイト名]/ にあり、同じ場所の preview.html はローカルで開いても動く。テンプレート（template/DESIGN.md）は9セクション（Visual Theme・Color Palette・Typography Rules・Component Stylings・Layout Principles・Depth & Elevation・Do’s and Don’ts・Responsive Behavior・Agent Prompt Guide）で、本家と同じ枠組みに、3. Typography Rules の和文向け8項目（3.1 和文フォント〜3.8 縦書き）を足したのが日本語版の核心だ。freee の実際の指定は次のとおり（design-md/freee/DESIGN.md より抜粋）。
/* プロダクトUI（Vibes Design System） */
font-family: '-apple-system', BlinkMacSystemFont, 'Helvetica Neue',
'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', Arial,
'メイリオ', Meiryo, sans-serif;
/* コーポレートサイト（本文） */
font-family: "Noto Sans JP", sans-serif;
/* 禁則・改行（Typography Rules 3.6） */
word-break: break-all;
overflow-wrap: break-word;
line-break: strict;
READMEの原則は「和文 → 欧文 → generic」の順だが、実際の各DESIGN.mdはサイトごとに戦略が違う。freee のプロダクトUIは -apple-system などの欧文システムフォントを和文より先に置き、数字・英字の表示品質を優先して和文はOS標準に任せる。コーポレートサイトは Noto Sans JP のWebフォントだ。プロダクトかコーポレートか、どの環境で読ませるかで順序が変わる。なおセクションヘッダーは英語のまま残し、値の説明だけ日本語で書くのが作法で、AIはヘッダー名を手がかりに値を抜くので「Typography Rules」を訳すと精度が落ちる。
本家awesome-design-md との違いと表記ゆれ
| 観点 | 本家awesome-design-md | awesome-design-md-jp |
|---|---|---|
| 収録サイト | 欧米55ブランド以上 | 日本のサービス378サイト（SaaS・伝統工芸まで） |
| 和文フォント | 未指定 | Noto Sans JP・游ゴシック・ヒラギノを優先度付きで列挙 |
| 行間・字間 | line-height 1.4〜1.5想定 | line-height 1.5〜2.0、letter-spacing 0.04〜0.1emを明示 |
| 禁則処理 | 言及なし | word-break・line-break・overflow-wrapを推奨セットで定義 |
| OpenType機能 | font-featureに言及あり | palt・kernを和欧混植の文脈で個別に解説 |
| 配布方法 | npx getdesign で1コマンド導入 | GitHubから直接コピー（CLI未提供） |
| スター / ライセンス | 9万超 / — | 885 / MIT |
本家との関係は競合ではなく補完で、README（Credits）にも本家へのリスペクトが明示されている。CONTRIBUTING.mdも整っており、サイト追加やCLI化の貢献に開かれている。海外向けには本家、国内向けには日本語版、という使い分けになる。
日本語圏では表記ゆれが多い。awesome-design-md-jp が本記事の日本語版、awesome-design-md が本家の英語版（VoltAgent/awesome-design-md）、「オーサムデザインmd」はカタカナ表記、awsome design は e が抜けたスペルミス、DESIGN.md はGoogle Stitch由来のフォーマット名だ。見分け方は末尾の -jp の有無で、両者は別リポジトリで収録サイトも重複しない。日本語UIを作らせたいなら -jp 側を読ませる。
使い方 — Claude Code・Cursorに日本語DESIGN.mdを読ませる
HOW TO USE使い方
コピーして参照させ、値は自社のものに替える
-
対象サイトのDESIGN.mdを配置
CLIは無いので git clone してコピー
-
CLAUDE.md / AGENTS.md で参照を明記
UI生成時は DESIGN.md に従う、と書く
-
色・フォント名・ロゴを自社の値に
使うのは項目の構成で、値そのものではない
CLIが無いので、取り込みはGit経由のコピーになる。freeeに近いトーンを再現したい場合はこうだ。
# リポジトリを浅くクローン
git clone --depth 1 https://github.com/kzhrknt/awesome-design-md-jp.git tmp-design
# freeeのDESIGN.mdをコピー
cp tmp-design/design-md/freee/DESIGN.md ./DESIGN.md
# 後片付け
rm -rf tmp-design
Claude Code はリポジトリルートのDESIGN.mdを文脈に含めるが、確実に参照させたいならCLAUDE.mdに一文入れる。CursorやWindsurfでは .cursorrules や AGENTS.md に同等の指示を書く。
# UI Generation Rules
- UIコンポーネントを生成・修正する場合は必ず `./DESIGN.md` を参照すること。
- Typography Rules 3.5 の line-height / letter-spacing を本文に適用する。
- 3.6 の禁則処理（word-break / line-break / overflow-wrap）を必ず設定する。
ブランドカラー・有償フォント名・ロゴはそのまま流用せず、自社の値に置き換える。テンプレートとして使うべきは「セクションの粒度と項目構成」で、値そのものではない。AIに渡す前に preview.html を人間が開き、そのトークンセットで違和感が無いかを見ておくと、生成後の違和感が減る。
実務での落とし穴と運用 — 公式デザインシステムではない
| 落とし穴 | 実態 | 対処 |
|---|---|---|
| 公式デザインシステムではない | 公開CSSをブラウザのcomputed styleから抽出した参考実装（READMEのDisclaimerに明記） | 商用で「◯◯公式」と扱わない。ロゴ・商標は各社ガイドラインを尊重 |
| 有償フォントのライセンス | 游ゴシック・ヒラギノ・モリサワ系はライセンスが絡む | フォールバックに Noto Sans JP など無償フォントを必ず含める |
| AIが値を鵜呑みにする | 具体的なpx値を忠実に再現し、意図がずれても固まる | Visual Theme と Do’s and Don’ts を必ず埋める |
| 配布まわりが未整備 | npx getdesign 相当のCLIがない |
社内テンプレートリポにフォークして正本を1つに揃える |
| 内製への移行 | 参考実装のまま長期運用すると責任所在が曖昧 | 固まってきたら自社ブランド値で内製DESIGN.mdに書き換える |
DESIGN.mdが定義するのはUIの「外観」だけだ。コンポーネント命名・ディレクトリ配置・テスト戦略は CLAUDE.md / AGENTS.md に書き分け、揃って初めてAIは「ビルドが通り、規約を守り、ブランドらしい」UIを安定して出せる。awesome-design-md-jpが代替するのは、AIに日本語UIを作らせるたびにフォント・行間・禁則を口頭で指定し直す手間と、和文タイポグラフィのDESIGN.mdをゼロから書く初期コストだ。公式デザインシステムや有償フォントのライセンス、商標の管理までは代替しない。まず1サイト分のDESIGN.mdを手元に引き、preview.htmlを開くところから始めると感覚がつかみやすい。
参照ソース
- kzhrknt/awesome-design-md-jp（GitHub） — 本記事で扱った日本語版DESIGN.mdリポジトリ。READMEに収録サイト一覧とTypography Rules拡張の方針が記載。2026年4月6日公開、885スター・MITライセンス（2026年7月31日時点）
- awesome-design-md-jp Gallery — 収録サイトのDESIGN.mdをデザイントークンと共に一覧できるGitHub Pages
- DESIGN.md公式ドキュメント（Google Stitch） — DESIGN.mdフォーマットの一次ソース。9セクション構成とフロントマターの定義
- google-labs-code/design.md（GitHub） — Google Labsが公開する公式DESIGN.md仕様リポジトリ
- VoltAgent/awesome-design-md（GitHub） — 本家英語版awesome-design-md
