JavaScript

Webページの画像を守る！JavaScriptとCSSで右クリック＆ドラッグ保存を完全ガードする方法

  /

Webページを閲覧している際、気に入った画像を保存するために右クリックやドラッグ＆ドロップで画像を保存することがあります。しかし、サイト運営者にとって、画像の無断保存や使用は著作権の観点から問題となることがあります。そのため、画像を守るための対策として、JavaScriptやCSSを使用して、画像の右クリック保存やドラッグ＆ドロップを禁止する方法があります。

本記事では、JavaScriptとCSSを使ってWebページ上の画像を右クリックやドラッグ＆ドロップで保存できないようにする方法について詳しく解説します。初心者の方にもわかりやすいように、実際のコードを使いながら丁寧に説明していきますので、ぜひ参考にしてください。

Contents

右クリック保存、ドラッグ＆ドロップとは

まず、右クリック保存やドラッグ＆ドロップについて簡単に説明します。

  • 右クリック保存
    右クリック保存とは、Webページ上の画像やリンクなどを右クリックして表示されるコンテキストメニューから「名前を付けて画像を保存」などを選んで、コンピュータに保存する方法です。これは、Webブラウザの基本的な機能で、簡単に画像を保存する手段としてよく使われます。
  • ドラッグ＆ドロップ
    ドラッグ＆ドロップとは、画像やファイルをクリックしてそのまま別の場所（例えばデスクトップなど）に移動させて保存する方法です。この操作も一般的で、直感的な操作で画像を保存できるため、ユーザーにとっては非常に便利です。

しかし、これらの方法で簡単に画像を保存できるため、画像の無断使用や著作権侵害のリスクも高まります。これに対して、画像の右クリックやドラッグを無効にする方法が必要となるわけです。

どういうときに必要なのか

画像の右クリック保存やドラッグ＆ドロップを無効にする場面はいくつか考えられます。以下に代表的な例を挙げてみましょう。

  • 著作権の保護
    自分が撮影した写真や制作したイラストなど、オリジナルコンテンツをWebページで公開している場合、無断で使用されることを防ぎたいという場合があります。このようなケースでは、画像が勝手に保存されないように対策を講じる必要があります。
  • 販売画像の保護
    Eコマースサイトやオンラインギャラリーでは、高解像度の画像を表示していることがあります。これらの画像は商品そのものであり、無断で保存されることは事業に影響を与える可能性があります。このような場合も画像の保護が重要です。
  • セキュリティの観点
    画像に含まれる機密情報や、企業のプロジェクトに関連するデザインデータなどが外部に漏れないように、画像の保存方法を制限することが考えられます。

これらの理由から、画像の保存を制限する対策は多くのWebサイトにおいて重要な要素となります。

実際に右クリック保存や、ドラッグ＆ドロップ禁止ページを作ってみる

では、実際にWebページ上で画像の右クリック保存やドラッグ＆ドロップを禁止する方法について解説します。ここでは、CSSとJavaScriptを組み合わせて、ページ上の画像が保存されないようにする具体的な方法を紹介します。

CSSの記述

まず、CSSを使って画像が選択されたり、ドラッグされないように設定します。

<style type="text/css">
body{
  text-align: center;
  font-size: 16px;
}
h1{
  text-align: center;
  font-size: 32px;
  line-height: 1.6em;
  padding: 30px 0;
}
/* 画像がドラッグできないようにする */
img {
    user-drag: none; /* ドラッグ禁止 */
    user-select: none; /* 選択禁止 */
    -webkit-user-drag: none; /* Webkitブラウザ（ChromeやSafari）向け */
    -webkit-user-select: none;
    -moz-user-select: none; /* Firefox向け */
    -ms-user-select: none; /* IE向け */
    pointer-events: none; /* 右クリックや長押し禁止 */
}
</style>

このCSSは、画像に対してユーザーがドラッグや選択をできないようにします。user-dragプロパティは画像のドラッグを無効にし、user-selectプロパティは画像が選択されるのを防ぎます。

注意点:
pointer-events: none; を使用すると、画像に対してすべてのユーザー操作（クリック、タッチ、ドラッグなど）が無効になります。そのため、画像にリンクを設定したり、他のインタラクションが必要な場合には使えない点に注意が必要です。

HTMLの記述

