Webサイト上の画像を完全にダウンロード不可にする方法はありません。
これは、表示されている時点でユーザーの端末に画像データが送信されているためです。
保存をしづらくする／抑止する対策はいくつかありますが、いずれも抑止効果は低く、かえってユーザー体験を損ねる可能性があるため、makeshopとしては推奨はしていません。
以下は、あくまで参考例として考えられる方法です。
導入可否や影響については、ショップ様ご自身の判断でご検討ください。
対策例（参考）
1. 右クリックを無効化する
JavaScript で右クリックメニューを無効化：
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
});
- 開発者ツール・スクリーンショット・スマホ長押しは防げません
- ユーザー体験を損ねる可能性があります
- 技術的な抑止力は弱めです
CSSで画像の右クリックを無効化：
img {
-webkit-user-drag: none;
user-select: none;
pointer-events: none;
}- リンク付き画像がクリックできなくなります
- スクリーンショットやキャッシュ取得は防げません
2. 透かし（ウォーターマーク）を入れる
- 画像自体にロゴやショップ名を半透明で埋め込む
- CSSで疑似要素として重ねる
＜CSS例＞
.image-wrap {
position: relative;
}
.image-wrap::after {
content: "© [ショップ名]";
position: absolute;
bottom: 10px;
right: 10px;
opacity: 0.5;
}ダウンロードされても無断利用を抑止できるので、ECではよく用いられる方法です。
3. 利用規約・注意書きの明示（法的抑止）
- 「画像の無断転載は禁止」と明記
- 著作権表記を表示
ダウンロード自体の禁止ではありません。
このほかに、画像を分割するといった方法も考えられますが、いずれも表示中の画像は最終的に取得されるため、完全な防止ではありません。「画像をダウンロードされても困らない状態を作る」という設計を検討してください。