商品写真は、ストアの資産のなかでもとくに手間とお金がかかっているものです。
撮影の日を押さえて、什器を用意して、色を合わせて、ようやく1枚が仕上がります。
それが数秒でコピーされて別のサイトに並ぶ、というのは運営者にとってなかなかこたえます。
この記事は、当社(UnReact)が開発した Shopify アプリ「シンプル商品画像透かし|お手軽ウォーターマーク」の
操作画面をすべて開いて、設定項目を1つ残らず解説するものです。
紹介文で「位置や大きさを設定できます」と書くのは簡単ですが、実際に運用に乗せるときに気になるのは別のところです。
初期値は何か、どこまで細かく指定できるのか、間違えたときに引き返せるのか、途中で止まったらどうなるのか。
この記事ではそこまで書きます。画面に出ていない制約や、実装を読まないと分からない挙動も含めて並べました。
商品画像そのものに、ロゴ画像またはテキストの透かしを焼き込む Shopify アプリです。
テーマにブロックを置いたり、Liquid を編集したりする必要はありません。
画像ファイル自体を差し替えるので、Shopify が商品画像を表示しているところには、すべて透かし入りの画像が出ます。

できることは大きく4つです。
加えて、新しくアップロードした商品画像に自動で透かしを入れる設定もあります。
商品を登録するたびにアプリを開き直す必要がありません。
数値で指定するタイプの設定は、頭の中で結果を想像しにくいものです。
「20%」がどのくらいの大きさなのか、「-18°」がどのくらい傾くのかは、見るまで分かりません。
このアプリは設定欄のとなりに常にプレビューを置いていて、スライダーを動かすと即座に描き直されます。
商品の画像に手を付ける前に結論が出せるので、作業がやり直しになりません。

商品の画像を差し替える操作は、本来なら緊張します。間違えた状態が全商品に広がると、直すのは骨が折れます。
このアプリは元のファイルを消さず、商品との関連だけを外してストアのファイルに置いたままにします。
関連を付け直せば、元の写真がそのまま戻ります。
期限は設けていません。 半年後に思い直しても戻せます。
商品画像の加工は、商品が増えるほど処理の量が増えます。そのため商品数で料金が段階的に上がる設計のアプリもあります。
このアプリは月額の定額制で、商品数や画像の枚数による追加料金がありません。
カタログが大きいストアほど、料金が読みやすくなります。
画像ファイルそのものを差し替えるため、テーマにブロックを追加する作業も、Liquid の編集も要りません。
テーマを変えても、商品ページでも一覧でも検索結果でも、同じように透かしが出ます。
正直に書きます。導入前に知っておいたほうがよい点が4つあります。
元の画像は商品から外れて表示されなくなりますが、ファイル自体はストアに残ります。
Shopify のファイルには非公開という仕組みが無いため、URL を知っている相手からは引き続き開けます。
管理画面にもその旨の案内が常に出ています。「表示されなくなる」であって「見られなくなる」ではない、という点はご理解ください。
一括適用と復元は、開いているタブが「少しずつ処理して、続きを頼む」を繰り返すことで進みます。
常駐する処理を持たない作りなので、タブを閉じたり別のページへ移ると処理が止まります。
ただし進み具合は保存されるので、次に開いたときに「再開」で続きから進められます。
コレクションページの商品サムネイルは、テーマによって正方形に切り抜かれます。
画像の端に置いた透かしは、この切り抜きで見えなくなることがあります。
一覧でも必ず見せたい場合は、位置を「中央」にするか、配置を「敷き詰める」にしてください。
対象は商品画像だけです。コレクションの画像、ブログ記事の画像、テーマに直接設定したバナー画像には透かしが入りません。
月額 7.99 ドルの定額制です。年額プランは 79.99 ドルで、2か月ぶんお得になります。
どちらのプランにも 7 日間の無料体験が付いています。
商品数・画像の枚数・処理した回数による追加料金はありません。
無料体験のあいだも機能の制限はないので、実際に自分のストアの商品画像で試してから判断できます。
気に入らなければ「元に戻す」で適用前の画像に戻せます。
Shopify 管理画面の左下にある「設定」から「アプリ」を開き、右上のアプリストアへ進むボタンをクリックします。
検索窓に「シンプル商品画像透かし」と入力すると見つかります。

