AIとの視覚的コミュニケーションギャップを埋める実践的ノウハウ

人間：「全体的に字が小さいんだ」
AI：[文字サイズを18pxから24pxに変更]
人間：「字をデカくしなくていいところまででかくなった！」
AI：[全体的にサイズを調整]
人間：「詳細ページの字間があきすぎ」
AI：[letter-spacingを調整]
人間：「字間じゃない！行間だ！」
AI：[line-heightを調整] ← ここで「字間」という用語の使い方を確認すべきだった
人間：「モバイル以外ではだめだ」
AI：[レスポンシブ対応を追加]

AI：「字間（letter-spacing）を調整しますが、
    もしかして行間（line-height）のことでしょうか？
    複数行のテキストの縦の間隔なら行間です」

❌ 悪い例：
「行間が広すぎる」

✅ 良い例：
「ニュース詳細ページのタイトル（h1）の行間が、
デスクトップ表示で広すぎる。
現在1.5くらいに見えるが、1.2程度にしたい」

❌ 悪い例：
「文字が小さい」

✅ 良い例：
「本文の文字サイズが小さい。
現在16pxだが、18px程度が読みやすい。
見出しは現状維持で良い」

❌ 悪い例：
「レイアウトがおかしい」

✅ 良い例：
「iPadの横向き（1024px）で見たとき、
サイドバーが本文に被っている」

「この画像の赤枠部分の余白が大きすぎる。
半分程度にしたい」
[スクリーンショット添付]

【対象】
- ページ/コンポーネント: 
- 要素: 
- デバイス: □ モバイル □ タブレット □ デスクトップ

【現状】
- 現在の値/状態: 
- 問題点: 

【希望】
- 変更後の値/状態: 
- 参考: 

【補足】
- 影響範囲: 
- 優先度: 

【対象】
- ページ: ニュース詳細ページ
- 要素: 記事タイトル（h1）
- デバイス: ☑ デスクトップ

【現状】
- 現在の値: line-height: 1.5
- 問題点: 2行以上になったときに行間が広すぎる

【希望】
- 変更後: line-height: 1.2
- 参考: Mediumの記事タイトルくらいの密度

【補足】
- モバイルは現状維持
- 日本語の長いタイトルで特に目立つ

1. まず大まかな問題を伝える
2. AIの対応を確認
3. 具体的な調整を指示
4. 必要に応じて微調整

プロジェクト内で用語を統一：
- 字間 → letter-spacing
- 行間 → line-height
- 余白 → margin（外側）/ padding（内側）

/* デザイントークンで管理 */
:root {
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-loose: 1.8;
}