2026/10/05

【徹底解説】Shopify アプリ「シンプル商品画像透かし|お手軽ウォーターマーク」でできること

@ 五条真一

Shopify

シンプル商品画像透かし|お手軽ウォーターマークのアプリ紹介画像

商品写真は、ストアの資産のなかでもとくに手間とお金がかかっているものです。
撮影の日を押さえて、什器を用意して、色を合わせて、ようやく1枚が仕上がります。
それが数秒でコピーされて別のサイトに並ぶ、というのは運営者にとってなかなかこたえます。

この記事は、当社(UnReact)が開発した Shopify アプリ「シンプル商品画像透かし|お手軽ウォーターマーク」の
操作画面をすべて開いて、設定項目を1つ残らず解説するものです。

紹介文で「位置や大きさを設定できます」と書くのは簡単ですが、実際に運用に乗せるときに気になるのは別のところです。
初期値は何か、どこまで細かく指定できるのか、間違えたときに引き返せるのか、途中で止まったらどうなるのか。
この記事ではそこまで書きます。画面に出ていない制約や、実装を読まないと分からない挙動も含めて並べました。

「シンプル商品画像透かし|お手軽ウォーターマーク」とは

商品画像そのものに、ロゴ画像またはテキストの透かしを焼き込む Shopify アプリです。
テーマにブロックを置いたり、Liquid を編集したりする必要はありません。
画像ファイル自体を差し替えるので、Shopify が商品画像を表示しているところには、すべて透かし入りの画像が出ます。

ストアの商品一覧に透かし入りの商品画像が並んでいる様子

できることは大きく4つです。

  • 透かしの中身を決める … ロゴ画像をアップロードするか、その場でテキストを打ちます
  • 見え方を決める … 位置・大きさ・傾き・透明度・繰り返し方を、プレビューで確かめながら決めます
  • まとめて適用する … 登録済みの商品画像に一括で焼き込みます。対象は全商品でも、選んだ商品やコレクションだけでも構いません
  • 元に戻す … 焼き込む前の写真へ差し戻します。元のファイルはストアに残してあるので、あとからでも戻せます

加えて、新しくアップロードした商品画像に自動で透かしを入れる設定もあります。
商品を登録するたびにアプリを開き直す必要がありません。

このアプリのメリット

焼き込む前に見え方を確認できる

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

ウォーターマーク設定の左に操作、右にプレビューが並んでいる管理画面

元画像を残しているので、いつでも戻せる

商品の画像を差し替える操作は、本来なら緊張します。間違えた状態が全商品に広がると、直すのは骨が折れます。
このアプリは元のファイルを消さず、商品との関連だけを外してストアのファイルに置いたままにします。
関連を付け直せば、元の写真がそのまま戻ります。
期限は設けていません。 半年後に思い直しても戻せます。

商品数や画像の枚数で料金が変わらない

商品画像の加工は、商品が増えるほど処理の量が増えます。そのため商品数で料金が段階的に上がる設計のアプリもあります。
このアプリは月額の定額制で、商品数や画像の枚数による追加料金がありません。
カタログが大きいストアほど、料金が読みやすくなります。

テーマを触らなくてよい

画像ファイルそのものを差し替えるため、テーマにブロックを追加する作業も、Liquid の編集も要りません。
テーマを変えても、商品ページでも一覧でも検索結果でも、同じように透かしが出ます。

このアプリのデメリット

正直に書きます。導入前に知っておいたほうがよい点が4つあります。

元画像は「非公開」にはならない

元の画像は商品から外れて表示されなくなりますが、ファイル自体はストアに残ります。
Shopify のファイルには非公開という仕組みが無いため、URL を知っている相手からは引き続き開けます。
管理画面にもその旨の案内が常に出ています。「表示されなくなる」であって「見られなくなる」ではない、という点はご理解ください。

処理中はタブを開いたままにする必要がある

一括適用と復元は、開いているタブが「少しずつ処理して、続きを頼む」を繰り返すことで進みます。
常駐する処理を持たない作りなので、タブを閉じたり別のページへ移ると処理が止まります。
ただし進み具合は保存されるので、次に開いたときに「再開」で続きから進められます。

