Atomic Design と コンポーネント思考について改めて調査
いろいろ調べてみた結果、コンポーネント指向は Atomic Design と考え方が似ており、どうやら相性が良さそうです。
調べたことのまとめと、今私が考えるこの考え方がいいんじゃないか、を記事にしてみました。
結論：設計する上での考え方について
- Atomic Design を踏襲する
- Atoms の内容としては後述するコンポーネントの考え方とする
- レイアウトとしての役割は Organisms と Template が担う
これだけだとさっぱり分からないと思うので、Atomic Design とは？
コンポーネント思考とは？を後述します。
Atomic Design とは
デザインシステムの考え方の一つ。
デザインするときにページなどの大きい単位から作っていくのではなく、部品から考えていくと言うもの。
Atoms がもっとも小さく、Pages がもっとも大きいです。
- Atoms
- UI を構築するための最小単位です。
- HTML で言うとことの単体のタグになります。button など
- Molecules
- Atom を組み合わせて作られるものになります。
- form などがこちらに当たります。
- 「モレキュールズ」と読みます。（最初読み方分からなくてググりました…）
- Organisms
- Molecules や Atom を組み合わせて作られる要素です。
- section などがこちらに当たります。
- Molecule との違いは単一の機能でなく複数の役割を持つところです。
- Templates
- Organisms を組み合わせたもの。いわゆるワイヤーフレーム
- web サイト1ページのワイヤーフレーム
- Pages
- Pages は Templates にコンテンツを流し込んだ状態
- 検索結果がない場合やページングなど、該当のページにおけるバリエーションについてもこちら
コンポーネントについて
Web やアプリケーション開発をする時に使用する、再利用可能なパーツをコンポーネントと言います。
めっちゃ簡単に言うとボタンなどですね。Atomic Design で言うところの Atoms や Molecules が当たります。
複数の機能を持たすことは NG です。
リンク、コピーライト、SNS ボタンの集まりなどが掲載されたフッターなどはコンポーネントとは言えません。
この場合、コンポーネントとして言えるのは SNS ボタンの集まりになります。
コンポーネントを構成する要素は以下の4つがあります。
- 情報構造
- スタイル
- 状態
- インタラクション・機能
コンポーネント設計の考え方
小さい部品ながら、パターンを考える必要があります。
なんの値を受け取って変化させるか、絶対的な固定値での管理となるスタイルなのか見極める必要があります。
- 変化するスタイルを見極める
- サイズや色は変化パターンはあるか
- 状態の変化について
- hover 時など状態の変化でスタイルの変化があるか
- インタラクションはどうするか
省略していますが、当然更新頻度を考えて、定数に置き換えるものは定数にするなど、
そういった考え方も取り入れる必要があります。
最後に
設計の考え方や切り分けは上記を基礎として考えていけそうですが、
そもそも職種別の役割（例えばインタラクションは誰が付けるのか、など）は別軸で考えた方が良さそうです。
一昔前の WEB 業界と違い、デザイナーとエンジニアの境目が曖昧になってきました。
開発時はあらかじめ職種別の認識を揃えて開発をスタートすることをオススメします。