トラブルシュート

ZIP内の日本語フォルダ名が読めない問題をAI生成HTMLで防ぐプロンプト

AIでHTMLプロジェクトを生成させるとき、フォルダ名やファイル名に日本語が混入してしまいZIPを展開した相手が文字化けに悩むケースがあります。プロンプトの一言で日本語ファイル名を排除できるため、この記事では具体的な指示文と生成後の確認手順を紹介します。

よくある原因

AIは指示がない限り、ユーザーの言語(日本語)でフォルダ名やコメントを書いてしまうことがあります。「リソースフォルダ」「スタイル」「画像」といった日本語ラベルをそのままディレクトリ名として採用したファイル構造を提案するケースが散見されます。

AIがMarkdownでフォルダツリーを提示した後にファイルを個別に出力するワークフローでは、提示されたツリーのフォルダ名をユーザーが手動でフォルダを作って再現します。この際に日本語名をそのまま使ってしまい、後でZIP化してギガサイト便にアップすると文字化けが起きます。

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

自分側で確認すること

AIが出力したフォルダ構造のサジェスト(Markdownのツリー表記など)を受け取ったら、日本語を含むフォルダ名が一つもないかをスキャンします。日本語が含まれていた場合は即座に「フォルダ名は全て英字小文字とハイフンのみにしてください」と追加指示して修正させます。

AIが出力したHTMLファイルの中にも、日本語のパスが記述されていないかを確認します。テキストエディタで全文検索を使い、srcとhrefに続くパスを重点的に確認してください。日本語文字が含まれるパスを発見した場合は英字変換を行います。

  • HTML内の外部script・form action・iframeを確認する
  • APIキーやトークンらしき文字列がないか検索する
  • 画像・CSS・JSのパスが公開後も解決できるか見る
  • noindexと認証を混同せず、必要なら両方設定する

相手側で確認すること

受け取った側でZIPを展開したとき、フォルダ名が文字化けして表示された場合は送り手へ報告してもらいます。その際に「OSとZIP解凍ソフトも教えてください」と伝えると、原因が解凍ソフト側にあるのか、ZIP自体の問題なのかが切り分けやすくなります。

AI生成HTMLを受け取ってリビューする担当者がいる場合、リビューチェックリストに「フォルダ名・ファイル名が英数字のみか」という項目を追加します。送り手側で見落としても受け取り側で発見できるダブルチェック体制を作ると、ギガサイト便へのアップロード前に修正できます。

  • HTML内の外部script・form action・iframeを確認する
  • APIキーやトークンらしき文字列がないか検索する
  • 画像・CSS・JSのパスが公開後も解決できるか見る
  • noindexと認証を混同せず、必要なら両方設定する

再発防止の運用

AIへのプロンプトテンプレートを社内で管理し、「全てのフォルダ名とファイル名は英字小文字・数字・ハイフンのみを使用し、日本語・スペース・特殊文字は一切使わないこと」という文を必ず含めるようにします。この一文をテンプレート先頭に置くだけで大半の問題を防げます。

生成されたZIPを初めてギガサイト便にアップロードする前に、ローカルのLinux環境(WSL2やDockerでも可)に展開して文字化けがないかを確認する手順を標準化します。本番公開後に問題が判明するよりも、事前確認で修正する方が工数が少なくて済みます。

  • HTML内の外部script・form action・iframeを確認する
  • APIキーやトークンらしき文字列がないか検索する
  • 画像・CSS・JSのパスが公開後も解決できるか見る
  • noindexと認証を混同せず、必要なら両方設定する

よくある質問

AIに英字ファイル名を指示しても日本語に戻ってしまう場合の対処法はありますか?

会話の最初のシステムプロンプト(カスタム指示)に追加すると効果的です。毎回のメッセージで言い直すよりも、カスタム指示に「ファイル名は必ず英字のみ」と固定しておく方が一貫した出力が得られます。

AIが提案したフォルダ構造の日本語名をまとめて英字に直すコマンドはありますか?

bash上ではrenameコマンドで正規表現による一括リネームができます。WindowsはPowerShellのRename-Itemを使って非ASCII文字を検出してリネームするスクリプトを走らせると素早く対処できます。

AI生成HTMLのフォルダ名命名規則をLinterで自動チェックできますか?

bashスクリプトかGitのpre-commitフックでfindコマンドを使って非ASCII文字を含むパスを検出する仕組みを作れます。huskyと組み合わせるとGitコミット時に自動で検出できます。

関連記事

「トラブルシュート」の記事をもっと見る →