求められる権限は商品とファイル(画像)の読み取り・編集だけです。顧客情報や注文情報にはアクセスしません。
インストールすると、管理画面のサイドバーにアプリが追加されます。
詳しい導線は Shopify App Store のページからも確認できます。
管理画面は「設定」の1画面だけです。その中に、次の4つのカードが縦に並びます。
画面の行き来がないので、上から順に読んでいけば設定が終わります。

透かしの中身と見え方を決めるカードです。ここで決めた内容が、一括適用にも自動適用にも使われます。
設定はストアのメタフィールドに保存されるので、別の端末で開いても同じ内容が出ます。
カードの上には、次の案内が常に出ています。
元画像は商品やコレクションから表示されないようにしますが、画像のURLを直接知っている場合は引き続き閲覧できることがあります。
透かしの中身を「ロゴ画像」にするか「テキスト」にするかを決めます。初期値はロゴ画像です。
選んだ方によって、下に出る入力欄が切り替わります。
切り替えると作りかけの透かしは破棄されるので、どちらを使うか決めてから中身を作ると、やり直しが減ります。
種類でロゴ画像を選んだときだけ出る、画像のアップロード欄です。
枠の中の「ロゴ画像を選択」から選ぶか、ファイルをドラッグ&ドロップします。
画面には「PNG形式(透過対応)を推奨します」と出ています。
背景が透明な PNG を使うと、商品写真の上に自然に重なります。白背景の JPEG を使うと、白い四角ごと乗ってしまうので注意してください。

種類でテキストを選んだときだけ出る入力欄です。入力例として「例: SAMPLE」が薄く表示されています。
欄の下には「お使いのブラウザのフォントで描画します。日本語も使えます。」と書かれています。
店名・ドメイン名・© ブランド名 のような短い文字列が向いています。
長い文章は避けてください。透かしは画像の幅に対する割合で拡大縮小するため、文字数が増えるほど1文字が小さくなって読めなくなります。

テキストの色を選びます。左の四角をクリックするとカラーピッカーが開き、右には選んだ色の16進数が出ます。
初期値は白です。
商品写真が明るい(白背景など)なら濃いグレーや黒、暗い写真なら白が読みやすくなります。
どちらの写真もあるストアでは、透明度を下げてグレー寄りの色にすると、背景の明るさに左右されにくくなります。
透かしを何枚並べるかを決めます。初期値は「1箇所に表示」です。選べるのは次の4つです。
控えめに入れたいなら1箇所に表示、転載をしっかり防ぎたいなら敷き詰めるが向いています。


透かしを置く場所を、左上・右上・左下・右下・中央の5つから選びます。初期値は右下です。
この項目は、配置が「敷き詰める」のあいだは画面に出ません。
敷き詰めでは置き場所という概念が無いためで、設定が消えたのではなく、選んだ配置では使わないので隠れているだけです。
端に置いた透かしは、画像の幅の3%ぶんの余白を空けて配置されます。

透かし同士をどれだけ離すかを 0%〜200% で決めます。初期値は 60% です。
この割合は透かし自体の幅に対する割合なので、100% なら透かし1個ぶんの隙間が空きます。
この項目は、配置が「1箇所に表示」のあいだは画面に出ません。1枚しか置かないので間隔が意味を持たないためです。
0% に近づけるほど密になり、切り抜かれにくくなります。ただし商品そのものが見えにくくなるので、60%〜100% あたりから試すのがおすすめです。

透かしの大きさを 10%〜50% で決めます。初期値は 20% です。
商品画像の横幅に対する割合なので、大きい画像でも小さい画像でも同じ比率で入ります。
10〜20% なら目立たせずに入れられ、30〜50% にすると転載防止をはっきり示せます。
この割合は傾ける前の透かしの幅を基準にしているため、傾きを変えても見かけの大きさは変わりません。
透かしを -90°〜90° の範囲で回します。初期値は 0°(水平)で、マイナスで左上がり、プラスで右上がりになります。
繰り返しや敷き詰めと組み合わせたときは、透かし1枚だけでなく並びの方向ごと傾きます。
斜めの透かしが水平に並ぶのではなく、斜めに連なった見た目になります。
-20°〜-15° くらいの浅い角度を付けると、商品写真の直線と重ならないので読みやすく、加工でも消しにくくなります。
透かしの濃さを 10%〜100% で決めます。初期値は 60% で、数字が小さいほど薄くなります。
30〜50% なら商品の見え方を優先でき、70〜100% にすると転載防止を優先できます。
10% より薄くはできません。薄すぎる透かしは簡単に消せてしまい、入れる意味が無くなるためです。

