SeaArtでWebデザイン用画像を生成する方法

写真風のメインビジュアル、サービス紹介用イラスト、3Dアイコン、線画素材、ブログのアイキャッチなど、Web制作で必要になるさまざまな画像を作成できます。

ただし、モデルやLoRAによって得意な表現、推奨設定、商用利用条件が異なります。
この記事では、SeaArtをWebデザインに利用する際に知っておきたい基本用語、設定方法、プロンプトの作り方、商用利用時の注意点を紹介します。

SeaArtで作成しやすいWeb用画像

SeaArtは、次のようなWeb素材の作成に向いています。

  • Webサイトのメインビジュアル
  • ブログや新着記事のアイキャッチ
  • サービス紹介用のイラスト
  • 3Dアイコンや装飾パーツ
  • 人物やオフィスのイメージ写真
  • 背景画像やテクスチャ
  • 線画や水彩風の装飾素材
  • ラフ画像を元にしたデザイン案
  • バナー制作前のビジュアル案

最初から完成画像を1枚だけ作ろうとするより、複数案を生成し、構図や雰囲気を確認しながら修正していく使い方が適しています。

画像生成で使う「Checkpoint」と「LoRA」の違い

Checkpointとは

Checkpointは、画像全体の基本的な画風や表現を決めるベースモデルです。
例えると、次のような「制作担当者」を選ぶイメージです。

  • 写真撮影が得意なカメラマン
  • フラットイラストが得意なイラストレーター
  • アニメ表現が得意な作画担当
  • リアルな商品画像が得意なCG制作者

同じプロンプトを入力しても、Checkpointを変更すると、人物の描き方、質感、色、背景、構図などが大きく変わります。

SeaArtでは、Checkpointを選択した後、プロンプトや画像サイズなどの設定を入力して画像を生成します。

LoRAとは

LoRAは、Checkpointに特定の特徴を追加する補助モデルです。
主に次のような用途があります。

  • 特定のイラストタッチを追加する
  • 服装や髪型を固定する
  • 線画や水彩などの画風を追加する
  • 3Dクレイ風の質感を追加する
  • キャラクターや人物の特徴を近づける
  • 特定の構図やポーズを再現しやすくする

Checkpointが「基本の画風」、LoRAが「追加する特徴」と考えると分かりやすくなります。
LoRAによっては、効果を出すための「トリガーワード」が指定されています。モデル詳細ページに記載されている場合は、プロンプトにも入力します。

また、SD1.5用LoRAとSDXL用LoRAなど、ベースモデルが異なるLoRAは組み合わせられないことがあります。使用前にCheckpointとの互換性を確認してください。

モデル名だけで選ばず、モデル詳細を確認する

SeaArtには、FLUX、Stable Diffusion 3/3.5、SDXLなど、さまざまなベースモデルと多数のコミュニティモデルがあります。
モデルは追加や更新が頻繁に行われるため、特定のモデル名だけを覚えるのではなく、次の項目を確認して選びます。

モデル選択時の確認項目

  1. 生成例が目的に合っているか
  2. ベースモデルが何か
  3. 推奨画像サイズ
  4. 推奨Steps、CFG、Sampler
  5. LoRAとの互換性
  6. 商用利用条件
  7. クレジット表記の要否
  8. 生成画像の利用制限

モデル名が同じでも、バージョンによって設定や利用条件が異なる場合があります。使用時点のモデル詳細ページを確認してください。

写真・リアル系

企業サイトの人物写真、オフィス風景、住宅、インテリア、商品イメージなどに使用します。
写真風の画像を生成する場合は、モデルの作例を確認し、肌、手、背景、照明などが自然に表現されているモデルを選びます。
Webサイト内の見出しやキャッチコピーは画像に直接生成せず、HTMLテキストとして配置する方法を推奨します。

イラスト系

