コンテンツのコピーを禁止する方法について【画像編】

  • このエントリーをはてなブックマークに追加
コンテンツコピーを禁止する方法について【画像編】

完全には防げないが、ある程度の防御策は存在する

画像の無断利用・・・完全に防ぐ手段は、実のところありません。
画像ファイルを読み込めないようにしてしまうとブラウザにも表示できないので、それはできませんね。

画像を転載する方法として
1.右クリックから画像を保存する
2.画面からドラッグアンドドロップして保存する
3.画像のURLを直接読み込む

といったような手段があります。

これもまた文章のコピーを防ぐ手段と同じく、完全に防ぐ手段はありませんが、手間を増やす事で複製の発生を減らす事はできます。

1.右クリックを禁止する

右クリックからの画像の保存を禁止する方法です。
細かいことは以前の記事を参照してみてください。

コンテンツのコピーを禁止する方法について【テキスト編】

画像の上に透過画像をかぶせる

画像はブラウザ上からマウスを使い、ドラッグアンドドロップ操作で簡単にデスクトップやフォルダに保存する事ができます。
これは右クリックを封じてもコピーされてしまいます。

このドラッグアンドドロップによる保存を防ぐには、画像の上に透過画像をかぶせる方法で対策ができます。
具体的にはこんな感じ・・・

<div class=”imageBox”>
<span class=”cover”></span>
<img src=”[画像パス]”>
</div>
.imageBox{
  position:relative;
}
.cover{
  background:url(../img/cover.png);
  display:block;
  width:100%;
  height:100%;
  position:absolute;
  z-index:2;
}

positionを使って、上にspan要素をかぶせています。
span要素を使っていますが、空のHTML要素が嫌だという方は:beforeや:afterといった疑似要素を使うのもいいかもしれません。
これで保存をしようとしても、上に被さっている要素を選択してしまうのでドラッグアンドドロップで保存する事ができなくなります。

要素の背景に指定する

div要素などの背景画像に指定する方法です。
例えば

<div class=”image”>
<img src=”img/cover.png”>
</div>
.image{
  background:url(../img/image.jpg);
  width:300px;
  height:200px;
}
.image img{
  width:300px;
  height:200px;
}

こうしてあげることで、div要素の背景に画像が設定されます。
またimg要素として透過画像を設定しているので、ドラッグアンドドロップすると透過画像が保存されるという動作になります。

直接リンクへの対策は「.htaccess」で行う

.htaccessというファイルを作成してアクセスを制限する方法です。
指定したURLからのアクセスだけ許可するというような指定をしてあげることで、直接リンクされても画像ファイルへのアクセスを拒否する事ができるようです。
但しこれではGoogleなどの画像検索にヒットしなくなるというデメリットもあるので、安易に利用する事は勧められません。

画像の転載で発生する問題と使用前の要確認事項

Webサイトに掲載した画像が他のWebサイトに利用されるのは、あまり歓迎できることではありませんね。
著作権フリーで販売・配布されている画像素材であれば仕方ないですが、自分で撮影した写真を使われるのは著作権侵害にあたります。
写真やギャラリー系のWebページではよく問題になるケースかもしれません。

無料で使える写真素材は、使用するに耐えうる物は多くありません。
かなりの割合で「どこかで見たことがある気がする」素材がたくさんみつかります。
Webサイトに限らず、チラシなどでも「このモデルさん、著作権フリーで無料で配布されている素材だ」とか時々見つかります。
なかなかいいイメージが見つからないので、検索エンジンで「無料素材」とかで検索すると沢山出てくる中からつい使ってしまうのでしょう。

画像検索で出てきても、詳細は必ず確認する

「無料素材」とかで検索しても、その素材が無料である保証はありません。
恐らく「無料」と「素材」とう単語で検索がかかっているのでしょう。無料でなくても、素材というキーワードにかかり、いい評価を貰っているWebサイトであれば上位に出てくるかもしれません。
なので安易に「無料素材」で出てきた画像を使う事はせず、必ずWebサイトにアクセスし、利用条件を確認しましょう。

無断でなければ大丈夫なケースも多い

著作者自身があらかじめ「無断転載はご自由に」などの利用の許可を明示している場合や、著作者へ問い合わせて利用してもいいかを確認し、相手から直接許可を得る事ができれば利用する事ができます。
但し口頭で利用許可をもらっても、後々問題になるかもしれません。何かしら形に残すようにしておくといいでしょう。

また、著作権が消滅し「パブリックドメイン」となっている場合も著作者への許可が必要になりません。
著作権は作者の死後50年間は保護されるので、その後であれば著作権が消滅します(2017年9月時点)。
そうなれば著作物のコピーを作る事が自由にできるようになります。

著作権の保護期間は、国や作品などの様々な条件によって異なる場合があるので必ず確認するようにしましょう。
また今後著作権の保護期間を、著作者の死後70年に延長するような話も出ているので、今後はより慎重になる必要がありそうですね。

まとめ

画像を無断で使われることのないように防ぐにも、すり抜ける方法はいくつもあるので、完全に防ぐ事はできません。
ですが簡単に保存できないようにする事である程度の効果は出てきそうです。
こうした手段を講じると共に、Webサイト内で使用している画像の利用条件をどこかに記載しておく事も重要でしょう。

「無断」での転載は著作権侵害になり、違法行為です。
こちらも無断利用する側にならないよう、利用規約や確認などは一層注意するようにしましょう。

  • このエントリーをはてなブックマークに追加

CONTACTお問い合わせ

ホームページ制作に関するご質問などございましたら、
お気軽にお問い合わせください。

※ブログ記事に関するご質問はお答えしかねます。

TEL:0258-31-5005FAX:0258-37-7301

ホームページ制作やSEOのお悩みはぜひ弊社へご相談ください