画像ウォーターマーク

画像ウォーターマークとは？#

ウォーターマークとは、画像の上に識別情報（テキスト、ロゴ、繰り返しパターン）を焼き付けることで、画像をコピーした人は誰でもあなたのマークも一緒にコピーする仕組みです。利用される理由は主に 3 つあります。公開ポートフォリオでの著作者表示、クライアント向け校正の無断再利用の抑止、そして出荷前の文書に目立つ「DRAFT」や「CONFIDENTIAL」を重ねることです。うまくやるのは見た目より難しいものです。マークは被写体を埋もれさせずに読めなければならず、位置は予測可能で、理想的には対角線上にタイル配置されて切り抜けないようにすべきです。

本ページは、ブラウザ内だけで完結するフル機能のウォーターマークスタジオです。画像を読み込み、テキストかロゴのウォーターマークを選び、3 つの配置戦略（9グリッドのコーナー/中央、カスタム比率、全面タイル）のいずれかを選択し、不透明度、角度、カラー、フォントを調整して、結果を PNG、JPEG、WebP で書き出します。元画像はローカルでデコードされ、ウォーターマークが適用されたピクセルもローカルで再エンコードされます。

使い方#

1. 画像を点線の ドロップ領域 にドラッグします（またはクリックしてファイルを選択）。
2. 上部で ウォーターマーク の種類を選びます。
   • テキスト — 文字列を入力します（フォントスタックに CJK フォールバックが含まれるため、ラテン文字と CJK の混在も描画されます）。続けて フォント（Sans / Serif / Mono / Cursive）、フォントサイズ（8〜400 px）を選び、カラー を指定し、必要なら 太字 にチェックを入れます。
   • 画像 — ロゴ画像 をクリックして 2 枚目の画像を読み込みます。キャンバス幅のパーセント（1〜100%）に、自身の縦横比を保ったままフィットさせます。
3. 位置 モードを選びます。
   • 9グリッド — 9 つのセル（左上、中央、右下など）のいずれかをクリックします。ウォーターマークは短辺の 4% として計算されたマージンで端から内側に配置され、セルより大きくてもキャンバスからはみ出しません。
   • カスタム — 2 つのスライダーで X% と Y% を設定します。移動量ベースで、0% で左/上端、100% で右/下端に寄るため、100% にしても画像の半分がはみ出すことはありません。
   • タイル — ウォーターマークは水平・垂直の 間隔 スライダー（0〜400 px）で画像全体に繰り返されます。角度 を追加すると、タイルグリッドはキャンバス対角線サイズの正方形上に配置され中心周りに回転するため、四隅すべてが覆われたままになります。
4. 全体の 不透明度（0〜100%）と 角度（−180°〜180°）を設定します。角度は 9グリッド/カスタムモードでは単一のマークに、タイルモードでは全面に適用されます。
5. 出力形式（PNG / JPEG / WebP）を選び、非可逆形式の場合は 品質（5〜100）を設定します。
6. プレビューがリアルタイムで更新されるのを確認し、ダウンロード をクリックします。リセット ですべてのスライダーを既定値に戻せます。

主な機能#

• 単なる「中央」トグルではない、3 つの本格的な配置戦略。 著作者署名用の 9グリッド、精密なオフセット用のカスタム、そして切り抜けできない真の対角タイル。
• キャンバスを完全に覆う対角タイル。 タイルフィールドはキャンバスの対角線サイズの正方形上に計算され、中心周りに回転します。これが、隙間の無い四隅を保証する唯一のアプローチです。
• CJK セーフなフォント。 すべてのフォントプリセットはスタック内に CJK 対応のフォールバックを同梱しているため、漢字を含む「サンプル ウォーターマーク 2026」のようなテキストが豆腐（□）にならず描画されます。
• 移動量ベースのカスタム位置。 100% は「画像の半分がはみ出る」ではなく「反対端にぴったり」を意味し、感覚で予測できる配置を実現します。
• 縦横比を尊重するロゴフィット。 ロゴはキャンバス幅のパーセントにスケールされ、引き伸ばされることはないため、円形のバッジは円形のまま保たれます。
• 100% ローカル。 ソース画像も、オプションのロゴも、ブラウザ内でデコード・合成されます。アップロードは一切ありません。

実例#

クライアント向けの校正を送る際、各画像に薄く、切り抜けできない対角の「PROOF」を重ねたいとします。1920×1280 の写真を読み込みます。ウォーターマーク: テキスト にして PROOF と入力し、Sans、フォントサイズ 120、カラー #ffffff、太字 オンにします。位置 を タイル に切り替え、間隔 X と 間隔 Y を 240 程度にし、角度 を −30°、不透明度 を 25% にします。プレビューには、フレーム全体に対角の格子状に文字が繰り返され、各コピーは被写体がはっきり読める程度に薄く表示されます。JPEG の 品質 85 で書き出します。

同じ写真で右下に単一のブランドマークを置くなら、位置 を 9グリッド のまま右下のセルをクリックし、不透明度 80%、角度 0° にします。マージンは自動的に約 51 px（短辺 1280 の 4%）に設定されます。結果は、ピクセル端に張り付くのではなく、コーナー内に自然に収まるきれいなバッジになります。

よくある質問#

漢字のウォーターマークが文字ではなく□で表示されます。#

レンダリング環境に CJK グリフが 1 つもない場合に起こります。本ツールのフォントスタックはすべて CJK フォールバック（PingFang SC、Microsoft YaHei、Noto Sans CJK など）を含むため、いずれかがインストールされたシステムでは正しく描画されます。CJK フォントが一切インストールされていない最小構成のサーバーでは、OS が持たない文字をブラウザツールが描画することはできません。

カスタムモードで 100% にするとマークが端からはみ出さないのはなぜですか？#

パーセントが、生のキャンバス幅ではなく、利用可能な 移動量（キャンバス幅 − ウォーターマーク幅）に対して測られるためです。そのため 0% で左端、100% で右端に寄り、サイズに関わらずウォーターマークは常に画面内に完全に収まります。

回転させるとタイルの四隅が剥き出しになります。#

タイル モードではなく、複数のコピーを手作業で配置したカスタムモードになっていないか確認してください。タイルモードはキャンバス対角線サイズの正方形上にグリッドを配置し、キャンバス中心周りに回転させます。これが任意の角度で完全なカバーを保証する唯一のジオメトリです。手作業の対角パターンにはそれができません。

ウォーターマークは画質を劣化させますか？#

合成自体はしませんが、JPEG や WebP として再エンコードする際は 品質 スライダーで制御される劣化が伴います。ピクセルパーフェクトなマスターが必要な場合は PNG（可逆）で書き出してください。Web 向けの校正なら、JPEG 品質 85〜92 は目には区別できず、サイズははるかに小さくなります。