一覧のサムネイルでは端の透かしが切れることがある

コレクションページの商品サムネイルは、テーマによって正方形に切り抜かれます。
画像の端に置いた透かしは、この切り抜きで見えなくなることがあります。
一覧でも必ず見せたい場合は、位置を「中央」にするか、配置を「敷き詰める」にしてください。

商品画像以外には入らない

対象は商品画像だけです。コレクションの画像、ブログ記事の画像、テーマに直接設定したバナー画像には透かしが入りません。

料金プラン

月額 7.99 ドルの定額制です。年額プランは 79.99 ドルで、2か月ぶんお得になります。
どちらのプランにも 7 日間の無料体験が付いています。

商品数・画像の枚数・処理した回数による追加料金はありません。
無料体験のあいだも機能の制限はないので、実際に自分のストアの商品画像で試してから判断できます。
気に入らなければ「元に戻す」で適用前の画像に戻せます。

インストール

Shopify 管理画面の左下にある「設定」から「アプリ」を開き、右上のアプリストアへ進むボタンをクリックします。
検索窓に「シンプル商品画像透かし」と入力すると見つかります。

Shopify App Store の検索窓

求められる権限は商品とファイル(画像)の読み取り・編集だけです。顧客情報や注文情報にはアクセスしません。
インストールすると、管理画面のサイドバーにアプリが追加されます。

詳しい導線は Shopify App Store のページからも確認できます。

アプリ管理画面の構成

管理画面は「設定」の1画面だけです。その中に、次の4つのカードが縦に並びます。

  • ウォーターマーク設定 … 透かしの中身と見え方を決めます
  • 既存カタログへの一括適用 … 登録済みの商品画像にまとめて焼き込みます
  • 元に戻す … 適用前の画像に戻します
  • 言語設定 … 管理画面の表示言語を切り替えます

画面の行き来がないので、上から順に読んでいけば設定が終わります。

アプリの設定画面。ウォーターマーク設定のカードが先頭にある

各画面の説明

ウォーターマーク設定

透かしの中身と見え方を決めるカードです。ここで決めた内容が、一括適用にも自動適用にも使われます。
設定はストアのメタフィールドに保存されるので、別の端末で開いても同じ内容が出ます。

カードの上には、次の案内が常に出ています。

元画像は商品やコレクションから表示されないようにしますが、画像のURLを直接知っている場合は引き続き閲覧できることがあります。

種類

透かしの中身を「ロゴ画像」にするか「テキスト」にするかを決めます。初期値はロゴ画像です。
選んだ方によって、下に出る入力欄が切り替わります。

切り替えると作りかけの透かしは破棄されるので、どちらを使うか決めてから中身を作ると、やり直しが減ります。

ロゴ画像

種類でロゴ画像を選んだときだけ出る、画像のアップロード欄です。
枠の中の「ロゴ画像を選択」から選ぶか、ファイルをドラッグ&ドロップします。
画面には「PNG形式(透過対応)を推奨します」と出ています。

背景が透明な PNG を使うと、商品写真の上に自然に重なります。白背景の JPEG を使うと、白い四角ごと乗ってしまうので注意してください。

種類にロゴ画像を選んだときに出る画像のアップロード欄

テキスト

種類でテキストを選んだときだけ出る入力欄です。入力例として「例: SAMPLE」が薄く表示されています。
欄の下には「お使いのブラウザのフォントで描画します。日本語も使えます。」と書かれています。

店名・ドメイン名・© ブランド名 のような短い文字列が向いています。
長い文章は避けてください。透かしは画像の幅に対する割合で拡大縮小するため、文字数が増えるほど1文字が小さくなって読めなくなります。

テキストの透かしを設定している管理画面とプレビュー

文字色

テキストの色を選びます。左の四角をクリックするとカラーピッカーが開き、右には選んだ色の16進数が出ます。
初期値は白です。

商品写真が明るい(白背景など)なら濃いグレーや黒、暗い写真なら白が読みやすくなります。
どちらの写真もあるストアでは、透明度を下げてグレー寄りの色にすると、背景の明るさに左右されにくくなります。

配置