サービス紹介、採用サイト、ITサービス、教育系サイトなどに使用します。
検索時には、次のようなキーワードが利用できます。

flat illustration
flat vector
minimal illustration
editorial illustration
corporate illustration
UI UX illustration

3Dアイコン系

サービスの特徴、料金プラン、機能説明、バナーのアクセントなどに使用します。

3D icon
clay style
claymation
toy 3D
isometric icon
soft plastic

線画・ナチュラル系

美容、カフェ、住宅、インテリア、ブライダル、オーガニック系サイトなどに使用します。

minimalist line art
continuous line drawing
botanical line art
watercolor
organic illustration

おすすめのCheckpoint(チェックポイント)-基本モデル

  1. 写真・実写系(メインビジュアル・アイキャッチ用)
    実在する人物、自然なオフィス、美しい風景写真を生成したいときの鉄板モデルです。
    Realistic Vision
    特徴: 写真系モデルの絶対的な王者です。人物の肌の質感、服のしわ、背景の自然なボケ感がズバ抜けており、本物のカメラで撮影したような画像になります [SeaArt]。
    用途: コーポレートサイト、ブログのアイキャッチ、ECサイトのイメージカット。
    CyberRealistic
    特徴: アジア系の人物や、現代的なITオフィス、都会の街並みなどの描写が非常に得意です。広告バナーに使いやすい「清潔感のある綺麗な写真」が作れます。
  2. イラスト・現代デザイン系(Web用イラスト・図解素材用)
    アニメっぽすぎず、海外の洗練されたWebサイトにあるようなスタイリッシュなイラストを生成するモデルです。
    Z Image Turbo(★万能)
    特徴: 写真から絵本のようなタッチまで、プロンプトの指示次第で何でも万能に描き分けるポテンシャルがあります。
    用途: 先ほどの羊のような「海外風の可愛いカートゥーンイラスト」や「絵本のような優しいタッチ」に最適です。
    Flat style(または Flat-Draw)
    特徴: 影やグラデーションをなくした、今どきのWebサイトで主流の「フラットデザイン(2Dイラスト)」に特化したモデルです。
    用途: サービスの特徴説明図、IT系・スタートアップ系のサイトイラスト。
  3. 3D・アイコン系(パーツ・ボタン・立体素材用)
    Webサイトのアクセントや、資料の図解に使える立体的なオブジェクト素材に強いモデルです。
    Rev Animated
    特徴: 3Dの立体物、ガジェット、ファンタジーな背景を描かせたら右に出るものはいない大人気モデルです。光の反射や質感が非常にリッチに仕上がります。
    用途: 3Dアイコン、スマホやパソコンの立体的なモックアップ素材、近未来的な背景。

まずは万能で綺麗な写真が作れる Realistic Vision と、イラストや3Dが何でも得意な Rev Animated(または Z Image Turbo)の2つをお気に入りに登録しておくだけで、Webデザインで必要な素材の8割はカバーできます。

LoRAを組み合わせてデザインを固定する4ステップ

ステップ1:ベースの「Checkpoint」を選ぶ

画面右側の設定パネル(または画面上部)で、まずは土台となるCheckpointを選びます。
(例)写真・イラスト万能型の Z Image Turbo や、3D素材に強い Rev Animated などをセットします [SeaArt]。

ステップ2:LoRAの選択画面を開く

  1. 画面右側の設定欄にある「LoRA」(または「+LoRAを追加」)という項目をクリックします。
  2. 世界中のクリエイターが作ったLoRAの検索画面(ポップアップ)が開きます。

ステップ3:目的のデザインのLoRAを探して「追加」する

