• 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をはじめとしたCMSの導入を10年以上にわたって手掛けており、中小企業から大企業までコーポレートサイト・ランディングページ・ECサイト・ブランドサイト等、幅広いWebサイトの企画・制作・開発・プロモーション業務などを行う。2012年にハイファイブクリエイトを創業し、現在はディレクションや開発業務などを担当している。 プロフィール詳細

Reader Interactions

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

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

For security, use of Google's reCAPTCHA service is required which is subject to the Google Privacy Policy and Terms of Use.

I agree to these terms.

この記事と関連する記事

Fireworksは開発終了だけどまだ終わってないっていう話
2013年5月26日
タグ: Fireworks, Illustrator, Photoshop初心者
カテゴリー: 仕事のこと
お名前.com レンタルサーバーでSSH接続する方法
2020年9月4日
タグ: サーバー
カテゴリー: TIPS
1度見たらもう見れない。重要な情報を安全に共有するツール 1ty.me
2019年8月2日
タグ: ツール
カテゴリー: TIPS

最初のサイドバー

WordPress保守管理サポート

Search

最近の投稿

  • WordPressの保守が必要な理由とチェックするべき9点
  • Contact Form 7 に見つかったファイルアップロードの脆弱性はどのくらい危険なのか?
  • 2020-2021年末年始の営業のご案内
  • [WordPressサイト向け支援キャンペーン] WordPress保守管理の無料コンサルティングを実施
  • お名前.com レンタルサーバーでSSH接続する方法

カテゴリー

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

タグ

Android BtoC Chrome CMS css Fireworks Google+ HTML Illustrator iOS iPhone jQuery Mac mixi Photoshop初心者 php SEO SNS Webサイト高速化 WordPress WordPressカスタマイズ WordPressテーマ WordPress構築調査 お知らせ アクセス解析 アプリ カスタマイズ カフェ クラウド サーバー スマホサイト スマートフォン ソーシャル ツール フラットデザイン ブログ プラグイン マーケティング ライフログ リニューアル 保守管理 制作のご依頼 最適化 集客するサイト構築 飲食店

アーカイブ

CONTACT

お問い合わせはこちら

Footer

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

© 2021 high five create All rights reserved.