吉本式BEM設計(BEM設計ベース)

美しいコーディングをするためのガイドラインコンテンツです。

画像ファイル設計について

吉本式BEM設計(BEM設計ベース)では、「HTMLのソースコード」「SCSS設計について」を解説してきました。
最後に画像ファイル設計について解説していきたいと思いますが、考え方はHTMLのソースコード、SCSS設計と同様で、見やすさたどり着きやすさを追求しています。
と言っても、画像ファイル設計に関しては、難しいわけではありませんので、簡単に理解していただけると思います。

画像ファイル名について

HTMLのコーディングにおいて、何度も言っていますが、迷うことが最もコーディング速度に影響します。
画像のファイル名を設定する際も「ファイル名どうしようか」と迷う時があると思います。
その迷うポイントにルールを設定し、迷わなくさせることでコーディング速度は大幅に改善されます。
このファイル名をまずタイプごとに区別します。

アイコン系:icon
写真・イラスト系:pic
背景系:bg
テキスト系:txt
ボタン系:btn

基本的には上の5つで良いと思います。(もしまだあるようであれば、追加してください。)
続いて、その画像ファイルの使用ケースについてですが、、次の3つのケースが考えられます。

1. サイト共通で使用する画像ファイル
2. サイト共通モジュール内で使用する画像ファイル
3. ページにのみ使用する画像ファイル

これらそれぞれのケースで解説していきます。

サイト共通で使用する画像ファイル

まず、サイト共通で使用する画像ファイルの保存先は、ルート直下にある/img/フォルダ直下に格納します。
ファイル名は、上で定義した画像ファイルのタイプ名に基本的には連番をつけてファイル名を確定させます。

'画像タイプ名' + '必要であれば連番'

具体的には次のようなファイル名です。

pic0.jpg
pic1.png
bg0.png
icon0.svg
txt0.png

このようになります。
また、明確に名前を設定しやすい画像に関しては、上で定義した画像ファイル名の後に連番ではなく「_」接続で文字列を設定するのは問題ありません。

'画像タイプ名' + '_' + '文字列'

例えば、よく使用するケースとして、

シェア系のアイコン画像:icon_fb.svg, icon_tw.svg
矢印系のアイコン画像:icon_arr.svg, icon_arr0.svg
役割が明確なアイコン画像:icon_close.svg, icon_search.svg

などです。

- img
  icon_fb.svg
  icon_tw.svg
  icon_close.svg

経験上、「サイト共通で使用する画像ファイル」に当てはまる画像ファイルは、アイコン系がほとんどです。
背景系、写真・イラスト系の画像ファイルは、どこで使用するかが明確になっていますので、これらは次に解説する「サイト共通モジュール内で使用する画像ファイル」「ページにのみ使用する画像ファイル」のいずれかになるケースがほとんどです。

サイト共通モジュール内で使用する画像ファイル

「サイト共通モジュール」は主に、header, footer, gnav, mainなどのBlockを指します。
SCSS設計でいうところの

/scss/module/

ここに格納される対象が「サイト共通モジュール」です。
これらのBlock内で使用される画像は、同様にmoduleディレクトリを作成し、

/img/module/

ここに画像を格納します。
画像ファイル名の命名規則ですが、基本形は次のようにします。

'Block名' + '_' + 'Element名' + '必要であれば連番'

例えば、次のようなソースコードがあったとします。

<!-- header -->
<header class="header">
<p class="header-logo"><img src="xxx.svg"></p>
</header><!-- /header -->

上のimgタグで指定されている画像ファイルですが、headerのBlockのheader-logoというElementの中で指定されている画像ファイルになりますので、

/img/module/header_logo.svg

となります。

<!-- header -->
<header class="header">
<p class="header-logo"><img src="/img/module/header_logo.svg"></p>
</header><!-- /header -->

この命名規則・画像ファイル設計により、画像ファイル名だけで、どこで使用されている画像なのかが判断できるようになります。

/img/module/header_logo.svg