透かしを何枚並べるかを決めます。初期値は「1箇所に表示」です。選べるのは次の4つです。

  • 1箇所に表示 … 1枚だけ置きます。位置の設定に従います
  • 横方向に繰り返す … 横一列に並べます。位置のうち上下だけが使われます
  • 縦方向に繰り返す … 縦一列に並べます。位置のうち左右だけが使われます
  • 敷き詰める … 画像全体に格子状に並べます。位置は使いません

控えめに入れたいなら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件ずつ外せます。

対象に選択した商品を選び、2件を選んだ状態

選べるのは 250 件までです。上限を超えると赤いバナーが出て実行できません。
これは選んだ内容の保存先に文字数の上限があるためで、上限を設けずに大量に選ぶと保存だけが黙って失敗することになるので、手前で止めています。
250 件を超えるときは、コレクションでまとめて指定するか、何回かに分けて実行してください。

また、一覧に並ぶのは先頭 20 件だけで、それ以降は「ほか N 件」とまとめて表示されます。
250 件すべてを並べると設定画面が延々と縦に伸びてしまうためです。

実行ボタンと進み具合

対象を決めたら、カードの一番下のボタンを押します。このボタンの文言は状況によって変わります。

  • 一括適用を開始 … まだ一度も実行していないとき
  • 再開 … 途中で止まっていて、続きがあるとき
  • 再度実行 … 前回の処理が最後まで終わっているとき

押せないときは、ボタンの上に理由が出ます。透かしの中身がまだ保存されていなければ「先にウォーターマーク設定でロゴを設定してください」、
未保存の変更が残っていれば「設定を保存してから、適用ボタンを押してください」と表示されます。

処理が始まると画面全体が覆われ、中央に進行中の表示と「中断」ボタンが出ます。
カードの中には進捗バーと処理件数が出ます。数えている単位は商品数で、画像の枚数ではありません。
1商品に5枚の画像があっても1件と数えます。

一括適用の実行中。画面全体が覆われ、中断ボタンが出ている

一括適用が完了し、処理した商品数が表示された状態

透かしを変えたときの確認

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

別の設定で適用済みの画像が見つかったときの確認バナー

選べるのは2つです。「新しい設定で適用し直す」を選ぶと、適用済みの画像も記録してある元の画像から作り直します。
「まだ適用していない画像だけに適用する」を選ぶと、適用済みの画像はそのままにして、まだ入っていない画像だけに入れます。

透かしを変えたのに見た目が変わらないときは、ここで後者を選んでいます。設定を全体に反映したいときは前者を選んでください。
なお焼き直しは、すでに焼き込んだ画像の上に重ねるのではなく、元の画像から作り直します。
重ね書きすると透かしが二重になり、本当の元画像に戻せなくなるためです。

タブを閉じると止まる理由

このアプリはサーバーに常駐する処理を持っていません。開いているタブが「少しずつ処理して、続きを頼む」を繰り返すことで一括適用を進めます。
1回のリクエストで扱うのは画像10枚、または45秒までで、そこまで進むといったん区切って次を呼びます。

そのためタブを閉じたり別のページへ移動すると処理は止まります。
ただし進み具合は保存されるので、次に開いたときは「再開」で続きから進められます。
商品数が多いストアでは時間がかかるので、画面を開いたまま待てるタイミングで実行してください。

元に戻す

焼き込んだ透かしを取り消して、適用前の画像に戻すカードです。

元の画像は削除しておらず、商品から外してストアのファイルに残してあります。
どの画像がどれの元画像なのかもアプリが記録しているので、リンクを付け直すことで元に戻せます。

元に戻すカードと言語設定カードが並んでいる管理画面

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

本当に元に戻しますかの確認バナーと、元に戻す・キャンセルのボタン

ここで「元に戻す」を押すと処理が始まり、「キャンセル」を押すと何もせずに閉じます。
処理中は「中断」で止められます。進み具合の見え方も、タブを開いたままにする必要があることも、一括適用と同じです。

戻せなかった商品があると、進捗の下に件数が出ます。これは失敗とは別に数えています。
元の画像をファイルから手で削除してしまった場合は、何度実行しても戻せないため、再試行の対象から外したうえで件数だけを出し続ける作りです。
こうしておかないと、何をしても減らない失敗件数が出続けて、壊れているのか仕様なのか判断できなくなります。