チェックを入れると、商品に新しい画像を追加したときに自動で透かしが入ります。初期値はオフです。
欄の下には「商品に新しい画像を追加すると、自動でウォーターマークを適用します。」と説明が出ています。
自動で入るのは新しく追加した画像だけです。設定を変えても、すでに焼き込み済みの画像が勝手に作り直されることはありません。
設定変更を既存の画像にも反映したいときは、下の一括適用を使います。
また、反映には少し時間がかかります。画像を追加した直後に商品ページを開くと、まだ入っていないことがあります。

このカードには保存ボタンがありません。変更すると画面の一番上に帯が出て、そこに「保存」と「破棄」が並びます。
保存は入力した内容とアップロードした画像をストアに保存し、破棄は変更を捨てて保存済みの状態に戻します。
ロゴを選んだ時点でプレビューは完成したように見えますが、この時点ではまだ何も保存されていません。
未保存のあいだは警告のバナーが出て、プレビューの左上には「未保存」のバッジが付きます。

さらに、未保存のあいだは一括適用も元に戻すも押せません。
一括適用は保存済みの設定を読んで動くため、未保存のまま実行すると、画面で見えている設定とは違う内容で焼き込まれてしまうからです。
押せないときは理由が画面に出ます。

登録済みの商品画像に、まとめて透かしを入れるカードです。
カードには「このタブを開いたままにしてください。閉じると処理が止まります。」と書かれています。

どこまで処理するかを、次の3つから選びます。初期値はすべての商品です。

「選択した商品」「選択したコレクション」を選ぶと、下に「商品を選択」または「コレクションを選択」のボタンと、
選んだ件数の表示が出ます。ボタンを押すと Shopify の標準のピッカーが開きます。



選んだものは一覧になり、右の ✕(選択から外す)で1件ずつ外せます。

選べるのは 250 件までです。上限を超えると赤いバナーが出て実行できません。
これは選んだ内容の保存先に文字数の上限があるためで、上限を設けずに大量に選ぶと保存だけが黙って失敗することになるので、手前で止めています。
250 件を超えるときは、コレクションでまとめて指定するか、何回かに分けて実行してください。
また、一覧に並ぶのは先頭 20 件だけで、それ以降は「ほか N 件」とまとめて表示されます。
250 件すべてを並べると設定画面が延々と縦に伸びてしまうためです。
対象を決めたら、カードの一番下のボタンを押します。このボタンの文言は状況によって変わります。
押せないときは、ボタンの上に理由が出ます。透かしの中身がまだ保存されていなければ「先にウォーターマーク設定でロゴを設定してください」、
未保存の変更が残っていれば「設定を保存してから、適用ボタンを押してください」と表示されます。
処理が始まると画面全体が覆われ、中央に進行中の表示と「中断」ボタンが出ます。
カードの中には進捗バーと処理件数が出ます。数えている単位は商品数で、画像の枚数ではありません。
1商品に5枚の画像があっても1件と数えます。


ボタンを押すと、まず下見が走ります。画像には一切触らず、何枚あるかだけを数える段階です。
ここで、すでに別の設定で透かしを入れた画像が見つかると、いきなり処理を始めずに確認が出ます。

選べるのは2つです。「新しい設定で適用し直す」を選ぶと、適用済みの画像も記録してある元の画像から作り直します。
「まだ適用していない画像だけに適用する」を選ぶと、適用済みの画像はそのままにして、まだ入っていない画像だけに入れます。
透かしを変えたのに見た目が変わらないときは、ここで後者を選んでいます。設定を全体に反映したいときは前者を選んでください。
なお焼き直しは、すでに焼き込んだ画像の上に重ねるのではなく、元の画像から作り直します。
重ね書きすると透かしが二重になり、本当の元画像に戻せなくなるためです。
このアプリはサーバーに常駐する処理を持っていません。開いているタブが「少しずつ処理して、続きを頼む」を繰り返すことで一括適用を進めます。
1回のリクエストで扱うのは画像10枚、または45秒までで、そこまで進むといったん区切って次を呼びます。
そのためタブを閉じたり別のページへ移動すると処理は止まります。
ただし進み具合は保存されるので、次に開いたときは「再開」で続きから進められます。
商品数が多いストアでは時間がかかるので、画面を開いたまま待てるタイミングで実行してください。
焼き込んだ透かしを取り消して、適用前の画像に戻すカードです。
元の画像は削除しておらず、商品から外してストアのファイルに残してあります。
どの画像がどれの元画像なのかもアプリが記録しているので、リンクを付け直すことで元に戻せます。

