イラスト画像生成用
手順説明のミニイラスト3点セット
「ご利用の流れ」に並べる、そろった3枚を一度に。
用途・説明
「申し込み → 設定 → 完了」のような手順説明に並べる、同じテイストのミニイラストを3枚まとめて生成するプロンプトです。別々に生成すると線や色がばらつきやすいため、1枚の画像に3つを横並びで描かせ、あとで切り分けて使う前提にしています。
カラーを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[ステップ1]- 例：フォームに入力する
[ステップ2]- 例：設定を調整する
[ステップ3]- 例：完了してチェックマークが出る
プロンプト全文
A set of three matching spot illustrations for a "how it works" section. Step 1: [ステップ1] Step 2: [ステップ2] Step 3: [ステップ3] Style: - Three small flat vector illustrations in exactly the same style, as if drawn by one illustrator in one sitting - Each illustration shows one simple object or action — no people, or the same simplified person in all three - Shared palette: #1463F0, a pale tint of #1463F0, soft peach (#F4C9A8), white, and deep navy (#1B2A44) for small details - Same line weight, same corner roundness, same level of detail in all three - No gradients, no shadows, no texture Composition: - Wide image, aspect ratio 3:1 - Three illustrations side by side, equal size, evenly spaced, each centered in its own invisible square - Clear empty gaps between them so the image can be cut into three - Plain white background Avoid: - Text, numbers, arrows, labels, logos or watermarks - Connecting lines or frames between the illustrations - Different styles or color sets between the three --- 日本語メモ（AIに渡す前に確認） - 上記は英語プロンプトです。画像生成AIは英語の方が意図通りに出力されやすいため英語で記載しています - 番号や矢印は画像に入れず、HTML側で付けるほうがきれいに仕上がります（文字が崩れるのを防げます） - 4ステップ以上のときは、Step の行を足して「aspect ratio 4:1」のように横幅を広げてください
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を描きたい内容に書き換えます。色はこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、画像を生成できるAI（ChatGPT・Geminiなど）にそのまま貼り付けて送信します。
- 3生成された画像を確認し、「人物を1人に」「色数を減らして」のように続けて伝えて調整します。商用利用の可否は、お使いのAIサービスの利用規約をご確認ください。