テック技報最新号へ →
AIコーディング

日本語 UI 向け DESIGN.md: 和文フォント・行間・字間を先に書く

Google Stitch 由来の DESIGN.md は欧文前提が多く、和文フォント未指定・行間 1.4 前後・字間ゼロのままだと日本語 UI が崩れる。CJK 用の行間（目安 1.7〜2.0）や letter-spacing（目安 0.04〜0.1em）を DESIGN.md に明示する。公開例: kzhrknt/awesome-design-md-jp。

@kuzzken · 2026-11-06
#ai-coding#design-md#ui#日本語

解決する問題

  • 借りた awesome-design-md で日本語 LP を作ると、ブランドの美しさが再現できない
  • エージェントが欧文の余白感覚のまま和文を組む

やり方

  1. プロジェクトの DESIGN.md（またはエージェントが読むデザインルール）に、少なくとも次を書く
    • 和文／欧文それぞれのフォントスタック
    • 本文・見出しの line-height（日本語は 1.7〜2.0 を起点に調整）
    • letter-spacing / word-spacing の扱い（日本語はわずかな字間が読みやすいことが多い）
    • 禁則・折り返し・全角記号の扱い
  2. 参考リポジトリを渡して「この CJK ルールを守って」と明示する
  3. 守れないと困る値は、既存の方針どおり lint／hook に寄せる

注意点

  • 借りた DESIGN.md はそのまま使うと他社っぽくなる。トークンと「なぜ」を自社向けに書き換える
  • 行間・字間の数値は出発点。実フォントで画面を見て調整する

関連

出典

X の元の投稿を開く