個人開発者のためのズボラUIデザイン #2 ～設計思想～
この記事の文字数は、4,431 文字です。
デザインをはじめて触る方へ。 コンポーネント設計とAtomic Designについて解説します。 UIデザインにおける概念はこれだけなので、サクッと勉強していきましょう。
目次
こんにちは、ナオツです。 前回は個人開発者のための「ズボラUIデザイン」について、概要をご説明しました。
目指すところは、ワイヤーフレームのように概念的で、UIデザインのようにある程度の設計を実現 します。
個人開発においては実装者が自分なので、UIデザインはキッチリやらなくても良いと思っています。 しかし、実装する上で効率の良いUIデザインを作成することもできます。
それが、「コンポーネント設計」と「アトミックデザイン（Atomic Design）」 です。
実装する上で効率の良いUIデザインとは
実装していると、
- このボタンをちょっと大きくしたい
- 見出しの文字をまとめて小さくしたい
- ページ共通の広告エリアの位置を変えたい
などなど、デザインを作ったのにもかかわらず細かい変更をしたくなります。 実際に動く画面を作ってPCやスマホで実際に動かしてみて、はじめて気づくことがあるからです。
この変更を容易にする設計思想が、コンポーネント設計 です。
UIデザインを専門にやられている方であれば、当たり前にやっていることですが、はじめて知る方には馴染みのないものですよね。
コンポーネント設計
コンポーネントとは、構成要素（部品） という意味で使われます。
UIデザインを行うときは、
- ボタン
- 見出し
- ヘッダー
- 広告枠
などページを構成する部品ごとにデザインすることが一般的です。 このデザインの構成要素である部品のことをコンポーネントと呼びます。
また、
僕が良く使うデザインツール「Figma」には、「コンポーネントごとにデザインする機能」が搭載されています。 Macで有名なデザインツール「Sketch」にも「コンポーネント機能」が実装されているそうです。（使ったことないので詳細は不明）
Atomic Designとは
アトミックデザイン（Atomic Design）とはコンポーネント設計思想の１つです。 コンポーネントの種類を下記のように分類します。
- Atom(原子)
- Molecule(分子)
- Organism(有機体)
- Template(テンプレート)
- Pages(ページ)
なんとページもコンポーネントという扱いなんですね。
Atom(原子)
もっとも小さい粒度の構成要素です。 これ以上分解できない要素、と言えます。
例えば、
- ボタン
- 見出し
- リンク
などです。
こんな風に個別にデザインした1個1個がatomです。
※このサイトで不採用になったatomも載ってます。
Molecule(分子)
2つ以上のAtom(原子)を組み合わせた構成要素です。 Atom(原子)だけでは機能していませんが、分子として組み合わせられることで機能性が生まれます。
例えば、下記にあげたように「人気記事」「プロフィール」といったデザインがMolecule（分子）にあたり、ここではじめて「機能性」となります。
Organism(有機体)
Molecule(分子)の集まりで、1つの機能を実現する構成要素です。
ん？
Molecule(分子)と何が違うの？？
と思われた方も多いかと思います。
結論、
あんまり変わりません。（主観）
設計者の好き嫌いで決まってくことが多い印象です。 「Molecule(分子)が組み合わさって大きくなったらOrganism(有機体)」くらいの使い分けで問題ありません。
例えば、このサイトだとPC版で右側にサイドカラムを設けて「広告枠」や「プロフィール」を載せています。
「広告枠」や「プロフィール」部分はMolecule(分子)に当たるので、Molecule(分子)を集めたサイドカラムはOrganism(有機体)という扱いになります。
Template(テンプレート)
いくつかOrganism(有機体)やMolecule(分子)が集まった骨組みになる要素です。
どういうことかというと、サイト全体の共通レイアウトがこれに当たります。
デザイン設計とちょっと変わってますが、記事の一覧画面と記事の詳細画面を比較してみましょう。
- 記事の一覧画面
- 記事の詳細画面（このページです）
- サイト上部のヘッダー部分
- サイト下部のフッター部分
- 右側のサイドカラム
これらはどのページでも共通のレイアウトになっています。 このように共通となるレイアウトを設計しておくと、実装時にも役立ちます。
これがTemplate(テンプレート)の概念です。
Pages(ページ)
実際のサイトページのことです。 ここまでくると「構成要素」という感じはしませんね(笑)
これ以上要素を組み合わせることはありません。 一番大きなコンポーネントと言えるでしょう。
まさにこのページ全体がページコンポーネントです。
明確にわける必要もないが実装の指針にする
Atomic Designは設計中に、
- Atom(原子)
- Molecule(分子)
- Organism(有機体)
の境目がわからなくなることが多々あります。 あまり細かく線引きしないでも良いと思っています。
Atomic Designはあくまで思想。 重要なのは実装フェーズでスムーズに進められることです。
実装フェーズでもこのAtomic Designにしたがって開発を進めます。 近年のモダンなフロントエンド開発ではコンポーネントベースで開発をすすめていくのですが、そこで開発を指針となるのがAtomic Designになるのです。
詳しくは実装フェーズでまた記事を書いていく予定です。
コンポーネント設計の利点
さて、Atomic Designを指針としたコンポーネント設計をここまで説明してきましたが、いったいどんな利点があるのでしょう？
結論、再利用しやすく、変更に強くなる ということです。
冒頭に書きましたが、デザインを作ったのにも実装時かかわらず細かい変更をしたくなるものです。
デザインを作っている最中だったり、実装を進めている段階で、より良いアイデアが浮かぶものだからです。
ここで設計に忠実になって、実装時に変更を我慢する必要はないと思います。 個人開発であれば、自分が好きなデザインを適用すべきです。
再利用できる
例えば、見出しはAtom(原子)で定義しますが、さまざまなMolecule(分子)に組み込まれることになります。
各ページのサイドカラムにある見出し「プロフィール」と「Twitterタイムライン」などはそれぞれ同じデザインです。
つまり同じデザインを再利用して文言だけ変えている ということなんです。
詳しくは次回説明しますが、 マスターになるデザインを定義し、コピーして使うようなイメージです。
ただコピーすれば良いので、別のページで同じデザインが必要になったときに、同じコンポーネントを新しくデザインしたり実装する必要はありません。
変更のしやすさ
「サイト全体で見出しの大きさを変更したい」ということであれば、 マスターの見出しデザインを変更することで、コピーしたすべてのコンポーネントに変更が適用される、ということになります。
また、コンポーネント設計であれば位置を入れ替えるのも容易です。 このサイトではサイドカラムに「広告」「プロフィール」「関連記事」のMolecule(分子)がデザインされていますが、 これを「関連記事」「広告」「プロフィール」という順番を変えることも容易です。
サイドカラムを定義しているOrganism(有機体)の構成要素である３つのMolecule(分子)の順番を変更するようにすれば良いだけだからです。
あとがき
いかがだったでしょうか。
今回はデザインの基礎であるコンポーネントという思想と、設計の指針となるAtomic Designについて解説しました。
これで実装時どれだけ変更に強くなるか、早くも実装フェーズでご説明するのが楽しみです。(笑)
しかし、まだ具体的なデザインツールの操作方法などをご紹介していません。
次回はページ構成や画面レイアウトについて説明していきます。
・Webデザインを本格的に勉強したい方はこちら！
未経験からプロのWebデザイナーになる！ 400レッスン以上の完全マスターコース
