僕はデザインをがっつり勉強しているわけではないのですが、最近気になった概念のうちの一つで「Atomic Design」なるものが存在するみたいです。Atommic Designとは近年のデザインにおける設計方法みたいなものです。
Webまわりを触ったり、一人でサービスを開発するとなるとやはり困ってくるのが「デザイン」の部分で、これも独学で学ぶ必要があるわけです。しかもデザインなんて、センスがあるかないかの一言で片付けられたりします。
しかしながらこういったデザインの「設計方法」を知っておくと、デザイン初心者でもそれっぽいデザインができたりするので設計方法や概念について知っておいて損はない、というか知っておいた方が良い気がします。そういう勉強的な意味合いも込めて、ちょっと自分で調査してAtomic Designについての基本的な概念と説明を整理しておこうと思います。
スポンサードリンク
目次
Atomic Designの概要
Atomic Designとは、簡単に説明すると「小さいパーツを作り、その小さいパーツで次の大きい要素を作り、…最終的に一つのページを作る」という事です。名前にもあるように「Atom(原子)」としての最小単位のものを作成して、その組み合わせでデザイン設計を行うという概念です。
めちゃくちゃ端折って説明していますが全容を知りたい方はこちらのリンクからAtomic Designについて知ることができます。
Brad Frostさんが書いた書籍の内容が全てWeb上で公開されています。めちゃくちゃ丁寧に一つ一つ章立てで書かれてあるので英語に抵抗のない方は是非一読しておくと良いかと思います。
この考え方はWeb上で非常に役に立つ強力な概念となり得ます。特にVue.jsにおいてはコンポーネント設計の際にこの考え方がうまく転用できるので、Vue.jsもしくはその他Web言語を勉強しようとしている人には是非知っておいて欲しい知識です。
Atomic Designにおける5段階構成要素
Atomic Designには5段階の構成要素が定義されています。
Atoms(アトムス)-原子
ボタンやラベル、フォント等の最小構成要素です。使用頻度が低いものに関しても最初に作成すべき構成単位であると言われています。
Molecules(モルキュース)-分子
複数のAtomを構成したもので、ラベル付きフォーム等がこれにあたります。原子をいくつか組み合わせてパーツを構成するイメージで良いでしょう。
Organisms(オーガニズムズ)-生体
Moleculesよりもさらに複雑な構成要素です。分子をいくつか組み合わせて構成します。例えば、ヘッダーにおくナビゲーションバーとロゴを組み合わせてヘッダーにします。このヘッダー部分が生体にあたります。ここらへんで原子や分子の見直しもしておくと良いでしょう。
Templates(テンプレート)-テンプレート
Organismの組み合わせで構成されます。配置のバランスを考慮してテンプレートを作成します。これに関しては、テンプレートを作成する前にワイヤーフレームを作成した方が良いという意見もありますが、ここまでくると配置も簡単に変更できるので正直どちらでも良いかと思います（個人的には）。しかしワイヤーフレームがあったほうが完成の見通しがよくなるので、可能であればワイヤーフレームに沿って作成することを推奨します。
Pages(ページ)-ページ
実際のデータをTemplateにあてはめたものです。要は完成版ということ。テンプレートを修正し、内容を入れていきます。
以上がAtomic Designにおける構成要素です。上からLv.1~Lv.5と振り分けられています。
Atomic Designを使うと何が良いのか
基本的な設計方法はさほど難しくないどころか、寧ろシンプルですらあります。理解に苦しむことはないと思いますが実際にやってみると、慣れるまで時間がかかると思います。（自分がそう）
しかしAtomic Designをきちんと学ぶ価値は大いにあるでしょう。理由はWebデザインにおいて非常に有用な概念であるからです。
僕たちはWebデザインを行うにあたって1ページ1ページ綿密にデザインを変えているわけではなく、部品を数多く転用してデザインの効率性を良くしたり、デザインの統一性を出してよりよいUI/UXを提供しています。
手元のスマートフォンで確認してみてください。例えばiPhoneのアイコンであったり、アプリ内のデザインで共通してる部分があったり、それはWebに限った話でもないのです。
ということでWebデザイナー以外にも非常に有用な概念であることがわかりました。Atomic Designの何が良いかというとこの「デザインの使い回し」において非常に強力な力を発揮するからです。
デザイン部品の使い回しを行うと、一部のデザインを変更したい時に変更もしやすくなります。（例えばSketchでシンボルを作る等）保守・運用性がアップするのも非常に良い部分です。
まとめ
・Atomic Designとは非常に有用なデザイン設計方法である
・Atomic Designには五段階の構成要素がある
・Atomic Designはデザインの使い回しにおいて強力な力を発揮する
以上です。簡単に概要を整理してみました。本質的な部分ではおそらくもっと深いことが書かれていると思うので、この記事を読んで興味が出てきた方は是非Brad Frost氏が執筆した文章を読むと良いかと思います。こちらの方が図解もあってわかりやすい。
スポンサードリンク
コメントを残す