こんにちは。アイレットデザイン事業部のマークアップエンジニアの鶴若と申します。
今回はアトミックデザインとHTMLテンプレートエンジンを活用したサイト制作について説明していきたいと思います。
アトミックデザインとは
パーツ単位でUIデザインを設計する手法です。
UI構成要素を五段階に分けて考え、それぞれに製作し、それを小さな単位から大きな単位へと食い合わせて行きUIを設計します。
【構成要素】
Atoms
最小単位となるパーツです。
Molecules
いくつかのAtomsが組み合わさったパーツです。
Organisms
AtomsとMoleculesが組み合わさった単体で機能するアプリケーションパーツです。
Templates
上記の３つを組み合わせて作られた各ページの骨組みです。
Pages
Templatesに実際のコンテンツを適用したものです。
フォルダの分け方
html
pugやnunjucksなどのテンプレートエンジンの使用を想定。
html
├ layout
├ object
｜ ├ component
｜ ｜ ├ atoms
｜ ｜ ├ molecules
｜ ｜ ├ organisms
｜ ｜ └ templates
｜ └ utility
└ pages
css
scssなどのメタ言語の使用を想定。
css
├ foundation
├ layout
├ object
｜ ├ component
｜ ｜ ├ atoms
｜ ｜ ├ molecules
｜ ｜ ├ organisms
｜ ｜ └ templates
｜ ├ project
｜ └ utility
└ style.scss
CSSのクラス名について考える
FLOCSSではコンポーネントのプレフィックスは、「c」となっているが、
「c」で統一してしまうと、コンポーネントの詳細度が分かりにくい。
そのため、アトミックデザインのフォルダ分けに沿って、下記のようにつけてどうかと提案します。
- atoms (a-name)
- molecules (m-name)
- organisms (o-name)
- templates (t-name)
こうすることによって、各モジュールが、どのレベルのコンポーネントを内包しているかが分かりやすくなると思います。
どのレベルにするか悩ましいコンポーネントについて考える
ボタンなどはatomsになりますが、悩ましいことにボタンにはアイコンが付くことがよく発生します。
この場合どうするべきなのか・・・。
アトミックデザインのルールに沿うのであれば、アイコンなしは、atoms。アイコンありは、moleculesとして別々に分ける必要があります。
これが一番正しいのでしょうが同じ機能とデザインを持つものを別々に分けて配置するのは非常に紛らわしいです。
実際に運用していく際に、修正が入りアイコンが入ったり無くなったりする事は多々あるかと思います。
そのたびにコンポーネント参照先を変更していくというのは非常に非効率になってしまいます。
なので、atomsだけどアイコンなど、別のatomsが入る可能性のあるものは、最初からmoleculesにするか、atomsにatomsが入るのを許容しておく必要があると考えています。
（a-nameの中にa-nameが入るのが気持ち悪く感じる場合は、テンプレートエンジンで分岐の式を書いて、
アイコンが入る場合は、ボタンのクラスをm-nameに書き変えるもの良いと思います。）
templatesをどう扱うか
テンプレートに沿ったページを量産する場合に非常に重宝しますが、
静的なページを作る際は、templatesの内容 = pagesの内容となってしまう場合が多いです。
小規模なサイトで動的なデータ取得などもないのであればtemplatesは省略してしまってもいいかもしれません。
便利なツール
fractal
https://fractal.build/
nunjucksやpugなどが使用できるスタイルガイドのツールです。
各モジュールをプレビューしつつ作業ができるので効率的に作業が出来るようになります。
コーディングについては、案件によっての用件や技術の進化があるので正解というものはなかなかありませんがこれが何かの参考になれば幸いです。
