スライスの命名規則

HTML

・拡張子は以下のルール
 -写真のみの画像 → jpg
 -文字画像、イラスト、ボタン等の画像 → png
 -写真の上に文字がのっているような画像 → png
 -透過があるもの → png
 (ベタ色をつかっていて色数がすくないものはpng8、それ以外はpng24)


・ファイル名の付け方は大体以下のルール
 -ロゴ → logo.png logo_footer.png

 -背景 → bg_xxx(bg_body.png とか、bg_itemlist.png とか)

 -写真 → img_xxx あるいは ph_xxx

 -タイトル → title_ページ名.png、あるいは title_01.png
 ※大見出しだけでなく中見出し(h3タグを使うところ)もtitle_xxxでOK

 -それ以外のテキスト画像 → copy_01.png

 -アイコン → icon_menu.png 
 ※icon_list などなど出てくるアイコンの種類によって適切に名前をつける(番号付けはNG)

 -ボタン → btn_xxx
 ※xxxは適切な名前。btn_order とかbtn_shopとかbtn_contact btn_confirmなどがよくある

 -バナー → bnr_xxx 
 ※xxxは適切な名前 bnr_onlineshopとかbnr_shiseidoとか
 ※ボタンは小さやつ、バナーは外部に飛ばす用の四角画像だったり、巨大なリンク画像だったりをバナーと呼ぶ。

 -グロナビ → menu_01.png menu_02.png

 -その他 → その場のノリとセンスで名前をつける 


・ページ内に数多く出てくる場合は、写真、画像はimg_xxxではなくそれぞれに意味を持たせて名前をつける。
ページ内に1種類しか出てこないパターンの画像で意味づけできそうであれば
ファイル名から そのものがあらわす端的な名前をつける
製品一覧みたいに同じカテゴリで複数の写真が並んでるときとかは、
ph_item_xx.jpg のように名前 + 番号みたいな形式にする。
(例)
キービジュアル → kv.jpg とか、kv_xx.jpg(スライダーとか複数枚)
路線図 → routemap.png とか
また、pcとspの写真のサイズ等が異なる場合にはそれぞれスライスする。
その場合はspの方の画像名に _sp を追加する
(例)
(pc)kv.jpg   (sp)kv_sp.jpg
pcとスマホが全く同じ見た目の時はそれぞれのスライスを比較して、
サイズの大きいものだけを書き出す。

・スライス時点で日本語や、psdから吐き出されるそのままのファイル名
(xxxx_r1_26.pngなど)を残さないように


・ファイル名は大文字英語はNG(IEでエラーとなる)