※この記事にはプロモーションが含まれています
ホームページに掲載したオリジナル画像やコンテンツをダウンロード・コピペさせないようにしたい、と思うことはありませんか？
僕はココナラでWEB制作ランキング1位を100回以上獲得し、300件以上の制作実績を持つWebクリエイターですが、クライアント様から「せっかく素晴らしいオリジナル画像を作れたのに、他の人に盗用されて困っている」「コンテンツを簡単にコピペされたくない」という要望をいただくことがあります。
特に、ブランディングサイトやネットショップではオリジナルのコンテンツや画像が重要な役割を果たしているため、無断転載やコピーが及ぼす影響は少なくありません。画像の転用は、ブランドイメージの低下につながりますし、テキストのコピペは、検索エンジンでの評価への悪影響に繋がる可能性も考えられます。こうしたリスクは、あらかじめ軽減しておきたいですよね。
この記事では、そんな方に向けて、僕が実際に現場で使っているホームページのコンテンツを保護するための具体的な方法をわかりやすくご紹介します。完全な防止は難しいものの、ちょっとした工夫を加えるだけで、大切なコンテンツをより安全に守ることが可能です。どうぞ最後までお付き合いくださいね！
目次
なぜコンテンツ保護が求められるのか？
ホームページのコンテンツ保護は、いくら著作権法があるとしても、ＳＮＳなどに流出すれば簡単に管理できるものではありません。また、作り方によっては、画像や文章、動画などのオリジナルコンテンツ自体が価値を持つこともあります。こうした大切なコンテンツが無断でコピーされたり、他サイトに転載されたりすることで、いくつかのリスクが生じることを考えておくべきでしょう。
SEO（検索エンジンの評価）への影響
検索エンジンはオリジナルコンテンツを高く評価するため、ホームページに記載した文章を無断コピーされた場合、自サイトの評価が下がる可能性があります。さらに、コピーコンテンツが他のサイトで多く掲載されると、重複コンテンツとみなされ、検索結果から除外されるリスクもあるのです。
哀しいのは、自分のサイトがオリジナルであっても、信頼性が高く影響力の強いＷＥＢサイトだと、自サイトが重複コンテンツとみなされること。もちろん、キャプチャをとられて、文字起こしされれば防ぎようがないのですが簡単にコピペさせないことは、一定の防壁とはなるでしょう。
ブランドイメージの低下
あなたのサイトがブランディングとして、プロのカメラマンにとった凄い画像を掲載していたり、ネットショップで一点物のオリジナル商品画像を使っている場合、それを他のサイトで見かけたユーザーは「どちらが本物か？」と混乱してしまうかもしれません。認知度の高いブランドであればまだしも、僕らのような小規模事業者で認知度の低いスモールビジネスにおいて、オリジナルの基盤はもろいものです。
画像コンテンツが特徴的であるほどブランドイメージに直結するため、無断コピーが及ぼす悪影響は考慮しておくべきでしょう。文章コンテンツ同様、キャプチャをとられれば、防ぎようがないのですが、ダウンロードやコピペをさせないようにすれば、抑止力になります。
サイト運営のコストや手間の増加
簡単に無断コピーを放置してしまうと、運営側で削除依頼や再発防止策にリソースを割かざるを得ません。となれば、貴重な時間やコストを消耗することにつながります。それは必要なことかもしれませんが、生産性のない仕事です。事前に対策を講じることで、こうした手間を劇的に減らし、本来のサイト運営やコンテンツ制作に集中できるメリットがあるといえるでしょう。
このように、コンテンツを守ることは、サイトの評価やブランドの信頼性を保つために欠かせません。
基本のコンテンツ保護対策
それでは、ホームページで手軽に実施できる「基本のコンテンツ保護対策」をご紹介します。これらの対策を組み合わせることで、第三者による無断コピーやダウンロードのリスクを減らすことが可能です。
右クリックの無効化
右クリックで表示されるメニューから「画像を保存」や「コピー」を選択されるのを防ぐために、右クリックを無効化する方法です。ワードプレスサイトであれば、プラグインを導入するだけでもできますが、簡単なコードで実装可能なので、サイト構築に少しでも慣れた方はコードを書いた方が良いでしょう。
JavaScriptで右クリックを無効化する
以下のコードを、テーマのfunctions.phpに追加して出力するか、テーマのフッターやヘッダーに直接書き込むことで、サイト全体で右クリックを無効化できます。
function disable_right_click_js() {
echo '
<script type="text/javascript">
document.addEventListener("contextmenu", function(event) {
event.preventDefault();
});
</script>';
}
add_action('wp_footer', 'disable_right_click_js');
プラグインを使用する場合は「Disable Right Click for WP」をインストールするだけで、右クリック無効化が可能です。
テキストの選択とコピーの無効化
テキストの選択やコピーを無効化することで、ページ内の文章が簡単にコピーされるのを防ぎます。この方法もCSSを使って実装可能です。
以下のコードをCSSファイルに書き込んでください。ワードプレスサイトの場合、外観＞カスタマイズ＞追加CSSに記述すればOKです。
body {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}画像のダウンロード防止
画像の上に透明な画像を重ねる方法や、画像のドラッグを禁止するコードを追加することで、画像の保存ができなくなります。
これもワードプレスサイトの場合、プラグインを使用する手もありますが、CSSに簡単なコードを記述するだけでも実装できるので、コードを書いた方がおすすめです。
CSSで画像のダウンロードを禁止する
以下のコードをCSSファイルに書き込んでください。ワードプレスサイトの場合、外観＞カスタマイズ＞追加CSSに記述すればOKです。
img {
pointer-events: none;
-webkit-user-drag: none;
user-drag: none;
}プラグインを使用する場合は「Right Click Images Plugin」をインストールすると、画像の右クリックやドラッグを簡単に無効化できます。
サーバー側でのアクセス制限（.htaccess）
さらに強力な対策として、サーバーの.htaccessファイルを使って、特定のディレクトリへのアクセスを制限する方法もあります。これにより、画像フォルダなどへの直接アクセスがブロックされ、画像のダウンロードが難しくなります。
.htaccessファイルに以下のコードを追加すれば、画像フォルダへのアクセスを制限できます。
<FilesMatch "\.(jpg|jpeg|png|gif)$">
Order Deny,Allow
Deny from all
</FilesMatch>これらの基本的な対策方法を取り入れることで、ホームページのコンテンツをより安全に守ることができます。
さらに強力にコンテンツ保護をしたい場合
WordPressサイトで、コンテンツをさらに強力に保護したい場合、右クリックを無効化して「画像の保存」や「コピー」などの操作を防ぐことができます。以下に、JavaScriptコードを使って、右クリックの無効化と、右クリック時に警告メッセージを表示する方法をご紹介しておきますね。
右クリックを無効化し、警告文を表示させる
先ほどご紹介したコードは、ページ全体で右クリックを無効にするコードでしたが、それを以下のコードに置き換えると、右クリックを無効化しつつ、警告メッセージを表示できます。
テーマのfunctions.phpやfooter.phpに追加してください。
function disable_right_click_js() {
echo '
<script type="text/javascript">
document.addEventListener("contextmenu", function(event) {
event.preventDefault();
alert("当サイトではコンテンツ保護のため右クリック操作が無効になっています。");
});
</script>';
}
add_action('wp_footer', 'disable_right_click_js');
こうすれば、ユーザーに対しコンテンツの保護意図を伝えながら、コピーや保存を試みる行動を効果的に抑制できます。
コンテンツ保護の限界
こうした対策を講じることで、ホームページの画像や文章コンテンツを守ることはできますが、残念ながら「完全な防止」は難しいのが現実です。ここでは、その理由について説明しておきますね。
ブラウザのデベロッパーツールの存在
たとえ右クリックを無効化しても、ブラウザに搭載されているデベロッパーツールを使えば、ユーザーはHTMLやCSS、JavaScriptコードを直接確認できるため、画像やテキストにアクセスできてしまいます。デベロッパーツールを使えば、ページ内の画像URLやテキストが簡単に見つかり、コピーが可能になるため、ウェブ技術の仕組み上、完全な保護は難しいのです。
スクリーンショットの取りやすさ
また、画面に表示されている内容は簡単にスクリーンショットとして保存できます。画像のドラッグや保存を禁止しても、表示されている情報は視覚的に保存されてしまいます。スマートフォンやタブレットでのスクリーンショットも簡単に行えるため、画像やテキストの無断使用を100％防ぐことはできません。
コピー防止の目的：ハードルを高くする
こうした限界があるため、コンテンツ保護の本当の目的は「ハードルを高くする」ことにあります。無断コピーを試みるユーザーに対して「ここでは簡単にコピーできない」と感じさせるだけでも、多くの不正コピーを抑止することはできるでしょう。また、正規の手順で利用したいユーザーにとっても、安心して利用できる環境が整います。
このように、コンテンツ保護はあくまで「防ぐための工夫」であり、少しでも安全にコンテンツを提供するための手段です。
コンテンツや画像をダウンロード・コピペできるようにするメリット
逆に、コンテンツや画像をダウンロード・コピペできるようにしておくことにも、いくつかのメリットがあります。特にユーザー体験やマーケティングの観点から、その利便性が有効に働く場面が多いので、コンテンツ保護のメリットデメリットも併せて検討してみてください。
ユーザーエクスペリエンスの向上
ダウンロード可能なコンテンツや画像は、ユーザーにとって利便性が高く、サイト利用の満足度が上がると考えられます。たとえば、当社のように、プログラミング言語を紹介している場合、コピペできないと、意味がありません。上記のコードをコピペできなければ、利便性が損なわれますし、ストレスですよね。
シェアや拡散の促進
もうひとつ、ダウンロード可能な画像やコピペ可能な文章コンテンツは、ユーザーが他の人と共有しやすくなります。するとSNSやメールなどで気軽に共有できるので、自然とコンテンツの拡散が進み、WEBサイトそのものや、ブランドの認知度アップに貢献してくれるかもしれません。特にユニークな画像や、オリジナルの資料は、SNSでのシェアを期待できます。
ブランドイメージや信頼性の向上
ブランドイメージを損なうリスクと同時に、WEBサイトやブランドへの信頼感が高まり可能性があることをお伝えしておきます。当社もそうですが、専門的な情報や独自のデザイン素材を意図的に提供することで「このサイトは役立つ情報を提供してくれる」という印象をユーザーに持ってもらいやすくなり、ブランドの信頼性が向上します。そうなると、WEBサイトに繰り返し訪れてくれるようになりますから、ユーザーとの継続的な関係構築を期待できます。
SEO効果の向上
SEO効果についてもマイナス面だけではありません。重複コンテンツとみなされるリスクはたしかに考えられるのですが、記事数やページ数が多ければ、そのリスクは分散されます。そもそも影響力の強いサイトが、自サイトのすべてのコンテンツをコピーして、転用することは考えにくいですよね。
そうしたリスクを考慮するよりも、サイト運用をしていくのであれば、良いコンテンツを量産して、被リンクを獲得することを目指す方が建設的です。被リンクとは、他のサイトから、この記事を参考にしてください、といったように他のWEＢサイトやＳＮＳなどに自サイトのURLを記載してもらうことで、SEO評価に大きな影響を及ぼします。その被リンクの質、つまり、影響力の強いサイトからのリンクや、公共性、権威性の高いサイトからのリンクは、ＳＥＯ対策として、効果大なのです。
ちなみに当社ではこれらの理由により、コンテンツ保護はしておりません。
まとめ
ホームページのコンテンツ保護は、ブランドの価値を守り、サイトの信頼性を高めるために重要な対策です。しかし一方で、コンテンツや画像をダウンロードできるようにすることにも大きなメリットがあります。ユーザーエクスペリエンスを向上させたり、コンテンツのシェアを促進したり、WEBサイトの成長やマーケティング効果も期待できます。
ブランディングサイトや、画像が重要な役割を担うネットショップなど、コンテンツ保護の対策が戦略上、必要なときにのみ、目的に応じて最適な設定を行うべきかなと思っています。