次に、画像を表示するためのHTMLコードです。画像が複数あっても、CSSとJavaScriptによってすべてに同じ保護がかかります。

<h1>画像の右クリック保存やドラッグ＆ドロップを禁止してます。<br>以下の画像上で右クリック保存、ドラッグ＆ドロップを行ってみてください。</h1>

<div><img src="dummy1.jpg" alt="右クリック＋画像ドラッグ禁止"></div>

このHTMLコードは、3つの画像を表示しています。CSSとJavaScriptで保護されたページを実装するためのベースとなります。

JavaScriptの記述

次に、JavaScriptを使って、画像の右クリック保存やドラッグを無効にする方法を見ていきます。

<script type="text/javascript">
// 右クリックでの画像保存を禁止
document.addEventListener('contextmenu', function (event) {
    if (event.target.tagName === 'IMG') {
        event.preventDefault(); // 右クリックメニューを無効化
    }
});

// 画像のドラッグを禁止
document.addEventListener('dragstart', function (event) {
    if (event.target.tagName === 'IMG') {
        event.preventDefault(); // 画像のドラッグを無効化
    }
});
</script>
  • contextmenu イベントは、ユーザーが右クリックしたときに発生します。このコードでは、右クリックが IMG タグの画像上で行われた場合に、デフォルトの右クリックメニューが無効化されます。
  • dragstart イベントは、ユーザーが画像をドラッグしようとしたときに発生します。このコードは、ドラッグの動作を無効にするものです。
    これで、ユーザーが画像を右クリックして保存したり、ドラッグ＆ドロップして保存することができなくなります。

画像の右クリック保存やドラッグ＆ドロップを禁止するデモページ

以下のデモページで実際の動作を確認してみてください。

画像の右クリック保存やドラッグ＆ドロップを禁止するデモページ

その他の対応方法

1.CSSでの背景画像として表示する

img タグ自体を使用しない代替案として、CSSの background-image を使用することで、画像の保存を防ぐことができます。画像が img タグとして存在している限り、ブラウザの動作によって完全に制御できない場合があります。

HTML例
<div class="image-container"></div>
CSS例
.image-container {
    width: 300px;
    height: 200px;
    background-image: url('your-image.jpg');
    background-size: cover;
    background-position: center;
}

これにより、ユーザーは直接画像を右クリックや長押しで保存することが難しくなります。

2.オーバーレイを使った対策

画像の上に透明なオーバーレイを配置することで、直接画像を操作できなくする方法もあります。

HTML例
<div class="image-wrapper">
    <img src="your-image.jpg" alt="example image" />
    <div class="overlay"></div>
</div>
CSS例
.image-wrapper {
    position: relative;
    display: inline-block;
}

.image-wrapper img {
    display: block;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0); /* 透明なオーバーレイ */
    z-index: 1;
}

この方法では、オーバーレイが画像の上に透明で配置されるため、画像に直接触れることができず、長押ししても保存オプションが出てこなくなります。

これらの方法を試してみてください。特にCSSの background-image を使用した方法は、画像を保存する手段をかなり限定するため効果的です。

注意点

  • 完全な保護はできない
    この方法は、JavaScriptとCSSで基本的な保存操作を無効にするだけであり、完全な画像保護はできません。ユーザーはソースコードを確認したり、スクリーンショットを撮ったりすることで、画像を取得できる可能性があります。そのため、より厳密な保護が必要な場合は、透かしを入れるなどの追加対策を検討する必要があります。
  • ブラウザの違いに注意
    このコードは主に最新のブラウザで動作しますが、古いブラウザでは一部の機能がサポートされていない場合があります。特に、user-drag や user-select などのCSSプロパティは、すべてのブラウザで完全にサポートされているわけではありません。

まとめ

画像の無断保存や不正使用を防ぐために、JavaScriptとCSSを使って画像の右クリック保存やドラッグ＆ドロップを禁止する方法を紹介しました。この方法は基本的な保存操作を無効にするものですが、完全な保護策とは言えません。サイト運営者としては、画像に透かしを入れる、著作権情報を明示するなどの追加の対策も検討することが重要です。

このような対策をしっかりと行うことで、自分のコンテンツを守りながら、適切にユーザーに提供することができます。

　
※流用される場合は自己責任でお願いします。
　デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。

右クリック禁止 ドラッグ保存禁止
関連記事