AIが作った図解の矢印や文字が不格好な時の直し方

AIに図解やWebページを作ってもらうと、最初の見た目はそれなりに整っていることがあります。でも、スマホで実際に見ると、矢印と文字が近すぎる、重なってはいないけど窮屈、視線の流れが引っかかる、と感じることがあります。

このページでは、AIやCodexにデザイン修正を頼む時に、「人間の目で自然な余白」をどう言葉にすればよいかをまとめます。

重なりではなく、視覚的な余白を見る

AIに「重ならないように」と頼むだけでは、矢印と文字の距離が近すぎるままになることがあります。

重なっていないだけでなく、人間の目で見て自然に読める余白にしてください。
矢印の先端と次のテキストの間には、スマホ表示で1〜2mm程度の視覚的余白を作ってください。

最大のポイント: 重なっていないだけでは足りない

AIに「矢印と文字が重ならないようにしてください」と頼むのは間違いではありません。ただ、この指示だけだとAIは座標上で重なっていない状態をゴールにしがちです。

人間が見て自然かどうかは、それだけでは決まりません。矢印の先端と次の文字の間に呼吸できる余白があるか、見出し、矢印、本文が別々の要素として読めるか、スマホの小さい画面でも窮屈に見えないかを見ます。

悪いプロンプト例

次のような指示だけだと、AIは最低限の修正だけで止まりやすいです。

• いい感じに直して。
• 矢印を下向きにして。
• 文字と矢印が重ならないようにして。

人間が気にしているのは、単なる重なりではありません。そこに少し隙間があるだけで自然に見える、という距離感です。

そのまま使えるプロンプト

スマホ向けの図解デザインを調整してください。

目的:
人間の目で見た時に、矢印・文字・余白の関係が自然に見えるようにしたいです。

問題:
要素同士は座標上では重なっていないかもしれませんが、矢印の先端と下のテキストが近すぎて、不格好で窮屈に見えます。

修正方針:
- 矢印の先端と次のテキストの上端の間に、スマホ表示で1〜2mm程度の視覚的な余白を作ってください
- 「重なっていない」だけでOKにしないでください
- 人間が見て、矢印の流れと次の文字が独立して読める距離にしてください
- 各カードで同じ余白ルールにそろえてください
- 文字サイズを小さくしすぎず、必要ならカードの高さや要素の配置を調整してください
- スマホ幅390px前後で見た時に窮屈に見えないようにしてください

Codexに作業させる時のプロンプト

HTML、CSS、SVGを直接修正できるAIに頼むなら、対象ページと関連ファイルを読ませて、完了条件まで指定します。

対象ページと関連するCSS/SVG/画像ファイルを読んで、スマホ用図解の視覚的な余白を調整してください。

今回の目的は、座標上の重なりを消すことではなく、人間の目で見た時に自然な余白を作ることです。

特に次を確認してください。
- 矢印の先端と次のテキストの間に、スマホ表示で1〜2mm程度の余白があるか
- 矢印、見出し、本文、補足テキストがそれぞれ別の要素として読めるか
- 文字を小さくして逃げるのではなく、必要ならカードの高さや配置を調整しているか
- 390px前後のスマホ幅で見た時に、窮屈に見えないか
- 同じ種類のカードで余白ルールがそろっているか

画像を差し替える場合は、画像ファイル本体だけで完了扱いにしないでください。
実ページのHTMLが新しい画像ファイル名、またはキャッシュ対策用のクエリ付きURLを参照しているか確認してください。

AIに残すべきmdルール

プロジェクトの運用メモやAI向けのmdには、次のように残しておくと再発防止になります。

## AIに図解・UIを作らせる時の視覚余白ルール

- 「重なっていない」だけで完了扱いにしない
- 矢印、アイコン、見出し、本文、補足テキストは別要素として読める余白を空ける
- 矢印の先端と次のテキストの間には、スマホ表示で1〜2mm程度の視覚的余白を作る
- 迷ったら文字を小さくするのではなく、カード高さや配置を調整する
- 同じ種類のカードでは余白ルールをそろえる
- 390px前後のスマホ幅でスクショ確認する
- 画像を差し替えた場合は、新しいファイル名または?v=で参照を更新し、実ページHTMLも確認する

なぜこの指示が効くのか

AIは「不格好」「窮屈」「なんか変」という言葉だけでは、何をどれくらい直せばいいか判断しにくいです。どの要素とどの要素の距離が問題か、どの画面幅で問題が出ているか、どれくらいの余白が欲しいか、何をもって修正完了とするかを分けると作業しやすくなります。

Before / Afterで見るべき場所

• 矢印の先端が次のテキストに刺さって見えないか
• テキストが矢印に押されているように見えないか
• 見出し、矢印、リンク名、補足文の役割が分かれて見えるか
• 1つ目のカードだけでなく、2つ目以降も同じ余白でそろっているか
• スマホでスクロールした時に、1枚の図解として読みやすいか
• 実ページHTMLが新しい画像やSVGを参照しているか

公開前に確認すること

画像やSVGの差し替えは、ファイルを作っただけでは終わりません。実ページで読み込まれているURLを確認します。