並び順も元に戻しますが、Shopify 側の処理が非同期なので、戻した直後は並び順がまだ変わっていないことがあります。
少し待ってから商品ページを開き直してください。

言語設定

アプリの管理画面の表示言語を変えるカードです。「言語を選択」で選び、「変更する」を押すと切り替わります。
日本語・英語のほか、ドイツ語・フランス語・スペイン語・中国語・韓国語など20言語に対応しています。

海外のスタッフと管理画面を共有しているストアでも、担当者ごとに読める言語で使えます。

おすすめアプリ

設定画面のいちばん下には、当社が提供しているほかの Shopify アプリを紹介する枠があります。
機能そのものとは関係がないので、閉じてしまって構いません。

ストアフロントでの見え方

画像ファイルそのものを差し替えるので、テーマの編集やブロックの追加は必要ありません。
適用が終われば、Shopify が商品画像を出しているところにはすべて透かし入りの画像が出ます。

透かしを焼き込んだ商品画像が表示されている商品ページ

別の商品ページでも同じ設定の透かしが入っている様子

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

コレクションページの商品一覧。サムネイルにも透かしが入っている

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

位置・大きさ・傾き・透明度を設定している画面

選んだ商品やコレクションに一括適用できることを示した画像

いつでも元の画像に戻せることを示した画像

コードで自作する場合

「透かしくらい自分で書けるのでは」と思われるかもしれません。実際、見た目だけなら Liquid と CSS で作れます。
ただし作れる範囲と、アプリがやっていることは別物です。ここでは2通りの自作方法を示し、それぞれ何が足りないかを書きます。

方法1: CSS で画像の上に重ねる

もっとも手軽なのは、商品画像の上に擬似要素で文字を重ねる方法です。
テーマの 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 を直接開けば元の写真がそのまま見えます。
つまり「画面上で薄く見えているだけ」で、転載対策としては効きません。

方法2: Canvas で画像を加工してから登録する

画像そのものに焼き込むなら、加工してからアップロードする必要があります。
ブラウザで完結させるなら 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 しています。

ここまでは自作できます。問題はこの先です。

  • 既存のカタログをどう処理するか … 商品が数百あれば画像は千枚単位になります。1枚ずつ手で差し替えるのは現実的ではありません
  • 元の画像をどう残すか … 差し替えたら元に戻せません。どの加工後画像がどの元画像に対応するかを、自分で記録しておく必要があります
  • 新しく追加した画像をどう検知するか … Shopify には「新しくアップロードされた画像」を示す仕組みがありません。既に処理したかどうかを自分で覚えておく必要があります
  • 処理の途中で止まったときにどうするか … 大量の画像を処理すると、実行時間の上限で途中で切れます。どこまで終わったかを記録して再開できるようにしなければなりません
  • 透過の有無で出力形式を変える … 常に PNG で書き出すと、写真ではファイルサイズが数倍に膨らみます。ストアフロントが重くなり、結果として売上に響きます

このアプリが実際にやっているのは、まさにこの5点です。
元画像と加工後画像の対応を商品ごとに記録し、処理を小さく区切って再開できるようにし、
元画像に透過が無ければ JPEG で書き出しています。
見た目を作るところまでは自作できますが、運用に耐える形にするまでの距離がかなりあります。

ほかの画像保護アプリとの使い分け

アプリストアには、画像を守るためのアプリがいくつかあります。
たとえば右クリックを無効にするアプリや、画像に不可視の識別子を埋め込むアプリ、
画像を配信するときに動的に加工するアプリなどです。

これらは「守り方」がそれぞれ違うので、併用したときの順番と設定の考え方を書いておきます。

右クリック無効化アプリと併用するとき

右クリック無効化は、保存の操作を面倒にするだけで、画像そのものは無傷です。
開発者ツールを開かれたり、URL を直接叩かれたりすれば取得できます。
このアプリと役割が重ならないので、併用できます。

併用するなら、先にこのアプリで透かしを焼き込んでから、右クリック無効化を入れてください。
逆にすると、透かしを入れる作業のあいだ画像を開くのが面倒になります。

画像を動的に加工するアプリと併用するとき

