Web制作では、画像のファイル名の付け方ひとつで「管理のしやすさ」「チームでの共有」「SEO」「保守性」が大きく変わります。
なんとなく名前を付けてしまうと、後から探せなくなったり、意図が分からなくなったりして、無駄な時間が増えてしまいます。
ここでは、実務で通用する画像の命名ルールについて整理します。
なぜ命名ルールが重要なのか
画像ファイル名は単なるラベルではありません。次のような役割があります。
・どのページの何の画像かを即座に判断できる
・チームメンバーが迷わず扱える
・検索エンジンに内容を伝えられる
・差し替えや修正が楽になる
特に案件が増えてくると、命名の良し悪しが作業効率に直結します。
基本ルール
英語で意味が分かる名前にする
「img01.jpg」「photo.png」のような曖昧な名前は避けます。
例
hero-bg
service-icon
staff-photo
見ただけで用途が分かることが重要です。
単語はハイフン区切りにする
Webではスペースや日本語を使わず、ハイフンで区切るのが一般的です。
理由は次の通りです。
・URLとして安全
・SEO的に単語が認識されやすい
・可読性が高い
小文字で統一する
大文字と小文字が混在すると、サーバー環境によっては別ファイルとして扱われることがあります。
トラブル防止のため、小文字に統一します。
よくある命名パターン
セクション名＋用途
hero-bg
about-image
contact-map
ページ構造と対応させると分かりやすくなります。
コンポーネント名＋番号
feature-01
feature-02
gallery-03
複数ある場合に有効です。
ページ名＋要素
top-hero
course-card
news-thumbnail
サイト全体で整理しやすくなります。
避けるべき命名
次のような名前は後で必ず困ります。
・スクリーンショットのままの名前
・日付だけの名前
・日本語ファイル名
・意味のない連番
短期的には楽ですが、長期的には負債になります。
SEOの観点
検索エンジンは画像ファイル名も参照します。
例えば「child-programming-class.jpg」のように内容が分かる名前にすると、画像検索での露出にも影響します。
ただし、キーワードを詰め込みすぎる必要はありません。
自然に内容を表すことが大切です。
チーム開発で決めておくべきこと
実務では次のルールを最初に決めておくと混乱しません。
・命名フォーマット
・番号の付け方
・どこまで詳細を書くか
・フォルダ構成との対応
ルールがないと、人によって書き方がバラバラになります。
実務でおすすめの考え方
最も重要なのは次の視点です。
「半年後の自分が見て理解できるか」
案件は必ず再修正が発生します。
未来の自分や別の担当者が迷わない名前にすることがプロの仕事です。
まとめ
画像の命名は地味ですが、制作全体の品質を左右する重要な要素です。
・意味が分かる英語
・ハイフン区切り
・小文字統一
・用途が伝わる名前
この4点を守るだけでも、現場でのストレスは大きく減ります。
細部に気を配る積み重ねが、結果的に効率と品質を高めます。
