AIで作ったバナーや資料、Webサイトを見て、「整っているのに、どこか借り物に見える」と感じることがあります。文字の影を消しても、角丸を減らしても、まだ違和感が残る。そんなときは、装飾の量だけでなく、情報の優先順位や写真の選び方まで点検すると、直す場所が見えてきます。
最初に伝える内容を一つ決め、その内容に合う文字・配置・余白を選ぶ。この順番を守ると、見た目だけを整えたデザインから抜け出せます。
出発点は、KAWAIさん（X：@kawai_design）の図解「私の禁止プロンプト24選」です。図解にある24の視点を独自の説明で整理し、写真・図表・文章・Webの操作性など40項目を加えた、合計64項目のチェックリストにしました。元の図解3枚は記事の後半に掲載しています。出典：KAWAIさんの元投稿。
「AIっぽい」は作り手を判定する言葉ではない
ここで扱う「AIっぽいデザイン」は、目的に対して装飾が過剰だったり、内容が違うのに同じ型が繰り返されたりする見た目を指します。影やグラデーションがあるだけで、AI製だと判断できるわけではありません。人が作ったデザインにも同じ問題は起きます。
影で前後関係を示す操作画面、色の変化で数値を示す地図、華やかさが必要なイベントの告知など、効果を使う理由がある場面もあります。チェック項目は一律の禁止令ではなく、その表現が情報理解やブランドの印象に役立っているかを確かめるためのものです。
資料やバナーでは文字と視線の流れを中心に、Webサイトでは操作性と表示のチェックまで使います。一つの制作物に64項目すべてを当てはめる必要はありません。
文字のチェック12項目｜加工する前に読みやすくする
01．文字の縁取りで読ませていないか
太いフチを付けると、小さな文字の内側がつぶれ、情報が密集して見えます。写真の上で読みにくいなら、まず文字を置く位置を変えるか、背景の明るさを整える。文字と背景の差で読ませる方法を先に試します。
02．文字やカードの影が増えすぎていないか
見出しにも本文にも影があると輪郭がぼやけます。情報の区切りは間隔や背景色で作り、影は浮いているメニューなど、前後関係を示す必要がある箇所に限定します。
03．光彩で強調していないか
文字の周囲を発光させると、内容より効果が目に入ります。強調したい一語のサイズや太さを変え、周囲の要素を弱める方が、読む順番を作れます。
04．立体文字が内容と合っているか
押し出しやベベルは文字に厚みを加えるため、説明資料では細部が読みにくくなることがあります。イベントタイトルなどの意図がなければ、平面の文字に戻して文字数と大きさで見せます。
05．文字を縦横に引き伸ばしていないか
枠に収めるための変形は、書体が持つバランスを崩します。横幅が足りないときは、見出しを短くする、意味の区切りで改行する、文字サイズを調整する順に検討します。
06．斜体や回転を理由なく使っていないか
傾いた日本語が続くと、行を追う負担が増えます。勢いや方向を表す意図がなければ水平に配置し、動きは写真の構図や要素の位置で作ります。
07．単語の途中で改行していないか
「デザイ／ン」「申し込／み」のような分断は、読みながら文字をつなぎ直すことになります。名称や短い語は一まとまりにし、長い見出しは句や節の切れ目で分けます。
08．文字を小さくして詰め込んでいないか
注釈が読めなければ、見た目が整っていても情報は届きません。実際に表示される大きさで確認し、入らない説明は短くするか別の場所に分けます。料金条件などを極端に小さくする処理は避けます。
09．書体を変えるたびに印象がぶれていないか
見出しごとに丸ゴシック、明朝、手書き風を切り替えると、同じ会社の資料に見えなくなります。まず本文と見出しの役割を決め、少数の書体と太さで組みます。
10．行間が文章の長さに合っているか
行間が狭い長文は塊に見え、広すぎると段落のつながりが切れます。日本語のWeb本文なら、行の高さを文字サイズの1.6〜1.8倍程度にする案から試し、書体や横幅に合わせて調整すると比較しやすくなります。これは設定の出発点であり、固定の正解ではありません。
11．字間を広げすぎていないか
短い英字見出しの演出を日本語本文まで広げると、語のまとまりが弱くなります。本文は自然な字間を基本にし、価格の数字と単位、括弧、句読点の周辺を個別に点検します。
12．意味の薄い英字を大きく置いていないか
「SOLUTION」「INNOVATION」だけが目立って、日本語の説明が小さいと、何のサービスか分かりません。英字は補助に回し、「何ができるか」を伝える日本語の見出しを優先します。
線・カード・装飾のチェック12項目｜囲む理由を確かめる
13．区切り線が情報より多くなっていないか
見出しの上下、段落の間、カードの中まで線を引くと、読むたびに視線が止まります。間隔だけで分かれる箇所は線を減らし、表の行や関係を示す線など、意味のあるものを残します。
14．すべての要素を枠で囲っていないか
一つのカードの中に見出し枠、本文枠、注釈枠が重なると、どれが同じ情報なのか見失います。最も外側のまとまりを示せれば、内部は配置と余白で整理できます。
15．見出しに飾りの下線を足していないか
毎回違う長さや色の下線を入れると、文字より線の印象が残ります。見出しの区別はサイズや太さで作ります。Webのリンク下線は操作できる場所を示すので、装飾の下線とは分けて考えます。
16．カード上部の色帯に役割があるか
すべてのカードに帯を置いても、分類の手掛かりにはなりません。カテゴリを示すなどの役割がなければ取り除き、タイトルと説明の間隔を整えます。
17．カード左端の色帯が必要か
左の帯を追加する前に、同じ内容を左位置や背景の面でまとめられないか確認します。注意、成功、エラーなど状態を示すために使うなら、色だけに頼らず状態名も表示します。
18．文字の周囲に放射線を置きすぎていないか
「注目」の周りの短い線や集中線が繰り返されると、すべてが同じ強さで主張します。見せたい箇所を大きくし、近くの情報を減らして目立たせる方法を先に選びます。
19．内容と関係のないアイコンがないか
星や電球を付けただけでは、内容は具体的になりません。取り除いても理解が変わらないアイコンは削り、配送、電話、ダウンロードなど意味を補うものを残します。
20．情報を何でも角丸カードにしていないか
比較対象を並べるカードと、順番に読む手順は役割が違います。手順なら番号付きの縦の流れ、仕様比較なら表など、情報同士の関係に合わせて形式を選びます。
21．グラデーションを雰囲気だけで使っていないか
画面全体に色の変化を入れると、写真や文字の背景条件がそろいません。ブランド表現や数値の連続性を示す目的がなければ単色に戻し、必要な場所だけ色を変えます。
22．紙の質感や粒状ノイズが読みやすさを邪魔していないか
文字の背後の粒やかすれは、小さな文字の輪郭と競合します。紙素材を扱う商品など質感を伝える理由がある場合も、説明文の背後は滑らかな面にして読みやすさを保ちます。
23．角丸の大きさがばらばらではないか
同じ役割のカードなのに、一つはほぼ四角、別の一つは丸いと、別種類の情報に見えます。カード、ボタン、ラベルそれぞれの形を決め、同じ役割には同じ形を使います。
24．アイコンの線幅や描き方がそろっているか
線画、塗りつぶし、立体、絵文字を同じ列に混ぜると、一つだけ浮きます。まとまったアイコンセットを選び、線幅や見た目の大きさをそろえます。元の画像サイズが同じでも、見える面積は違います。
配色・余白・構成のチェック12項目｜主役を一つに絞る
25．強調色を増やしすぎていないか
「重要」は赤、「注目」は青、「必見」は紫では、強さの違いが分かりません。本文、見出し、操作、警告など色の役割を決め、同じ役割には同じ色を割り当てます。
26．すべてを太く大きくしていないか
タイトル、説明、注釈が同じ太さだと、入口がなくなります。最初に読ませる要素を一つ選び、残りはサイズや太さを下げて、読む順番を作ります。
27．長文まで中央揃えにしていないか
中央揃えの長文は行ごとに左端が変わるため、次の行を探すことになります。短いキャッチコピーには中央揃えを使えても、説明文は左端をそろえる方が追いやすくなります。
28．余白を飾りで埋めていないか
空いた場所に丸や星を足すと、情報のまとまりが崩れます。余白は関連するものをまとめ、別の情報から離すためにも使えます。要素を足す前に、既存の配置を見直します。
29．背景に文字が溶け込んでいないか
淡いグレーの説明や写真上の白文字は、雰囲気がよくても読めない場合があります。Webでは通常の文字で4.5：1以上、大きな文字で3：1以上というWCAG 2.2の基準を確認します。ロゴなどの例外があり、「大きな文字」は見た目の感覚ではなく基準上の定義で判断します。出典：W3C「Contrast (Minimum)」。
30．内容が違うのに同じ構図を使い回していないか
原因と結果、手順、比較をすべて横3枚にすると、関係が伝わりません。比較は軸をそろえて並べ、手順は進む方向を示し、因果は原因と結果を結びます。統一するのは書体や色であり、関係の表し方まで固定しません。
31．定番の色だけで業種を表していないか
AIサービスだから紫と青、環境の話だから緑、と機械的に選ぶと、他社と区別がつきません。既存のロゴや商品、店舗の色を手掛かりにし、その事業の表現として合っているか確かめます。
32．会社の既存の表現とつながっているか
サイトは落ち着いた紺色なのに、新しいバナーだけ蛍光色では、同じ会社の案内に見えないことがあります。名刺、営業資料、既存サイトと並べて、色や写真、言葉の調子を確認します。
33．余白の間隔に規則があるか
見出しと本文の間が毎回違うと、意図しないまとまりが生まれます。たとえば8、16、24、32のように少数の間隔を基準として、同じ情報の内側は近く、別の情報の間は広くします。数値自体より、関係に沿った使い分けが目的です。
34．同じ列の開始位置がずれていないか
カードの端だけをそろえても、見出しや本文の位置がずれていれば落ち着きません。左端、画像の高さ、ボタンの位置など、同じ役割の要素を一緒に確認します。
35．視線の流れと説明の順番が一致しているか
右上の大きな写真が先に目に入るのに、説明は左下から始まると読む順番が途切れます。最初に見えるもの、理由、具体例、次の行動が自然につながるよう、情報の位置と強さを調整します。
36．横3列にするために情報を無理に分けていないか
本当は二つの特徴しかないのに、三つ目として抽象的な「安心」を足すと内容が薄くなります。項目数に合わせて2列や縦並びを選び、見た目の都合で説明を増やさないようにします。
写真・イラスト・図表のチェック10項目｜実物と意味を残す
37．写真の光や色温度がそろっているか
暖色の店舗写真と青みの強い人物写真が並ぶと、別の場所の素材を集めた印象になります。撮影の明るさや色味をそろえます。ただし商品の実際の色が変わるほどの補正は避けます。
38．肌や素材が不自然に滑らかではないか
肌、木、布、金属をすべて同じ光沢にすると、素材の違いが消えます。実物の質感が商品理解に関わる場合は実写を優先し、補正で細部を消しすぎないようにします。
39．手や道具、背景に矛盾がないか
指の形だけでなく、握っている道具、椅子の脚、窓のつながり、背景の看板まで点検します。技術者の紹介で用途不明の機器を使っている画像は、顔が自然でも仕事内容を誤って伝えます。
40．商品の形や付属品が実物と違っていないか
生成画像に実際にはない端子や部品が描かれると、購入判断を誤らせます。販売する商品は正規の写真と照合し、外観、色、同梱物を勝手に補わせないようにします。
41．ロゴやパッケージの文字が変わっていないか
似た字形でも正式なロゴとは別物です。ロゴは正規のデータを配置し、名称、余白、縦横比を確認します。画像の中に描かれたロゴを、そのまま公式素材として使いません。
42．切り抜きやトリミングで意味が欠けていないか
作業写真なのに道具が切れていたり、商品写真なのに形の特徴が隠れていたりすると、写真の役割がなくなります。PCとスマホそれぞれの表示範囲で、残すべき部分を決めます。
43．イラストのポーズが説明と結び付いているか
会議、配送、問い合わせのどれにも同じ人物が手を振っているだけでは、理解は深まりません。何を表す図なのかを決め、必要な動作や物を描きます。意味を担わない人物は無理に置かなくて構いません。
44．存在しない操作画面を実物のように見せていないか
生成されたダッシュボードは、整っていても実際に使えない機能を含むことがあります。サービス紹介には実際の画面を使い、説明用の模式図ならその旨を明示します。
45．グラフの軸や面積が数値と一致しているか
棒の長さ、円の割合、目盛り、単位、対象期間を元データと照合します。売上が1.2倍なのに棒が2倍の高さになっている図は、見た目が整っていても比較を誤らせます。
46．矢印が何の関係を示すか分かるか
手順、データの流れ、原因と結果を同じ矢印で混ぜると、図を逆に読まれます。向きと接続先をそろえ、必要なら「申請」「通知」など関係を短く添えます。交差する線は配置を変えて減らします。
文章・ボタン・フォームのチェック10項目｜見た目の中身を確かめる
47．見出しだけで何のサービスか分かるか
「未来を変える」だけでは、対象も提供内容も伝わりません。「店舗とECの在庫をまとめて管理」のように、何を扱い、何が変わるかを前に出します。
48．抽象的なほめ言葉が説明を占めていないか
「革新的」「圧倒的」「最先端」を重ねても判断材料は増えません。対応できる作業、使う場面、他の方法との違いを示します。根拠のない効果の数字を足す必要もありません。
49．別の見出しで同じ内容を繰り返していないか
「選ばれる理由」「特徴」「強み」で同じ説明を並べると、長いのに情報が進みません。重複をまとめ、空いた場所には仕様、利用の流れ、条件など別の判断材料を置きます。
50．整列のために条件や注意点を切り捨てていないか
カードの高さをそろえるために、料金の条件や対応範囲を削ると説明が変わります。比較に必要な項目をそろえたうえで、文章を短くするかレイアウトを変えます。
51．実績やレビューが実在する情報か
仮の星評価、導入社数、お客様の声、掲載ロゴを残すと、完成度の高い架空の実績になります。提供された事実だけを掲載し、確認できない内容は見せ方で埋めません。
52．同じ場所で複数の行動を強く求めていないか
「購入」「相談」「資料請求」を同じ大きさと色で並べると、次の行動を選びにくくなります。その場で勧める行動を主ボタンにし、他の選択肢は補助のリンクなどで示します。
53．ボタン名から結果を予測できるか
「詳しくはこちら」だけでは、説明ページなのかPDFなのか分かりません。「料金プランを見る」「資料をダウンロード」のように、押した先の内容や動作を表します。
54．リンクを色だけで区別していないか
本文リンクが周囲と少し色違いなだけでは、操作できる場所を見落とします。下線など形の手掛かりを併用し、エラーや状態も色だけで伝えません。出典：W3C「Use of Color」。
55．フォームの項目名が入力後も分かるか
入力欄の中に薄い文字で「メールアドレス」とだけ置くと、入力した後に項目名が消えます。ラベルは入力欄の外に残し、必須か任意か、入力例が必要かを分けて示します。
56．エラーの場所と直し方が分かるか
赤い枠と「エラー」だけでは修正できません。該当する項目の近くに、何が不足し、どう直せばよいかを表示します。入力済みの内容を消さず、再入力の負担も減らします。
スマホ・表示・納品のチェック8項目｜実際に使える形にする
57．PCの画面をそのまま縮めていないか
横3列を小さくして収めるだけでは、文字も操作も窮屈になります。スマホでは縦に並べ直し、説明と画像の順番も調整します。端末で見るバナーや資料も、拡大しなくても主題が読めるかを確認します。
58．ボタンやアイコンを押しやすいか
小さなアイコンを近接させると、隣の操作を押してしまいます。WCAG 2.2の最小ターゲットサイズには、原則24×24 CSSピクセル以上、または規定に沿った間隔を確保する条件があります。文章内リンクなどの例外もあるため、サイズだけで判断せず、大きさと間隔をセットで確認します。出典：W3C「Target Size (Minimum)」。
59．文字を拡大しても内容が欠けないか
高さを固定した枠は、文字を拡大すると下の行が切れることがあります。Webの縦スクロールの内容では、幅320 CSSピクセル相当でも情報や機能を失わず、縦横両方向へのスクロールを強いられないか点検します。データ表や地図など、二次元の配置が必要な部分には例外があります。出典：W3C「Reflow」。
60．説明文まで画像に焼き付けていないか
長い説明を画像にすると、スマホで文字が小さくなり、検索や読み上げ、修正もしにくくなります。Webでは見出しや本文をテキストとして置き、図の内容も近くに文章で説明します。画像の代替テキストは用途に合わせて付けます。
61．アニメーションが読む邪魔をしていないか
背景も見出しもボタンも動くと、読んでいる場所から注意がそれます。動きは状態変化の説明など用途を絞り、動きを減らす設定でも内容が伝わるようにします。
62．スクロール演出で情報が隠れていないか
表示演出を待たないと料金が見えない、途中で止まると見出しが透明なまま、といった状態は操作を妨げます。演出が動かない条件でも、本文とボタンが読める構成にします。
63．拡大や圧縮で画像が荒れていないか
小さな画像を大きく配置すると、輪郭や文字ににじみが出ます。必要な表示サイズに合う素材を用意し、容量だけでなく細部の見え方を確認します。データが重い場合は、画質をむやみに落とす前に形式や寸法を見直します。
64．素材の利用条件と出典を確認できるか
写真、書体、イラスト、ロゴの出所と利用条件を確認します。生成した素材についても、利用するサービスの条件や第三者の権利との関係を確認します。後で差し替えられるよう、元の素材と編集できるデータを残します。
AIへの修正指示は「禁止」と「代わりの整え方」をセットにする
「もっとおしゃれに」「AIっぽさをなくして」だけでは、装飾を別の装飾に置き換える修正になりがちです。チェックした問題を指定し、どの方法で解決するかまで伝えると、結果を比べられます。
たとえば、法人向けの在庫管理サービスの紹介バナーなら、次のように伝えられます。
最初に「店舗とECの在庫を一元管理」という見出しが読まれる構成にしてください。見出しは水平の文字で大きく、機能の説明は左揃えで短くまとめます。文字のフチ・影・光彩と、役割のない飾りは取り除いてください。既存ロゴの紺色を使い、強調色は問い合わせのボタンに限定します。写真は実際の運用画面を使い、提供した機能名と数値を変えないでください。スマホでは横の要素を縦に並べ、文字を小さくすることで収めないでください。
修正後は、元の案と並べて「最初に何を読むか」「説明が正しく残っているか」「小さな画面で読めるか」を確認します。毎回すべてを作り直すより、文字、余白、写真など一つの観点ずつ変える方が、改善した理由をつかめます。
元の図解で24項目を見比べる
図解作成者：KAWAIさん（@kawai_design）。「AIっぽいデザインにしないために 私の禁止プロンプト24選」の3枚です。図解内のNG例は、避けたい表現を説明するための見本です。この記事で追加した40項目は、元の図解の作者による項目ではありません。
図解3枚を開く：文字／線とカード／色と余白
まとめ
違和感があるデザインを直すときは、まず主役以外の強調を減らし、文字の左端と余白を整えてみてください。それでも借り物に見えるなら、写真、具体的な説明、正式なブランド素材が足りているかを確かめます。
影や角丸を消すこと自体をゴールにせず、「なぜその形にしたのか」を内容から説明できる状態を目指します。Webサイトの見た目と操作性を合わせて見直したい場合は、おこじょデザインシステムのWordPressサイト制作・開発でも、情報の整理から画面設計までご相談いただけます。
コメント