配信時に加工するタイプのアプリと併用する場合は、どちらか一方に寄せることをおすすめします。
両方が同じ画像を触ると、透かしが二重に入ったり、こちらの「元に戻す」で戻したはずの画像に
もう一方の加工が残ったりして、どちらが原因か分からなくなります。

もし併用を試すなら、まずこのアプリの自動適用をオフにしてください。
新しい画像が追加されるたびに両方が反応する状態を避けられます。

導入の順番として安全なやり方

ほかのアプリを入れている状態でこのアプリを試すときは、次の順序が安全です。

  1. まず自動適用をオフのままにして、対象を「選択した商品」にして数商品だけに適用します
  2. ストアフロントで見え方を確認します。商品ページと一覧の両方を見てください
  3. 問題があれば「元に戻す」で戻します。元画像は残っているので元どおりになります
  4. 納得できたら対象を「すべての商品」にして適用し、最後に自動適用をオンにします

いきなり全商品に適用しないことと、自動適用を最後に回すことがポイントです。
この順番なら、どの段階でも引き返せます。

運用に乗せてからよくある質問

実際に使い始めたあとで迷いやすいところを、いくつか先回りして書いておきます。

透かしを変えたくなったら、入れ直しになりますか。
なりません。設定を変えて一括適用をもう一度実行すると、記録してある元の画像から作り直します。
すでに入っている透かしの上に重ねるわけではないので、二重になったり濃くなったりしません。

商品を大量に追加したとき、自動適用が追いつきますか。
自動適用は商品ごとに動くので、追加した順に処理されます。
ただし反映まで少し時間がかかるため、追加した直後に商品ページを開くとまだ入っていないことがあります。
確実に入れたい場合は、追加が終わってから一括適用を1回走らせるのが確実です。

元画像を整理したくなったら消してよいですか。
消さないでください。元の画像を消すと、その商品は元に戻せなくなります。
アプリは「どの加工後画像がどの元画像に対応するか」を記録していますが、
ファイル自体が無くなってしまうと戻す先がありません。
戻せなかった商品は、失敗ではなく「戻せない件数」として画面に出続けます。

複数のスタッフで使えますか。
使えます。設定はストアに保存されるので、誰が開いても同じ内容が出ます。
言語設定だけはブラウザごとに保持されるため、担当者ごとに読める言語を選べます。

まとめ

「シンプル商品画像透かし|お手軽ウォーターマーク」は、商品画像そのものにロゴやテキストを焼き込むアプリです。
画面は設定1つだけで、上から順に読んでいけば設定が終わります。

この記事で見てきたとおり、透かしの見え方は配置・位置・繰り返しの間隔・大きさ・傾き・透明度の6つで決まります。
どれもプレビューで確かめながら決められるので、商品画像を触る前に結果が分かります。

そして運用で効いてくるのは、元画像を残していることです。
数商品だけに試して、気に入らなければ戻し、納得してから全商品に広げる、という進め方ができます。
画像を差し替える操作は本来なら緊張するものですが、引き返せるなら試せます。

料金は月額 7.99 ドルの定額で、商品数や画像の枚数による追加料金はありません。
7 日間の無料体験のあいだに、自分のストアの写真で実際に確かめてみてください。

アプリのページはこちらです。

商品画像に透かしを焼き込む Shopify アプリの紹介画像

おすすめ Shopify アプリ

当社では、ストア運営の細かい困りごとを1つずつ解決する Shopify アプリを提供しています。
画像まわり・表示まわりでよく使われているものを挙げておきます。

  • シンプル画像ビフォーアフター|お手軽イメージ前後比較 … 2枚の画像をスライダーで比較表示します。施術前後や加工前後を見せたいストア向けです
  • シンプル複数画像スライドショー|お手軽イメージカルーセル … 商品ページやトップに画像のカルーセルを置けます
  • シンプル画像ホットスポット|お手軽画像吹き出し … 画像の上に吹き出しを置いて、部位ごとの説明を足せます
  • シンプル右クリック禁止アプリ … 画像の右クリック保存を抑止します。透かしと役割が違うので併用できます

いずれも設定画面はシンプルで、テーマの編集なしで使えるように作っています。

© 2021 powerd by UnReact