1. home
  2. /tutorial
  3. /naming convention

画像ファイルの命名規則

Tips

より円滑でスピーディな制作のための画像命名規則チュートリアル

※本ドキュメントの内容は本サービス向けの内容になります。

共通ルール

  • 基本的に全てのフォルダ名・ファイル名は半角英数字を使用してください。日本語名をご入力いただいた場合、文字化けする恐れがあります。
  • webp/jpg/png等、画像形式が異なる場合は同一のファイル名を命名するようにしてください。命名が異なる場合、異なる画像として認識される場合があります。
  • 基本的に番号を昇順でコーディングいたします。image_1.jpg→image_2.jpg…

レスポンシブ対応がない/PCとSPで表示が変わらない場合

想定シーン

  • レスポンシブ対応がない場合
  • PCとSPで同画像を使用する場合

命名規則

画像名_番号_バージョン.webp

使用例

image_1_3.webp

注意点

  • 画像名には命名ルールはありませんが、統一していただくようにお願いいたします。
  • 番号には半角数字をご使用してください。また桁合わせのための0は不要です。
  • 修正等が発生し、同じ位置に画像を差し替えたい場合はバージョンを記入します。また、最初の1回目にバージョン記載は不要です。


レスポンシブ対応する場合

想定シーン

  • PCとSPで表示を変えたい場合

命名規則

ブレイクポイント名_画像名_番号_バージョン.webp

または

ブレイクポイント名/画像名_番号_バージョン.webp

使用例

pc_image_1_3.webp

注意点

  • ファイル数が多くなる場合、フォルダを分割するとわかりやすくなります。分割する場合はブレイクポイント名をフォルダ名に指定するようお願いいたします。

連番にできないパーツ

想定シーン

  • 購入ボタン等の繰り返し登場するパーツ
  • 購入ボタン等の何らかのアクションが発生するパーツ
  • ヘッダーメニュー等の固定位置に表示させる必要があるパーツ

命名規則

画像名_番号_オプション_バージョン.webp

使用例

button_2_fixed-bottom_3.webp

注意点

  • 画像名は可能な限り用途がわかるようにしてください。button/banner/graph/chart…
  • 同じ用途でパターンが異なる場合、番号を記入してください。1パターンしかない場合は省略可能です。
  • 修正等が発生し、同じ位置に画像を差し替えたい場合はバージョンを記入します。また、最初の1回目にバージョン記載は不要です。
  • オプション中の単語はハイフン(-)で文字を繋いでください。

番号順が変更になる場合

想定シーン

  • 画像の追加等によって画像番号全体が制作後に変更となる場合
  • 画像素材共有後にパーツを共通化する等して番号が変わる場合

命名規則

各命名規則の最終番号+1

使用例

button_14_fixed-bottom.webp

※初回共有時に13番まで画像がある場合