探すのに迷わせない画像ファイル名の賢い付け方

スポンサーリンク

20160126_1-min

最近画像ファイルの名前をちょっと意識するようになった。名前の付け方が適当過ぎると数日経ってからファイルを眺めると、どれがどの画像なのか解らなくなる。

例えばimg要素のsrc属性に画像ファイルのパスを指定する時、ずらーっと画像ファイルが並ぶと自分の望んでいる画像は一体全体どこにあるのかさっぱりわからない。画像の少ないページを制作するならまだいいのだけど、多いページだともうそれだけで目が疲れてしまう。

それにどこだか迷っているいる時間もバカにならなくて、その積み重ねだけでかなりの時間を取られている気もする。いやもう間違いなく取られている。だったらさちょっとでも探す手間を減らそうよって話だ。

接頭辞を付けると分かりやすくなる

20160126_2-min

例えば、バックグラウンドに用いる画像を保存するのであれば名前はbg-から初めたり。リスト用の画像ならlist-から初めたりする。アイコンならばico-とかね。これ凄く直感的に分かりやすくてオススメする。

後で見返した時に、「この画像なんだっけ」と、どこに保存してあるか確かめるとき、ある程度予測を立てて場所を特定することができるのだ。

例えば1つのディレクトリに画像ファイルが50個並んでいたとしても「これはアイコンっぽいな」と思えばico-から始まる所を見れば良いのだ。a~z順にしておけばより分かりやすい。

これならばディレクトリの頭から順番に見なくても大体見当がつく。これをやっていないと無秩序なファイル名が乱立するので、全部見ないといけないし効率が悪い。探している時間で他の作業できますよ。

自分がよく使う接頭辞

こんなのは一人でやっているうちは自分がかってに好きにルールを決めれば良いものなので、何が答えなどないのだけど、自分はどうしているかを示しておこうかな。

  • thumb 動画やブログ等のサムネイル画像用
  • pict モーダルウィンドウ表示時の写真用等
  • bg バックグラウンド画像専用
  • title 各セクションの見出し用
  • logo ページタイトル画像等
  • ico アイコン用
  • img 図形等、figureを接頭辞にするときもあるかも。

この辺りがよく使う。また、明らかにグループに仕分けることが出来そうな画像ファイルも接頭辞を付ける。例えば

  • menu メニューに使用する画像
  • list リストに使用する画像
  • balloon 吹き出し風の画像用

等かな。スマホ用は?やマウスオーバー用は?って話をしておくと、これについては後ろに付けることが多い。なので接頭辞じゃないんだけど。

  • _sp
  • _ov

これはレスポンシブに設計した時にJSで自動で画像置換したい場合に用いたりする。だからちょっと画像の探しやすさの話とは少し意味が違うのでここではあまり触れないでおこう。

副数人で作業をするのであれば、リーダーが一人ルールを決めておいて仲間に共有すれば良い。

こんな感じにしておけば迷う時間が一気に減る。ただコレでも迷うことはあるので、もっと良い方法がないか今後も試行錯誤だわ。理想は「ディレクトリを見た瞬間直感的に一瞬で解る」だけど、まあ理想です理想。画像探すのに手間かけたくないのだ。

もっと自転車旅を知りたい人向け有料マガジンやってます。

もっと自転車旅を知りたい人向け!
有料マガジンやってます。

自転車世界一周マガジンについて詳しくはこちら

スポンサーリンク

フォローする

ツイッターやっています。


Profile

プロフィール

Profile びゃす

名前 びゃす
現在自転車で世界中旅しています。
スタートはアメリカ合衆国アラスカ州。
南米最南端を目指して毎日ひたすら前進中!。

自転車を漕ぎ、見た世界について感じたことをブログで発信しています。
詳しいProfileはこちら


Instagram
follow us in feedly
Followボタンからお気に入りブログを
登録する方法