アセット管理の落とし穴｜画像フォルダが迷宮化する前にやっておくべきこと

#アセット管理 #ファイル整理 #フロントエンド #プロジェクト効率化 #画像管理
アセット管理の落とし穴｜画像フォルダが迷宮化する前にやっておくべきこと
C
クリオ
Web制作ディレクター / フロントエンジニア

こんにちは！

今日は「アセット管理の落とし穴」について解説します。
正直、これまでの画像最適化の記事よりも、めっちゃ大事な内容やと思ってます。

僕が経験した「画像フォルダ地獄」の失敗談

正直に打ち明けると、僕も最初の頃はアセット管理を舐めてました。
プロジェクトの初期段階では「とりあえず/imagesフォルダに全部放り込もう」くらいの感覚で進めてたんです。
その時は案件も小さかったし、納期も短かったから気づかなかったんです。

でもプロジェクトが成長してくると、もう地獄ですよ。
3ヶ月経った時点で、フォルダ内に画像が200個以上。
image1.png、image2.png、image_old.png、image_new.png…もう何が何やら。
デザイナーから「あのヘッダーの背景画像を50pxカットして」なんて言われた時、どの画像のことかわかりませんでした。

後輩に「ファイルがどこにあるか探すのに30分かかった」って言われた時は、ほんま反省しました。
それ以来、「プロジェクト開始時点でのアセット管理こそが、すべての効率を左右する」って確信したんです。

なぜアセット管理が最初から大事なのか

画像圧縮やWebP化だけが最適化じゃないんです。
むしろ、アセットを「見つけやすく」「修正しやすく」「スケーラブル」に管理することが、長期的な効率化につながるんですよ。

具体的には以下みたいな良さがあります。

  • 重複ファイルを発見しやすくなる（無駄なファイルサイズが減る）
  • 修正時に「どの画像を更新すべき」か一目でわかる
  • 新しいメンバーがオンボーディングしやすい
  • デザイン変更時のバージョン管理が楽
  • 納品後のメンテナンスが圧倒的に簡単

特に「新しいメンバーがわかりやすい」ってとこがめっちゃ重要です。
僕の現場でも、アセント構成がしっかりしてると、オンボーディング期間が3日くらい短くなるんですよ。

実践的なフォルダ構成とネーミング規則

では、実際にどうやって整理するのか。
僕が現場で使ってる構成を紹介します。

基本的なフォルダ構成

プロジェクトルート配下に/assetsフォルダを作って、その下を役割ごとに分ける感じです。

/assets
  /images
    /hero          （ヘッロー画像など大きな背景）
    /icons         （アイコン、SVGはここに）
    /ui            （ボタン、バナー、カード画像など）
    /illustrations （イラスト素材）
    /photos        （写真素材）
    /logo          （ロゴ、ブランドアセット）
    /temp          （テスト用、一時的な画像）
  /fonts
  /videos         （必要に応じて）

ポイントは「用途」で分けることです。
「大きさで分ける」（small、medium、large）みたいなのは避けたほうがいいですよ。
リサイズしたら分類が変わってしまうから。

ネーミング規則

ファイル名も重要です。
僕がよく使うルールはこんな感じ。

  • 小文字のみ使う
  • スペースは使わない（アンダースコア_かハイフン-で繋ぐ）
  • 「何か」「どこに」「バージョン」の順

例えば、ヘッダーのロゴならlogo-header-v1.png。
サービス紹介セクションのメイン画像ならservice-main-hero-v2.png。
こうすると、ファイル名から「何の画像か」「どこで使ってるか」が一瞬でわかります。

そしてめっちゃ大事なのが「バージョン管理」。
v1、v2って付けることで、修正前後を区別できるんです。
古いファイルを即削除せず、一定期間残しておくと、「あ、やっぱり前のデザインの方が良かった」って時に役立ちます。

ドキュメント化も忘れずに

フォルダ構成を決めたら、README.mdまたはASSET_GUIDE.mdみたいなファイルをプロジェクトルートに置いておくといいですよ。
「このフォルダにはどんなファイルが入ってるか」「ネーミングルールは何か」を明記しておくと、チーム全体が迷いません。

チームで使える管理ツールとワークフロー

フォルダ構成が決まったら、実際の運用をどうするか。
ここで便利なツールやワークフローを紹介します。

Figmaのアセットパネルを活用する

デザイナーと協働してる案件なら、Figmaのアセットパネルと連携させるのがおすすめです。
Figmaで管理されたコンポーネント・アセットに対して、エクスポート時に「どのフォルダに出力するか」を指定できるんです。
そうすることで、デザイナーが出力した画像が勝手に正しいフォルダに入るようになります。

Gitで変更管理する

アセットもGitで管理してる案件も多いです。
ただし、バイナリファイルが大量にあるとリポジトリが重くなるので、Git LFSを使うといいですよ。
git lfs installで初期化してから、.gitattributes*.png filter=lfsみたいに指定するだけです。

自動削除スクリプトで古いファイルをクリーンアップ

時間が経つと、使われなくなった画像が溜まっていくんです。
僕の現場では、3ヶ月以上参照されていないファイルをリストアップするスクリプトを定期実行してます。
完全に削除する前に「これ本当に使ってない？」って確認する時間を作ってから、削除するようにしてます。

アセット監査チェックリスト

月に一度くらいの頻度で、こんなチェックを入れるといいですよ。

  • ネーミング