上の画像ファイルは、moduleディレクトリに入っていることから「サイト共通モジュール」で使用されている画像だと判断ができます。
また、header_logo.svgのファイル名から、headerというBlockのlogoというElementで使用しているというが判断できます。
同じElementで、異なる画像を使用している場合は、画像ファイル名に連番を付けます。

- img
  icon_fb.svg
  icon_tw.svg
  icon_close.svg
  - module
    header_logo.svg

もしheader-logoの要素にスタイルで背景画像を設定する場合、その背景画像のファイル名の命名規則は、次のようになります。

'Block名' + '_' + 'Element名' + '_' + '画像タイプ名' + '必要であれば連番'

具体例は、

/img/module/header_logo_bg.png
/img/module/header_logo_icon_arr.svg

こんな感じになります。
もちろん、この場合は、header-logoの要素のみで使用する画像に限ります。
もし他の要素にも使用される画像であれば、「サイト共通で使用する画像ファイル」の命名規則に従います。

続いて、Modifierが設定されている場合は、そのModifier名を画像ファイルに付けます。
命名規則は、次のようになります。

'Block名' + '_' + 'Element名' + '_' + 'Modifier名' + '必要であれば連番'

例えば、次のようなソースコードの場合を見てみます。

<!-- main -->
<main class="main">
<p class="main-txt _tit"><img src="xxx.png"></p>
<p class="main-txt _lead"><img src="xxx.png"></p>
<p class="main-txt _btn"><img src="xxx.png"></p>
</main><!-- /main -->

上のような場合、画像ファイル名はそれぞれ、次のようになります。

/img/module/main_txt_tit.png
/img/module/main_txt_lead.png
/img/module/main_txt_btn.png

<!-- main -->
<main class="main">
<p class="main-txt _tit"><img src="/img/module/main_txt_tit.png"></p>
<p class="main-txt _lead"><img src="/img/module/main_txt_lead.png"></p>
<p class="main-txt _btn"><img src="/img/module/main_txt_btn.png"></p>
</main><!-- /main -->

この命名規則で、画像ファイル名だけで、どの要素に使用されている画像ファイルなのかが、判断できますし、画像ファイル名を設定する際に、迷う必要はありません。

ページにのみ使用する画像ファイル

基本的には、考え方はSCSSファイル設計と同様です。
例えば「株式会社xxxとは」というページがあったとします。

このページのディレクトリは、

/about/index.html

だとします。
例えば、このページのコンテンツ部分が次のようなソースコードだったとします。

<!-- content -->
<div class="content">

<!-- sec -->
<section class="sec">
<h1 class="sec-tit"><img src="xxx.png"></h1>
<p class="sec-txt">テキストテキストテキスト</p>

<!-- message -->
<section class="message">
<h2 class="message-tit"><img src="xxx.png"></h2>
<p class="message-txt">テキストテキストテキスト</p>
</section><!-- /message -->

<!-- history -->
<section class="history">
<h2 class="history-tit"><img src="xxx.png"></h2>
<p class="history-txt">テキストテキストテキスト</p>
</section><!-- /history -->

</section><!-- /sec -->

</div><!-- /content -->

上のソースコードを見ると、sec, message, historyのBlockのElementに、画像が配置されています。
画像ファイル名の命名規則・画像ファイル設計は、先ほど解説した「サイト共通モジュール内で使用する画像ファイル」と同様の考え方です。

/img/about/sec_tit.png
/img/about/message_tit.png
/img/about/history_tit.png

上のソースコードで使用されている画像ファイル名は、それぞれ上のようなファイル名となります。
それでは、次の画像ファイルがあったとします。

/img/product/step_txt_bg.png

この画像ファイル名を見て、どこで使用されている画像ファイルなのか、判断できるでしょうか。

これは、productディレクトリのインデックスページのstepというBlockのtxtというElementのスタイルで設定された背景画像で使用されていると想定できます。
いかがでしょうか。
これが吉本式BEM設計(BEM設計ベース)の画像ファイル設計となります。