Subscribed unsubscribe Subscribe Subscribe

CHROMA

世の中の "当たり前" を確認する

imageファイルの命名規則

前書いたやつ

前にこんなの書いてたな。基本的に考え方は変わってないけど、識別子のとことかちょっと増えた。
いま僕がやってるhtmlコーディング、画像名決定時の命名規則

命名規則を作る意味

一貫性を保ってファイル名を付けることで、ひと目でファイルの用途を理解することができる。識別子を付けることで検索や絞り込みを用意にさせる。

命名規則

識別子名+ _ + 詳細(1〜4単語) + .png(拡張子)

スネークケースで記述する。
識別子はオブジェクトの意味を示すものとして先頭に置く。
理想としては識別子を含めて3単語以内を目指し、意味がわかりにくい等の理由で4単語、5単語になっても良いとする。最低5単語以内。

1-2. 識別子一覧

識別名 用途 命名サンプル
bg 背景や、ボーダー用にリピートされて使われる画像 bg_site.png
btn ボタンとして使われる画像 btn_contact.png
ico アイコンとして使われる画像 ico_arrow.png
bnr バナーとして使われる画像 bnr_recruiet.png
txt デザイン上、画像化する画像 txt_strong.png
pic 写真画像 pic_product.png
thumb 写真と連動するサムネイル画像 thumb_product.png
img 写真以外のイラストや図形などの画像 img_input_form.png
mainimg ページのメイン画像 mainimg_start_basketball.png

Good and Bad Case

表面(見た目上)で画像の名前を付けるのではなく、画像の持つ意味から名前を付ける。
たとえば「買い物カートに製品を入れるレトロ風の赤いボタン」があった場合、命名に使用するのは「買い物カートに製品を入れる...ボタン」の部分とする。識別子として、ボタンというのを先頭につける。

Good) btn_add_to_shoping_curt.png
Bad) btn_retro_red.png

単語や熟語の省略は一般化されているものを使用する。また、自分で一般化されていると思ったものでも、一度チームに相談してokを貰わないと使用できないとし、okの際には必ずチームのドキュメントに残す。

Good) mainimg_thx.png
Bad) mainimg_thanks.png

意味が曖昧になるため in, to, of, for などの英語の品詞を省略しない。 画像の命名の上で意味合いが低いと感じたのと、ファイル名の短縮化のために a, the などの冠詞は省略する。

Good) btn_add_shopping_curt.png, pic_town.png
Bad) btn_add_to_shopping_curt.png, pic_the_town.png