ChatGPTでそれっぽいデザインは出せるようになったのに、「なんとなくAIっぽくてしっくり来ない」「悪くはないけど、どこをどう直せばいいのか説明できない」——そんな悩みを抱えていませんか。
AIの出力はパッと見が整っているぶん、どこが弱いのかが見えづらく、そのまま平均点のデザインを採用してしまいがちです。
本記事のテーマである「AIデザインの言語化」とは、AIが作ったデザインの違和感を自分の言葉で説明できるようにすることです。これができると、同じChatGPTを使っても出てくるものの質が明らかに変わります。
この記事では、デイトラのWebデザイナーが実案件を想定して、違和感の見つけ方・ChatGPTとの壁打ち・提案用ラフへの落とし込みまでを、実際の手順に沿って解説します。
・なぜAI時代に「デザインの言語化力」が差になるのか
・AIが作ったデザインの違和感を7項目で言語化する方法
・言語化した内容をChatGPTに渡して壁打ち分析する手順
・分析をもとにクライアント提案用のラフを作るプロンプト設計
公式LINEでは、デイトラ受講に関する個別のお悩み相談も承っております！
「デイトラは積極的に情報を開示し、ミスマッチをなくす」方針を取っているので、あなたの状況に合わせて、中立の立場から回答いたします。
AIで差がつくのは「デザインの言語化力」がある人
AIでデザインを作ること自体は、もう誰でもできる時代になりました。
だからこそ、これから差がつくのは出てきたものの良し悪しを判断できる「言語化力」があるかどうかです。
最近はChatGPTでデザインを作れるようになり、実際にバナーを作ったり、クライアントワークの叩きに使ったりしている方も増えています。
一方で、こんな悩みもよく聞きます。
- AIでそれっぽいデザインは出るけれど、なんとなくしっくり来ない
- 悪くはないけれど、このまま出すのは不安
- どこをどう直せばいいのか、クライアントに説明できない
これはとても自然な悩みです。AIの出力はパッと見が整って見えるので、余計にどこが弱いのか、どう直せばいいのかが分かりづらいのです。
ここを言葉にできないまま進めると、AIが出した平均点のデザインをそのまま採用することになり、AIを使えるだけの人と差がつきません。
この記事では、よくあるAIツールの紹介はしません。
デザイナーが実務でやっている違和感の見つけ方・ChatGPTとの壁打ち・ローファイ（ラフ）への落とし込み方を、実際に実践しながら見ていきます。
ゴールは1つ、AIが作ったデザインを見て「なんとなく良くない」を自分の言葉で説明できるようになることです。
デザインの「良い・悪い」を感覚で終わらせず、なぜそう感じるのかを具体的な言葉で説明できる力のことです。動画では、この力があるかどうかがAI時代のデザイナーの差になると位置づけています。
今回のお題：インドアゴルフLPのファーストビューとクライアントの要望
今回の題材は、インドアゴルフの個別レッスンのLP（ランディングページ）のファーストビューです。
想定するシチュエーションはこうです。クライアントから、お店で撮った実際の写真と、ChatGPTで作ったファーストビューのラフ案が届き、こう相談されます。
「なんとなくAIっぽくて良くない気がする。でもどこをどう直せばいいのか分からない。なんとかしてほしい」——こうした相談は、これからかなり増えてくると考えられます。
今回ブラッシュアップする範囲
実案件では、価格を載せるか、プランをどう見せるか、LP全体をどうするかといった情報設計も本来は検討します。
ただし今回は情報は同じまま、ファーストビューの「見た目」のブラッシュアップに絞ります。具体的には、写真・配色・余白・書体・申し込みボタン・装飾、そして全体のトーンを見て、第1印象をどう変えるかに集中します。
クライアントからのオーダー
クライアントのオーダーは次のような内容です。
- 現状のホームページが古く、閉鎖的なので、新規の女性客や初心者が気軽に行きたいと思える雰囲気にリニューアルしたい
- 文言は現状のまま。ビジュアル・配色・写真の見せ方・余白・全体の方向性を見直したい
- 明るい・清潔感・通いやすそう・楽しそう・初心者でも安心、が伝わる方向でデザインを提案してほしい
- あくまで文言は変更せず、レイアウト・色・写真の扱い・組みで方向性を出してほしい
これはかなり言語化されたオーダーですが、実際のクライアントのオーダーは正直もっと抽象的なことが多い、という点も押さえておきたいところです。
現状の案を見ると、サービスの説明としては成立しています。何のお店で何ができるのかは最低限分かります。
ただし第1印象としては、画面全体が暗くて硬い印象です。初心者や女性が気軽に行きたいという雰囲気には少し弱く、オーダーの「明るい・清潔・通いやすい」という方向とはズレています。
このズレをいきなり直そうとするのではなく、まずは言語化するところから始めるのがポイントです。
Webページを開いた瞬間に、スクロールせず最初に見える画面領域のことです。LPでは第1印象を決める最重要パートで、ここで「自分向けだ」と感じてもらえるかどうかが離脱率を大きく左右します。
ステップ1：AIデザインの印象を7項目で言語化する
この手順では、印象を整理するための「言語化シート」を使います。動画では、視聴者向けに「デザイン違和感言語化トレーニングシート」（ブラウザで開ける軽量なHTMLアプリ）を配布しています。手元で同じように再現したい方は、先にシートを受け取っておくとスムーズです。
入手方法は動画概要欄の公式LINEに登録し、画面に表示されるキーワードを送るだけです（受け取り手順は記事末で詳しく解説します）。
今回進めるステップは、大きく次の3つです。
- 見た瞬間の印象を言葉にしてみる
- その違和感をChatGPTで分析し、ズレや不足を整理する
- 分析結果をもとに、クライアント提案用のファーストビューのラフを3パターン作る
ここで最大のポイントは、いきなり画像を作らないことです。
AIに「いい感じにして」と画像生成を投げる前に、自分が何にしっくり来ていないのかをしっかり言葉にします。その言葉をChatGPTに渡して分析してもらい、大きなズレがなければ、初めてラフの生成に進みます。この順番で進めると、AIの出力自体がかなり安定します。
見た瞬間の印象を7つの視点で言語化する
まずは現状のデザインを見て、次の7項目を1つずつ言語化していきます。
- 第1印象：画面全体を見たときの印象
- 誰向けに見えるか：ターゲットの見え方
- 入りやすさ（ハードル）：気軽に入れそうか
- 安心感：不安なく利用できそうか
- 解放感と清潔感：明るく開けて見えるか
- 写真から伝わる体験：どんな体験ができそうか
- 要望とのずれ：クライアントの狙いとの差
実際に言語化すると、次のようになります。
- 第1印象：整ってはいるが、全体的に暗く硬い
- 誰向けか：確実に男性向けに見える。本格的で厳しい印象にも映りかねない。男性向けなら悪くないが、クライアントが求める「初心者・女性が気軽に」とはズレている
- 入りやすさ：どうしてもハードルが高そうに感じる
- 安心感：マンツーマンで写真を見ながら教えてくれている点は伝わるが、「格式高そう」で「楽しそう」という感じは伝わりづらく、少し入りづらい
- 解放感と清潔感：左側は多少明るいものの、画面全体が黒っぽく暗い。シミュレーションゴルフという性質はあるが、写真の見せ方でもう少し改善できそう
- 写真から伝わる体験：レッスンの内容は分かるが、「楽しく学べそう」「自分でも通えそう」というベネフィットの感覚は弱い
- 要望とのずれ：「明るい・清潔感・通いやすい」を狙うなら、今のデザインはゴールの方向性が完全にズレている
この段階では、まだデザインは出しません。まず違和感を言葉にする。この工程を飛ばさないことがすごく大事です。
商品やサービスを利用することで、ユーザーが得られる価値や良い変化のことです。デザインでは「レッスンの内容（機能）」だけでなく「楽しく通えて上達できそう（ベネフィット）」が伝わるかどうかが、行ってみたい気持ちにつながります。
ステップ2：違和感をChatGPTで分析してズレを整理する
次に、ステップ1で言語化したものを、実際のデザインと合わせてChatGPTに連携します。
目的はここでデザインをすぐ作ることではありません。自分が感じた違和感がズレていないか、不足している視点がないかをすり合わせて、自分でちゃんと認識することです。
ChatGPTに渡すプロンプトと3つの資料
実際に投げるプロンプトは、次のようなイメージです。
あなたはWebデザインの改善分析を行うデザイナーです。
添付した3つの資料を読み取り、現状のデザイン・クライアントのオーダー・
言語化シートの内容をもとに、現状のデザインに対する分析をしてください。添付する3つの資料は次の通りです。クライアントのオーダーも言語化シートも、そのまま画像として渡して問題ありません。
- 現状のデザイン（これが一番大事）
- クライアントのオーダー（画像でOK）
- 言語化シートの内容（画像でOK）
プロンプトをコピーしてChatGPTに貼り付け、この3つを添付して分析してもらいます。
AIのレビューと自分の見立てをすり合わせる
AIを鵜呑みにするのは良くありませんが、自分のイメージとAIから見たレビューがズレていないかをすり合わせることが大事です。
返ってきた分析の要点は、次のような内容でした。
- 結論として、言語化シートの見立てはかなり妥当。現状のデザインとクライアントのオーダーを照らすと、方向性はおおよそ合っている
- 技術指導・本格レッスン・男性向け・少しストイック、という印象がやはり強い
- 不足している点として、人物の表情や関係性が挙がった。現状は生徒と講師の距離感が硬く、講師の手ぶりも「説明」より「指導」に見えやすい。人の表情は印象を大きく左右する
- 深緑ベースで全体が重く暗い印象が強い
- 改善するなら、ベースを白・オフホワイト、メインを明るめのグリーンにして、全体的に彩度・明度を上げてライトにする方向が良い
結果として、自分がイメージした方向性とAIの分析に大きなズレはないと確認できました。このズレのなさを踏まえた上で、次のラフ生成に進みます。
自分の考えを相手に投げて、返ってくる反応をもとに考えを整理していくことです。ここではChatGPTを壁打ち相手にして、自分の違和感が独りよがりになっていないか、見落としがないかを確認しています。
ステップ3：分析をもとに提案用ラフを3パターン作成する
分析にズレがないと確認できたら、いよいよ画像出力用のプロンプトを投げます。
このプロンプトには、画像を出力させるための細かい要件を書きます。サイズを指定する、別々の画像として出力する、全体（LP全部）を作らない、といった条件を細かく書くほど精度が上がります。
プロンプトは「何を作るか」より「何をやらせないか」
プロンプトで大事なのは、何を作るかではなく、何をやらせないかです。
今回はクライアントから「文言を変えないでほしい」という要件がありました。ChatGPTは、指示していても勝手に文言を作ってしまうことがあります。
そのため、「文言を変えない」といった制約はプロンプトの中にしっかり入れておくほうが、自分の求めるアウトプットにつながりやすくなります。
3パターン生成してFigmaで比較する
プロンプトを投げて生成を進めます。1案だけ出て残り2案が出ないときは、「別案で2案、それぞれ個別のファーストビューのデザイナーとして作成してください」と追加で指示すると、3パターンそろいます。
生成された3パターンをダウンロードし、Figmaに並べて比較します。
全体のレイアウトはそこまで変わりませんが、一番下の案が色が一番軽くライトな印象で、スイングの動きが感じられる構図になっています。構図とバランスの面から、同じ要素の中ではこの案が一番良く、今回の3案の中では最有力としてアフター案に置きました。
比較すると、構図も文言も基本は同じですが、色・空間の抜け感・写真の使い方によって、男性的な重々しさがかなりなくなっているのが分かります。
有力案をベースにさらに展開する
良かったパターンが決まったら、その案をベースにさらに複数のパターンを展開することもできます。
「この案をベースにやってみて」と指示し、まとまって出てきてしまう場合は「1つずつ切り出して」と指示します。
生成した6パターン目までをFigmaに入れて比較すると、今回はグリーンの色味の違いから、一番上か真ん中のどちらかが色のバランス的に印象が良いと判断できました。
ここまでのフローで分かる通り、AIに出力してもらったものをAIに決めてもらうのではなく、方向性はAIに出してもらいつつ、最終的に選ぶのは人間の仕事です。
ブラウザ上で使えるデザインツールです。ここでは、生成した複数のファーストビュー案を並べて配置し、色や構図のバランスを見比べるために使っています。
まとめ：AIに「いい感じにして」と投げる前にやること
最後に、今回の流れを振り返ります。最初にやったのは画像生成ではありませんでした。
- 違和感の言語化：全体的に暗い・硬い・男性向け・本格的に見える。初心者や女性が気軽に行きたい雰囲気では弱い、と言葉にした
- ChatGPTでの分析（壁打ち）：自分の感覚だけで決めず、AIを壁打ち相手にして改善すべきポイントを整理した
- 提案用ラフの作成：分析結果をもとに3パターン、最終的に6パターンのラフを作成。案はすべて残しておくと後から振り返れて良い
ここが一番大事なポイントです。AIにいきなり「いい感じにして」と投げたわけではありません。人間が違和感を言語化し、ChatGPTで分析してズレがないと確認し、改善方針を整理した上で、ラフのデザインに落とし込む——このフローで進めています。
だからこそ、出てきた案を見たときに、どこが良くなったのか・どの案がクライアントの要望に近いのか・どこを次に調整すべきかまで話せるようになります。
今日使ったChatGPTは、クライアントが使ったものと全く同じです。
それでも、デザインを知らない人がいきなり画像を作るのと、デザイナーが違和感を言語化してから使うのとでは、出てくるものの質が明らかに変わります。理由はシンプルで、デザイナーはAIに投げる前に「何がずれているか」をはっきり見ているからです。
AIでデザインを作ること自体はもう誰でもできます。これから差がつくのは、出てきたものの良し悪しを判断できる言語化力があるかどうかです。
AIデザインの言語化に関するよくある質問
Q. AIが作ったデザインは、まず何から見ればいいですか？
いきなり直そうとせず、まず「見た瞬間の印象」を言葉にすることから始めます。動画では、第1印象・誰向けに見えるか・入りやすさ・安心感・解放感と清潔感・写真から伝わる体験・要望とのずれ、の7項目で言語化しています。
Q. 言語化した違和感は、そのまま画像生成に使っていいですか？
すぐに画像生成へ進む前に、言語化した内容と現状デザイン・クライアントのオーダーをChatGPTに渡して分析させ、自分の見立てとズレがないかをすり合わせるのがおすすめです。ズレや不足がないと確認できてから、ラフの生成に進みます。
Q. ChatGPTに画像を作らせるプロンプトのコツはありますか？
「何を作るか」より「何をやらせないか」を明記することです。今回は「文言を変えない」「LP全体を作らない」「別々の画像で出力する」などの制約を細かく書くことで、意図したアウトプットに近づけています。
Q. 最終的にどの案を選ぶかもAIに任せていいですか？
方向性を出すのはAIが得意ですが、最終的にどの案を採用するかは人間が判断する仕事です。動画でも、AIに出力させたものをAIに決めさせるのではなく、人間が構図やバランスを見比べて選んでいます。
Q. デザインの知識がなくても、この手順は再現できますか？
手順自体は再現できますが、言語化の精度はデザインの基礎知識があるほど上がります。動画では、より具体的に言語化できるようにするための「言語化トレーニングシート」も配布しています。
AIデザインの言語化力を伸ばすならデイトラ「Webデザインコース」
本記事で解説した「違和感の言語化」は、独学でも意識すれば始められます。
ただし、「なんとなくAIっぽい」を具体的な改善ポイントまで落とし込む精度を上げるには、デザインの基礎をきちんと学ぶのが一番の近道です。
デイトラの「Webデザインコース」は、言語化することと、実際に手を動かして作ることの両方を重視したオンラインスクールです。
広告費を最小限に抑え、口コミと品質で支持を得てきたからこそ、業界の数分の一という低価格で学べます。
0からきちんとデザインの知識を身につけたい方は、ぜひ一度カリキュラムをチェックしてみてください。
「デザイン違和感言語化トレーニングシート」の受け取り方
本記事の手順を自分の案件で試したい方に向けて、「デザイン違和感言語化トレーニングシート」を配布しています。
ブラウザで開ける軽量なHTMLアプリで、案件名・デザイン別・想定ターゲット・クライアントのオーダー・変更しない条件などを入れてから、第1印象やターゲットとのずれを順番に整理・言語化できます。
選択肢を選びながら理由を書いていくと、「なんかAIっぽい」「なんかいまいち」で止まらずに、具体的な改善ポイントを言葉にしやすくなります。入力した内容はPDFやMarkdownで出力でき、そのままChatGPTに渡して今日のように分析することもできます。
受け取り方は、概要欄の公式LINEに登録し、画面に表示されるキーワードを入力するだけです。
まずは1つ、自分がAIで作ったデザインをこのシートに沿って言語化してみてください。
「自分に合うか不安…」という方は公式LINEへ
「独学とスクール、どちらが自分に合っているか分からない」
「複数のコースのうち、どれを選ぶべきか相談したい」
そんな方は、デイトラ公式LINEに登録してみてください。
自分に合ったコースの診断や、無料の学習動画などの特典もプレゼント中です。
無理な勧誘は一切ありませんので、まずは情報収集として気軽に登録してみてくださいね。
トム（@yuhei_design）
デイトラのWebデザイナー。印刷会社に7年務めた後、2021年に独立。現在はLP制作やUIデザインに従事しながら、デザイン×生成AI活用の実践方法を発信しています。
