テック技報最新号へ →
デザイン

日本語UIのDESIGN.mdには、和文フォント・行間1.7〜2.0・字間0.04〜0.1emを明記する

公開されているDESIGN.mdの多くは欧文向けで、そのまま使うと日本語の画面が詰まって見える。和文フォントの指定、日本語向けの行間・字間を書き足す。

@kuzzken · 投稿 2026-04-06
#AIデザイン#DESIGN.md#タイポグラフィ#日本語UI

どんな問題を解決するか / いつ使うか

海外サービス風のDESIGN.mdを日本語サイトに使ったら、文字がぎゅうぎゅうで読みにくくなったとき。

やり方

  1. 和文フォントを指定する（例：本文 Noto Sans JP / BIZ UDPGothic など、欧文と和文の組み合わせも書く）。指定がないとブラウザ任せになる。
  2. 行間（line-height）：日本語本文は 1.7〜2.0 を目安にする（欧文の1.4〜1.5のままにしない）。見出しは狭めに。
  3. 字間（letter-spacing）：日本語本文は 0.04〜0.1em が読みやすい目安。大見出しは逆に詰めることもある（大見出しは字間を -2%〜-5% 詰める）。
  4. 日本語対応版のDESIGN.md集（awesome-design-md-jp）を土台にするのも手。

注意点・対応状況

  • 数値は目安。フォントや文字サイズによって最適値は変わるので、実際の画面で確認する。
  • 投稿の「light-height」は line-height の誤記。

出典

X の元の投稿を開く