AIデザインをそのまま納品。それ、Webデザイナーの仕事と言える？ 最低限3つの手直し

改善する、ブラッシュアップするって難しいですよね。

私もWebデザイナーになりたての頃は、既存デザインのどこを改善していいかわからず、やみくもに手を動かしていました。
もちろん、先輩デザイナーからダメ出しの嵐でした…！

前回の記事で、AIバナーをCanvaのマジックレイヤーで分解すると、デザインがけっこう崩れる、これじゃ納品は難しい、という話をしました。
👇

今回はその続き。
ChatGPTでバナーをパーツ分解して、Photoshopで組み直していきます。

……なんですが、AIバナーで気になる点が次々目について。

これ、ただ組み直すだけじゃだめだろう、と。
Webデザイナーと名乗るんであれば、この3箇所。
ここだけでも最低限、直さなければ…！

…ということで、パーツ分解の手順などは次回にまわして、今回は「AIバナーで、最低限どこを改善したか」をお話しします。

今回のクライアントワーク（想定）

あなたは制作会社さんから、下記の依頼を受けました。

題材は前回記事と同じ、パーソナルカラー・骨格診断サロンのWeb広告バナーです。
20〜40代の女性がターゲットで、診断予約・公式サイトへの誘導が目的。

そこで、あなたはAIでバナーを作成しました。
それがこちら。
👇

パッと見、おしゃれで素敵なデザインですよね。
カラー配色や写真の雰囲気、全体のトーンもマッチしていて。

パーツ分解して、FigmaかPhotoshopでバナーを組み直せばデータ納品できそうです。

さて。
ここで、ひとつ立ち止まってほしいんです。
なにか気になる点がありませんか？

AIバナーをそのまま編集データにして納品。
それ、Webデザイナーの仕事と言える？

AIバナーをそのまま編集データにして納品する。
それで喜ばれるケースもあるかもしれません。

でも、「Webデザイナーとして仕事をしていきたい」なら、ここが分かれ道です。

AIが作るバナーの完成度は、私の体感で7割。
残りの3割に「プロなら見過ごせない粗」があります。

たとえば、

など。

この3割を調整するのがWebデザイナーのお仕事。
AI画像は「素材」、仕上げるのは「人間」です。

例えるなら…
自分が食べるご飯はレンチンでOK。
でも、お金をいただいてお客さんに出す料理は、厨房で調理して、盛り付けまできれいに仕上げる必要がある。

AIは下ごしらえ。
盛り付けから先が、デザイナーのお仕事です。

ちなみに先ほどのAI画像を見た瞬間、「ここ気持ち悪いな～」という直したい欲に駆られたら、立派なデザイナーマインドをお持ちだと思います！

なぜFigmaじゃなくて、Photoshopを選んだのか

納品形式は「fig・psd等」という指示。
このケースではPhotoshopでの納品を選択します。
Figmaでも組み直せるのに、なぜPhotoshopを選んだのか？

それは、このバナーの「写真」が占める面積が多いからです。
さらに、診断の様子をビジュアルでちょい見せして、興味を引きたいから。

なのに、この写真はなんだかぼんやりしていて「眠い」んです。

Figmaは、パーツを並べて画面を設計するのが得意な、いわば設計ツール。
一方Photoshopは、写真を補正・加工するのが本職です。

使い分けの基準はシンプル。

写真を加工する作業が重要なら、Photoshop。
画面を設計する作業が重要なら、Figma。

こう考えると、デザイン時のツール選びの迷いがすっと消えますよ。

では、手をつけた手直し順に解説しますね。
今回改善したのは、プロとして見過ごせないこの3箇所だけ。

手直し①：ロゴに居場所を作る

AIバナーでは、サロン名が右上に置かれています。
でも背景の写真と重なって、ちょっと窮屈そうだし見づらい。

手直し版では、最上部に細いヘッダー帯を新設して、ブランド表記をそこに収めました。

Webサイトのヘッダーと同じ考え方です。
「この帯はブランド情報のエリア」と決めてあげると、見る人は迷わないし、デザイン全体もきゅっと締まります。

手直し②：下部の渋滞を解消

AIバナーの下部は、キャッチコピー、3つのベネフィット、CTAボタン、さらに一番下にもう1本キャッチコピーの帯。

…ぎゅうぎゅうです！
夕方のスーパーのレジくらい大渋滞！

メッセージを詰め込みすぎると、結局どれも読まれません。

このバナーの目的はただひとつ、「診断メニューを見る」を押してもらうこと。
なので、最下部の帯は上部に移動。
左側のキャッチコピーは思いきって削除。
ベネフィットとボタンだけを残し、ボタンを大きくしました。

ブラッシュアップは「足す」より「引く」作業の方が多いんです。
AIは気を利かせて盛って埋めてくれるぶん、引き算は人間の担当です。

手直し③：写真の"眠さ"を補正する

AIが生成するバナーの写真は、ピントが甘くぼんやり見えがちです。

そこで、Photoshopの調整レイヤーで補正して、被写体に軽くシャープをかけました。

メリハリが出て、写真の眠さが軽減されました！
これが、FigmaではなくPhotoshopを選んだ理由です。

細かいパーツ修正より、大きな変更から

直す順番も大事です。
手をつけた順番はこんな感じ。

文字や色など、細かい修正から始めると、あとからレイアウトを修正したとき、ぜんぶやり直しになることも。

レイアウト変更や情報整理、面積の大きい写真の修正などをまず先に。

その後に細かいパーツを調整していくのがスムーズです。

「変換できる人」と「仕上げられる人」の差

AI画像を編集データにするのは、ツールの操作方法さえ覚えれば、誰でもできます。
Canvaのマジックレイヤーも、そのうち完ぺきな編集データを出力できるようになるかもしれません。

でも、20年以上制作にたずさわる身としては、

という判断力や心遣いこそ、AI時代のWebデザイナーにとって差別化スキルになると思っています。

クライアントへのデータ納品ってどう作ってる？

今回お話ししたのは、AI画像、最低限の手直し改善まで。
次回は現役Webデザイナーがどんな納品用データを作っているのか、お見せいたします。

パーツ分解からPhotoshopでの実作業、プロンプト、納品データ作成のコツまで、プロのやり方を知ることができる実践編です。

と悩んでいる方に向けた内容になっています。

👇Before/After画像＋納品データにするまでの全工程はこちら

まずは今回の「直す順番」を、今後バナーを改善するときに一度試してみてください。

👇AIで作ったデザインの修正やホームページのリニューアルは、AmotDesignでもご相談を承っています。

👇AIデザイン手直し帳