【図解48枚】AIデザインの直し方〜12テーマ・144の確認ポイントを一冊に〜
「もっとおしゃれに」「なんか違う」。
AIに修正を頼むとき、その先の言葉が出てこないことはありませんか。
そんなときに見返せるよう、これまで作成した「KAWAIがAIに教えた」シリーズを、12テーマ・48枚の図解にまとめました。
私が制作中に出した指摘と、制作基準として整理した項目を、NG／OKで見比べる見本帳です。
1テーマにつき表紙1枚・本文3枚、12項目。全体で延べ144項目を収録しています。
すべてが過去の発言の逐語録というわけではなく、説明用に整理した一般的な制作基準も含みます。
NG／OKは、その図で示す目的に対する比較です。色、書体、装飾の絶対的な正解としてではなく、自分の制作物を見直す材料にしてください。
読み方は簡単です。
作っているものに近いテーマを開く。
気になる箇所をNG／OKで見比べる。
各テーマの指示例を、自分の条件に合わせてAIへ渡す。
指示例は、この記事で使いやすい形に編集したものです。
一度に144項目を直す必要はありません。今、伝わりにくさの原因になっている箇所から、一つずつ見ていきましょう。
目次
作るものに合わせて直す：スライド・サムネイル・Web・UI
伝えたい意味を揃える：図解・広告・写真・グラフ
見た目のまとまりを整える：文字・配色・レイアウト・アイコン
見出し画像はAIで生成しました。
プロンプトは下記の記事に掲載中。
毎日プロンプトは増えていきます。
作るものに合わせて直す
1. スライド｜情報を減らして、伝えたいことを大きく
文字を大きくしたいのに、全部を1枚に収めようとしていませんか。
まずは、そのページで伝えたいことを一つ決めます。入りきらないなら、文字を縮める前にページを分ける。見出しと本文の強弱も、そこから整えます。
AIへの修正指示例
このスライドはスマートフォンでも見ます。結論を一つに絞り、補足は次のページへ分けてください。単語の途中で改行せず、見出しと本文の強弱をつけてください。2. サムネイル｜小さくても、読む理由が伝わるように
文字も写真も目立たせた結果、何の記事か分からなくなることがあります。
見せたい言葉を短くし、その言葉と同じ内容をアイキャッチで伝えます。大きな画面で作って終わらず、実際に表示される大きさへ縮めて確かめたいところです。
AIへの修正指示例
主役の見出しを一つに絞り、小さな補助ラベルを減らしてください。見出しと写真が同じ内容を伝えるようにし、縮小表示でも読める文字の大きさにしてください。3. Webサイト｜最初の画面から、次の行動までつなぐ
きれいなサイトでも、何のサービスか、次にどこを押すかが分からなければ迷います。
最初の画面で誰に何が役立つかを示し、ボタンには押した先でできることを書きます。スマートフォンでの並びと、リンクやフォームが実際に動くことも確認しましょう。
AIへの修正指示例
最初の画面で対象者と提供価値が分かる見出しにしてください。「こちら」のボタンは遷移先に合う具体的な文言へ変更し、スマートフォンでも読む順番が保たれるようにしてください。4. UIデザイン｜見た目だけでなく、操作の途中を確かめる
入力する、間違える、待つ、保存する。画面は、操作して初めて気づく問題があります。
主役のボタンを決め、入力項目の名前を残し、エラーには直し方を添えます。処理中や保存完了も、使う人に伝わる状態にします。
AIへの修正指示例
入力中も項目名を表示してください。エラーには原因と直し方を示し、処理中と保存完了を区別できる表示を追加してください。スライドの制作工程まで見直すなら、目的から修正までを扱う実践記事へ。生成例とプロンプトを紹介しています。
Web制作の指示から確認・修正まで進めたい方には、こちらの記事がつながります。
伝えたい意味を揃える
5. 図解｜箱や矢印の前に、関係を決める
文章を四角に入れただけでは、図解にした意味が伝わりにくいことがあります。
比較なのか、手順なのか、階層なのかを先に決めます。矢印を使うなら、何がどちらへ動くのかまで示す。比較する情報は位置を揃えると見比べやすくなります。
AIへの修正指示例
この図で伝える関係を明確にしてください。比較項目は同じ順番・位置に揃え、矢印には何が移動するのか分かる短い言葉を添えてください。6. 広告バナー｜誰に、何を約束するかを揃える
目立つ色を足しても、誰向けの広告かが曖昧なままでは、判断しにくいです。
見出し、写真、ボタン、クリック後の内容を、同じ約束でつなぎます。たとえば収納力を伝えるなら、バッグの外観だけより、中に何が入るかを見せたいところです。
AIへの修正指示例
対象者と伝える便益を一つに絞ってください。写真はその便益が分かるものにし、ボタンの文言とリンク先の内容も一致させてください。7. 写真の選び方・使い方｜きれいさに加えて、必要な特徴が写っているか
良い雰囲気の写真でも、説明したい特徴が見えなければ別の写真が必要です。
商品の大事な部分を切らず、文字を載せる余白も残します。図解中の写真は比較のために生成した作例です。実際の商品紹介では、現物の特徴を正確に示す素材を使います。
AIへの修正指示例
伝えたい特徴が写った写真を選んでください。重要な部分を切らず、文字を載せる場所を確保し、使用するサイズで画質を確認してください。8. グラフ｜数値の意味を変えずに、違いを見せる
同じ数字でも、軸や目盛りの設定で差の印象は変わります。
棒グラフの基点、比較する目盛り、単位、期間、出典を確認します。欠測をゼロへ置き換えないことも大切です。ここで使う数値は説明用の架空データ。実務では、元データと図を照合してください。
AIへの修正指示例
元データを変更せず、比較するグラフの目盛りを揃えてください。欠測値はゼロにせず、単位・期間・出典を明記し、棒の長さと数値が一致するか確認してください。広告バナーを実際に生成する指示まで進めたい方には、業種別のプロンプト集があります（有料記事）。自分の対象者・商品・便益に置き換えて使ってください。
見た目のまとまりを整える
9. 文字組み｜フォントを選んだ後の、並べ方まで整える
フォントを変えたのに読みにくいなら、改行や余白も見直してみてください。
同じ役割の文字は書体を揃え、見出しと本文には強弱をつけます。単語を途中で切らず、帯の内側にも余白を残す。小さな調整でも読み進めやすさに関わります。
AIへの修正指示例
同じ役割の文字は書体と太さを揃えてください。単語の途中で改行せず、見出しと本文の強弱、文字と帯の内側の余白を整えてください。10. 配色｜好きな色を集める前に、色の役割を決める
色が増えるほど、どこを見ればよいか分からなくなることがあります。
背景、文字、強調の色を分け、最初に見てほしい場所を決めます。明るい地には濃い文字を合わせるなど、読める組み合わせにする。状態の違いは、色だけでなく形や言葉でも示します。
AIへの修正指示例
背景・文字・強調の色を分けてください。強調色は優先して見せたい場所へ絞り、背景との明暗差を確保してください。状態の違いは文字や形でも区別してください。11. レイアウト｜余白の量だけでなく、まとまりを見る
上はぎっしり、下はぽっかり。余白があっても落ち着かない配置があります。
私も図解の制作中に、上部の密度と左下の空白のバランスを直すよう指示しました。関連する情報を近づけ、別のグループとの間を広く取る。空きを装飾で埋める前に、今ある要素の位置を見直します。
AIへの修正指示例
写真と説明を一つのグループにし、左端と間隔を揃えてください。上部だけが詰まらないように上下の密度を整え、無関係な装飾で余白を埋めないでください。12. アイコン｜一つずつではなく、並べて確認する
家、メール、ベル。一つずつ見ると問題がなくても、並べるとちぐはぐに見えることがあります。
同じ役割のアイコンは、線の太さや角の丸み、見た目の大きさを揃えます。意味が分かりにくい形にはラベルを添える。選択中の状態を表すなど、意図がある描き分けまで消す必要はありません。
AIへの修正指示例
同じ役割のアイコンは線の太さ・角の丸み・見た目の大きさを揃えてください。意味が曖昧なものにはラベルを添え、文字との位置と周囲の余白も整えてください。配置だけでなく、ボタン・フォーム・操作中の状態まで具体例で見直すなら、UI設計の記事へ。ここで確認した見た目を、使いやすさへつなげられます（会員限定記事）。
大事なのは、気になる箇所を「どこが、どうなればよいか」まで言葉にすることです。
たとえば「レイアウトが悪い」を、「写真と説明を近づける」「左端を揃える」「上部だけが詰まらないようにする」へ変える。
直した結果がよければ、その判断を次の制作にも残しておく。
この図解を、AIへの依頼や仕上がりの確認に使ってもらえたらうれしいです。
判断基準だけでなく、実際に作るプロンプトや手順も揃えたい方へ。
各節で紹介した関連記事から、今の制作に必要なものを選んでください。
継続的に学びたい方は、メンバーシップの対象記事・プランも確認できます。
AIを使って副業・マネタイズ・業務効率化を
本気で進めたいという方へ
相談会実施中（初回限定価格）
【お問い合わせ先】
法人研修・顧問: https://kawai-business.pages.dev/
セミナー登壇、動画出演: https://lp-seminar.pages.dev/
月次1on1: https://kawai-1on1.pages.dev/
