アセット管理で失敗しない「フォルダ構成の設計」と命名規則｜現場で使える実践テクニック

こんにちは！

今日は「アセット管理で失敗しない、フォルダ構成の設計と命名規則」について解説します。

フォルダ構成が雑だと起きる問題

僕も昔、プロジェクト初期段階でフォルダ構成を適当に作ってしまって、大変な目に遭いました。
画像ファイルがあっちこっちに散らばってて「あ、この画像どこにあるんだろう？」みたいなことが日常茶飯事。
特に複数人で開発するときは、ほんま大変やんです。

フォルダ構成が雑だと、こんなことが起きやすいんですよ：

• 画像がどのフォルダに入ってるか分からなくなる
• 同じ画像が複数箇所に重複して存在する
• 新しいメンバーが加わったときに、ファイルの置き場に困る
• 画像更新時に「どれを修正したらいい？」ってなる
• ビルドプロセスで画像がきちんと圧縮されない

これらの問題は、プロジェクト初期段階で「ちゃんとしたルール」を決めておくだけで、めっちゃ回避できるんですよ。
今からでも遅くないので、一緒に整理していきましょう。

実践的なフォルダ構成の設計方法

まず大事なのは「目的別」にフォルダを分けることです。
画像圧縮やWebP対応を考えると、フォルダの役割を明確にしておくと、後の工程がスムーズになります。

僕が現場で使ってる基本的な構成がこれです：

project/
├── src/
│   ├── assets/
│   │   ├── images/
│   │   │   ├── common/          # ロゴ、アイコンなど共通要素
│   │   │   ├── hero/            # ヒーローバナー
│   │   │   ├── products/        # 商品画像
│   │   │   ├── icons/           # SVGアイコン集
│   │   │   └── illustrations/   # イラスト素材
│   │   ├── fonts/               # フォントファイル
│   │   └── videos/              # 動画ファイル
│   ├── styles/
│   ├── scripts/
│   └── index.html
└── public/
    └── assets/                   # ビルド後の最適化済み画像

このポイントは「使用目的」でグループ分けしてるってところです。
ロゴはロゴ、商品画像は商品画像、アイコンはアイコンで分けとくと、後でまとめて処理しやすいんですよ。

特に大事なのが/iconsと/illustrationsの分け方です。
アイコンはSVGで管理して、イラストはPNGやWebPで管理するみたいに、「フォーマット別」にも分けるといいですよ。

それからね、プロジェクトが大きくなると、さらに細かく分けることもあります：

images/
├── hero/
│   ├── desktop/     # デスクトップ用（大サイズ）
│   ├── tablet/      # タブレット用（中サイズ）
│   └── mobile/      # モバイル用（小サイズ）
├── products/
│   ├── thumbnail/   # サムネイル（小）
│   ├── detail/      # 詳細ページ用（大）
│   └── temp/        # 作業中・未使用ファイル
└── social/          # OGP画像など

「あ、このデスクトップ用の画像を圧縮したい」って時に、パッと見つけられるんで、生産性がめっちゃ上がります。

画像・アイコンの命名規則で統一感を出す

フォルダ構成と同じくらい大事なのが「ファイル名の付け方」です。
これ、チーム開発ではほんま重要なんですよ。

僕が推奨してる命名規則はこんな感じです：

• すべて小文字で統一する
• スペースは使わず、ハイフンで繋ぐ
• 用途-内容-サイズ.拡張子の形式
• 同じ画像の異なるサイズには@2xみたいなサフィックスを付ける

具体例を挙げるとこんな感じです：

• hero-main-desktop.jpg
• product-card-thumbnail-sm.webp
• icon-menu-24px.svg
• illustration-summer-season.png
• button-cta-hover@2x.png

このルールのメリットは、ファイル名だけで「どの画像か」「どのサイズか」「対応デバイスは？」ってのが一目瞭然になることです。

あと、アイコンに関しては特に重要なんですが、SVGで統一してicon-[機能名]-[サイズ].svgみたいにすると、JavaScriptで一括処理するときに便利になります。

実は僕、以前はicon1.svgicon2.svgみたいに番号付けしてて、後から「あ、この32pxのアイコンってどれ？」ってなったことあります。
それ以来、ちゃんと説明的な名前を付けるようにしてます。

あとね、テンポラリーファイルや作業中のファイルは、ちゃんと分けておくことをお勧めします。
/tempフォルダを作っとくと、「あ、これは使ってない」ってのがすぐ分かるんで、定期的にお掃除もしやすいですよ。

まとめ

画像最適化やWebP対応って、テクニカルな部分ばっかり注目されるんですけど、実は「管理体制」が整ってないと、その効果が発揮できないんですよ。
フォルダ構成と命名規則は、プロジェクト初期段階で時間をかけて整備する価値があります。

特に複数人で開発するときは、このルールがあるだけで、ほんまにやり取りが減ります。
「あ、画像はどこに置きました？」「ファイル名の規則は？」みたいなチャットが激減するんで、開発スピードも上がりますよ。

ポイントをおさらいしておくと：

• フォルダは「使用目的」で分ける
• さらに「デバイス別」「サイズ別」で細分化する
• ファイル名は小文字・ハイフン区切りで統一
• 用途-内容-サイズみたいな説明的な名前を心がける
• テンポラリーは/temp