デザイン

AI Webデザインのカンプ生成と画像運用ルール|著作権と品質の線引き

この記事の対象: AI生成画像をクライアントワークで使うか迷っている制作者と、制作会社から「AIで作ります」と言われた発注者
読了時間: 約14分

「この素材、AIで作りました」と制作会社から言われたとき、発注者は何を確認すればいいのか。逆に制作側は、どこまでAI生成画像を混ぜてよくて、どこから危ないのか。ツールの使い方の話ではなく、納品物として成立させるための線引きの話です。商用利用の可否、クレジット表記、公開後に差し替えを迫られるリスク。実際にクライアントワークで運用するときに詰まる箇所を、判断の順番ごとに整理します。


AI Webデザインでカンプ生成が普及した理由と、実務で残った課題

AI Webデザインでカンプ生成が普及した理由と、実務で残った課題

提案フェーズでは、すでに前提になっている

Webデザインの提案でAI画像生成が最初に定着したのは、完成イメージそのものではなくカンプの中に置く仮の絵です。ヒーローエリアに何を敷くか決まっていない段階で、ストックフォトを探し回る時間が丸ごと消えます。「白い壁の前で打ち合わせしている俯瞰カット、余白は右側」といった要求は、素材サイトの検索窓では当たりにくいのに、生成では意図に近いものが出てくる。

この差が効くのは、初回提案までの日数が短い案件です。3案出すとして、それぞれトーンを変えた背景を用意する工程が、素材探しから「生成して選別する」に置き換わります。

ただし、ここで生まれた誤解があります。「カンプに置けた=納品で使える」ではないという点です。カンプは社内とクライアントの間でしか流通しませんが、公開されたサイトの画像は不特定多数の目に触れ、商用利用の証跡を求められる立場になります。この2つはまったく別の判断軸で、混同したまま公開まで進んでしまう事故が起きます。

AI Webデザインのカンプ生成が向いている工程

生成を挟む価値が大きいのは、次の工程です。逆にここから外れると、投じた時間に見合いません。

  • ムードボード:方向性を3案並べる段階。実在の素材を探すより、抽象度を保ったまま比較できる
  • ヒーローエリアの下敷き:構図と余白の取り方を検証したいだけで、絵そのものは仮でよい段階
  • 図解・インフォグラフィックのベース:質感やパターンを作り、上に情報を組む
  • レイアウト検証用のダミー:文字量と画像量のバランスを見る段階

一方、決定稿に近づくほど生成の出番は減ります。クライアントの実物が入る場所(商品・人・店舗)は、最終的に撮影素材へ置き換わるからです。カンプ生成は「決めるための道具」であって、「納品物を作る道具」ではないという位置づけを、社内で先に共有しておくと判断がぶれません。

現場で実際に詰まるのは、品質ではなく「説明できるか」

生成画像の品質そのものは、以前ほど争点になりにくくなりました。詰まるのは決まって次の3つです。

  • クライアントの法務・広報から「これは何を使って作ったのか」と聞かれて答えられない
  • 数か月後にサービス側の規約が変わり、当時の生成物の扱いが不明瞭になる
  • 担当者が代わったあと、どの画像がAI生成か誰も分からなくなる

3つとも、絵の出来とは無関係です。管理の問題として起きます。 だから対策も、生成のプロンプトを磨くことではなく、記録を残す運用設計になります。

AI生成画像を使うかどうかの判断順序
用途を分ける社外公開か、カンプ内かで基準が変わる
規約を確認商用利用可・出力物の権利・再配布条件
被写体を判定人物・ロゴ・実在物が写り込んでいないか
記録を残すツール名・生成日・プロンプトを納品資料に

この4段のうち、抜けやすいのは1段目と4段目です。規約と被写体は気にする人が多い一方、用途の切り分けと記録は「後でやる」になりがちで、後でやると必ず思い出せなくなります。


著作権と商用利用の判断基準|制作会社が確認している4項目

著作権と商用利用の判断基準|制作会社が確認している4項目

確認するのは「学習データ」ではなく「出力物の扱い」

AI画像の著作権を巡る議論は学習データの是非に寄りがちですが、制作会社が納品前に確認するのはもっと手前です。使っているサービスの利用規約に、次の4項目がどう書かれているかを見ます。

確認項目 見るポイント 引っかかった場合
商用利用の可否 無料プランだけ非商用、という区分があるか 有料プランに切り替えるまで納品しない
出力物の権利帰属 生成物の権利がユーザー側にあるか、サービス側の許諾か 許諾型なら再利用範囲を読み込む
クレジット表記義務 表記が必須か、任意か 必須ならサイトのどこに置くか設計に含める
再配布・二次利用 クライアントへの譲渡が認められるか 譲渡不可なら制作会社名義のままになり不適

4項目目が一番見落とされます。制作会社が生成した画像を、クライアントのサイトで使い、さらにクライアントが自社のパンフレットに転用する。この流れは日常的に起きるのに、規約上「アカウント保有者の利用に限る」と読める場合があります。成果物の権利がクライアントに移るのが前提の受託制作では、ここが通らないと契約自体と矛盾します。

なお規約はサービスごとに違い、しかも改定されます。この記事に個別サービスの条文を書いても、読む時点では古くなっている可能性が高い。使う直前に自分で規約ページを開いて確認する、という運用だけが有効です。ここは横着できません。

確認したことを残す形も決めておきます。スクリーンショットを1枚撮り、確認日と担当者名を添えて案件フォルダに置く。それだけで、あとから「いつ時点の規約で判断したか」を言えるようになります。口頭確認は記録として機能しません。

人物・ロゴ・実在物は、生成でも同じ地雷を踏む

AIで作ったから権利がクリア、にはなりません。出力された絵に、実在の人物に酷似した顔、既存ブランドのロゴらしきもの、特徴的な建築物が混ざることがあります。生成物であることは、肖像権や商標の主張を防ぐ理由になりません。

現場での扱いは単純で、人物が主役になる画像はAI生成を使わないという線を引いています。理由は2つ。

  1. 顔は「誰かに似ている」と言われたときに反証できない
  2. 採用サイトや会社紹介で架空の人物を使うのは、内容の誠実さとして問題がある

背景・抽象パターン・質感素材・図解のベース。この範囲なら、被写体由来のリスクはほぼ発生しません。逆にスタッフ写真、施工事例、商品写真は撮影一択です。ここを混ぜようとする案件は、そもそも予算配分の相談から入り直したほうが早い。

判定に迷ったときの基準は1つで、その画像が指しているものが現実に存在するかどうかです。存在するなら撮る。存在しない概念や質感なら生成してよい。人物は「モデルとして実在する誰か」に必ず着地するので、常に前者に入ります。

ライセンスの考え方そのものは、有料・無料のストック素材を選ぶときの判断と地続きです。素材サイト側の商用利用条件を整理した記事があるので、社内ルールを作るときの下敷きに使えます。

クレジット表記は「入れる前提」で設計しておく

表記義務がないサービスでも、フッターやクレジットページに1行入れられる構造にしておくと後が楽です。義務の有無は改定で変わりますし、クライアント側の広報方針で「AI利用を明示したい」と言われることもあります。

設計時に用意しておくのは次の程度で足ります。

  • フッターに小さなテキスト行を1本置ける余白
  • 「クレジット・免責」といった下層ページの器(サイトマップ上は最下層でよい)
  • 画像ごとの出典を記録した管理表(納品資料側)

あとから入れようとすると、フッターのレイアウトを組み直すことになります。先に1行分の余白を持たせておくコストはほぼゼロです。


品質の線引き|納品して問題ないAI画像の条件

品質の線引き|納品して問題ないAI画像の条件

「よく見ると変」は公開後に必ず見つかる

社内チェックを通ったAI画像が、公開後にクライアント側から指摘されるパターンは決まっています。

  • 手指の本数、関節の向き
  • 文字らしき模様(読めない看板、崩れたロゴ風の何か)
  • 背景の建物の窓の並びが途中でずれる
  • 影の方向が光源と合っていない
  • 布や金属の質感が途中で別の素材に変わる

制作側は絵として全体を見るので気づきにくく、クライアントは自社の話として細部を見るので気づきます。チェックは等倍ではなく、実際の表示サイズと拡大の両方でやるのが確実です。ヒーロー画像は特に、大画面では相当拡大されて表示されます。

なかでも厄介なのが文字です。生成画像に含まれる文字らしき模様は、意味をなさない形になっていることが多く、看板・書類・パッケージが写る構図は、それだけで採用しない理由になります。どうしても文字が要るなら、生成画像は文字なしで出し、テキストはHTML側で載せる。これなら多言語化や修正にも耐えます。

採用可否のチェックリスト

納品前に通す確認です。1つでも×があれば差し替えるか、撮影・イラストに切り替えます。

観点 基準
用途 社外公開される場所か、社内資料か
被写体 人物の顔・実在ロゴ・特定できる建物が写っていないか
文字 画像内に文字らしき模様がないか
破綻 表示サイズと200%拡大の両方で不自然さがないか
一貫性 同一サイト内の他画像とトーン・色温度が揃っているか
規約 商用利用可・譲渡可のプランで生成したか
記録 ツール名・生成日・プロンプトが管理表にあるか

このうち「一貫性」は見落とされやすい項目です。1枚ずつは良くても、3枚並べると色温度もライティングもバラバラで、サイト全体が素人臭くなる。これは生成のたびにプロンプトを変えていることが原因なので、サイト1本につきベースとなるプロンプトを固定し、被写体部分だけ差し替える運用にすると揃います。

固定する要素は、光の方向・色温度・レンズの画角・彩度の高さ・質感の粒度あたりです。この5つを1行のテンプレートにして案件フォルダに置き、生成のたびに冒頭へ貼る。カンプ段階で作ったこのテンプレートは、そのまま撮影時のライティング指示にも転用できます。

差し替えリスクを前提に組む

AI生成画像は、後から差し替える可能性が他の素材より高い。理由は規約改定、クライアント側の方針変更、そして「やっぱり実写にしたい」という素朴な要望です。

だから実装側で用意しておくことがあります。

  • 画像はテーマファイルに直書きせず、CMSやテーマ設定から差し替えられる場所に置く
  • 縦横比を固定し、差し替えても崩れないようCSS側で aspect-ratio を効かせる
  • 同じ画像を複数箇所で使い回さない(1箇所直せば済む構造にする)
/* 差し替え前提のヒーロー画像。比率固定+トリミング基準を指定 */
.hero-visual {
  aspect-ratio: 16 / 9;
  width: 100%;
  object-fit: cover;
  object-position: center 40%; /* 差し替え時にここだけ調整すれば済む */
}

@media (max-width: 767px) {
  .hero-visual {
    aspect-ratio: 4 / 5; /* SPは縦長に。画像自体は同じものを使う */
  }
}

aspect-ratio は主要ブラウザの現行版(Chrome / Edge / Firefox / Safari)で利用できます。古い環境への対応が要件に入る案件では、padding-top によるアスペクト比確保に切り替えてください。

なぜこう書くのか:AI生成画像は元の比率がバラバラになりがちで、差し替えのたびにレイアウトが動きます。CSS側で比率を握っておけば、画像の縦横比が変わっても枠は動かず、object-position の微調整だけで収まります。

もう1つ、ファイル名の付け方も差し替えやすさに効きます。hero-01.webp のように用途と連番だけで構成しておくと、中身が実写に変わってもファイル名を変えずに置き換えられます。ai-generated-office.webp のように生成物であることや被写体を名前に入れると、差し替えのたびにパスの修正が発生します。生成物である事実は管理表側に持たせ、ファイル名には持たせません。

CMS側から差し替えられる構造にする話は、テーマのカスタマイズ方針そのものと関わります。Shopifyでアップデートに耐える形に改修する考え方は、素材の差し替えやすさにもそのまま効きます。


発注者側の確認ポイント|「AIで作ります」と言われたら

