画像オーバーレイツール
写真にロゴを置く、あらかじめ切り抜いた被写体を新しい背景と合わせる、画像にテクスチャを重ねる。このツールはブラウザ内だけで、ベース画像1枚とオーバーレイ1枚を合成します。X/Y座標、サイズ、不透明度、ブレンドモードを設定し、統合した結果をPNGでダウンロードできます。
画像を別の画像に重ねる手順
-
1
ベース画像とオーバーレイ画像をアップロード
ベース画像がキャンバス全体を埋め、オーバーレイがその上に重なります。
-
2
位置とサイズを決める
X/Y座標をピクセル単位で入力し、5%から200%の範囲でサイズを選びます。
-
3
不透明度とブレンドモードを設定
くっきり合成するなら不透明度100%、控えめな透かしなら30〜60%が目安です。
-
4
書き出す
2つのレイヤーをベース画像のキャンバス寸法のPNGに統合します。
「貼っただけ」に見せないオーバーレイ
2レイヤーの合成は、配置、サイズ、ブレンドを意図して選ぶとまとまりやすくなります。
配置
- 三分割法を使いましょう。オーバーレイの中心を三分割線の交点に置くと、雑誌のような仕上がりになります。
- 隅に置く透かしは、端から10〜15%の余白を取ると収まりが良くなります。
- バランス重視のポスターやSNS用カードには中央配置が向いています。
サイズ
- オーバーレイがベース画像の短辺の60%を超えると、途端に不自然に見えがちです。
- ロゴの透かしは、ベース画像の幅の5〜15%程度が一般的です。
ブレンドモード
自然な合成に仕上げるための選び方:
| モード | 効果 |
|---|---|
| 通常 (Normal) | アルファ値をそのまま反映した合成 |
| 乗算 (Multiply) | 暗くなる。テクスチャを重ねるのに最適 |
| スクリーン (Screen) | 明るくなる。グローやフレアの表現に便利 |
| オーバーレイ (Overlay) | コントラストを強調するブレンド |
| 暗くする (Darken) | 2つのレイヤーのうち暗い方のピクセルを残す |
| 明るくする (Lighten) | 2つのレイヤーのうち明るい方のピクセルを残す |
機能範囲とプライバシー
このツールで操作できるのは、1枚のオーバーレイの位置、サイズ、不透明度、ブレンドです。回転、切り抜き、境界のぼかし、影の追加には対応していないため、必要な場合はアップロード前に編集してください。2枚の画像はブラウザ内で処理され、手順ページのURLに入ることもサーバーへ送信されることもありません。ガイド形式では、IndexedDBが一時プロジェクトをこの端末に最長30分保存し、手順間で引き継ぎます。
よくある合成パターン
- スマートフォンやノートPCのモックアップに製品画面をはめ込む。
- 写真の隅にロゴの透かしを入れる。
- 無地の背景にバッジやラベルを配置する。
- 装飾フレームの中にアバターを収める。
- あらかじめ透過処理した被写体を新しい背景に配置する。
よくある質問
このツールは1回の処理でベース画像1枚とオーバーレイ1枚に対応しています。何層も重ねたい場合は、結果を書き出してそれを新しいベース画像として使い、次のオーバーレイを重ねてください。
はい。オーバーレイがアルファチャンネル付きのPNGであれば、表示されているピクセルだけがベース画像に描画されます。JPGのオーバーレイには透過がないため、長方形のまま重なります。
くっきり合成するなら「通常」(Normal)、写真の上に紙やグランジのテクスチャを重ねるなら「乗算」(Multiply)、グローやハイライトには「スクリーン」(Screen)が向いています。「オーバーレイ」(Overlay)、「暗くする」(Darken)、「明るくする」(Lighten)は表現寄りのモードなので、切り替えて試してみてください。
ドラッグではなく、X/Yの数値入力欄を使ってください。ピクセル単位の座標を指定できるので、1ピクセル刻みのグリッドにも合わせられます。
関連ツール
QRコード生成ツール
テキストまたはURLから、ブラウザ内でQRコードを作成してPNGとしてダウンロードできます。
ファンタジーマップ作成ツール
再現可能なシード、地形コントロール、視覚スタイルを使って、ブラウザ内で手続き型のファンタジーマップを作成します。実在の地理ではなく、ローカルでSVGまたはPNGの作品をダウンロードできます。
写真エディター
切り抜き、回転、明るさ、コントラスト、彩度、フィルター、テキスト追加に対応し、JPG・PNG・WebPへ書き出せるブラウザベースの写真エディター。
PNGからSVGへのベクター変換
PNGのラスター画像をブラウザ内でSVGパスに変換します。ロゴ、アイコン、線画に最適です。しきい値、色数、スムージングを調整できます。
GIFメーカー
連番画像や短い動画をアニメーションGIFに変換します。書き出し前にフレームレート、ループ回数、サイズを調整できます。
バーコードジェネレーター
Code 128、EAN-13、UPC、ITF-14 など9種類の一次元バーコードを作成します。データはブラウザ内に残り、SVG または PNG をダウンロードできます。