AIにZIP構成を整理させる方法

準備するもの

まずAIが生成したファイルを全部一つのフォルダに集める。この段階では構成の整理は不要で、全ファイルが揃っているかだけを確認する。「index.html」「style.css」「images/」フォルダ等、最低限必要なファイルのリストをAIに質問して洗い出すと、不足しているファイルに気づきやすい。

AIにZIP構成を依頼するには、現在のフォルダ構成をテキストで書き出してAIへ渡す。Macの場合はターミナルで`find . -type f`を実行すると全ファイルのパスが一覧表示される。このテキストをコピーしてClaude等のAIに「この構成でギガサイト便に上げるための正しいZIPを作るには、どうフォルダを整理すればよいか教えてください」と質問する。

AIに渡すコンテキストとして「ZIPのルートにindex.htmlを置き、相対パスでCSS・画像を参照する構成にしたい」という目的も一緒に伝える。目的を伝えないとAIが汎用的なアドバイスを返すだけで、具体的な移動手順を教えてくれないことがある。

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

実際の手順

AIから「この構成に直してください」という指示が届いたら、ファイルマネージャーまたはターミナルでフォルダを整理する。整理後にWebブラウザのローカルでindex.htmlをダブルクリックして開き、CSS・画像が正常に読み込まれているかを確認する。ローカルで正常ならZIPに圧縮してギガサイト便にアップロードする。

ZIPを作るときはMacの「圧縮」機能を使う場合、フォルダを右クリック→「フォルダを圧縮」を選ぶ。ただしこの方法だとZIP内に`__MACOSX`フォルダが含まれてしまう。これが原因でWebサーバーが混乱するケースがあるため、`zip -r output.zip . -x "*.DS_Store" -x "__MACOSX"` のようなターミナルコマンドでZIPを作る方が安全だ。

失敗しやすい点

最も多い失敗は「ZIPのルート直下にindex.htmlがない」構成だ。AIがフォルダごとZIPすると、ZIPの中に`project/index.html`という形になり、ギガサイト便がindex.htmlを見つけられない。AIに「ZIPを解凍したときにindex.htmlが最上位に来る構成にしてください」と明示して依頼することで防げる。

画像ファイルの相対パスが壊れるパターンも頻発する。AIがHTMLで`../images/logo.png`と書いているのに、実際のZIP内には`images/logo.png`しかない場合などだ。整理後に必ずローカルブラウザで全画像が表示されるかをチェックし、表示されない画像があればパスを修正する。

テンプレ文面

AIへのZIP構成整理依頼プロンプト例：「以下は私のプロジェクトのファイル一覧です。ギガサイト便にZIPをアップロードして公開するため、ZIPを解凍したときにindex.htmlがルートに来る構成に整理してください。フォルダ構成の変更手順と、HTML内のパス修正が必要な箇所を具体的に教えてください。（ここにfindコマンドの出力を貼り付ける）」

整理結果を確認するためのAI確認プロンプト例：「整理後のZIPを解凍したフォルダ構成は以下です。ギガサイト便でHTMLが正常に表示されるか確認してください。問題があれば修正点を教えてください。（整理後のfindコマンド出力を貼り付ける）」