アセット管理の落とし穴｜プロジェクト中盤で「あの画像どこ？」を防ぐ整理術

こんにちは！
今日は「アセット管理の落とし穴｜プロジェクト中盤で『あの画像どこ？』を防ぐ整理術」について解説します。

僕が経験した、アセット管理の大失敗

正直に話すと、僕も昔めっちゃ失敗しました。
プロジェクト開始時には、デザイナーさんから素材がバラバラのフォルダ構造で送られてくるんです。
/imagesフォルダの直下に「photo.jpg」「photo_v2.jpg」「photo_old.jpg」「photo_new.jpg」みたいな感じで、もう大混乱。

中盤に入ると、デザイナーさんから「あ、さっきのヘッダー画像の色を変えたバージョン送ります」ってなるんですけど、どのファイルが最新なんかもうわからへん状態やん。
結果的に、誤った古いバージョンをデプロイしちゃったことまであります。

その時に気づいたんです。「技術の問題じゃなくて、整理のルールがないのが問題や」って。
画像圧縮やフォーマット変換よりも大事なことが、アセットの整理・命名規則・バージョン管理にあるんだと。

プロジェクト開始時に決めるべき3つのルール

では、どうやって防ぐかというと、プロジェクト開始時に以下の3つをチーム全体で決めておくといいですよ。

ルール1：フォルダ構造を明確にする

/assets配下を、用途や使用箇所で分類します。
例えば、こんな感じです。

• /assets/images/header/ − ヘッダー画像
• /assets/images/hero/ − ヒーロー画像
• /assets/images/cards/ − カード用画像
• /assets/images/bg/ − 背景画像
• /assets/images/icons/ − アイコン（SVGなど）
• /assets/images/temp/ − 作業中・確認用（本番非使用）

ここで大事なのが、/tempフォルダをちゃんと作ることです。
デザイナーさんが試験的に送ってくるファイルとか、修正途中の素材は全部そこに入れてもらう。
最終的に使う素材は別フォルダに移動する、ってルールにするんです。

ルール2：命名規則を統一する

これがほんまに大事なんですけど、ファイル名の付け方をメンバー全員で統一するんです。
例えば、こんな感じ。

• 場所-要素-用途.拡張子
• 例：hero-main-sp.jpg（スマホ用ヒーロー画像）
• 例：card-product-thumbnail.jpg（商品カード用サムネイル）
• 例：header-logo-light.svg（ライトモード用ロゴ）

バージョン管理を入れたければ、接尾辞で管理するのもいいですよ。
header-nav-v1.jpg→header-nav-v2.jpgみたいな感じで。
ただし、最終版はvを取ってシンプルにします。header-nav.jpgだけが本番用、みたいな。

ルール3：ドキュメント化して共有する

ここまでのルールを、簡単なドキュメント（Notionやスプレッドシート）にまとめて、全メンバーに共有するといいです。
実装メモのような感じで、「このプロジェクトのアセット管理ルール」をまとめておく。
新しいメンバーが入った時も、それを見ればすぐ理解できます。

チームで共有すべき命名規則テンプレート

実際に僕たちが現場で使ってるテンプレートをちょっと紹介しますね。
これをプロジェクトの最初に全員で確認しておくと、中盤以降の混乱が激減します。

【アセット命名規則テンプレート】

• 画像ファイル名の構造： [ページ・セクション]-[要素]-[デバイス/用途]-[状態].拡張子
• 例1： top-hero-pc-v1.jpg（トップページのヒーロー、PC版、v1）
• 例2： service-card-thumbnail.jpg（サービスカードのサムネイル）
• 例3： header-logo-dark.svg（ダークモード用ロゴ）

ルール：

• すべて小文字。スペースは禁止。アンダースコアまたはハイフンで区切る
• PC・SP・タブレットなど複数デバイス版がある場合は明記
• 最新版は接尾辞なし。修正版は-v2など付ける
• 撤去予定の古いファイルは-oldを付けて、別フォルダに隔離

こうすることで、「あの画像どこ？」ってなった時、ファイル名を見るだけで「あ、これはスマホ用で、バージョン2なんだな」ってわかるんです。
めっちゃ効率が上がります。

まとめ

画像最適化やフォーマット変換も大事ですけど、プロジェクトが大きくなるほど、アセットの整理・命名規則・バージョン管理の方がずっと重要になってきます。
開始時に少し手間をかけるだけで、中盤以降の混乱が激減するんです。

ほんまは、アセット管理ツール（Zeplin、Figmaのアセットパネルなど）を使うのもいいですけど、まずは基本的なファイル整理のルールから始めるといいと思います。
チーム全員が同じルールで動くことが、何より大事なんですよ。