コーディングにおけるフォルダ配置と画像ファイル命名規則

Web制作

 

サイト制作を行う際に、ディレクトリの配置や画像ファイルの名前について意識しているでしょうか?

Web制作会社とやりとりをしていて、細かいながらも重要な話だと思ったので記事にしてシェアします。

本記事の内容
  • サイト制作をするときのディレクトリ(フォルダ)の配置
  • 画像ファイルの命名規則

以下、記事に入ります。

 

ディレクトリ(フォルダ)の配置

僕は、以前お仕事させていただいたWeb制作会社の配置を元にしています。個人が適当に決めたものよりかは、ある程度信頼性があると思います。

 

今回は、下層ページが4ページある静的コーポレートサイトを想定します。この場合、実際のフォルダ構成は以下のようになります。

 

index.htmlはトップページのHTMLファイルです。cssとjsにはトップページのcssファイルとjsファイルに合わせて、全ページ共通のcss及びjsファイルが含まれています。

 

下層ページのフォルダには、トップページと同じ構成物がそのまま入っています。

 

以下、構成のポイント解説。

 

下層ページはフォルダごとにわける

下層ページはページごとにフォルダを作ってしまいます。大きな理由は、後の管理が楽だからです

例えば、もし後ほどaboutページだけ修正したい!となったとき、この構成ならaboutページごとzipで渡すなりサーバーにアップで済みます

 

これがもし以下のような構成だと、少し話が違ってきます。

こちらの構成だと、aboutに手を加えようと思ったらcssフォルダの中のabout.cssを取り出して、jsフォルダの中のabout.jsを取り出して…と少し面倒です。うっかりaboutに似た名前のファイルをいじる…などといったミスも発生するかも知れません。

この程度の規模感のサイトならまだマシですが、大規模サイトだと数が増えすぎて目当てのファイルが見つかりにくくなる…などといった問題が目に見えてます。

同じ方法でなくとも。後の人が困らないようなフォルダ管理を心がけましょう。

 

共通のcssやjsはトップページのフォルダへ

コーポレートのように複数のページを作成するサイトでは、全ページに適用される共通のcssやjs(base.css, common.jsなど)を作成します。これらは全てトップページのcss, jsフォルダに格納します。

 

もう一つの方法として、commonというフォルダを作って、共通のcssやjsは全てそこに入れてしまうという方法もあります。

この辺は各自のやりやすさや案件、相手方に合わせて変えていくといいでしょう。

僕はディレクトリが増えると少し面倒に感じてしまうので、共通ファイルは全てトップページのフォルダに格納しています。

 

画像ファイルの命名規則

ファイルを命名する際は、最初に識別子を設定します。後ろに任意で名前をつけます。識別子を最初につける理由は、名前でソートした時に綺麗に揃うからです。

この方法は、以下の書籍を参考にさせていただきました。

[kattene]{
“image”: “https://ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&MarketPlace=JP&ASIN=4839960968&ServiceVersion=20070822&ID=AsinImage&WS=1&Format=_SL160_&tag=kutaro113008-22”,
“title”: “フロントエンド専門制作会社が教える速く正確なWeb制作のための実践的メソッド ワークフロー構築、コーディング規約、制作&ディレクションTipsなど、高品質な制作を支える現場の仕事術”,
“sites”: [
{
“color”: “orange”,
“url”: “https://amzn.to/2VdBSzC”,
“label”: “Amazon”,
“main”: “true”
}
]}
[/kattene]

 

具体例を見てみてましょう。まずは、画像の種類ごとに識別子を設定します。

識別子一覧
  • 背景画像:bg
  • ロゴ:logo
  • バナー:bnr
  • ボタン:btn
  • テキスト:txt , text
  • アイコン:ico , icon
  • 写真など:img

これらの識別子を用いて、画像に名前をつけると以下のようになります。

具体例
  • logo_header.jpg
  • bnr_about_01.png
  • img_contact_02.jpg

このように、識別子の後ろには画像の場所や情報を表すワードを入れてあげます。

複数の画像がある場合は、01などの連番をつけてあげましょう。

 

識別子は各々で自由に決めても問題ありませんが、誰が見てもわかりやすいものにしておきましょう。

自分のルールで決めると、後から他の人が見たとき何を表しているかわからず困ってしまいます。

 

まとめ

フォルダやファイル名など、こういった細かい部分は意識していないと適用にやりがちな部分です。

しかし、特にサイトの規模感が大きくなると、こういった最初の取り決めが後の作業に響いてきます。

 

後の人のことも考えて、わかりやすい構成や命名をできるようにしておきましょう。