---
title: "AIにZIP構成を整理させるときの手順と注意点"
description: "AIを活用してHTML/ZIPファイルの構成を整理したいWebデザイナーやAIツール利用者向けに、手順の流れと注意点を詳しく解説。AIとのやり取りで陥りやすいパスのズレや構成ミスを事前に防ぐ実践的な知識が得られる。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/how-to-ai-zip-structure-steps-note"
markdown: "https://giga-site.com/articles/how-to-ai-zip-structure-steps-note/index.md"
category: "ハウツー"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# AIにZIP構成を整理させるときの手順と注意点

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

> Source HTML: https://giga-site.com/articles/how-to-ai-zip-structure-steps-note
> Article index: https://giga-site.com/articles/index.md

## 準備するもの

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()の行を一覧で教えてください」と依頼すると修正箇所が特定できる。

## 関連記事

- [差し替え履歴をメモするときの手順と注意点](https://giga-site.com/articles/how-to-version-note-steps-note/index.md)
- [レビュー用URLをSlackで配るときの手順と注意点](https://giga-site.com/articles/how-to-slack-distribute-steps-note/index.md)
- [レビュー用URLをTeamsで配るときの手順と注意点](https://giga-site.com/articles/how-to-teams-distribute-steps-note/index.md)
- [メールで期限付きURLを送るときの手順と注意点](https://giga-site.com/articles/how-to-email-expiry-url-steps-note/index.md)
- [Notionに共有URLを貼るときの手順と注意点](https://giga-site.com/articles/how-to-notion-embed-url-steps-note/index.md)
- [Googleドキュメントに共有URLを載せるときの手順と注意点](https://giga-site.com/articles/how-to-google-doc-url-steps-note/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "AIにZIP構成を整理させるときの手順と注意点",
  "description": "AIを活用してHTML/ZIPファイルの構成を整理したいWebデザイナーやAIツール利用者向けに、手順の流れと注意点を詳しく解説。AIとのやり取りで陥りやすいパスのズレや構成ミスを事前に防ぐ実践的な知識が得られる。",
  "datePublished": "2026-06-25",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/how-to-ai-zip-structure-steps-note",
  "url": "https://giga-site.com/articles/how-to-ai-zip-structure-steps-note",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "ハウツー",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "AIが提示したmvコマンドを実行したらファイルが消えてしまいました。どうすればよいですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "mvコマンドは移動であり、宛先のパスが存在しない場合にファイル名が変わってしまうことがある。まず`find . -name '失われたファイル名'`で検索し別の場所にあるか確認する。見つからない場合はTimeMachineやDropboxなどのバックアップから復元する。作業前には必ずバックアップを取ることを推奨する。"
      }
    },
    {
      "@type": "Question",
      "name": "AIに整理を依頼したら「このファイルは不要です」と削除を提案されました。本当に削除してよいですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "AIが削除を提案するのは、HTML内から参照されていないファイルを「不要」と判断した場合が多い。削除前に本当に参照がないかをHTMLファイルのgrep検索で確認する。`grep -r 'ファイル名' *.html`で参照がなければ削除しても安全だが、確認前の削除は避ける。"
      }
    },
    {
      "@type": "Question",
      "name": "AIがCSS内のパスも修正が必要と言っています。CSS内のパスとはどこにありますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "CSSファイル内の`url()`関数で指定している背景画像やフォントのパスが該当する。例：`background-image: url('../images/bg.jpg')`。整理によってフォルダ階層が変わると相対パスが壊れる。AIに「CSSの修正が必要なurl()の行を一覧で教えてください」と依頼すると修正箇所が特定できる。"
      }
    }
  ]
}
```