articles＞coding

画像保存を禁止する方法

更新: 2026/4/1
まずはじめに:
前提として、画像保存を完璧に阻止する方法は存在しない。例えページ上での画像操作を無効化しても、（ここではあえて詳しくは書かないが）知識がある人に対してはあまり意味を成さない。そのため、ここでは一般利用者による画像保存が簡単にはできないようにする方法を紹介する。
実装方法:
以下のコードをコピペするだけ。
【CSS】
.protectimg {

  /*iOS版Safariにて、対象が長押しされた際に表示されるメニューを非表示にする（非標準だが一応書いておく）*/
  -webkit-touch-callout: none;
  
  /*主にSafariとChromeで、コンテンツの選択を禁止する（user-select: none; と同じ役割だが対応するブラウザが限定的。古いバージョンのブラウザ用に一応書いておく。）*/
  -webkit-user-select: none;
  
  /*コンテンツの選択を禁止する*/
  user-select: none;
  
  /*iOS版のChromeやSafariで、コンテンツのドラッグを禁止する（これも同じく古いバージョン用に一応書いておく）*/
  -webkit-user-drag: none;
  
  /*コンテンツのドラッグを禁止する*/
  user-drag: none;
  
  /*そもそもコンテンツ自体に触れられないようにする。
    画像をリンクやボタンにした際、機能しなくなるため個人的にはおすすめしない。画像を背景画像として設置する方法も同じ理由でおすすめしない。*/
  pointer-events: none;
  
}
【JavaScript】
// ▼class="protectimg"内の画像保存禁止
  
  
// PC: コンテキストメニュー非表示・ドラッグ・保存ショートカットを阻止
(() => {

  let lastTarget = null;
  
  document.addEventListener('mousedown', e => {lastTarget = e.target;});
  
  /*右クリックメニューを非表示*/
  document.addEventListener('contextmenu', e => {
    if (!e.target.closest) return;
    if (e.target.closest('.protectimg')) e.preventDefault();
  });
  
  /*ドラッグを禁止→ドラッグによる保存を禁止*/
  document.addEventListener('dragstart', e => {
    if (!e.target.closest) return;
    if (e.target.closest('.protectimg')) e.preventDefault();
  });
  
  /*キーボードショートカット Ctrl(Windows) または Cmd(Mac)+S を無効化*/
  document.addEventListener('keydown', e => {
    if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 's') {
      if (lastTarget && lastTarget.closest?.('.protectimg')) {e.preventDefault();}
    }
  });
    
})();
  

// スマホ: 長押しを検出してpreventDefault
document.querySelectorAll('.protectimg').forEach(img => {
  
  /*長押しを判定するためのタイマーを保存しておく変数*/
  let timer = null;
  
  /* 長押し開始の検出（touchstart） */
  img.addEventListener(
    'touchstart',
    e => {
      timer = setTimeout(() => {
        e.preventDefault();
      }, 500 /*500ms以上で長押し扱い*/);
    },
    { passive: false }
  );
    
  /*指を離した場合タイマーキャンセル*/
  img.addEventListener('touchend', () => {clearTimeout(timer); }, {passive: true});
    
  /*指が動いた場合タイマーキャンセル（スクロール操作への干渉を防ぐ）*/
  img.addEventListener('touchmove', () => {clearTimeout(timer);}, { passive: true });
    
});


// ▲class="protectimg"内の画像保存禁止
【HTML　body内】
<!--class="protectimg"を、imgタグに直接付けるのではなくテキストを含む親要素につけると、テキストコピーができなくなるので注意してください-->
<img src="画像url" alt="代替テキスト" class="protectimg">
【デモ①】画像を保存しようとしてみてください。長押ししてもメニューが表示されず保存できないはずです。
demo-img
【デモ②】リンク画像です。リンク機能を失わず、画像保存を禁止しています。
demo-img