「元に戻す」ボタンを押すと、実行前に必ず確認が出ます。破壊的な操作なので、ここで一段挟む作りです。

ここで「元に戻す」を押すと処理が始まり、「キャンセル」を押すと何もせずに閉じます。
処理中は「中断」で止められます。進み具合の見え方も、タブを開いたままにする必要があることも、一括適用と同じです。
戻せなかった商品があると、進捗の下に件数が出ます。これは失敗とは別に数えています。
元の画像をファイルから手で削除してしまった場合は、何度実行しても戻せないため、再試行の対象から外したうえで件数だけを出し続ける作りです。
こうしておかないと、何をしても減らない失敗件数が出続けて、壊れているのか仕様なのか判断できなくなります。
並び順も元に戻しますが、Shopify 側の処理が非同期なので、戻した直後は並び順がまだ変わっていないことがあります。
少し待ってから商品ページを開き直してください。
アプリの管理画面の表示言語を変えるカードです。「言語を選択」で選び、「変更する」を押すと切り替わります。
日本語・英語のほか、ドイツ語・フランス語・スペイン語・中国語・韓国語など20言語に対応しています。
海外のスタッフと管理画面を共有しているストアでも、担当者ごとに読める言語で使えます。
設定画面のいちばん下には、当社が提供しているほかの Shopify アプリを紹介する枠があります。
機能そのものとは関係がないので、閉じてしまって構いません。
画像ファイルそのものを差し替えるので、テーマの編集やブロックの追加は必要ありません。
適用が終われば、Shopify が商品画像を出しているところにはすべて透かし入りの画像が出ます。


コレクションページの一覧や、検索結果、関連商品のサムネイルにも同じように入ります。

ここで注意したいのが、一覧のサムネイルはテーマによって正方形に切り抜かれる点です。
上の画像でも、右端に置いた透かしが一覧では切れています。
一覧でも必ず見せたいときは、位置を中央にするか、配置を敷き詰めるにすると切れません。