検索窓に、固定したいデザインのキーワード(英語が探しやすいです)を入力します。
線画(ラインアート)に固定したい場合
検索ワード:Line art
おすすめ:Line art style や Minimalist Line Art などのLoRAを選び、「追加(Add)」を押します。
フラットデザイン(2Dイラスト)に固定したい場合
検索ワード:Flat
おすすめ:Flat vector illustration(ベクターイラスト風)などのLoRAを選び、「追加」を押します。
3Dクレイ(粘土風)アイコンに固定したい場合
検索ワード:Clay
おすすめ:Claymation style や 3D Clay icon などのLoRAを選び、「追加」を押します。

ステップ4:「LoRAの効き具合(ウエイト)」を調整する

追加すると、設定パネルに選んだLoRAの名前と「数値のスライダー(通常は 1.0 や 0.8)」が表示されます。この数値を調整することで、デザインの固定度合いをコントロールできます。
デザインをガチガチに固定したいとき:0.8 ~ 1.0 のままにする
少しベースのCheckpointの質感を残したいとき:0.5 ~ 0.7 に下げる
※最初は初期値(0.8前後)のまま試すのがおすすめです。

商用案件ではモデルのライセンスを必ず確認する

SeaArtのモデル一覧に表示されているからといって、すべてのモデルを自由に商用利用できるとは限りません。
モデルによっては、非商用利用のみ、改変禁止、クレジット表記必須、外部サービスでの収益化禁止などの条件が設定されています。
クライアント案件では、使用するCheckpointだけでなく、追加するLoRAのライセンスも個別に確認します。

社内で確認する項目

  • 生成画像の商用利用が許可されている
  • クレジット表記が不要、または対応可能
  • Webサイトや広告への掲載が許可されている
  • クライアントへの納品が許可されている
  • 使用したLoRAにも商用利用制限がない
  • キャラクターやブランドの権利を侵害していない

モデルページの説明が不明確な場合や、ライセンス条件を判断できない場合は、クライアント案件での使用を控えてください。

Webデザイン向け画像生成の基本手順

1.使用場所と画像サイズを決める

最初に、画像をどこへ配置するかを決めます。

使用場所比率の例
メインビジュアル16:9、3:2
横長バナー実際の掲載サイズに合わせる
アイキャッチ16:9
カード画像4:3
アイコン1:1
SNS用縦画像4:5

生成後に大きくトリミングすると構図が崩れるため、できるだけ掲載比率に近い状態で生成します。

2.Checkpointを選択する

生成したい画像に近い作例が掲載されているモデルを選択します。
モデルページに推奨設定がある場合は、最初にその設定を使用してください。

3.必要に応じてLoRAを追加する

LoRAは、Checkpointだけでは表現しにくいスタイルを追加したい場合に使用します。
社内で試す際の初期値の目安は、次のとおりです。

効果の強さウエイトの目安
弱めに追加する0.4~0.6
標準的に追加する0.6~0.8
強く反映する0.8~1.0

ただし、適切な値はLoRAごとに異なります。モデル詳細ページに推奨値が記載されている場合は、そちらを優先してください。
複数のLoRAを強く重ねると、形が崩れたり、色や質感が不自然になったりすることがあります。最初は1つずつ試します。

4.プロンプトを入力する

Web用画像では、被写体だけでなく、構図、余白、配色、背景、照明なども指定します。

5.複数案を生成する

最初から1案に決めず、複数案を生成します。
良い構図が出たら、Seedや設定を記録し、その画像を基準に細部を修正します。

6.部分修正や背景削除を行う

人物の手、不要な小物、背景、服装などを修正するときは、インペイントやAI消しゴムなどを使用します。
最終的にPhotoshopで調整することを前提に、生成AIでは構図や素材作りを中心に行う方法も有効です。

Web用プロンプトの基本構成

Webデザイン用のプロンプトは、次の順序で作ると指示しやすくなります。

被写体
+
シーン・状況
+
構図・配置
+
画風・質感
+
配色
+
照明
+
背景
+
使用目的に合わせた条件

プロンプトに含めたい指定

