Web用のAI画像は、見た目だけでなく、どこに文字や商品を置くかまで決めて指示すると選びやすくなります。以下はCanvaで試すための編集上のプロンプト例です。実際に生成・計測した結果ではなく、必ず指定どおりになることやクリック率の改善を保証するものではありません。
共通の型は用途・主題・構図・色・条件
最初に掲載場所と目的を決め、主題、画風、光、配色、位置、余白を具体的に伝えます。「おしゃれな画像」だけでなく、「文字を左に置くので、主題は右側」と説明します。Magic MediaやDream Lab等、利用する機能で使える設定や参照の方法が異なるため、画面にある選択肢も確認します。
文字やボタンは生成画像と分ける
CTAの背景を作るときに、クリックするボタンそのものを絵として生成する必要はありません。見出し、価格、日付、リンクは、後から編集できる文字や実装側の要素として置きます。画像内に文字を入れた場合は誤字と読みやすさを確認します。画像だけでページの機能やレスポンシブ対応が完成するわけではありません。
実商品の再現には生成背景と写真を使い分ける
商品画像の例は背景の案であり、実物の形やロゴをAIへ自由に作らせる指示ではありません。承認済みの商品写真を使い、合成後も色、形、付属品、使用条件が実物と違って見えないか確認します。人物や既存ブランドを参照したい場合も、素材の権利と利用条件を先に確認してください。
修正は一つの条件ずつ伝える
近い候補があれば、使える編集機能で「左の余白を広げる」「彩度を下げる」「主題を小さくする」等、変更箇所を指定します。採用する構図を決めた後に全案を生成し直すと、元の良さが失われる場合もあります。生成回数ではなく採用条件を先に決め、残量と修正内容を見ながら進めます。
採用時にWeb表示と代替テキストを確認する
出力後は必要な寸法と容量へ調整し、文字を重ねた実際のページで確認します。ファイル名と代替テキストは画像の内容や役割に合わせ、順位を上げるための語句を詰め込まないようにします。装飾画像と情報を伝える画像でも扱いは違います。スマートフォンの切り抜き、ぼけ、読み込みを確認してから採用します。
Web制作で試せるプロンプト6例
| 用途 | プロンプト例 | 採用時の確認 |
|---|---|---|
| ヒーロー背景 | 淡い青と白の抽象的な曲線。主題は右側、左側に見出し用の広い余白。横長、文字やロゴなし。 | スマホで切れても主題と余白が残るか |
| サービス紹介 | 明るい作業机を斜め上から見たイラスト。ノートと無地の画面。紺と薄い灰色、人物と文字なし。 | 架空の画面を実機能と誤認させないか |
| 記事の挿絵 | 種から芽が育つ過程を表すシンプルなイラスト。白背景、落ち着いた緑、均一な線、文字なし。 | 記事内容と意味が一致するか |
| CTA背景 | 中央を明るく空けた、薄いベージュの紙の質感。端だけに柔らかな影、文字、ボタン、人物なし。 | 実際のリンクや文字が読みやすいか |
| 商品写真用の背景案 | 無地の明るい台、奥は淡い緑。中央に実商品の写真を置く余白、自然光、商品自体とロゴは描かない。 | 合成後の商品表示が実物に忠実か |
| SNSへの展開 | 落ち着いたオレンジの幾何学模様。主題は中央下、上部に短い見出しの余白、正方形、文字なし。 | 投稿時の切り抜きと見出しの可読性 |
導入前の確認事項
- 掲載場所と文字用の余白を決めたか
- 実商品やロゴを勝手に変形させていないか
- 素材・人物・ブランドの利用条件を確認したか
- 変更する条件を絞ったか
- 実機の切り抜きと読みやすさを確認したか
公式資料・関連記事
関連記事：Canva Dream Labの使い方｜画像生成とWeb活用、Canva AIをWeb制作に使う手順｜素材から公開確認、Canva AI画像の品質を高める｜統一感と採用基準。
運用設計や確認項目の整理は、現在の業務と対象URLを添えて株式会社AOへご相談ください。
公式資料の確認日：2026年11月2日。記入例や手順は編集上の提案で、導入成果を保証するものではありません。
コメント