Help us understand the problem. What is going on with this article?

ざっくり画像命名ルール

More than 3 years have passed since last update.

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

画像ファイル名の付け方

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

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

命名規則

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

モジュール名

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

・イラスト → 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
kazukichi
元競売屋と保険営業のエンジニア。 TwitterでNo1人気のWEBプログラミング学習サービス『ウェブカツ!!』や、WordPressテンプレ販売『CRAZY WP』など多数運営。 http://webukatu.com/ http://crazy-wp.com/
https://webukatu.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした