• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

株式会社ハイファイブクリエイト

東京都を拠点にWebサイト制作やシステム構築、WordPress保守管理やウェブコンサルティングを提供。

  • SERVICE
  • ABOUT
  • WORKS
  • BLOG
  • NEWS
  • CONTACT
ホーム / ブログ / TIPS / スライスした画像を保存する際の名前の付け方

スライスした画像を保存する際の名前の付け方

池田祐太郎 | 2014年7月17日 公開 コメントを書く

slice_name
PhotoshopやIllustratorで画像をスライスする時にはスライスデータの名前をつけておきますが、命名するルールをある程度決めておくと管理が非常にしやすくなります。
ここでは一例として、名称ルールをご紹介します。

目次

  • 1 命名規則ルール一例
    • 1.1 見出し、タイトル系
    • 1.2 バナー、画像系
    • 1.3 アイコン系
    • 1.4 背景画像系
  • 2 命名に迷うファイル名
  • 3 ファイル名はアンダースコアがおすすめ
  • 4 WordPressを扱うのなら、ハイフンをつける癖は避けるのが無難

命名規則ルール一例

見出し、タイトル系

ttl

見出し=タイトルということで、英語のtitleを省略させて「ttl」を先頭に付けます。

例:メインの見出し画像
ttl_main.jpg

バナー、画像系

bnr

バナーを英語で書くとbannerなので、省略させて「bnr」

例:サービス紹介のバナー画像
bnr_service.jpg

アイコン系

ico

アイコンは英語だとiconなので3文字に省略して「ico」とします。

例:ツイッターのアイコン
ico_tw.gif

背景画像系

bg

背景はbackgroundとなりますので、省略させ「bg」としました。

例:コンテンツエリア全体にかける背景画像
bg_content.png

命名に迷うファイル名

ファイル名の付け方でよくやってしまいがちなのが、111や220といった適当な数字や、a,b,cなど適当につけてしまうこと。その時は理解しているからいいのですが、後々見返すと「これなんの画像だろう?」と思うこともしばしば。
そうならないように、なるべく最初のうちからファイルの命名ルールを決めておくと後々ラクです。

上記最初の例にあるとおり、「メインの見出し画像」は「ttl_main.jpg」にしました。見ればわかるとおり、ttlとmainを「アンダースコア」で分けています。例えば「メインの見出し画像のサブ的な見出し」というのが別にある場合、僕だったら「ttl_main_sub.jpg」等に設定します。
このようにすると、「あとからファイル名を見ただけでなんとなくどういった場所においてある画像なのかわかるようになるメリットがあります。

ただ画像自体の名前は英語にこだわらなくても、制作者間でわかればなんでもいいのかな、と個人的には思います。

ファイル名はアンダースコアがおすすめ

要素と要素の間は「アンダースコア」にしましたが、アンダースコアでなくても、ハイフンや先頭の文字を大文字にしたり、半角スペースをあけてファイル名をつけてきたクセがある場合もあるかと思います。

ttl_main.jpg

これはやりやすいように変えて頂いても構いません。

○ハイフン
ttl-main.jpg

○大文字
ttlMain.jpg

但し、半角スペースや日本語は避けましょう。

?半角スペース
ttl main.jpg

?日本語
ttlのなかにあるmain.jpg

WordPressを扱うのなら、ハイフンをつける癖は避けるのが無難

もしWordPressのカスタマイズを行っている、もしくはこれから行う可能性がある場合、上記の「ハイフン」を使う癖を付けておくと面倒な場合があります。

WordPressの「特定のスラッグ名やID等のページを読み込むphpファイル」を作成するときに区切り文字としてハイフンを使用します。

例:スラッグ名が「staff」の固定ページ用のphpファイル
page-staff.php

この場合、「staff」という単語なら問題はないのですが、スタッフが何人かいてそれぞれにページを作成するとなると「staff-ikeda」等の名称ルールになると思います。そうするとファイル名は以下のようになります。

page-staff-ikeda.php