発注者側の確認ポイント|「AIで作ります」と言われたら

聞くべきは3つだけ

制作会社からAI生成画像の利用を提案されたとき、発注者が確認することは多くありません。

  1. 商用利用と譲渡が可能なプランで生成しているか(口頭でよいので明言してもらう)
  2. どの画像がAI生成か、納品資料に一覧があるか
  3. 将来差し替えるとき、追加費用はどう扱うか

3つ目が意外と重要です。数か月後に「実写に変えたい」となったとき、画像の入れ替えだけで済むのか、レイアウトの再調整が必要なのか。契約時に確認しておくと、後の交渉が短く済みます。

この3つに明確に答えられない相手は、生成を運用として設計していない可能性があります。逆に、聞いた瞬間に管理表の様式が出てくるようなら、そこは信用してよい部分です。判断材料としては十分に機能します。

コストの話は「素材費が浮く」で終わらせない

AI生成で浮くのは素材の購入費と探す時間です。一方で増えるのは、規約確認・選別・チェック・記録の工数です。総額が劇的に下がる話ではありません。

「AIを使うので安くなりますよね」と言われたときに、制作側が説明すべきなのはこの内訳です。素材費は下がる。ディレクションとチェックは減らない。むしろ確認項目が増える分、丁寧にやれば工数は横ばいになります。

費用が動く条件を分けて言うと、話が噛み合いやすくなります。下がりやすいのは、抽象的な背景や質感素材を多用するサイトです。ここは元々ストック素材の購入枠が大きく、生成に置き換えると購入費がまるごと消えます。下がりにくいのは、実物が主役のサイト——採用、店舗、商品、事例。これらは撮影が必須なので、生成を挟んでも撮影費は動きません。見積の比較をするなら、この2種類を混ぜずに分けて出してもらうのが確実です。

制作費の内訳がどう組み立てられているかを発注側が把握しておくと、この種の話が噛み合いやすくなります。

AI生成を使う場合と撮影・ストックの比較

AI生成が向く

  • 背景・抽象パターン・質感
  • 提案段階のカンプ用ビジュアル
  • 図解のベースになる素材
  • 素材サイトに無い構図が欲しいとき

撮影・ストックが要る

  • スタッフ・代表者の写真
  • 自社商品・施工事例
  • 店舗・オフィスの実景
  • 採用サイトの職場カット

左右の境目は「実在するものを写しているか」の一点です。実在物を扱う画像を生成で埋めると、内容の正確さそのものが崩れます。


社内ルールとして運用する形

社内ルールとして運用する形

管理表のフォーマット

納品資料に含める一覧は、最低限これだけあれば足ります。表計算ソフト1シートで済みます。

列 内容
ファイル名 実際に納品したファイル名
使用箇所 トップ ヒーロー、下層Aの背景、など
生成ツール サービス名とプラン種別
生成日 規約改定の前後を判定するために必要
プロンプト 再生成できる程度に残す
判定 商用可・譲渡可を確認した日付と担当者

生成日を残す理由は、規約が改定されたときに「改定前の生成物」として扱えるかを判断するためです。あとから思い出そうとしても無理なので、その場で書きます。

プロンプト列は「再生成できる程度」で十分です。一字一句の再現より、同じトーンをもう一度出せることが目的なので、固定しているベース部分と、その画像で差し替えた部分が分かる形で残します。

誰がチェックするかを決めておく

デザイナー本人のチェックだけでは破綻を見逃します。生成した本人は「そう見えるように」意図を持って見てしまうためです。

  • 生成者以外の1名が、表示サイズと拡大の両方で見る
  • クライアント提出前に、管理表と実ファイルの突き合わせをする
  • 公開後1週間以内に、実際のサイト上でもう一度見る

3つ目は省かれがちですが、実機の画面では想定と違う切り取られ方をしていることがあります。公開直後に見るのは、AI画像に限らず有効な習慣です。

サイト公開後の状態を継続して見るという意味では、計測の仕組みと合わせて運用するのが現実的です。

やらないと決めていること

