ハウツー

AIにZIP構成を整理させるときの手順と注意点

AIを使ってZIPのフォルダ構成を整理するとき、手順を間違えるとAIが出力したコードと実際のファイル配置が食い違い、ブラウザで表示されないという事態になる。整理前の現状把握から整理後の検証まで、一つひとつの手順で何を確認すべきかを押さえておくと、AIの指示に従っても崩れないZIPを作れる。

準備するもの

AIにZIP構成の整理を依頼する前に、現状のフォルダを整理の対象から外すべきファイルと、含めるべきファイルに仕分けする。`.DS_Store`、`node_modules/`、`.git/`フォルダは公開用ZIPに含めてはいけない。特に`node_modules/`を含んだままZIPを作ると数百MBになりアップロードが失敗する。

AIに渡す情報として「現在のファイル一覧」「目的(ギガサイト便での公開)」「index.htmlのありかと想定するURL構造」の3点を揃える。この3点が揃っていれば、AIは具体的な移動手順と修正が必要なパスの一覧を正確に出力できる。情報が不完全だと抽象的なアドバイスしか返らない。

整理作業で使うツールをあらかじめ決めておく。ターミナルが使える場合はmvコマンドで高速にファイルを移動できる。使えない場合はFinderのドラッグ&ドロップで対応するが、その場合はAIからの指示をFinderで実行できる表現(「Xフォルダ内のlogoファイルをYフォルダへ移動」等)に変換してもらうとよい。

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

実際の手順

まずターミナルで対象フォルダに移動し、`find . -not -path './.git/*' -not -name '.DS_Store' -type f`を実行してファイル一覧を取得する。この出力をそのままAIに貼り付け、「ギガサイト便に上げるための構成に整理してほしい」と依頼する。AIが返した整理手順(ファイル移動コマンドのリスト)をターミナルで順番に実行する。

整理が完了したらローカルブラウザでindex.htmlを開き、DevToolsのNetworkタブでステータスコードを確認する。200以外のコードが出ているリソースは読み込みに失敗している。404はパスミス、その他のエラーは別原因だ。問題があればAIにエラーメッセージを渡して修正指示を求める。問題がなければZIPを作ってギガサイト便にアップロードする。

失敗しやすい点

AIが出力した「mvコマンドのリスト」をそのままターミナルで実行したとき、一部のコマンドが失敗していても気づかずに作業を続けてしまうケースがある。コマンドをまとめて実行するのではなく、1行ずつ実行してエラーが出ていないかを確認しながら進めると安全だ。シェルスクリプトとして実行するなら`set -e`を先頭に書いてエラー時に即停止させる。

ZIPを圧縮したあとに「追加で1ファイル修正したい」という状況になって、ZIPを解凍・修正・再圧縮する手間が発生することがある。修正が完全に終わってからZIPを作る順序を徹底し、途中でZIPを作り直す回数を減らすことで作業効率が上がる。AIに依頼する前に「この内容で最終版か」を確認するステップを明示的に設けよう。

テンプレ文面

AIへのZIP整理依頼プロンプト(手順重視版):「以下のファイル一覧を見てください。ギガサイト便(ZIPをアップするだけでHTMLが公開できるサービス)向けに、フォルダを整理してZIPを作るための手順を教えてください。ターミナルコマンドで手順を示してください。また、HTML/CSS内でパスの修正が必要な箇所も一覧で教えてください。(ファイル一覧を貼り付ける)」

整理後の検証依頼プロンプト:「整理後に`find . -type f`を実行した結果が以下です。ローカルでindex.htmlを開いたところNetworkタブで以下のリソースが404になっています。(エラー一覧) 原因と修正方法を教えてください。」

よくある質問

AIが提示したmvコマンドを実行したらファイルが消えてしまいました。どうすればよいですか?

mvコマンドは移動であり、宛先のパスが存在しない場合にファイル名が変わってしまうことがある。まず`find . -name '失われたファイル名'`で検索し別の場所にあるか確認する。見つからない場合はTimeMachineやDropboxなどのバックアップから復元する。作業前には必ずバックアップを取ることを推奨する。

AIに整理を依頼したら「このファイルは不要です」と削除を提案されました。本当に削除してよいですか?

AIが削除を提案するのは、HTML内から参照されていないファイルを「不要」と判断した場合が多い。削除前に本当に参照がないかをHTMLファイルのgrep検索で確認する。`grep -r 'ファイル名' *.html`で参照がなければ削除しても安全だが、確認前の削除は避ける。

AIがCSS内のパスも修正が必要と言っています。CSS内のパスとはどこにありますか?

CSSファイル内の`url()`関数で指定している背景画像やフォントのパスが該当する。例:`background-image: url('../images/bg.jpg')`。整理によってフォルダ階層が変わると相対パスが壊れる。AIに「CSSの修正が必要なurl()の行を一覧で教えてください」と依頼すると修正箇所が特定できる。

関連記事

ハウツー

差し替え履歴をメモするときの手順と注意点

静的HTMLページの差し替えを繰り返す担当者向けに、差し替え履歴を記録する手順・バージョン命名のルール・差し替え通知のタイミングと注意点を実務ベースで解説します。

4分で読める
ハウツー

レビュー用URLをSlackで配るときの手順と注意点

Slackでレビュー用URL配布時のミスに悩む担当者向け。送信前チェックから修正版の再送まで、つまずきやすい注意点を段階的に解説。次のレビュー依頼から即実践できます。

4分で読める
ハウツー

レビュー用URLをTeamsで配るときの手順と注意点

TeamsでレビューURL配布時の手順ミスや注意点に悩む担当者向け。チャンネル設定の確認方法から再送時の対応まで、具体的な注意点をステップ順に整理しています。

4分で読める
ハウツー

メールで期限付きURLを送るときの手順と注意点

メール依頼でのレビューが期限内に返ってこない、URLが開けないというトラブルに悩む担当者向け。手順の各ステップで起きやすい問題と対処法を具体的に整理しています。

4分で読める
ハウツー

Notionに共有URLを貼るときの手順と注意点

Notionにレビュー用URLを貼る手順と注意点を実務目線でまとめた記事。「相手が開けない」「情報が漏れた」を防ぎたいWebデザイナーや制作会社の担当者が、確認すべき項目と失敗しやすいポイントをひと通り把握できます。

4分で読める
ハウツー

Googleドキュメントに共有URLを載せるときの手順と注意点

Googleドキュメントに共有プレビューURLを貼る際の具体的な手順と、見落としやすい注意点を解説した記事。クライアントへのデザイン確認依頼を担うWebディレクターや制作担当者が、送付ミスやアクセス不能トラブルを事前に回避するための判断材料が得られます。

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