【ShinのAI活動ログ】AIと泥臭く作り直して見つけた“伝わるデザイン”の最短ルート

こんにちは、Shinです。

このサイトのトップページに並べている「生成AI学習ゲーム」のシリーズ案内バナー。

「まあ、ゲームのバナー4枚と見出し1枚くらい、サクッと終わるでしょ」

……そんな風に軽く考えていた数日前の自分に、今すぐキンキンに冷えた缶ビールでも差し入れて「デザインを甘く見るなよ」と説教してやりたい気分です。

完成するまでに、一体何回AIにダメ出しをしたか、もう数え切れません。

でも、この泥臭い試行錯誤のなかに「デザインの罠」と「抜け出すヒント」がたっぷり詰まっていました。
今回はその全記録を、包み隠さず公開します。

「ゲームやアプリのバナーを作りたい」「見やすいカードUIを並べたい」と思っている方が、私と同じ遠回りをしなくて済むように。失敗からブレイクスルーまでの道のりを、順番にどうぞ！

失敗①：色で分けたら、ただの「散らかった部屋」になった

最初はとても単純な発想でした。「ゲームごとに色を変えれば、見分けがついて楽しい画面になるはず！」と。

意気揚々と、茶色、緑、クリーム、紫……と色分けして並べてみた結果。
・・・見事なまでに、ちぐはぐ。
統一感なんてものは微塵もなく、ただ視覚的にうるさい「散らかった状態」になってしまったのです。

「それなら逆に！」と、今度は全部を真っ黒のカードに統一してみました。
すると今度は、お通夜のように落ち着きすぎてしまい、4枚が全部同じに見える始末。
どれがどのゲームなのか、ぱっと見でまったく伝わりません。

💡 学び①：色で差をつける前に、まずは「地（ベース）」を揃える。

バラバラだとうるさく、揃えすぎると埋もれる。
この“振り子の真ん中”を探り当てるのが、デザインという作業のほぼ全てでした。

失敗②：控えめな「ワンポイント」は、誰の目にも留まらない

極端な失敗を経て、ひとつのシンプルな方針にたどり着きました。
「地（ベース）は揃えて、違いは“要素”で出す」というルールです。

当初はアイコンの背景部分にだけゲームごとのテーマ素材（○×ダンジョンは赤レンガ、HALLUはサイバー回路、ダイスはチェッカー盤、PROMPT ALCHEMYは魔法陣）を敷いてみました。

これだよな、足りない部分は・・・。
アイコンの周りだけがテーマ色になっていても、控えめすぎてユーザーには伝わらないのです。

💡 学び②：小さな面積の差し色は、自分が思っている以上に伝わらない。

「ここがこのゲームの個性だ！」と一目で分からせたいなら、もっと大胆に振り切る勇気が必要です。

転機：黒を捨てて、模様を「全面」に広げた瞬間

ずっと突破口が見えずにいたとき、ふとこんなアイデアが浮かびました。
「いっそ、無難な黒いベースをなくしてみたら？」

アイコンの周りにだけ置いていた赤レンガやサイバー回路の模様を、バナー全体にガツンと広げてみたのです。
黒い背景という安全地帯を捨てて、カードそのものを「素材」として扱う。

これが、見事にハマりました。

赤レンガのバナー、回路が走るバナー、盤目のバナー、魔法陣のバナー。
全体の色を一段明るくしつつ、文字を乗せる左側だけは少しトーンを落として読みやすさをキープする。
あんなに地味で堅苦しかった画面が、急にワクワクする「遊び場」の顔に生まれ変わった瞬間でした。

💡 学び③：「テクスチャ（素材感）」で個性を出すと一気に画面が生きる。

懸念される文字の読みやすさは、黒ベタで逃げるのではなく「テーマ色の濃いめ＋ドロップシャドウ」で十分に確保できます。

見出しバナーは、あえて“仲間外れ”にする

個別のゲームバナーが良い感じになってきたところで、次は「見出し」の案内バナーです。
ここは、ゲーム群とはハッキリ区別させる必要があります。

そこで暗い色調をやめ、パッと目を引く薄いマリンブルーを採用。
さらにバナーの幅も少し広げて、「これは見出し（親）ですよ」と視覚的に伝わるようにしました。

💡 学び④：親（見出し）と子（中身）は、色も幅も変えてハッキリと「主従関係」を

これだけで、ユーザーが迷わずにスッと読めるレイアウトになります。

ついでに案内文のトーンも変更。「上から順番に遊んでね！」という押し付けがましいものはやめて、「おすすめはあるけど、好きに遊んでね」というスタンスに。もちろん、気軽に1本だけ遊んでくれるのも大歓迎です。

最後の魔法は「ほんの少しの動き」と「地味な詰め」

さあ、いよいよ総仕上げ。ここでバナーのアイコンに「動き」を加えました。

魔法陣はくるくると回り、城には不気味なオーラが明滅。的にはダーツの衝撃波が走り、サイコロは左右に揺れる。
ほんの数秒の短いループアニメーション。
ちょっとしたスパイスですが、「おっ、ちょっと触ってみたいな」と思っていただけたら嬉しいです。

💡 学び⑤：ユーザーの“わくわく”は、最後の小さな動きに宿る。

そしてその裏では、リンク切れの修正や、タイトルが変な位置で改行されないようにする微調整など、ひたすら地味な作業も繰り返しました。
派手な見た目も大事ですが、こういう細部のこだわりのほうが、実は「触る人の心地よさ」を大きく左右するんです。

AIとの協業のコツ：自分は「ディレクター」に徹する

今回、デザインの試作と修正の大部分はAIに頼りました。

私がやったのは、出てきたデザインを見て「ここがちぐはぐ」「これじゃ似すぎ」「地味！」「黒はやめよう」と判定し、ひたすら方向性を軌道修正することだけ。

決める → 出してもらう → 判定する → また切る。

このラリーを何十回と繰り返しました。AIはどれだけダメ出しをしても、文句一つ言わずに何度でも作り直してくれます。だからこそ、こちらは遠慮なく「まだまだ！」と言えるのです。

💡 学び⑥：AIと作るときは、自分は「ディレクター（判定者）」に徹する。

役割分担がハッキリしているほど、泥臭い詰めの作業が圧倒的なスピードで回ります。

まとめ：これからバナーを作るあなたへ

少し長くなりましたが、今回の激闘から得た教訓をまとめておきます。

色分けより先に「地を揃える」（シリーズ感はベースの統一から）
差し色は大胆に（小さなワンポイントでは伝わらない）
暗い背景に逃げない（テクスチャで個性を出し、文字は濃色＋影で読ませる）
見出しは中身と区別する（色も幅も変えて主従をつける）
最後は「動き」と「地味な詰め」（ここで実際の体験が決まる）
AIとは役割分担（自分は判定者に徹し、遠慮なくリテイクする）

おわりに

何度もダメ出しを重ねて完成したバナーたちは、現在トップページで元気に動いています。
泥臭く向き合った分、すっかり愛着のある可愛いUIになりました。

この記事が、あなたのバナー制作やUIデザインの「ちょっとした近道」になれば、こんなに嬉しいことはありません。

そして、もしよかったら──上から順番でも、気になったものからでも構いません──ぜひ、ゲームのほうも遊んでみてくださいね。

さて、これでまた一つ、AIと一緒に作り上げた大切な記録が増えました！