デザインClaude CodeにUIを直してもらうときは、「いい感じに」を20の具体的な言い換えから選んで頼む
「読みにくい」「散らかる」などの悩みを、数値や範囲つきの修正指示に置き換えるチートシート。文字・余白・色と操作・修正のズレの4分類で、悩みに合う1つを選んで使う。
@kawai_design · 2026-10-19#AI×デザイン#ClaudeCode#プロンプト#UI修正#チートシート#余白#タイポグラフィ
どんな問題を解決するか / いつ使うか
Claude CodeやCodexに「いい感じにして」「見やすくして」と頼むと、意図と違う場所まで変わったり、変化が小さすぎたりする。症状（何が気になるか）から、AIが実行できる指示に言い換えて渡すための早見表。
やり方
依頼の型は 「対象 ＋ 直すこと ＋ 保つこと ＋ 確認方法」。対象画面のスクリーンショットを添え、1回に1つの指示を選ぶ。
1. 文字と情報
| 症状 | 言い換えた指示 |
|---|
| 読みにくい | 本文を16px以上、行間を1.6に。この値で実画面を確認して |
| 強弱がない | 見出し・本文・補足の3段階に分け、サイズと太さで差をつけて |
| 改行が不自然 | 見出しを単語の途中で切らず、意味のまとまりで改行して |
| 文章が多い | 結論を先頭に。補足は折りたたみ、読む順に情報を整理して |
| 数字を比べにくい | 数値は右揃え、単位と桁を統一。列ごとに比較できる表にして |
2. 余白と配置
| 症状 | 言い換えた指示 |
|---|
| なんか散らかる | 同じ意味の情報を近づけ、別のグループとの余白を広げて |
| 端がそろわない | 見出し・本文・画像の左端を共通の基準線にそろえて |
| 余白がバラバラ | 余白を8・16・24・32pxに整理し、同じ役割には同じ値を使って |
| 全部カードになる | 関連情報は余白でまとめ、枠や背景は区別が必要な所だけに |
| スマホで崩れる | 幅375pxで横のはみ出しを確認し、列数と余白を画面幅に合わせて |
3. 色と操作
| 症状 | 言い換えた指示 |
|---|
| 色が多すぎる | 背景・文字・強調色の役割を決め、強調色は主な操作に絞って |
| 文字が薄い | 通常の本文は背景とのコントラスト比4.5:1以上に |
| ボタンが競合する | 主な操作を1つ選んで塗りで強調し、補助操作は弱く見せて |
| 押した結果が不明 | 「送信」を「見積もりを依頼」のように、操作後が分かる言葉に |
| 選択中が分からない | 選択中は背景・文字色・太字で示す（左の色帯や縦線は使わない） |
4. 修正のズレを防ぐ
| 症状 | 言い換えた指示 |
|---|
| 勝手に全体が変わる | 今回は料金表だけ変更。他の領域・文言・機能は保って |
| 見本と違う | 添付画像との違いを3点挙げ、配置・文字・余白の順に直して |
| 直す場所が曖昧 | 対象はヘッダーの申込ボタン。高さと左右の余白だけ直して |
| 一度に頼みすぎる | まず文字の階層だけ直す。色やレイアウトは次に確認する |
| 完了と言うが崩れる | 修正後の画面を撮影して比較。未確認の箇所は分けて報告して |
注意点
出典