HP画像フォルダの整理方法｜使用中・作業用・旧画像を安全に分ける

画像が増えると、どれがHPで使用中なのか、どれが作業途中なのか分かりにくくなります。

ただし、画像を急に移動するとHTMLやCSSの読み込み先が変わり、ページから画像が消えることがあります。最初にバックアップを取り、使用場所を確認しながら少しずつ整理します。

このページで分かること

HP用、Instagram用、作業用、旧画像の分け方
公開用画像の用途別フォルダ
安全な画像ファイル名の付け方
画像を移動したときのHTMLパス修正
削除前に確認すること

初心者向けのフォルダ構成例

AI活用サイト
├─ 公開用サイト
│  └─ images
│     ├─ cards
│     ├─ articles
│     ├─ diagrams
│     └─ common
│
├─ Instagram
│  ├─ chatgpt-plus
│  └─ hp-making
│
├─ 作業用
│  ├─ reference-images
│  └─ editing
│
└─ archive
   └─ previous-versions

一度にすべてを移動しないでください。最初にサイト全体をコピーしてバックアップし、関連するページと画像を一組ずつ整理します。

各フォルダの役割

images/cards

記事一覧のテーマカード、関連ページカードなど、一覧で使う画像を入れます。

記事一覧や関連ページで使うテーマカード画像をパソコン画面で示した説明図 — 記事一覧や関連ページで表示する、記事の表紙になる画像を保存します。

images/articles

記事本文の中で説明に使う画像を入れます。

記事本文で使う手順画像、説明画像、図解の役割を示した説明図 — 操作画面、手順写真、説明用画像など、記事の理解を助ける画像を保存します。

images/diagrams

DNS、FTP、画像パスなどを説明する図解を入れます。

DNS、FTP、画像パスの仕組みを初心者向けに示した図解画像 — 文章だけでは難しい仕組みや流れを、矢印や図で説明する画像を保存します。

images/common

ロゴや複数ページで共有する装飾画像などを入れます。

ロゴやアイコンなど複数ページで共通使用する画像の保存方法を示した説明図 — ロゴ、共通アイコン、背景や装飾など、複数ページで繰り返し使う画像を保存します。

1ページだけで使う画像は、原則としてimages/commonには入れません。ロゴや共通アイコンを削除・上書きすると、複数ページで画像切れが起きる可能性があります。

Instagram

Instagram投稿だけに使う画像をテーマ別に管理します。HPから読み込まない画像は公開サーバーへ送る必要がありません。

HPの記事内で使用しないInstagram投稿画像は、公開サーバーへ送る必要はありません。

作業用/reference-images

画像生成の参考にした画像や、比較用の資料を保存します。

画像生成の参考画像と比較資料を集めて選び、制作に活用する流れの説明図 — 完成画像ではなく、配色、構図、雰囲気の参考や比較に使う資料を保存します。

参考画像は完成画像ではありません。第三者の画像を公開記事へそのまま使用しないでください。

作業用/editing

編集中、確認中、まだ採用が決まっていない画像を保存します。

編集中、確認中、採用未決定の画像を比較し、決定後に移動する流れの説明図 — まだ公開が決まっていない画像を一時保存し、比較・修正・確認に使います。

採用が決まっていない画像を、公開用フォルダへ入れないでください。

archive/previous-versions

以前使っていた画像、不採用画像、差し替え前の画像を保管します。

以前使っていた画像、不採用画像、差し替え前画像を実写例で整理する説明図 — 削除せずに保管しておくことで、復元、比較、再利用がしやすくなります。

現在使用中の画像は移動しません。旧画像は削除ではなく保管します。

画像ファイル名の付け方

半角英数字の小文字を基本にする
単語の区切りにはハイフンを使う
空白を入れない
公開用画像では日本語ファイル名を避ける
画像の内容が分かる名前にする

例：

chatgpt-screen-guide-card.png
ffftp-upload-card.png
domain-registration-card.png

画像を移動したらHTMLのパスも直す

画像を images 直下から images/cards へ移動した例です。

変更前

<img src="../images/example.png" alt="">

変更後

<img src="../images/cards/example.png" alt="">

ファイルだけを移動してHTMLの src を直さないと、ブラウザは画像を見つけられません。CSSの background-image で使っている画像も同じように確認します。

画像を削除する前に確認すること

プロジェクト全体で画像ファイル名を検索する
HTMLの src から使われていないか確認する
CSSの background-image から使われていないか確認する
現在表示中の画像は削除しない
同じ名前の画像を確認せず上書きしない

使用中か分からない画像は削除せず、保留または previous-versions フォルダへ移して様子を確認します。

整理後の確認リスト

整理前のバックアップがある
公開用と作業用を分けた
移動した画像のHTMLパスを修正した
CSSで使う画像パスも確認した
PCとスマホで画像が表示される
使用不明の画像を削除せず保留した