ざっくり画像命名ルール

プログラミング学習サービスやら、ペットサロン予約サービス、風俗検索サービスなど色々とやっている「かずきち」です。
■運営サービス一部
http://crazy-wp.com/
http://webukatu.com/
新宿のホストから不動産・保険の営業を経て、HTMLって何？という状態から３ヶ月独学でプログラミングやデザインを学び、IT業界で１年間実務経験を積んで年収は１本超え。現在は起業家としてサービス運営やら不動産運営をしています。
Qiita内にそれ系の記事も書いてます。
エンジニアで稼ぐために大切な１３のコト
WEBサービスで起業したい人に読んで欲しい１８のコト

画像ファイル名の付け方

ファイル名をつける時の前提条件

１．画像ファイル名だけで画像内容の想像がつくこと
２．流用箇所が増えてもファイル名を変更する必要がないこと

命名規則

モジュール名_機能名_状態名.拡張子

##モジュール名
モジュール名は「どんなオブジェクトか」を表す。イラストが描かれた画像なのか、ボタンの画像なのか、タブの画像なのか、など。「何に使うものなのか」など。
ただし、写真やイラストなどは色々な箇所で使われる可能性があるため、そのまま写真・イラストとすること。

・イラスト → ilst
・図 → figure
・アイコン → icn
・バナー → bnr
・ロゴ　→　logo
・ナビ　→ nav
・背景 → bg
・線 → line
・ボタン → btn
・タブ → tab
・写真 → photo
・ポップアップ　→　popup

##機能名
機能名はモジュールをもうちょい具体的にしたもの。ボタンであれば「どういう時に使うものなのか」、アイコンであれば「何を表しているのか」など。

・矢印　→　_arrow_
・人　→　_men_  , _women_ , _family_　など
・ドット柄　→　_dotte_
・都会　→　_city_

##状態名
動きや何かしらの状態がある場合につける。状態は複数連なる場合がある。
矢印アイコンなら「どこを向いているのか」、人なら「何をしているのか」、背景や線なら「何色なのか」など。

・手を上げている　→　_handsUp
・説明している　→　_explain
・押されている　→　_pushed
・反転している　→　_reverse

##画像名の例
イラストの場合

illust_man_handsup.png

登録ボタンの場合

btn_register.png
btn_register_pushed.png