英語での指定意味
subject positioned on the right被写体を右側に配置
wide copy space on the left左側に広い文字用余白
clean backgroundすっきりした背景
isolated単体で配置
centered composition中央配置
front view正面
isometric viewアイソメトリック視点
consistent color palette統一した配色
no text, no logo文字・ロゴなし

Webサイトのメインビジュアルでは、キャッチコピーを置く側に余白を指定することが重要です。

プロンプト例1:企業サイトのメインビジュアル

用途:IT企業、Web制作会社、コンサルティング会社などのファーストビュー

A professional Japanese woman working at a desktop computer
in a bright modern office,
natural friendly smile,
subject positioned on the right side,
wide clean copy space on the left,
soft natural daylight,
white and light blue color palette,
clean corporate photography,
realistic skin texture,
horizontal composition,
no text, no logo, no watermark

ポイント

  • 人物を配置する側を指定する
  • 文字を置く側に「copy space」を指定する
  • Webサイトのテーマカラーを入力する
  • 文字やロゴを生成しないようにする

プロンプト例2:フラットイラスト

用途:サービス紹介、業務フロー、ITシステム、採用サイトなど

A web designer working on a website,
modern flat vector illustration,
simple geometric shapes,
clean vector lines,
minimal details,
friendly corporate illustration,
blue, white and light gray color palette,
no gradients,
no shadows,
pure white background,
isolated,
no text, no logo

アイコンセットを量産する場合

被写体だけを変更し、画風、配色、背景、視点などの文章を固定します。

A credit card,
modern flat vector illustration,
simple geometric shapes,
clean vector lines,
blue, white and light gray color palette,
no gradients,
no shadows,
pure white background,
isolated,
no text
A secure padlock,
modern flat vector illustration,
simple geometric shapes,
clean vector lines,
blue, white and light gray color palette,
no gradients,
no shadows,
pure white background,
isolated,
no text

プロンプト例3:3Dクレイ風アイコン

用途:料金プラン、サービスの特徴、アプリ紹介、ECサイトなど

A shopping cart,
cute 3D clay icon,
rounded simple shape,
soft matte clay texture,
front three-quarter view,
soft studio lighting,
pastel blue and white color palette,
minimalist design,
pure white background,
isolated,
centered composition,
no text, no logo,
high resolution

アイコンセットでは、次の項目を固定します。

  • Checkpoint
  • LoRA
  • LoRAのウエイト
  • 視点
  • 照明
  • 配色
  • 背景
  • 画像比率

プロンプト例4:ミニマル線画

用途:美容、住宅、カフェ、ブライダル、オーガニック系サイトなど

A simple house with a small plant,
elegant continuous single line drawing,
smooth beautiful curves,
uniform thin black line,
minimalist line art,
vector style,
no fill,
no shading,
pure white background,
isolated,
generous blank space,
no text

線画で追加したい指定

英語での指定意味
uniform line width線幅を均一にする
continuous line途切れない線
no fill塗りなし
no shading陰影なし
simple silhouette単純な形
generous blank space余白を広くする

ネガティブプロンプト

ネガティブプロンプトには、生成したくない要素を入力します。

写真・人物向け

low quality,
worst quality,
blurry,
deformed hands,
extra fingers,
missing fingers,
extra arms,
duplicate person,
unnatural face,
distorted body,
cropped head,
watermark,
signature,
logo,
text,
letters

アイコン・イラスト向け

photorealistic,
complex background,
excessive details,
heavy shadows,
strong gradients,
multiple objects,
text,
logo,
watermark,
cropped,
asymmetrical composition

モデルによっては、ネガティブプロンプトが効きにくい場合があります。モデルページに推奨設定がある場合は、その内容を優先してください。

Seed、Steps、CFG、Samplerの使い分け

Seed

Seedは、画像生成時の初期状態を決める数値です。

良い画像が生成できたらSeedを固定すると、構図や雰囲気を残しながらプロンプトを微調整しやすくなります。

