モジュールとは

ウェブサイトはモジュールの組み合わせで、できている

前置きを読んでくださっている方には話が被っているので恐縮ですが、改めて。
このサイト内やわたしの使う「モジュール」という言葉は
なんらかの役割を持った、サイズ感はさまざまなひとかたまりのもの
を意味します。「このサイト内やわたしが使う」と断るのは、このモジュールという言葉も、それを使う人によってさまざまに揺らぐからです。私が使う「モジュール」の意味のことを、「コンポーネント」「パーツ」「要素」などと呼ぶ人もあるかもしれません。後で紹介しますがひとかたまりのもののサイズ感である「粒度」によって呼び方を変える場合もあります。

ここでは、どんな表現で呼ぶかは問題ではありません。
伝えたいことは、ウェブサイトは役割を持ったサイズ感さまざまのかたまりが集まって出来上がっているということです。ウェブサイトを作るというのは、「役割を持ったかたまり」を必要なだけ作って組み立てていく作業なのです。

ウェブサイトは分解可能

ウェブサイトはモジュールの組み合わせでできていているというのは、言い換えれば「分解可能」ということです。ウェブサイトはサイズや役割がさまざまの「モジュール」に分解できる、ウェブサイトをデザインするというのは、役割を理解して大小さまざまのモジュールを作り、それをウェブページ内に配置していくことです。

この視点を手に入れると、他の人が作ったサイトをより詳細に分析できるようになります。ボタンひとつとっても、役割というのは様々あることに気がつけます。後で書きますが、このとき「粒度」という尺度があると一段と理解が深まります。

どんなモジュールがあるのか？

ウェブサイトを作る時、どんなモジュールが必要なのかを考える必要があります。わたしはデザイナから受け取ったデザインカンプを見ながら、作るべきモジュールを列挙ていく作業をします。
よくあるものとしては以下のようなものでしょうか。

見出し
段落
ボタン
ロゴ画像
キャプション付き画像
動画
カバー画像
テキストと画像
カード
カードユニット
1行記事
1行記事リスト

モジュールの呼び方も人それぞれ

上記に列挙したモジュールの名前は、あくまでわたしがよく使うだけなので、特に後半は一般的なものとは言えません。これらがどんなモジュールなのかはそれぞれに「定義」する必要があります。どんな役割を持ち、どんな場面で使い、レスポンシブでどのように振る舞い、どのようなあしらいを持つか…など、モジュールの細かな役割や見た目を決めて、それをデザイナやディレクタと打ち合わせて、作って欲しいと思っているものと齟齬がないか確認します。

このサイトのモジュール

例としてこのサイトのモジュールを公開しています。最新の状態にはなっていません、順次書き換えています。どんなものかを考えるときの参考になるかと思います。

モジュールの「粒度」

粒度というのは「粒子の大きさの度合」という意味です。粒の大きさのことですが、ここでいう「粒」は「モジュール」のことで、モジュールの大きさに関する概念です。実際に目に見える大きさの話というよりも、性質のことを指しています。

アトミックデザインという概念

ウェブサイトがモジュールの組み合わせで成り立つという話は、私が考えたものではなく、UIデザイナの間で有名な「アトミックデザイン（Atomic Design）」という方法論で紹介されているものです。
アトミックデザインでは、インターフェースを「化学」にヒントを得て考える方法を提案しています。それは、次の5段階で構成されています。

原子（Atoms）
分子（Molecules）
有機体（Organisms）
テンプレート（Templates）
ページ（Pages）

原子は、それ以上分解することができないものを指しています。酸素原子、水素原子は、厳密には陽子と電子に分けることができますが、分けてしまったら原子としての特性を失います。
このことをモジュールに当てはめると、原子という粒度のモジュールには「ラベル」「入力フィールド」「ボタン」などが挙げられます。ボタンはテキスト部分とボタン背景に分けることができるかもしれませんが、そうしてしまうとボタンとしての意味を失います。機能を失わずにこれ以上分解できない原子という粒度のモジュールが最小です。

分子は、いくつかの原子を組み合わせてひとつの機能を持つものを指します。酸素原子1つに水素原子2つで水になるように、原子の時にはなかった機能や役割を持つことがあります。例えば原子の例に挙げた「ラベル」「入力フィールド」「ボタン」は、組み合わせることで「キーワード検索フィールド」という固有の機能を持ったモジュールになります。

有機体はいくつかの分子や原子を組み合わせて機能を持つものを指します。分子よりもよほど複雑になり、さまざまなことができるようになっています。具体的に言えば、サイトの共通ヘッダーなどに相当します。
分子と有機体の区別は曖昧です。でも、区別をつけることが大事なのではありません。仕事をするメンバーの中でどう区別するかを把握していれば済みます。
個人的には、サイトごとの機能要件やレイアウト、カラーなどが強く反映されて、そのままの使い回しがむずかしい組み合わせになっているものを有機体と分類しています。

テンプレートとは、ここでがらっと化学から離れましたが、雛形のことを指します。ウェブサイトにある多くのページは、共通の雛形から生み出されていることがほとんどです。テンプレートは有機体・分子・原子の粒度のモジュールを組み合わせて、実際にページになる手前の雛形を形作ります。ヘッダー、フッター、メインコンテンツなどを配置し、メインコンテンツの中身によっては、アーカイブ用、シングルページ用などいくつかのパターンを作ります。

ページとは、テンプレートを元にして、実際の原稿を反映したほぼ完成品のウェブページを指します。
テンプレートとページは一緒なのでは？もしくは、同じテンプレートから作られたページは同じものでは？と思うかもしれませんが、同じ雛形を使ったとしても、内容が違えばそれぞれに微調整が必要になりますので同じとは言えません。

粒度とアトミックデザインの方法論を意識して、Webページを分解してみる練習を繰り返すと、デザインの質が上がります。
わたしの話ではイメージがしにくいと思った方は、以下のリンク先にある画像を見てみてください。

https://atomicdesign.bradfrost.com/chapter-2/#atomic-design-is-for-user-interfaces

ウェブページではなくインスタグラムのアプリ画面を例にしていますが、ウェブページでも同じです。画像の左側から、原子、分子、有機体、テンプレート、ページという段階がどういうものかわかりやすくなっていると思います。

英語なので少し読みにくいですが、「アトミックデザイン」で検索すると日本語で解説している記事も多くあるので、調べてみると良いと思います。

コーディングワークフローにアトミックデザインの方法論を適用しています

C-Labo. のコーデイング作業では、アトミックデザインの方法論を採用して、ワークフローを組み立てています。詳しくはこちらで紹介しています。
ワークフローについては今後も変更や改善を続けていくことになると思います。