ハウツー

AIに公開前チェックを依頼する方法

Webページをクライアントに共有する前に「見落としがないか不安」という場面は多い。AIに公開前チェックを依頼すると、HTMLのコード品質・情報漏洩リスク・表示崩れにつながるミスを短時間でスクリーニングできる。人間だけでは見逃しがちな点をAIの目線で拾ってもらう方法を具体的に解説する。

準備するもの

AIに公開前チェックを依頼するには、チェック対象のHTMLファイルのテキスト全文を用意する。画像や外部フォントはAIが読めないため、チェック対象は「HTMLとCSSのテキストコード」に限定される。AIが判断できないビジュアル面(色調・フォントの見た目)は別途人間が確認する前提で役割を分担する。

AIへ渡す前に「何をチェックしてほしいか」のリストを用意する。「①個人情報・社内メモのコメントアウト ②外部スクリプトの有無 ③リンクのhref属性が正しいか ④フォームのaction属性 ⑤metaタグのog:titleが社外公開に適切か」など観点を列挙してAIに渡すと、的外れなチェックで終わるのを防げる。

チェックに使うAIツールを決める。長いHTMLコードを貼り付けるにはコンテキストウィンドウが大きいツールが向いている。Claude(Anthropic)はコンテキスト長が大きくHTMLコードの一括貼り付けに対応しやすい。数万文字を超える場合はファイルを分割して複数回に分けてチェックを依頼する。

  • 相手がログインなしで開ける状態か確認する
  • PCとスマホで最低1回ずつ表示を確認する
  • 内部情報・個人情報・不要な外部送信が残っていないか見る
  • レビュー期限と修正時の差し替え方を決めておく

実際の手順

AIに以下の形式でチェックを依頼する。「以下のHTMLを公開前にチェックしてください。確認してほしい観点:(チェックリストを貼り付け)。問題があれば該当の行番号と問題内容を教えてください。(HTMLコードを貼り付け)」行番号での指摘はコードエディターで即座に修正箇所を見つけるのに役立つ。

AIからの指摘を受けたら、高リスク(個人情報・外部への不正送信)・中リスク(リンク切れ・og情報の不適切な内容)・低リスク(コードの書き方の改善提案)に分類する。高リスクは必ず修正し、中・低は時間と優先度に応じて対応を判断する。修正後に再度AIへコードを貼り付けて「修正後の確認」を行うと品質が上がる。

失敗しやすい点

AIへの依頼で観点を指定せずに「このHTMLをチェックして」とだけ聞くと、AIが自分の判断で重要度を決めてしまい、本当に確認してほしい「個人情報の漏洩リスク」ではなく「アクセシビリティ改善の提案」ばかりが返ってくることがある。チェック観点を具体的に列挙してから依頼するのが重要だ。

AIが「問題なし」と判断した箇所を完全に信用してしまうのも危険だ。AIはコードテキストを解析できるが、実行時の動作(フォーム送信先、JavaScriptの実際の挙動)は確認できない。AIチェックはあくまで「コードレベルのスクリーニング」として位置付け、ブラウザでの実機動作確認と組み合わせることで精度が高まる。

テンプレ文面

AIへの公開前チェック依頼プロンプト:「以下のHTMLを公開前にチェックしてください。特に次の観点で問題がないか確認をお願いします。①コメントアウトに社内情報・個人名・メモが含まれていないか ②外部へのデータ送信スクリプト(GA・フォームaction等)が適切か ③hrefリンクがhttps://または相対パスで正しく記述されているか ④og:titleとdescriptionが社外公開に適切な内容か。問題箇所は行番号つきで報告してください。」

AIからの指摘を受けたあとの修正確認依頼テンプレ:「指摘いただいた箇所を修正しました。修正後のコードを確認してください。特に○行目のXXXについて、修正方法が正しいかを確認してください。(修正後のコードを貼り付け)」修正内容と修正後のコードを同時に渡すことで確認が効率化する。

よくある質問

AIにHTMLをチェックさせると、コードが学習データとして使われますか?機密情報の含むHTMLを渡しても問題ありませんか?

利用するAIサービスのプライバシーポリシーによって異なる。Claude.aiのProプランでは送信したデータをトレーニングに使わないオプションが設定可能。機密情報を含む場合は必ずプライバシーポリシーを確認し、必要に応じて機密情報をダミーデータに置き換えてからAIに渡す方法を取る。

AIがチェックで「このコードは安全です」と言っても、自分では判断できない部分が不安です。どこまで信頼してよいですか?

AIのコードチェックは「コードテキストに書かれた内容の分析」に限定される。JavaScriptの実行時動作やサードパーティスクリプトの通信内容はAIには確認できない。外部スクリプトの安全性はブラウザのNetworkタブで実際の通信先を確認することで補完する。

HTMLが数万文字を超えていてAIに貼り付けられません。どうすればよいですか?

HTMLをセクションごとに分割して複数回チェックを依頼する方法が現実的。または`head`タグ内(metaタグ・script・link)と`body`タグ内を別々に貼り付けてチェックする。情報漏洩チェックに特化するなら、コメントアウトとscriptタグだけをgrepで抽出してAIに渡す方法も効率的だ。

関連記事

ハウツー

スマホ確認URLを送る方法

WebデザイナーやコーダーがスマホレビューURLを送る際の具体的な手順を解説。認証付きURLの作り方から、スマホ表示の事前確認方法、クライアントへの送付方法まで実践的にわかる。

4分で読める
ハウツー

Chrome/Firefox両方で確認依頼する方法

ChromeとFirefoxの両方でHTMLを確認してもらいたいWebデザイナー・ディレクター向けに、複数ブラウザ確認を依頼するURLの共有方法と依頼文の書き方を解説。ブラウザ差異によるトラブルを事前に防ぐ実践的な手順が身につく。

4分で読める
ハウツー

レビュー用URLをSlackで配る方法

Slackでレビュー用URLを共有したい担当者向けに、準備・送信・無効化の一連の流れを解説。どのチャンネルに何をどう送ればよいか判断できます。

3分で読める
ハウツー

レビュー用URLをTeamsで配る方法

TeamsでレビューURLを共有したい担当者向けに、チャンネル・チャット・会議チャットの使い分けと配布時の設定手順を解説。どの機能を使えばよいか判断できます。

4分で読める
「ハウツー」の記事をもっと見る →