線を引くというのは、やらないことを決めることでもあります。

  • 人物が主役の画像に生成物を使わない
  • 画像内に文字が入る構図を採用しない
  • クライアントに無断でAI生成を混ぜない(提案時に必ず伝える)
  • 規約を確認していないサービスの出力を納品物に入れない
  • カンプで使った画像を、確認なしにそのまま本番へ持ち込まない

最後の1つが実務では一番危ない。カンプの絵をクライアントが気に入ってしまい、そのまま公開まで行くケースは頻繁に起きます。カンプ段階で「これは仮です」と伝えておくのが、唯一の予防策です。伝え方も決めておくと確実で、カンプのページ内に「本ページの画像はイメージです。実制作では撮影素材に差し替えます」の一文を入れておく。口頭より、資料に残っているほうが効きます。


よくある質問

よくある質問

AI Webデザインのカンプ生成で作った画像を、そのまま本番公開してもいいですか

判断軸が変わるので、公開前にもう一度見直してください。カンプは社内とクライアントの間でしか流通しませんが、公開されたサイトの画像は不特定多数の目に触れ、商用利用と譲渡が可能なプランで生成したかの証跡を求められます。加えて、カンプ用の画像は構図の検証が目的なので、拡大したときの破綻チェックを通していないことがほとんどです。用途・規約・被写体・記録の4点を通してから公開してください。

AI生成画像を商用サイトで使っても法律上問題ありませんか

AI生成物の利用そのものが一律に禁止されているわけではありません。問題になるのは、既存の著作物や実在の人物に類似した出力を公開した場合です。生成物であることは免責の理由になりませんので、被写体に実在物が含まれていないかの確認が必要になります。加えて、使用したサービスの利用規約で商用利用と譲渡が認められているかを、生成の都度確認してください。判断に迷う案件では、法務の確認を挟むのが安全です。

クレジット表記は必ず必要ですか

サービスの規約によります。表記を義務づけているものと、任意としているものがあり、改定で変わることもあります。義務がない場合でも、フッターやクレジットページに1行入れられる構造を設計段階で用意しておくと、後から求められたときにレイアウトを組み直さずに済みます。

どの画像がAI生成かをクライアントに伝える必要はありますか

伝えてください。伝えずに納品して後から発覚すると、画像の差し替え以上に信頼の問題になります。提案時に「この範囲はAI生成を使います」と説明し、納品資料に該当ファイルの一覧を添えるのが現実的な形です。クライアントの広報方針でAI利用の明示を求められる場合もあります。

AIを使えば制作費は安くなりますか

素材の購入費と探す時間は減りますが、規約確認・選別・品質チェック・記録の工数が増えます。総額が大きく下がる性質のものではありません。下がりやすいのは、抽象的な背景や質感素材を多く使うサイトです。逆に、採用・店舗・商品・事例のように実物が主役のサイトは撮影が必須なので、生成を挟んでも撮影費は動きません。

採用サイトにAI生成の人物写真を使ってもいいですか

推奨しません。採用サイトは応募者が働く環境を判断する材料であり、架空の人物や職場が写っていると内容の誠実さが損なわれます。加えて、生成された顔が実在の人物に似ていた場合に反証できません。人物と実景は撮影で用意してください。


まとめ

AI生成画像をクライアントワークで使うかどうかは、「使える/使えない」の二択ではなく、用途と被写体で線を引く問題です。背景・抽象・質感・図解のベースなら実務上ほぼ問題なく回りますし、提案スピードは明確に上がります。一方で人物・実在物・文字入りの構図は、品質の問題ではなく内容の正確さと権利の問題として避けるべき領域です。

そして、絵の出来よりも運用が効きます。規約を生成の都度確認し、どの画像がAI生成かを記録に残し、差し替え前提の実装にしておく。この3つを守っていれば、規約が改定されても担当者が代わっても、後から説明できる状態が保てます。

きれいごとを言えば「AIは補助として使う」で終わりますが、現場で必要なのは補助の範囲を具体的に決めておくことです。上のチェックリストと管理表のフォーマットを、そのまま社内ルールの叩き台にしてください。