Webサイトの画像保存を禁止する方法【完全に防ぐのは厳しい】

こんにちは。

ゆうや（@yuyaphotograph）です！

本記事では、Webサイトの画像保存を禁止する方法をご紹介します。

とは言っても、「スクリーンショット」があるわけなので完全に画像保存を防止することは現実的ではないかなと今回調べてみて分かりました（汗）

ただ、それでもクライアントに「右クリックでの画像保存をできなくして欲しいんだよね…!!」と言われてしまうと対応せざるを得ませんのでその時に活躍するTipを今回紹介します。

それでは参りましょう！

Webサイトの画像保存を禁止してみよう！

右クリックを禁止する（PC対策）

imgタグにCSSでpointer-eventsプロパティのnoneを指定してあげます。

サイト全体共通のスタイリングを書いたCSSファイルに以下のように記述してあげるといいと思います(^o^)

↓↓↓

img { pointer-events: none; }

このプロパティは「いいねボタン」や「送信ボタン」を指定秒数押せなくする際にも使えますよね！(^o^)

pointer-events:noneについてより深く理解したい方は、以下MDNの説明をご覧になって下さいまし。

値をnoneに設定すると、要素がポインターイベントのターゲットではないことを示すのに加え、ポインターイベントが要素を「通過」して、代わりに要素の「下」をターゲットにすることを指示します。

（MDNより引用）

個人的にはこの方法が最も楽ちんかなと思います笑

なんたって１行コード追加するだけで対応できるんですからね〜

以下、サンプルですので右クリックして確かめてみてくださいまし。

See the Pen
pointer-events by 石森裕也 (@yuyaphotograph)
on CodePen.

ドラッグ＆ドロップを禁止する（PC対策）

今回色々な方法を調べてみていく中で目から鱗だったTipsがこちらです。

まず、「ドラッグ＆ドロップでデスクトップに画像保存することができたんだ！？」という発見がありました笑

そんで本題に戻ると、ドラッグ＆ドロップを禁止するにはimgタグもしくはbodyタグに以下コードを直接追加してあげます。

<img src="画像のURL" onselectstart="return false;" onmousedown="return false;">

こちらもCodePenでサンプル作ったのでドラッグ＆ドロップして保存できないか確認してみてくだされ。

See the Pen
ドラッグ＆ドロップ禁止 by 石森裕也 (@yuyaphotograph)
on CodePen.

長押しを禁止する（スマホ対策）

最後はスマホの長押しで保存対策。

imgタグにCSSでtouch-calloutやuser-selectプロパティのnoneを指定してあげます。

img {
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -moz-touch-callout:none;
  -moz-user-select:none;
  touch-callout:none;
  user-select:none;
}

最後もサンプルで確認してみてくださいまし。

See the Pen
スマホ長押しで保存対策 by 石森裕也 (@yuyaphotograph)
on CodePen.

参考記事

目から鱗をどうもありがとうございました！

まとめ

以上、Webサイトの画像保存を禁止する方法をご紹介しました。

完璧に画像保存を禁止することは難しいなと思いました笑

最後までご高覧いただきありがとうございました！