【コピーガード】画像やテキストをコピーさせない方法を紹介します!

【コピーガード】画像やテキストをコピーさせない方法を紹介します!

takato(@n8takato)です!

webサイト上にあるテキストや画像をコピーさせない方法を知りたい

この記事では上記の課題を解決します。

web制作をしていると、「サイト上にある画像をコピーされない様に設定してほしい」と言われる事がたまにあります。

この間も言われたので、備忘録という意味も兼ねて記事にしました。

画像やテキストをコピー出来ないように設定したい方は読んでみてください。

この記事でわかること

  • 画像やテキストをコピー出来ない様にする方法
目次

画像やテキストをコピー出来ないように設定する方法

webサイト上にある画像やテキストをコピーさせない方法を紹介します。

画像とテキストで方法が異なるので、それぞれ説明します。

画像をコピーさせない方法

画像のコピーを防ぐには、画像上で右クリック出来ないように設定します。

画像の上で右クリックして保存しますよね。右クリック出来ない様に設定すれば画像のコピーを防ぐ事ができます。

JavaScriptで出来る

下記のコードを記入すると、画像上で右クリックが出来なくなります。

<script>
	$(function() {
	 $('img').on('contextmenu oncopy', function() {
	  return false;
	 });
	 $('img').on('dragstart', function (e) {
	  e.stopPropagation();
	  e.preventDefault();
	 });
	});
</script>

コードの記入場所

上記のコードは、HTMLファイルの<body>内に入力します。

<body>の一番下にscriptタグごと貼り付けてください。

画像の上で右クリックが出来ないか確認

上記コードを貼り付けたら、サイト上の画像で確認してみてください。

右クリック出来ない様になっていたら完成です。

テキストをコピーさせない方法

続いて、テキストをコピー出来ない様に設定する方法を紹介します。

テキストのコピーガードはcssを使います。

cssでコードを入力

下記cssコードでテキストのコピーガードを実装出来ます。

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

全体の文字をコピー出来ないように設定しています。

一部分の文字だけに変更したい場合は、クラス部分を変更してください。

テキスト上で選択出来ないか確認

サイト上でテキストを選択出来るか確認してみてください。

選択出来なければ実装完了です。

なぜコピー出来ないように対応する必要があるのか?

画像やテキストをコピー出来ない様にする方法を紹介しました。

でも、なぜコピー出来ない様に実装する必要があるのでしょうか?

下記の内容が考えられます。

  • 画像の無断使用を防止するため
  • コピーサイトの作成を防止するため

画像の無断使用を防止するため

保有する画像を無断で使用されたくない場合にコピーガードを使います。

  • 自社商品の画像
  • 自社の成果物の画像

これらの画像をサイト上に載せる場合、コピー出来ない様にする要望を頂くことがあります。

カメラマンに依頼して綺麗に撮影した画像を簡単にコピーされたくないという気持ちがある様です。

コピーサイトの作成を防止するため

テキストのコピーガードはコピーサイト作成の防止に繋がります。

コピーサイトとは?

悪質なSEOを目的としたサイト。SEOの評価を下げたいサイトの文章をコピーして、同じ文章の別サイトを作成する。Googleに類似性の高いサイトと認識させ、サイト全体の評価を下げさせること。

競合サイトの評価を落とす際に行うことが多いです。

コピーサイトを作成する際は、コピー元サイトのテキストをコピペして作成します。

テキストをコピーガードすることで、コピーサイトを作成するハードルを高めることが出来ます。

実際にクライアントから要望されたことがある

実際にコピーガードの要望を言われたことがあります。

実際に言われた要望

完成した商業ビルの画像を一般の人に使わせたくないので、コピー出来ない様に設定してほしい。

そこから内容を掘り下げ、「画像上で右クリック出来ない様にする」と定義して実装しました。

お客様次第な部分がある

こういう内容は必ず対応しなきゃいけないものではありません。

お客様に要望されたら対応するで基本OKです。

ただ、気にするお客様が一定数いるので、相談されたら対応できる様にしておきましょう。

スクショすればコピー出来てしまう?

既に気づいている人もいると思いますが、コピーガードは完全なものではありません。

コピーガードしても、スクショされたら画像のコピーが出来てしまいます。また、テキストも手入力されたらコピー出来てしまいます。

そのため、完全にコピーされない方法は無いことをクライアントに伝える必要があります。

とはいえ、右クリックやテキストの選択防止をするだけでもコピー作成率は低下します。なので、完璧ではないことを伝えた上でこれらの対応をすることで、クライアントの安心感が少し上がると思います。

完璧にコピーを防止出来ると伝えてしまうと、後にトラブルが発生する恐れがあります。

事前に伝えるようにしてください。

【最後に】クライアントによって対応する必要がある

最後にまとめです。

画像のコピーガード

  • 画像はJavaScriptで右クリックを防止することが出来る。

テキストのコピーガード

  • テキストはcssで選択を防止することが出来る。

コピーガードの注意点

コピーガードはコピーを完璧に防ぐことが出来る訳では無い。ただ、コピーガードを実装することでコピー率を減少することが出来る。実装する場合はクライアントに事前に説明することが大事。

以上がまとめです。

コピーガードは実装がとても簡単です。そのため、こちらから提案するのも良いかもしれませんね。クライアントからの信頼を少し獲得出来るかもしれません。

今日はこの辺りで終わります。コーディングに関する記事はこれからも書いていきます。是非読んでください。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次