---
title: "外部リンクをクリック不可にして見せるためのチェックリスト"
description: "HTMLプレビューの外部リンクをクリック不可にして共有する作業を抜け漏れなく進めたいディレクター・デザイナー向け。全工程をチェックリスト形式でまとめた実践ガイドです。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/how-to-disable-external-links-checklist"
markdown: "https://giga-site.com/articles/how-to-disable-external-links-checklist/index.md"
category: "ハウツー"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 4
---
# 外部リンクをクリック不可にして見せるためのチェックリスト
「リンクを押せないようにして共有したい」というニーズは制作現場でよくあるものの、いざやってみると確認漏れや設定ミスが起きがちです。このチェックリストでは、外部リンクをクリック不可にしてHTMLを安全に共有するまでの全工程を、見落としやすい項目も含めて一覧化しています。確認しながら進めるだけで完了できる構成です。
> Source HTML: https://giga-site.com/articles/how-to-disable-external-links-checklist
> Article index: https://giga-site.com/articles/index.md
## 準備するもの
まず共有対象のHTMLファイルを手元に用意し、テキストエディタで開いて``タグの位置を確認します。CSSの追記作業は1〜2分で終わりますが、ファイルが複数ある場合は対象ファイルを事前にリストアップしておくと作業漏れを防げます。
送付先（クライアント・上司・外部パートナーなど）がログインなしでURLを開けるか、共有サービスの設定を確認します。パスワード保護を使う場合はパスワードを別ルート（Slackや電話）で伝える手順を決めておきましょう。レビュー期限と差し替え時の連絡フローもこの段階で合意しておくと後が楽です。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
## 実際の手順
チェックリストの核心は「適用→確認→送付」の3ステップです。①HTMLの``内に外部リンク無効化CSSを追記、②ローカルブラウザでリンクが押せないことを確認、③共有サービスにアップロードしてプレビューURLを取得、④自分のブラウザでURLを開いて再確認、⑤クライアントにURLと注意事項を送付—この順番を飛ばさないことが重要です。
CSSの追記は`a[href^='http']{pointer-events:none;cursor:not-allowed;}`が最小構成です。チェックリストとして「絶対URLのみ対象か」「プロトコル相対URLも含めたか」「JavaScriptリンクの動作確認済みか」の3点を確認欄として持っておくと、チームで作業を引き継ぐ際にも安全です。
アップロード後は、PCとスマートフォンの両方でURLを開いて動作を確認します。特にAndroidのChromeとiOSのSafariは挙動が異なる場合があるため、実機チェックを省略しないようにしましょう。
## 失敗しやすい点
チェックリストで最も見落とされるのが「修正後の再確認」です。初回確認後にデザインを修正してHTMLを書き出し直すと、CSSの追記が消えてしまうことがあります。修正ファイルをアップロードする前に必ず`grep 'pointer-events'`等でCSSが残っているか確認する習慣をつけましょう。
もう一つは期限切れURLのチェックです。共有サービスによっては一定期間後にURLが失効します。クライアントが古いURLを再度開こうとしたとき「404になった」という問い合わせが発生しやすいため、期限が近づいたら延長するか別URLに誘導する旨を事前に伝えておきましょう。
## テンプレ文面
送付メール例：「以下のURLよりデザインをご確認いただけます。ページ内の外部リンクはレビュー用に無効化しています。確認期限：〇月〇日（〇）。修正依頼はこのメール返信またはコメントツールにてお知らせください。」この文面をチェックリストのテンプレとして保存しておくと毎回の文章作成が不要になります。
差し替えが発生した場合の連絡例：「先ほどのURLに修正版を反映しました。URLに変更はありません。再度ご確認をお願いします。」バージョン管理の混乱を防ぐため、差し替え日時を件名に入れる（例：「v2 2024-06-25」）のもおすすめです。
## よくある質問
### チームで共同作業するとき、CSSの追記をどう管理すればよいですか？
専用のreview-override.cssファイルを作成し、HTMLに``で読み込む形にすると、本体HTMLを汚さずに管理できます。レビュー用ファイルとしてgitignoreに追加しておくと本番誤混入も防げます。
### 複数ページあるHTMLサイトの場合、すべてのページに個別対応が必要ですか？
共通CSSファイルを全ページが読み込んでいる場合は、そのCSSファイル1か所に追記するだけで全ページに適用されます。ページごとにCSSが分かれている場合は各ファイルへの追記が必要なため、ビルドスクリプトで自動挿入する方法が効率的です。
### 外部リンクを無効化したことをクライアントに気づかれずに済みますか？
opacity変更など見た目を変えなければ気づかれにくいですが、信頼関係の観点から「レビュー用に無効化しています」と明示する方が後々のトラブルを防げます。意図を隠すよりも正直に伝えるのが長期的な信頼につながります。
## 関連記事
- [外部リンクをクリック不可にして見せる方法](https://giga-site.com/articles/how-to-disable-external-links-method/index.md)
- [外部リンクをクリック不可にして見せるときの手順と注意点](https://giga-site.com/articles/how-to-disable-external-links-steps-note/index.md)
- [フォームを無効化して共有するためのチェックリスト](https://giga-site.com/articles/how-to-disable-form-before-share-checklist/index.md)
- [レビュー用URLをSlackで配るためのチェックリスト](https://giga-site.com/articles/how-to-slack-distribute-checklist/index.md)
- [レビュー用URLをTeamsで配るためのチェックリスト](https://giga-site.com/articles/how-to-teams-distribute-checklist/index.md)
- [メールで期限付きURLを送るためのチェックリスト](https://giga-site.com/articles/how-to-email-expiry-url-checklist/index.md)
```json
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "外部リンクをクリック不可にして見せるためのチェックリスト",
"description": "HTMLプレビューの外部リンクをクリック不可にして共有する作業を抜け漏れなく進めたいディレクター・デザイナー向け。全工程をチェックリスト形式でまとめた実践ガイドです。",
"datePublished": "2026-06-25",
"dateModified": "2026-06-25",
"mainEntityOfPage": "https://giga-site.com/articles/how-to-disable-external-links-checklist",
"url": "https://giga-site.com/articles/how-to-disable-external-links-checklist",
"inLanguage": "ja",
"image": "https://giga-site.com/og-image.png",
"articleSection": "ハウツー",
"author": {
"@type": "Organization",
"name": "ギガサイト便"
},
"publisher": {
"@type": "Organization",
"name": "ギガサイト便"
},
"mainEntity": [
{
"@type": "Question",
"name": "チームで共同作業するとき、CSSの追記をどう管理すればよいですか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "専用のreview-override.cssファイルを作成し、HTMLに``で読み込む形にすると、本体HTMLを汚さずに管理できます。レビュー用ファイルとしてgitignoreに追加しておくと本番誤混入も防げます。"
}
},
{
"@type": "Question",
"name": "複数ページあるHTMLサイトの場合、すべてのページに個別対応が必要ですか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "共通CSSファイルを全ページが読み込んでいる場合は、そのCSSファイル1か所に追記するだけで全ページに適用されます。ページごとにCSSが分かれている場合は各ファイルへの追記が必要なため、ビルドスクリプトで自動挿入する方法が効率的です。"
}
},
{
"@type": "Question",
"name": "外部リンクを無効化したことをクライアントに気づかれずに済みますか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "opacity変更など見た目を変えなければ気づかれにくいですが、信頼関係の観点から「レビュー用に無効化しています」と明示する方が後々のトラブルを防げます。意図を隠すよりも正直に伝えるのが長期的な信頼につながります。"
}
}
]
}
```