AI素材と手描き素材を混ぜても違和感を出さないコツ
遊びをつくる執筆にClaudeを使用しています。
AI画像生成ツールで作ったキャラクターと、自分で描いたUIアイコンを同じ画面に並べたとき、「なんとなく合わない」と感じた経験はないでしょうか。線の太さ、色の彩度、影の付き方——どれか一つがずれるだけで、プレイヤーの目は無意識にそのズレを拾います。 ただし「AI素材と手描き素材を混ぜてはいけない」というルールはありません。プロのゲームスタジオでも、背景だけAIを使い、キャラクターは手描きにするといった分業は珍しくありません。問題は混ぜること自体ではなく、統一すべき要素を統一していないことです。 この記事では、違和感が生まれる原因を分解し、それぞれを合わせるための具体的な判断基準と手順を示します。
なぜ違和感が生まれるのかを分解する
違和感の原因は大きく三つに分けられます。
線の性質の差です。手描き素材は筆圧やタッチが残り、線に強弱があります。AI画像生成ツールが出力するイラスト風の画像は、滑らかで均一なグラデーションを持つことが多く、線というよりも「境界のぼかし」で輪郭を表現します。この二つを並べると、手描きだけが「浮いている」か、あるいはAI素材が「のっぺりして見える」かのどちらかになりがちです。
光源と影の方向の差です。手描きで自分が「左上から光が当たっている」と決めて描いた素材と、AIで生成した際にたまたま「右から光が当たっている」絵を選んでしまうと、同じ画面に置いたとき物理的に矛盾が生じます。背景と手前のキャラクターで太陽の位置が違うシーンは、脳が即座に「おかしい」と判断します。
色域（カラーパレット）の差です。AIツールはプロンプトに「鮮やか」「ファンタジー風」と書けば高彩度の色を生成しますが、手描きで使っているパレットがくすんだ色系統なら、彩度だけで乖離が起きます。HSB（色相・彩度・明度）のうち、彩度と明度の幅を揃えることが特に重要です。
先に「素材の仕様書」を決める
後から合わせようとするのは非効率で、しばしば不可能です。最初に一枚のメモとして「この作品の素材仕様」を決めてから、AI生成も手描きも始めるのが最も確実な方法です。
決めておくべき項目は以下の四点です。
- 輪郭線の有無と太さ：輪郭線あり（何px相当）か、境界は色の差だけで表現するか
- 光源の方向と影のスタイル：ドロップシャドウか落ち影か、アニメ塗りかリアル寄りか
- 彩度と明度の上限・下限：HSBで「彩度60〜80、明度40〜90」のように範囲を決める
- 解像度とドット密度：ピクセルアートなら何px単位か、ベクター風かラスター風か
この仕様書があると、AI生成時のプロンプトに組み込めます。たとえば「black outline, flat shading, saturation around 70%, left-top lighting」のような条件を毎回加えることで、生成結果のばらつきを減らせます。
AI素材を手描きに寄せる加工手順
仕様書を作らずに進めてしまい、すでに素材がバラバラになっている場合は、AI素材側を加工して手描きに寄せるのが現実的です。手描きを大量に描き直すより、AI出力を統一する方が工数が少ないためです。
ステップ1：色調補正で彩度・明度を揃える
PhotoshopやGIMPなど、レイヤー調整機能を持つツールで「色相・彩度」調整レイヤーを重ねます。手描き素材から代表色を数色スポイトで取り、AI素材の主要な色がその範囲に収まるように彩度・明度を動かします。色相（Hue）は原則変えず、彩度（Saturation）と明度（Lightness/Value）だけ操作すると色味を保ちながら統一感が出ます。
ステップ2：輪郭線を追加または削除する
手描きに輪郭線があるなら、AI素材にも同じ太さの輪郭線を追加します。方法は複数あります。Photoshopなら「レイヤースタイル＞境界線」で外側に線を付けられます。Procreateなら選択範囲を外側に広げてから単色で塗りつぶしたレイヤーを下に置く方法がシンプルです。逆に手描き素材の輪郭をなくす方向に合わせる場合は、AI素材への加工なしに手描きのアウトラインを消す方が難しいため、手描き素材を選ぶ段階で輪郭線なしで描くほうが合理的です。
ステップ3：影の方向を統一する
AI出力の影方向が合わない場合、画像の水平反転で解決できることがあります。キャラクターや物体が左右対称でなければ反転すると不自然になることもありますが、アイコンや背景の一部なら有効です。反転で解決できない場合は、AIに再生成する際にプロンプトへ「shadow on right side」「lit from upper left」など光源指定を明示します。
手描き素材をAIに寄せるべき場面
加工の方向は必ずしも「AI→手描き」である必要はありません。作品全体の多くがAI生成で、手描き素材が一部分（UIアイコンや吹き出しなど）という構成なら、手描き側をAI風に調整する方が整合性を取りやすい場合があります。
判断基準はシンプルで、数が多い方に寄せるです。素材の過半数がAI生成なら手描きをAI側に統一し、逆なら逆です。少数側を加工する方が、変更箇所が少なくなります。
手描き素材をAI風に見せるには、フィルタで輪郭を少しぼかし、彩度をやや高めに補正するだけでかなり馴染みます。Photoshopの「スマートシャープ」や「フィールドぼかし」を弱めに適用するだけでも効果があります。
並べてテストする順序と確認ポイント
加工が終わったら、必ず実際のゲーム画面のサイズと背景色で全素材を並べて確認します。素材ファイル単体で見ると気づかなかったズレが、並べると明確になります。
確認するべき点は以下の順番で見ていくと抜け漏れが少なくなります。
- 全素材を同じキャンバスにざっくり並べ、「光源の方向がそろっているか」を確認する
- 隣接する素材同士の彩度の差が極端でないかを確認する（目安は彩度差20以内）
- 輪郭線の有無と太さが全体で統一されているかを確認する
- 実際のゲーム解像度（例：横480px）に縮小した状態で再確認する（縮小すると見え方が変わるため）
縮小確認は特に見落とされがちです。制作中は拡大状態で見ているため、実際のプレイ画面サイズにしたときに輪郭線が潰れたり、細かい手描きのテクスチャが消えてAIの滑らかさとの差が消えたりすることがあります。
次の行動
まず自分の作品の素材仕様書を一枚書いてみてください。輪郭線の有無・光源方向・彩度の範囲の三点だけでも決めると、次にAIで素材を生成するときのプロンプトが具体的になります。素材が出揃ったら全体を一枚のキャンバスに並べて確認する習慣をつけると、個別に見ていたときのズレに気づきやすくなります。作ったゲームはアソバースのZIPまたはHTMLとして投稿し、実際のブラウザ画面で最終確認するのがおすすめです。