ただし、モデル、画像サイズ、LoRAなどを変更すると、同じSeedでも結果が大きく変わる場合があります。

Steps

Stepsは、画像を仕上げる処理回数です。

増やせば必ず良くなるわけではありません。従来のStable Diffusion系では15~30程度が使われることがありますが、高速モデルでは4~10程度が推奨される場合もあります。

モデルページに推奨Stepsがある場合は、必ずそちらを使用します。

CFG Scale

CFGは、プロンプトの指示をどの程度強く反映するかを調整する値です。
高くしすぎると、色が強くなりすぎたり、画像が不自然になったりする場合があります。
モデルによって適正値が大きく異なるため、一律に固定せず、モデル詳細ページの推奨値を確認します。

Sampler

Samplerは、ノイズから画像を生成する処理方法です。
Samplerによって、速度、細部、安定性、ランダム性などが変わります。こちらもモデルページの推奨設定を優先します。

SeaArtの画像編集機能の使い分け

画面名称や配置は、SeaArtのアップデートによって変わる場合があります。

AI画像アレンジ・インペイント

画像の一部分だけを消したり、描き直したりする機能です。

使用例

  • 人物の手だけを修正する
  • 不要な小物を削除する
  • 服装だけを変更する
  • 背景の一部を描き直す
  • 商品の周辺だけを修正する

Img2Img

元画像の構図や色をある程度残しながら、別の画像に変換する機能です。

使用例

  • ラフスケッチをイラストにする
  • 写真をフラットイラスト風にする
  • 既存画像を水彩風にする
  • 構図を残して色や質感を変更する

変換強度を高くすると元画像から離れ、低くすると元画像に近い結果になります。

参考画像・リファレンス画像

参考画像の配色、雰囲気、人物の特徴、画風などを新しい画像へ反映させる機能です。

使用例

  • 同じ色調の画像を量産する
  • サイト内イラストの雰囲気を合わせる
  • 人物や商品の特徴を維持する
  • クライアントから提示された方向性に近づける

参考画像をそのまま複製するのではなく、配色や質感、構図の方向性を参考にするために使用します。

ControlNet

ControlNetは、ポーズ、輪郭線、奥行き、構図などを元画像に合わせやすくする機能です。

使用例

  • 人物のポーズを固定する
  • 建物の輪郭を維持する
  • ラフスケッチの構図を保つ
  • 元写真と同じパースで生成する

プロンプト分析

画像から、画風や被写体を説明するプロンプト候補を取得する機能です。
取得した文章をそのまま使用するのではなく、不要な要素を削除し、構図や配色の指定を追加して使用します。

サイト全体のトーンを統一する方法

同じサイト内で複数の画像を生成する場合は、次の設定を固定します。

  • Checkpoint名とバージョン
  • LoRA名とバージョン
  • LoRAウエイト
  • トリガーワード
  • 画像サイズと比率
  • カラーパレット
  • 照明
  • 背景
  • カメラアングル
  • 構図
  • 基本プロンプト
  • ネガティブプロンプト

生成記録を残す

画像とともに、次の情報を保存しておきます。

案件名:
使用場所:
Checkpoint:
Checkpointのバージョン:
LoRA:
LoRAウエイト:
Seed:
画像サイズ:
Steps:
CFG:
Sampler:
プロンプト:
ネガティブプロンプト:
生成日:
商用利用確認:

同じモデル名でも、アップデートによって結果が変わる可能性があるため、バージョンと生成日も記録します。

Web用画像を生成するときの注意点

画像内に重要な文章を生成しない

AI画像内の文字は、誤字や不自然な文字になることがあります。

見出し、説明文、価格、電話番号、ボタン文字などは画像に含めず、HTMLで配置します。

この方法には、次の利点があります。

  • スマートフォンでも読みやすい
  • 文章を後から修正できる
  • 検索エンジンが文章を認識できる
  • アクセシビリティに対応しやすい
  • 画像サイズごとに文字が切れない

