wordpress作成54-AIで画像生成を活用する｜指示文の作り方から商用利用・Web最適化まで

ただし、生成した画像は、見た目が整っていればそのまま使えるわけではありません。記事との関係、人物や道具の自然さ、商用利用の条件、Webサイトでの表示まで確認する必要があります。

この記事では、中小企業のWeb担当者や事業者に向けて、画像生成の指示文を作る方法から、利用条件の確認、Web掲載に向けた調整までを実務の流れに沿って解説します。

画像生成AIを使う前に、画像の役割を決める

最初に考えたいのは、「どのような画像を作るか」よりも「その画像で何を伝えるか」です。

例えば、ブログのアイキャッチなら、記事のテーマを一目で伝える役割があります。本文中の挿入画像なら、作業の様子や対象物の関係を見せ、説明を理解しやすくする役割があります。

目的が曖昧なまま生成すると、きれいではあっても、記事を読む助けにならない画像になりがちです。

問い合わせ対応の記事であれば、単にパソコンを操作する人物を描くより、問い合わせ内容と回答案を見比べている場面の方が、本文との関係を示しやすくなります。

実物を伝える写真と、イメージ画像を使い分ける

AI画像は、業務のイメージや抽象的な考え方を補う用途で検討できます。一方、販売商品の形状、実店舗の設備、施工実績、スタッフ本人などを紹介する場合は、実際の対象を正確に伝えることが優先です。

生成した店舗を実店舗の写真として掲載したり、架空の施工例を実績として見せたりしないようにしましょう。

操作説明も同様です。実際の設定手順を伝える場合は、対象サービスの画面を使います。AIで作る画面は、機能や作業を説明するための模式的な表現として扱い、実際の操作画面と混同させないことが大切です。

指示文は、描いてほしい内容を具体的に組み立てる

画像生成AIへ渡す指示文は「プロンプト」と呼ばれます。

「おしゃれな画像」「仕事をしている人」といった短い指示だけでは、人物、動作、撮影方向などの多くがAIに委ねられます。意図を伝えるには、画像を構成する要素を分けて整理しましょう。

基本となるのは、何に使う画像か、何を描くか、何をしている場面か、どこから見るかの四つです。そのうえで、画風や配色、入れたくない要素を指定します。

横長4:3。ブログ記事のアイキャッチ用。

小規模企業のオフィスで、Web担当者一名が、
ノートパソコンの画面と机上の資料を見比べている実写風の画像。

人物の真後ろから撮影し、
後頭部とパソコン画面の正面が自然に見える構図。

画面には、写真と図形だけで構成した模式的な記事編集UIを表示する。
文字、数字、ロゴ、透かしは入れない。

人物の顔、胴体、椅子はパソコンへ向ける。
左手は資料に添え、右手はマウスに置く。
腕と手は左右それぞれ一本ずつで、自然な形にする。

柔らかい自然光。青緑とグレーを基調とした落ち着いた雰囲気。

横長4:3。ブログ記事のアイキャッチ用。

小規模企業のオフィスで、Web担当者一名が、
ノートパソコンの画面と机上の資料を見比べている実写風の画像。

人物の真後ろから撮影し、
後頭部とパソコン画面の正面が自然に見える構図。

画面には、写真と図形だけで構成した模式的な記事編集UIを表示する。
文字、数字、ロゴ、透かしは入れない。

人物の顔、胴体、椅子はパソコンへ向ける。
左手は資料に添え、右手はマウスに置く。
腕と手は左右それぞれ一本ずつで、自然な形にする。

柔らかい自然光。青緑とグレーを基調とした落ち着いた雰囲気。

指示文は長さよりも、条件の分かりやすさが重要です。「真上からの撮影」と「人物の表情を正面から見せる」など、両立しにくい条件を重ねないようにします。

人物と画面の向きは、見せたいものに合わせる

パソコンを使う画像では、人物の顔と画面の内容を同時に見せようとして、配置が不自然になることがあります。

画面の内容を見せたいなら、人物の後ろから撮る構図が使えます。表情を中心に見せたいなら、モニターの背面が見える構図にし、画面まで無理に見せない方法があります。

手についても、左右それぞれの動作を指定します。「左手で資料を押さえ、右手でペンを持つ」と役割を決めると、確認すべき形が明確になります。

ただし、指示しても不自然な形が出ることはあります。生成後には、腕や手の数、指、視線、画面の表裏を確認してください。

複数枚では、共通条件と変える条件を分ける

一つの記事に複数の画像を使う場合、画風や配色をそろえると統一感を出せます。一方、すべてを同じ角度のパソコン作業にすると、画像ごとの役割が伝わりにくくなります。

アイキャッチは作業全体、挿入画像は机の俯瞰、道具の接写、比較イラストというように、見せ方を変えましょう。

人物を入れる場合も、別の場面として描くなら、年齢、髪型、服装を具体的に変えます。同一人物を通して説明する企画では、逆に人物の一貫性を優先します。

修正するときは、変える箇所を絞る

