本文へ移動

03 / ガイド · 合成

XIV Frame合成ガイド:背景削除からPNG素材の配置まで

キャラクターや光、エフェクト画像の背景をブラウザで削除し、端を補正してスクリーンショットに自然に重ねる手順を説明します。

リストに戻る
合成公開2026年8月22日更新

XIV Frameの合成機能は、キャラクターだけでなく、光やパーティクル、装飾、別のスクリーンショットから切り出した素材など、キャンバスに重ねたい画像に使えます。別の画像編集ソフトを開かず、素材の準備から位置合わせまで同じ画面で確認できることが特徴です。

この機能が役立つ場面

  • キャラクターやエフェクト、装飾PNGを写真の上に置きたいとき
  • 背景のある画像から必要な対象だけを残したいとき
  • 元のスクリーンショットを変えずに、合成素材の位置とサイズを試したいとき
  • 背景削除の結果を、そのままキャンバス上で確認したいとき

元から透明なPNGなら背景削除は不要です。合成画像として追加し、サイズと位置だけ調整してください。

1. 元画像を準備する

  1. ブラウザで読み込めるPNG、JPG、WebPを用意します。
  2. 対象と背景の明暗差が大きいほど、自動削除の結果を確認しやすくなります。
  3. 1ファイルは50MB以下です。大きな画像は制限を通過した後、ブラウザ内で編集用に最適化されます。
  4. モバイルでは複雑な画像を1枚ずつ処理すると、ファイルの問題と処理時間の問題を区別しやすくなります。

2. 合成画像を追加する

  1. デスクトップでは上部の写真タブを開き、右側の画像ソースパネルで合成を選びます。モバイルでは写真シートの合成エリアを開きます。
  2. 合成画像を追加を選び、ファイルを指定します。
  3. 元画像背景削除結果のプレビューを見比べます。
  4. キャンバスに見えない場合は、プレビュー、選択状態、透明度、位置を順番に確認します。透明な結果や表示範囲の外に置かれた素材も、失敗したように見えることがあります。

3. 背景削除を実行する

  1. 背景削除を押します。モデルはブラウザ内で動くため、初回は準備に時間がかかる場合があります。
  2. 準備中・処理中は画面を閉じたり更新したりせず、完了を待ちます。
  3. 画像はXIV Frameの画像サーバーへアップロードせず、現在のブラウザで処理します。ただし処理時間は端末のメモリやブラウザ性能に左右されます。
  4. 結果をすぐに削除せず、端の補正で残った部分を確認します。小さな残りは素材を作り直すよりブラシで直す方が速いことがあります。

エラーメッセージ別の確認順

背景削除の失敗は、考えられる原因ごとに案内を分けています。同じファイルを何度も試す前に、表示された種類に合う操作を行ってください。

表示された案内考えられる意味最初にすること
モデルを準備できないモデルファイルの取得または初期化に失敗接続を確認し、ページを再読み込みして再実行
このブラウザでは実行できないWebGPU/WASMの実行環境に対応していない最新版のChromeまたはEdgeで再実行
メモリが不足画像のデコードやモデル実行に必要なメモリ不足小さい画像に替え、モバイルでは1枚ずつ処理
画像を読み込めない・処理できないファイル形式・デコード・キャンバス処理の問題PNG、JPG、WebPで保存し直して再選択
処理に時間がかかりすぎるWorkerが制限時間内に完了しない画面を維持し、画像を小さくして1枚ずつ再試行
問題が発生したより具体的に分類できない一時的な問題再試行を押し、繰り返す場合はブラウザ・形式・手順を報告

エラー表示がなく結果だけが空に見える場合は、結果プレビュー、選択状態、透明度、キャンバス上の位置を先に確認します。

4. 消去と復元ブラシを使う

  1. 消去を選び、対象の周囲に残った背景をプレビュー上でドラッグします。
  2. 対象の一部まで消えたら復元に切り替えます。自動削除前の情報を基準に、必要な部分を戻せます。
  3. ブラシサイズを先に設定します。プレビュー上の円が影響範囲です。髪や武器など細い部分は小さく、広い背景は大きくします。
  4. 複雑な境界は大きなストロークを一度だけ行わず、短い操作を何回かに分けます。
  5. 元に戻すで直前の操作を取り消し、最初からやり直す場合は補正をリセットします。

5. キャンバスに配置する

  1. キャンバス配置で素材をドラッグし、スクリーンショットに自然に重なる位置を探します。
  2. 画像サイズは25%から500%まで調整できます。切り出した対象が小さい場合は、先に大きくしてから位置を合わせます。
  3. 背後の写真を確認したいときは、一時的に透明度を下げます。位置が決まったら最終的な透明度に戻してください。
  4. デスクトップでは選択した素材を矢印キーで1px、Shift+矢印キーで10pxずつ動かせます。
  5. モバイルでは位置の微調整を使います。中央ボタンで1pxと10pxの単位を切り替え、長押しで連続移動できます。
  6. 左右反転は、視線・武器・光の向きが元の写真と合うか確認してから使います。

6. 重なりを自然に仕上げる

素材が浮いて見える場合は、サイズを変える前に位置と透明度を確認します。足元や接触面がある素材には自然な影が役立つ場合があります。光や煙のような素材は、濃い影より透明度を下げる方が自然です。影で輪郭が太く見える場合はオフにします。

よくある症状

症状最初に見る場所次の操作
結果が空に見える結果プレビューと選択状態背景削除の完了後に配置を確認
背景が残るブラシのモードとサイズ小さく分けて消去する
対象の一部が消える自動削除の結果小さなブラシで復元する
処理が長い初回モデル準備またはモバイル画面を維持して1枚ずつ処理
素材が小さい画像サイズ500%の範囲で大きくする
素材を外したい合成の操作エリア合成を削除を選ぶ

保存前に端を拡大して確認し、その後キャンバス全体のバランスに戻ります。デスクトップは保存 PNG、モバイルは保存 → 保存するを使って書き出してください。PNGを優先しますが、5MBを超える不透明な結果は高画質JPEGとして自動保存されます。透明PNGを5MB以下にできない場合は保存されず、案内が表示されます。

次のステップ

あなたのスクリーンショットをもっと美しく

面倒なソフトは不要です。ブラウザ上で今すぐスクリーンショットを加工し、オリジナルの署名を追加しましょう。

XIV Frame を試す

参考

よくあるご質問

ファイル制限、画像が表示されない場合、設定の保存、エディターのよくある質問をまとめています。

FAQをすべて見る

RELATED GUIDES

この記事の作業から続けて使える、別の機能の手順を確認できます。