「透かしくらい自分で書けるのでは」と思われるかもしれません。実際、見た目だけなら Liquid と CSS で作れます。
ただし作れる範囲と、アプリがやっていることは別物です。ここでは2通りの自作方法を示し、それぞれ何が足りないかを書きます。
もっとも手軽なのは、商品画像の上に擬似要素で文字を重ねる方法です。
テーマの CSS に次のように書けば、商品ページの画像に店名が乗ります。
.product__media {
position: relative;
}
/* 画像の右下に、半透明の文字を重ねる */
.product__media::after {
content: "© SNOWDEVIL";
position: absolute;
right: 3%;
bottom: 3%;
font-size: 1.2rem;
font-weight: bold;
color: rgba(61, 61, 61, 0.38);
transform: rotate(-18deg);
pointer-events: none;
}
position: relative を親に付けて、::after を右下に絶対配置しています。
pointer-events: none は、重ねた文字が画像のクリックやズームを邪魔しないようにするためのものです。
この方法の問題は、画像そのものは何も変わっていないことです。
右クリックで保存された画像にも、検索エンジンが拾った画像にも、SNS のカードに出る画像にも透かしは入りません。
ブラウザの開発者ツールで CSS を1行消せば透かしは消えますし、画像の URL を直接開けば元の写真がそのまま見えます。
つまり「画面上で薄く見えているだけ」で、転載対策としては効きません。
画像そのものに焼き込むなら、加工してからアップロードする必要があります。
ブラウザで完結させるなら Canvas を使う方法があります。
// 画像を読み込んで、右下にテキストの透かしを焼き込んだ Blob を返す
async function burnWatermark(file, text) {
const img = await createImageBitmap(file);
const canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
const ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
// 大きさは画像の幅に対する割合で決める(画像ごとに見え方を揃えるため)
const size = img.width * 0.05;
ctx.font = `bold ${size}px sans-serif`;
ctx.fillStyle = "rgba(61, 61, 61, 0.38)";
ctx.textAlign = "right";
// 端から画像幅の 3% を余白として空ける
const margin = img.width * 0.03;
ctx.translate(img.width - margin, img.height - margin);
ctx.rotate((-18 * Math.PI) / 180);
ctx.fillText(text, 0, 0);
return new Promise((resolve) => canvas.toBlob(resolve, "image/jpeg", 0.9));
}
画像を Canvas に描いてから文字を重ね、JPEG として書き出しています。
大きさと余白を画像の幅に対する割合で決めているのは、大きさの違う写真でも見え方を揃えるためです。
回転は translate で原点を右下へ移してから rotate しています。
ここまでは自作できます。問題はこの先です。
このアプリが実際にやっているのは、まさにこの5点です。
元画像と加工後画像の対応を商品ごとに記録し、処理を小さく区切って再開できるようにし、
元画像に透過が無ければ JPEG で書き出しています。
見た目を作るところまでは自作できますが、運用に耐える形にするまでの距離がかなりあります。
アプリストアには、画像を守るためのアプリがいくつかあります。
たとえば右クリックを無効にするアプリや、画像に不可視の識別子を埋め込むアプリ、
画像を配信するときに動的に加工するアプリなどです。
これらは「守り方」がそれぞれ違うので、併用したときの順番と設定の考え方を書いておきます。
右クリック無効化は、保存の操作を面倒にするだけで、画像そのものは無傷です。
開発者ツールを開かれたり、URL を直接叩かれたりすれば取得できます。
このアプリと役割が重ならないので、併用できます。
併用するなら、先にこのアプリで透かしを焼き込んでから、右クリック無効化を入れてください。
逆にすると、透かしを入れる作業のあいだ画像を開くのが面倒になります。
配信時に加工するタイプのアプリと併用する場合は、どちらか一方に寄せることをおすすめします。
両方が同じ画像を触ると、透かしが二重に入ったり、こちらの「元に戻す」で戻したはずの画像に
もう一方の加工が残ったりして、どちらが原因か分からなくなります。
もし併用を試すなら、まずこのアプリの自動適用をオフにしてください。
新しい画像が追加されるたびに両方が反応する状態を避けられます。
ほかのアプリを入れている状態でこのアプリを試すときは、次の順序が安全です。
いきなり全商品に適用しないことと、自動適用を最後に回すことがポイントです。
この順番なら、どの段階でも引き返せます。
実際に使い始めたあとで迷いやすいところを、いくつか先回りして書いておきます。
透かしを変えたくなったら、入れ直しになりますか。
なりません。設定を変えて一括適用をもう一度実行すると、記録してある元の画像から作り直します。
すでに入っている透かしの上に重ねるわけではないので、二重になったり濃くなったりしません。
商品を大量に追加したとき、自動適用が追いつきますか。
自動適用は商品ごとに動くので、追加した順に処理されます。
ただし反映まで少し時間がかかるため、追加した直後に商品ページを開くとまだ入っていないことがあります。
確実に入れたい場合は、追加が終わってから一括適用を1回走らせるのが確実です。
元画像を整理したくなったら消してよいですか。
消さないでください。元の画像を消すと、その商品は元に戻せなくなります。
アプリは「どの加工後画像がどの元画像に対応するか」を記録していますが、
ファイル自体が無くなってしまうと戻す先がありません。
戻せなかった商品は、失敗ではなく「戻せない件数」として画面に出続けます。
複数のスタッフで使えますか。
使えます。設定はストアに保存されるので、誰が開いても同じ内容が出ます。
言語設定だけはブラウザごとに保持されるため、担当者ごとに読める言語を選べます。
「シンプル商品画像透かし|お手軽ウォーターマーク」は、商品画像そのものにロゴやテキストを焼き込むアプリです。
画面は設定1つだけで、上から順に読んでいけば設定が終わります。
この記事で見てきたとおり、透かしの見え方は配置・位置・繰り返しの間隔・大きさ・傾き・透明度の6つで決まります。
どれもプレビューで確かめながら決められるので、商品画像を触る前に結果が分かります。
そして運用で効いてくるのは、元画像を残していることです。
数商品だけに試して、気に入らなければ戻し、納得してから全商品に広げる、という進め方ができます。
画像を差し替える操作は本来なら緊張するものですが、引き返せるなら試せます。
料金は月額 7.99 ドルの定額で、商品数や画像の枚数による追加料金はありません。
7 日間の無料体験のあいだに、自分のストアの写真で実際に確かめてみてください。
アプリのページはこちらです。
当社では、ストア運営の細かい困りごとを1つずつ解決する Shopify アプリを提供しています。
画像まわり・表示まわりでよく使われているものを挙げておきます。
いずれも設定画面はシンプルで、テーマの編集なしで使えるように作っています。