TOP UX用語 ツール・フレームワーク・方法論 モジュール方式

モジュール方式 modularity

大規模なシステムを、独立した小規模なシステムに分割することによって、複雑の要素を使いやすくする方法

システムの様々な機能をグループ分けしたのち、各グループを独立したユニットとして再編成する手法をモジュール方式、機能単位のユニットをモジュールと呼ぶ。ハードウェアからソフトウェア、建築などで用いられる。

モジュールの語源

モジュールとは、部品の互換性を高めるために工夫された「製品諸元の単位」である。言葉の語源は古代ギリシャの時代の建築で、一定の比率で変化する数値を適応する「モジュラス」という規約から来ている。

古代ギリシャ建築

古代ギリシャ建築の例(出典元:ビジネス+IT

流行のきっかけ

1990年代はじめにヘンリーフォードが生み出した「ライン生産方式」をきっかけに注目を集める様になった。

初期の車や部品はそれぞれ1つずつ単独で生産されていたため、生産される数自体が少なく保守性を欠くものだった。そこでフォードは車を構成要素で分割し、組み立てプロセスを分けることでモジュール方式を実現した。その結果、より均一で信頼性が高く、安全な車が工場に広まり、記録的な速さの生産を可能にした。

フォードの組み立てライン

フォードの組み立てライン(出典元:wikipedia

ウェブへの発展

機械からコンピューターの時代になるにつれ、コンピューターサイエンティストはオブジェクト指向プログラミングを実践し、ソフトウェア工学の考え方である「関数の分離」「単一責任の原則」などのモジュールの重要な概念を築き始めた。そのため、モジュール方式がウェブを構築するための設計原則としてすぐ取り入れられる様になった。

モジュール方式のメリット

モジュール方式を取り入れるメリットはいくつかあるが、その一つとしてあげられるのは、モジュールは他のモジュールに影響を与えることなく、拡張 / 交換できる点にある。

例えば、ウェブにおいて1つのモジュールが独立して機能するものであれば、デベロッパーは他のモジュールを十分に理解しなくても、一つのモジュールを修正することだけに集中することができる。

Atomic Designの誕生

モジュール方式は、ワールド・ワイド・ウェブ(World Wide Web)が生まれた時代から存在していたが、近年より一層注目を集め必要とされている設計手法の1である。なぜなら、私たちが使用するデバイスの数と種類は時代と共に増加し、ビューポートのサイズやオンライン環境など、あらゆる側面をデザイナーは考慮しなければならないからだ。

そこで生まれたデザインの手法がアトミックデザイン(Atomic Design)である。アトミックデザインはモジュール方式を元に、Brad Frostブラッド・フロスト氏が考案したデザイン手法である。具体的には、モジュールを、原子(Atom)、分子(molecule)、有機体(organism)、テンプレート(Templates)、ページ(Pages)の5つの階層に分け、より堅牢なインターフェースのデザインシステムを構築していくことができる。

ブラッド・フロストの肖像

ブラッド・フロスト氏(出典元:bradfrost.com

アトミックデザインを活用し、大規模なデザインを5つの段階にわけ設計していくことで、まるでレゴのブロックの様にUIを構築していくことが可能になる。これはまさに、モジュール方式を活用した大きな利点であると言える。

レゴブロックの様に、UIを構築することが可能

レゴブロックの様に、UIを構築することが可能( 出典元:Atomic Design」)

参考

「UX用語」のカテゴリー