このように「どこがWordPressのページの種類で、どこが任意で決めたファイル名なのか」がわかりにくなります。
上記でもページの閲覧は可能ですが、pageにかぎらず、category, tag, そしてカスタムタクソノミーまで全て同じ仕様で動きますし、カスタムタクソノミーに関しては「taxonomy-$taxonomy-$term.php」といった形で2つ記述が入ってくるので、エラーになる可能性も高くなり危険です。

大文字にしたり、ハイフンにしたりと、今まで色々とルール決めを自分なりにしてきましたが、アンダースコアが一番だと落ち着きました。まず半角スペースは実際html上ではファイル名として使えませんので却下。大文字にする場合は、画像のみであれば使えますが、htmlファイル等の他のファイル名にはあまり使いたくないのでこれも却下。
そしてハイフンならと思いましたが、僕はWordpressをよく扱うため、上記の問題から最終的にアンダースコアに落ち着きました。

ファイル名で迷ったら、是非ご参考にしてください。

メールコンサルティング
WordPress保守管理サービス

Filed Under: TIPS 関連タグ:Photoshop初心者

池田祐太郎

WordPressの導入を10年以上にわたって手掛けており、主に小〜中規模のコーポレートサイト・ECサイト・ブランドサイト等の企画・開発・保守・コンサルティングなどを行ってきました。2012年にハイファイブクリエイトを創業し、現在はWordPressの保守やコンサルティング、ディレクションや開発業務などを担当しています。 プロフィール詳細

Reader Interactions

コメントを残す コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

この記事と関連する記事

Fireworksは開発終了だけどまだ終わってないっていう話
2013年5月26日
タグ: Fireworks, Illustrator, Photoshop初心者
カテゴリー: 仕事のこと
アプリを切り替える便利なショートカット
2022年7月26日
タグ: Mac, Windows, ショートカット
カテゴリー: TIPS
WordPress の Git 管理では対象とするファイルやフォルダはどこまで含めるのがいいのか
2022年7月14日
タグ: git
カテゴリー: TIPS

人気記事

  1. 同一サーバー上に構築するWordPressのテスト環境の作り方
  2. サイト制作の要件定義書に普段書いている内容(ダウンロード可)
  3. git pull してもエラーが出てファイルが反映されないときの対処法
  4. WordPressの固定ページでタグやカテゴリーを使いたいときはカスタム投稿タイプを検討する
  5. 【2022年最新】WooCommerceで作られた国内ECサイト一覧まとめ
  6. ダウンロードして即使えるサイトマップ(サイト構成図)のテンプレート5点

最初のサイドバー

WordPress保守管理サポート

Search

最近の投稿

  • テスト環境や開発環境を用意したら有効化しておきたいデバッグモード
  • WordPress において PHP 8.1 に更新していいかどうか検証
  • アプリを切り替える便利なショートカット
  • なぜ WordPress はバックアップが必要なのか
  • WordPress の Git 管理では対象とするファイルやフォルダはどこまで含めるのがいいのか

カテゴリー

  • CSS初心者
  • HTML初心者
  • TIPS
  • WooCommerce
  • WordPress
  • エステサロン
  • お知らせ
  • キュレーション
  • サイトマップ
  • システム会社
  • デベロッパーツール入門
  • ブログ
  • ホームページ制作
  • ホームページ制作無料講座
  • メール
  • モバイル
  • 仕事のこと
  • 制作実績
  • 整体院
  • 美容院
  • 雑感

タグ

Android BtoC CMS css Dropbox Paper elementor git Google+ google workspace Gutenberg HTML iPhone jQuery Mac php SEO shopify SNS Sublime Text Webサイト高速化 WordPress WordPressカスタマイズ WordPressテーマ WordPress構築調査 WPRocket お知らせ アクセス解析 アプリ クラウド クラウドソーシング サイト引っ越し サブスクリプション サーバー ショートカット スマホサイト スマートフォン ツール ブログ プラグイン マーケティング リニューアル 保守管理 改ざん 最適化 集客するサイト構築

アーカイブ

CONTACT

お問い合わせはこちら

Footer

  • PRIVACY POLICY
  • 特定商取引法に基づく表示
  • 転載・引用について
  • Facebook

© 2022 high five create All rights reserved.