ロゴは正式データを使用する

AIに会社ロゴやブランドロゴを生成させず、Illustratorデータやクライアントから支給された正式なロゴを配置します。

写真の正確性を確認する

次の部分は、画像を拡大して確認します。

  • 手や指
  • 目、歯、耳
  • パソコンやスマートフォン
  • 椅子や机の脚
  • 建物の窓や階段
  • 商品の形状
  • 影の方向
  • 鏡やガラスへの映り込み
  • 背景に含まれる文字
  • 人物の人数や手足の数

実在の商品画像には使用しない

生成AIは、実際の商品と異なる形状、色、機能を生成する可能性があります。
ECサイトの商品写真、施工実績、設備紹介など、事実に基づく必要がある画像には、原則として実物写真を使用します。
生成画像は、イメージ写真やコンセプト画像として使用してください。

クライアント案件での利用ルール

SeaArtへアップロードする画像や文章については、利用者が権利を持っているか、適切な許可を得ている必要があります。
本人の同意がない人物画像、使用権限がない画像、第三者の知的財産権や肖像権を侵害する内容はアップロードしないでください。

アップロードしてはいけないもの

  • クライアントから非公開で預かった資料
  • 未公開の商品画像
  • 個人情報が写った画面
  • 顧客名簿や住所
  • 本人の同意がない顔写真
  • 購入前の有料素材
  • 使用許諾を得ていない写真
  • 他社サイトから無断取得した画像

公開設定にも注意する

SeaArt上で公開した画像は、他の利用者から閲覧される可能性があります。
非公開設定を選択できる場合でも、クライアントの機密情報、個人情報、未公開資料などは原則としてアップロードしない方が安全です。

また、他の利用者が公開している作品を取得しても、商用利用や再配布が許可されるとは限りません。元画像、モデル、LoRAの利用条件を個別に確認してください。

生成画像の社内チェックリスト

デザイン

  • 掲載場所に合った画像比率になっている
  • キャッチコピー用の余白がある
  • サイトの配色と合っている
  • 他の画像と画風が統一されている
  • スマートフォン表示でも主要部分が切れない
  • 背景が複雑すぎない

品質

  • 手や指に不自然な部分がない
  • 人物の顔や体に変形がない
  • パソコンや家具の形が自然
  • 不要な文字やロゴが入っていない
  • 影や光の方向が不自然ではない
  • 必要な解像度が確保されている

権利関係

  • Checkpointの商用利用条件を確認した
  • LoRAの商用利用条件を確認した
  • 実在のキャラクターや有名人に似ていない
  • 他社ロゴや商標が含まれていない
  • 参考画像の使用権限がある
  • クライアントの非公開情報を使用していない

Web実装

  • 画像内に重要な文章を含めていない
  • WebPなど適切な形式に変換した
  • 表示サイズに合わせて圧縮した
  • widthとheightを指定した
  • 適切なalt属性を設定した
  • 装飾画像の場合はalt属性を空にした

まとめ

SeaArtをWeb制作で活用する場合は、単にプロンプトを入力するだけでなく、次の点を決めてから生成すると、安定した画像を作りやすくなります。

  1. 画像の使用場所と比率を決める
  2. 目的に合うCheckpointを選ぶ
  3. 必要に応じてLoRAを追加する
  4. 構図、余白、配色、背景をプロンプトで指定する
  5. Seedや各種設定を記録する
  6. 部分修正や背景削除で仕上げる
  7. モデルとLoRAの商用利用条件を確認する
  8. Photoshopなどで最終調整する

モデルの名称や画面構成は、今後も変更される可能性があります。

特定のモデル名や設定値だけを覚えるのではなく、モデル詳細ページの生成例、推奨設定、ベースモデル、ライセンスを確認することが重要です。

参考ページ

タイトルとURLをコピーしました