画像を別の画像の上に配置 - オーバーレイ、重ね合わせ、レイヤー。
オンラインで画像をオーバーレイしてロゴを追加したり、フォト オーバーレイを作成したり、写真を重ねたり。この画像オーバーレイ オンラインツールで、画像の上に画像を載せ、リサイズし、不透明度を 調整してダウンロード。アップロード不要、登録不要。
画像を横並びやグリッドで配置したい場合は、JPG結合ツールをお使いください。
Drop your background image here
This image becomes the bottom layer
画像の上に画像を載せる方法。
背景をアップロード
ベース写真をアップロード領域にドラッグします。これが下の レイヤー - 他のすべてが載る画像です。JPG、PNG、WebPすべて 対応。クリップボードからの貼り付けも可能です。
オーバーレイを追加
上に載せる画像をアップロード - ロゴ、ステッカー、2枚目の 写真、または画像に画像を追加したい任意のグラフィック。 透明背景のPNGは、表示コンテンツだけがベース上に描画される ため、最もきれいな結果になります。
位置を決めてダウンロード
プレビューをドラッグしてオーバーレイを動かします。スライダー でスケール(5-300%)と不透明度(5-100%)を調整。中央や右下などの プリセット位置で素早く配置。PNGまたはJPGでダウンロード。
写真をオーバーレイし、画像をレイヤーする場面。
商品写真へのロゴ配置
ECセラーや写真家は、マーケットプレイスにアップロードする前に 商品ショットへブランドロゴを追加します。商品写真をベースとして アップロードし、ロゴの透明PNGをオーバーレイします。画像幅の 約15-20%にスケールし、角に配置。控えめにしたい場合は不透明度 を70-80%、完全に見せたい場合は100%に設定。これはPhotoshopの ファイル > 埋め込み配置 > 変形 > 書き出しという複数ステップの ワークフローを置き換えます。
フォトギャラリーへの透かし
写真家はクライアントにプレビュー画像を共有しますが、無断使用を 防ぐ必要があります。各写真の中央に半透明のテキストロゴや署名を 25-40%の不透明度でオーバーレイします。画像は選別用に閲覧可能 ですが、購入なしの印刷やダウンロードには使えません。テキスト ベースの透かしには、透かしツールの方がテキストを直接生成するため高速です。 透かしがグラフィックやロゴファイルの場合はこのオーバーレイ ツールを使ってください。
二重露光と重なる画像
二重露光の見た目は、部分的な透明度で重なる画像を作り、 ポートレートと風景やテクスチャをブレンドします。ポートレート をベースとしてアップロードし、街並みや森のシーンをオーバーレイ し、不透明度を40-60%に下げます。2つの画像が視覚的に重なります。 フィルム写真家は同じフレームを2回露光してこれを実現していました。 このツールはPhotoshopのブレンドモードなしで効果を再現します - Canvas APIのglobalAlphaがアナログ風を模倣するシンプルな透明度 ブレンドを生み出します。芸術的な合成のためにこの方法で写真を レイヤーしてください。
ステッカーとバッジの配置
SNS投稿やマーケティング素材はバッジオーバーレイを使います - 商品画像に置く「セール」「NEW」「売り切れ」タグです。デザイナー は透明背景のバッジPNGを用意し、商品写真の角にオーバーレイします。 これはCanvaやFigmaで各商品写真を開くより速いです。バッジをベース 幅の20-30%にスケールし、視覚的バランスのため右上または左下に 配置します。
画像オーバーレイの内部の仕組み。
このツールはHTML5 Canvas APIを使い、両方の画像を1つのcanvas 要素に描画します。ベース画像がフルサイズで先に配置されます。 次にオーバーレイ画像が、設定した座標と寸法でctx.drawImage()を使って上に描画されます。不透明度は オーバーレイ描画前にctx.globalAlphaを設定して制御 します - 0.5の値は各位置でオーバーレイピクセルの50%がベース ピクセルの50%と混ざることを意味します。canvasはブラウザタブから 出ることはなく、最終合成は標準の画像ファイルとして書き出されます。
PNGオーバーレイがきれいな結果を生む理由
PNGはアルファチャンネルをサポートします - 各ピクセルに0 (完全透明)から255(完全不透明)までの透明度値があります。透明 背景のPNGロゴをオーバーレイすると、canvasは表示ピクセルだけを 描画します。JPGオーバーレイにはアルファチャンネルがないため、 すべてのピクセルが不透明です。JPGロゴをオーバーレイすると、 ロゴの矩形背景がベース画像を覆います。これを避けるには、この ツールを使う前に背景を除去したPNGとしてオーバーレイを用意して ください。
スーパーインポーズ vs オーバーレイ vs レイヤー - 同じ操作、異なる名前
人々はこのツールを何十もの名前で検索します: 「画像をオンラインで 重ねる」「ピクチャーオーバーレイ」「フォトオーバーレイ」「写真の上に 写真を編集」「画像に画像を追加」「画像の上に画像を置く」「写真の 追加方法」「画像に画像を追加する方法」「画像に画像を挿入」「写真に 写真を追加」「写真の上に写真を置く」「別の画像の上に画像を置く方法」。 Canvas APIの操作はどの場合も同一です: 画像Aを描画し、次にオプション の透明度で位置を指定して画像Bを描画。画像オーバーラッパー、フォト オーバーレイ、画像レイヤーツールと呼んでも、ツールは同じことをします。 ソフトをインストールせずにオンラインで画像をオーバーレイしたり、 オンラインで画像をスーパーインポーズできます。完全不透明の配置 (スーパーインポーズ)、部分透明度のブレンド(写真へのオーバーレイ)、 複数画像レイヤーを重ねる重なり画像に対応します。
位置を正確に決める
XとY座標は、オーバーレイの左上がベース画像のどこに着地するかを 制御します。X=0、Y=0ではオーバーレイは左上にあります。負の値は オーバーレイを部分的に画面外へ動かします - オーバーレイの一部が canvas境界を超えてクリップされる端から端までの配置に便利です。 「中央」ボタンはXに(baseWidth - scaledOverlayWidth) / 2を、Yにも同等の計算をします。「ベースに合わせる」はオーバーレイを ベース画像全体を覆うようスケールし、テクスチャオーバーレイ、ライト リーク効果、フィルムグレイン用途に適しています。写真の上に写真を 置く方法や写真の中に写真を入れる方法をよく聞かれますが、答えは常に 同じです: 両画像をアップロードし、ドラッグして位置を決める。写真を 画像に追加、写真の上に写真を挿入、画像の上に画像を挿入、写真の上に 写真を追加 - いずれも位置決めワークフローは同一です。
画像の組み合わせに関するよくある質問
画像をどうオーバーレイし、どう別の画像の上に画像を置くか? 答えは 常に同じワークフローです: 2枚の画像をアップロードし、2枚目を1枚目 の上に配置する。画像の上に画像を置く方法も、写真の上に写真を置く 方法も同じです。画像に画像を追加する方法、画像の中に画像を追加 する方法、画像に画像を追加するには - すべて同じCanvas API操作を 指します。画像に画像を挿入する方法も同じ - アップロード、配置、 ダウンロード。画像がすでにコピー済みならクリップボードから貼り付け できます。画像に画像を追加、画像に画像を置く方法、画像を重ねる方法 - どの言い回しもここに着きます。結果は同じです: 重なった画像が1つの ファイルに合成され、PNGまたはJPGでダウンロードできます。
スケールと出力品質
スケールスライダーはソースピクセルを再サンプリングせずにオーバーレイ の描画寸法を変えます - ブラウザのバイリニア補間がcanvas描画中に リサイズを処理します。200%では500x500のオーバーレイがベース上で 1000x1000として描画されます。出力品質スライダー(JPGのみ)はDCT圧縮 を制御します。92%ではアーティファクトは無視でき、ファイルサイズも 妥当です。ウェブサムネイル用に小さいファイルが必要なら80%まで下げて ください。PNG出力は品質設定に関係なく常にロスレスです。
他のツールとの組み合わせ
完全な写真編集ワークフローには: ベース画像を目標寸法にトリミングし、ここに読み込む前にオーバーレイをだいたい正しい比率にリサイズしてから、写真をオーバーレイしたり画像をレイヤーします。結果にさらなる調整が必要なら、コントラスト調整や明るくするツールに通してください。画像オーバーレイではなくテキストオーバーレイには、別画像ファイルなしでテキストを直接描画する透かしツールを使います。レイヤーではなく横並びで画像を別の画像に入れたい場合は、結合ツールが写真を行・列・グリッドで並べます。このツールは重なり画像エディタとしても機能します - 部分透明度で2枚の画像を重ね、ブレンド合成を作れます。
よくある質問。
画像の上に別の画像を載せるにはどうすればいいですか?
まず背景画像をアップロードします - これがベースレイヤーになります。次に上に載せたい画像をアップロードします。オーバーレイはデフォルトでベース画像の左上に表示されます。プレビューエリアでドラッグして位置を変え、スケールスライダーで拡大・縮小し、背景を透けさせたい場合は不透明度を調整します。プリセットボタン(中央、右下、ベースに合わせる)を使えば、手動ドラッグなしで素早く配置できます。ファイルをアップロードする代わりにクリップボードから画像を貼り付けることもできます。配置が決まったらダウンロードをクリック。処理はすべてブラウザ内のCanvas APIで行われ、両画像はデバイス上に留まり、サーバーにアップロードされることはなく、典型的な3000x2000ピクセルまでの写真なら1秒未満で合成されます。
写真に写真を追加したり、画像の中に画像を入れるには?
写真に写真を追加する、画像の上に画像を載せる、別の画像の中に画像を挿入する、写真にロゴを追加する - いずれも同じ手順です。背景を最初の画像としてアップロードし、上に載せたいものを2番目の画像としてアップロードします。ツールは選択した位置で2番目の画像を1番目の上に描画します。モックアップのフレームに商品ショットを入れるなど、特定の位置に画像を入れたい場合は、オーバーレイを正確な位置までドラッグしてフィットするようスケールします。この画像オーバーレイツールは、写真の上の写真、商品写真の上のロゴ、セルフィーの上のステッカー、背景の上のテキスト画像など、あらゆる組み合わせに対応します。
オーバーレイと結合(マージ)の違いは何ですか?
結合(接合や組み合わせとも呼ばれる)は、画像を横並びまたは積み重ねて1つの出力にします - 結果はどちらの入力画像よりも広くまたは高くなります。2枚の500x500写真を縦に結合すると500x1000の出力になります。オーバーレイ(スーパーインポーズやフォトレイヤーとも呼ばれる)は、ベース画像の寸法内の特定位置に別の画像を重ねるため、出力サイズはベースと一致します。1000x1000のベース上の500x500オーバーレイでも出力は1000x1000です。ビフォーアフター比較、フォトコラージュ、横並びレイアウトには<a href="/ja/" class="text-link underline decoration-hairline underline-offset-4 hover:text-link-deep">結合ツール</a>を使ってください。写真の上に写真を載せる、ギャラリー画像にグラフィック透かしを追加する、シーン上の特定位置に画像を挿入する場合はこのオーバーレイツールを使います。
透明背景のPNGをオーバーレイできますか?
はい、そしてそれがこのツールで最も役立つシナリオです。透明背景のPNGロゴ、アイコン、オーバーレイPNGをオーバーレイ画像としてアップロードします。表示ピクセルだけがベースの上に描画され、透明領域は白い長方形なしで背景をきれいに透けさせます。これがECセラーが商品写真に会社ロゴを追加し、写真家がギャラリーに透かし署名を置き、デザイナーがポートレートに装飾フレームを重ねる方法です。オーバーレイPNGにまだ透明度がない場合は、remove.bgやPhotoshopなどで先に背景を除去し、アルファチャンネル付きPNGとして保存してからここでオーバーレイしてください。JPGオーバーレイには透明度がなく、常にベース上の不透明な長方形として描画され、下にあるものを覆います。
オーバーレイ画像のサイズはどう調整しますか?
プレビュー下のスケールスライダーを使います。100%ではオーバーレイはベース画像に対する元のピクセル寸法で描画されます。左にドラッグすると5%まで縮小、右にドラッグすると300%まで拡大できます。2000x1500のオーバーレイを50%スケールにするとベース上で1000x750ピクセルになります。商品写真へのロゴ配置では、ベース画像幅の10-25%がほとんどの場合に適しています - 2000px幅の写真上の200pxロゴは10%で、控えめなブランドマークとして読めます。テクスチャ、ライトリーク、グレイン効果などの全画面オーバーレイには、「ベースに合わせる」ボタンをクリックしてオーバーレイを背景全体に自動スケールして中央配置します。スケール計算は表示サイズではなく、オーバーレイの自然寸法を使います。
不透明度スライダーは何をしますか?
不透明度はオーバーレイ画像がベース上でどれだけ透明に見えるかを制御します。100%ではオーバーレイは完全に不透明で、下にあるベース画像ピクセルを完全に覆います。50%ではオーバーレイは半透明で、ベースが半分の強度で透けます - これが二重露光のブレンド効果を作ります。10%ではオーバーレイはほとんど見えず、かすかな印象だけです。一般的な設定: マークは見えるが写真を支配すべきでない透かしには20-40%; ポートレートと風景を混ぜる二重露光合成には50%; ベースを圧倒せずに個性を加えるフィルムグレイン、ライトリーク、ボケ効果などのテクスチャオーバーレイには15-30%; 完全な可視性が目標のロゴ配置、ステッカー、バッジには100%。
スマホでオンラインで写真を重ねられますか?
はい、どのスマホからでもオンラインで写真を重ねられます。Safari、Chrome、または任意の最新モバイルブラウザでこのページを開きます。最初のアップロード領域をタップしてカメラロールからベース画像を選び、次に2番目のアップロード領域をタップしてオーバーレイを選びます。画像をコピー済みならクリップボードから貼り付けることもできます。指でプレビューをドラッグしてオーバーレイを再配置します。スケール、不透明度、位置のスライダーはすべてタッチ入力に応答します。中央や右下などのプリセットボタンは1タップで動作します。処理はデスクトップと同じ画像オーバーレイエンジンを使い、完全にスマホ上で行われます - 画像データはサーバーに送られず、結果はデバイスに直接ダウンロードされます。4GB以上のRAMを持つスマホなら4000x3000までの画像を問題なく扱えます。
2枚の画像をオーバーレイしたり、オンラインで写真を重ねるには?
2枚の画像をオーバーレイしたりオンラインで写真を重ねるには、まず背景画像をアップロードし、次に前景画像をアップロードします。ツールは2番目の画像を1番目の上に描画します。透明度付きでオンラインオーバーレイしたい場合は、透明背景のPNGオーバーレイを使います。全体を覆うオンライン写真オーバーレイには、「ベースに合わせる」をクリックしてオーバーレイを背景全体に引き伸ばします。部分的な不透明度で2枚の画像を重ね、二重露光風にもできます。画像のオーバーレイ方法、写真のオーバーレイ方法、ピクチャーのオーバーレイ方法、オンライン画像オーバーレイなど、どの検索でもCanvas APIの操作は同じです。
PNGとJPGのどちらでエクスポートすべきですか?
オーバーレイが透明度を使い、出力でもその透明度を保つ必要がある場合はPNGでエクスポートします - 例えばベース画像自体に透明領域がある場合や、合成結果をFigma、Photoshop、Canvaなどクリーンなアルファエッジが必要な別のデザインツールに渡す場合です。PNGはロスレスなので圧縮アーティファクトはゼロですが、ファイルはJPGの3-5倍大きくなります。ファイルサイズが重要で透明度が不要な場合はJPGでエクスポートします。品質92%(デフォルト)のJPGは写真で元と視覚的に同一の結果を生み、2000x1500の合成でおおよそ200-400KBになります。SNSアップロード、商品リスティング画像、ウェブページ、メール添付、画像が単色背景上にある文脈ではJPGを使ってください。
画像はサーバーにアップロードされますか?
いいえ。両画像はHTML5 Canvas APIとJavaScriptを使ってブラウザメモリに読み込まれます。合成ステップ - 指定位置と指定不透明度でベースの上にオーバーレイを描画する処理 - は、透明度制御にglobalAlphaを使ったcanvas.drawImage()により、完全にデバイス上で行われます。確認できます: ブラウザの開発者ツール(F12)を開き、ネットワークタブに切り替えてオーバーレイ操作を完了してください。画像データを運ぶ送信リクエストはゼロです。唯一のネットワーク通信は初期ページ読み込みです。タブを閉じるとすべての画像データは即座にメモリから解放されます。このピクチャーインピクチャーエディタはローカルで動作するため、機密文書、未公開の商品写真、個人画像、第三者サーバーに置きたくないあらゆるコンテンツに安全です。