生成結果に問題があるとき、「もっと自然にしてください」とだけ伝えると、問題のない部分まで変わることがあります。

修正依頼では、変更する箇所と維持する箇所を分けて伝えます。

右手の指の形だけを自然に修正してください。
右手はマウスに置いた状態にします。

人物の顔、髪型、服装、位置、大きさ、
机、パソコン、背景の配置、画像の比率は維持してください。

右手の指の形だけを自然に修正してください。
右手はマウスに置いた状態にします。

人物の顔、髪型、服装、位置、大きさ、
机、パソコン、背景の配置、画像の比率は維持してください。

修正後は、指定した部分だけでなく画像全体を見比べます。人物の大きさ、商品の形、背景の配置などが変わっていないかも確認しましょう。

正確な文字、ロゴ、数値が必要な場合は、生成画像へ描かせるより、画像編集ソフトやWebページ側で追加する方法が適しています。データに基づくグラフや正確な手順図も、図形や専用ツールで制作すると管理しやすくなります。

商用利用では、利用規約と画像の内容を確認する

無料プランか有料プランかだけではなく、使用した機能やモデル、利用目的に適用される条件を見てください。

商用利用の可否を、使用する機能ごとに確認する

例えばAdobeは、ベータ版表示のないFireflyの機能について、生成物を商用プロジェクトに利用できると案内しています。ただし、使用する機能やモデルに適用される条件は、利用時点で確認する必要があります。helpx.adobe.com

実務では、次の項目を記録しておくと、後から確認しやすくなります。

受託制作では、クライアント側の方針も確認しましょう。AI画像の利用を認めているか、使用可能なサービスが決まっているかを、制作前に共有しておくと進めやすくなります。

商用利用可能でも、第三者の権利確認は別に必要

サービスが商用利用を認めていても、個々の生成画像が第三者の権利を侵害しないと保証されるわけではありません。

文化庁は、AI生成物についても、通常の創作物と同様に、既存作品との類似性や依拠性などに基づいて著作権侵害が判断されると説明しています。www.bunka.go.jp

既存のキャラクター、作品、ロゴなどに似た表現がないか確認しましょう。実在人物や取引先の写真を参照画像として使う場合も、入力や公開に必要な許可の範囲を確認します。

判断に迷う画像は、そのまま公開せず、別の表現へ変更するか、権利関係を確認してから使用します。

Web掲載前に、サイズ・形式・容量を整える

生成画像の原本と、Webサイトに掲載する画像は分けて管理しましょう。大きな原本を保管し、掲載用には表示に合ったサイズで書き出します。

4:3の比率と、ピクセル数は別に考える

「4:3」は画像の形を示す比率です。1,200×900ピクセルも、1,600×1,200ピクセルも、同じ4:3になります。

必要なピクセル数は、ページ内での表示幅や端末の画面密度によって変わります。小さく表示する画像に過度に大きなファイルを使わず、実際の掲載サイズでぼやけないかを確認しましょう。

また、元画像が4:3でも、WordPressのテーマやページビルダー側で別の比率に切り抜かれる場合があります。記事本文だけでなく、記事一覧のサムネイルでも主要な対象物が切れていないか確認します。

ファイル形式は、実際の書き出し結果で選ぶ

写真風の画像ならJPEG、WebP、AVIFなどを候補にし、画質と容量を比較します。背景透過が必要な場合は、PNGや透過対応のWebPなどを検討します。

Google検索は、JPEG、PNG、WebP、AVIFなどの画像形式をサポートしています。ただし、CMSやサーバーが対応形式を扱えるかは別に確認が必要です。developers.google.com

拡張子の変更だけでは、画像形式は変換されません。対応するソフトや変換機能で書き出してください。

圧縮後は、細部とページ全体を確認する

圧縮率を上げすぎると、顔、手、商品の輪郭などが不自然に見えることがあります。

容量の数値だけで判断せず、実際の表示サイズと拡大した状態の両方で確認しましょう。ページ内に画像を何枚も使う場合は、一枚ごとの容量に加え、ページ全体の読み込みも確かめます。

読み込み設定とAltを確認する

ページ下部の画像には遅延読み込みを使う方法があります。一方、最初に表示する主要画像まで遅延させると、表示が遅くなる場合があります。web.devでも、画面上部のヒーロー画像は遅延読み込みを避け、画像の寸法を指定する方法が案内されています。web.dev

実務では、制作条件と確認結果を残す

継続的に画像を作るなら、毎回の指示を一から考えるより、共通条件をテンプレートにまとめておくと便利です。

例えば、比率、配色、文字を入れないルール、人物と画面の向きなどを共通項目にし、記事ごとに被写体と動作、構図を変更します。

生成後の確認では、腕や手の数、視線、モニターや紙の表裏、道具の使い方を点検します。見た目に問題がなくても、記事で説明している作業と違っていれば修正が必要です。

画像生成AIをWeb制作で使うときは、まず画像の役割を決め、被写体、動作、構図、制約を具体的に伝えることが大切です。