この記事は株式会社ソニックムーブ Advent Calendar 2017 の18日目の記事です！
最近 Atomic Design というワードをよく見かけるけれども…
実際どういうものなの？ なにそれおいしいの？ 状態だったので、思い切ってかじってみることにしました。
Atomic Design って何さ？
Atomic Design とは、デザインシステムを作るための方法論です。
ページ内にある要素を最小単位である「Atoms（原子）」にコンポーネントとして分解します。
分解したコンポーネント同士を組み合わせてデザインしていく考え方が Atomic Design です。
この考え方自体は新しいものではなく、2013 年頃にはすでに登場していたようです。
デザインシステムって？？
デザインシステムとは、デザインの仕組みとその考え方をドキュメント化したものです。
エンジニアにとっては再利用可能なコード集、デザイナーにとっては有用なツールとなります。
例えば、これらのガイドラインが当てはまります。
単位について
Atomic Design では、コンポーネントの単位が5つあります。
Atomic Design Methodology | Atomic Design by Brad Frost
Atoms（原子）
機能的にそれ以上分割できない要素の最小単位です。
例えば、ラベル、インプット、ボタン要素が Atoms にあたります。
Molecules（分子）
Atoms を組み合わせて作られた要素です。
Molecules になることで、1つの機能を持ったコンポーネントになります。
例えば、ラベル、インプット、ボタン要素の組み合わせで入力ボックスとなります。
Organisms（有機体）
Atoms や Molecules を組み合わせて作られた要素です。
例えば、ヘッダーやフッターが Organisms にあたります。
Atoms であるロゴ、Molecules であるナビゲーションや検索ボックスの組み合わせでヘッダーとなります。
Templates（テンプレート）
Molecules や Organisms を組み合わせて作られたものです。
Templates になることで、ページ構造を説明するものとなります。
例えば、仮ページ、ワイヤーフレームが Templates にあたります。
Pages（ページ）
Template にテキスト、画像、メディアを流し込んだものです。
最終的にユーザーが目にするものと変わらない、具体的なページとなります。
単位の振り分け方については instagram の UI を例に、こちらでわかりやすく解説されています。
Atomic design is for user interfaces
メリット
Atomic Design を導入することで得られるメリットはこんな感じです。
- コミュニケーションが円滑になる
- デザインの変更に対応しやすくなる
- セレクタの詳細度が平坦に近づく
- 実装やメンテナンスが楽になる
- UI がブレなくなる
コミュニケーションが円滑になる
Web ページの構造設計が見える化されて
コンポーネントの粒度を論理的に説明できるガイドラインとなるため
実際の開発時におけるチームとのコミュニケーションが円滑になります。
デザインの変更に対応しやすくなる
デザインの仕様変更に強く、再利用性の高いコンポーネントを揃えることができます。
セレクタの詳細度が平坦に近づく
セレクタの詳細度で極端に高いものが出現せず、平坦に近くできる傾向があるようです。
実装やメンテナンスが楽になる
同じような外観・機能には同じコンポーネントを使いまわすことで実装が楽になります。
運用時や修正があった時にメンテナンスしやすくなります。
UI のブレが無くなる
サービス全体のデザインバランスが整えられて、ユーザにとって使いやすいものとなります。
デメリット
「デザイナーがどのようにデザインしていけばいいか分からない」
Atomic Design に着目しているのは主にエンジニアが多く
Atoms からコンポーネントを組み立てていく実装のイメージがつきやすいのですが…
コンポーネント単位でデザインをすることは
デザイナーにとってはイメージがつきにくいというのが実情のようです。
アプローチ
デザイナーは通常通りページデザインを作ります。
エンジニアはページデザインを見ながら、Atomic Design の各単位に
要素を切り出して、コンポーネントリストを作ります。
作ったコンポーネントリストをデザイナーに共有しておくことで
実機でどのように表示されるか分かりやすくします。
デザイナーに共有した後は、ページデザインをしていただく際に
コンポーネントリストをスタイルガイドのようなノリで使っていただくよう協力してもらいます。
他のエンジニアにも共有しておくことで、コンポーネントを使うことを促して
コード量や実装の工数を減らせることができます。
エンジニアとデザイナーの連携が密でなければなりませんね。
Atomic Design × JavaScript フレームワーク
なぜ最近 Atomic Design が騒がれているかと言いますと
コンポーネント単位の実装が簡単に行える最近の Javascript のフレームワークと
非常に相性が良いとされているからです。
その相性の良さについて、実際に Vue.js と合わせて導入してみたという方が詳しく紹介されています。
Vue.js × Atomic Design 【Vue.js Advent Calendar 2017 5日目】 - it's an endless world.
おわりに
サービスの規模が大きくなればなるほど、コミュニケーションが大変になり
統一された UI を提供できなくなるとともに、コードが肥大化してしまいがちです。
今回はそんな現場をハッピーにするなんらかのアプローチとなれば幸いでございます！
Vue.js について、実際にガシガシ触ったことがないので多くは語れないのですが
今度は Atomic Design との相性の良さを報告できるよう、勉強していきたいと思います。
参考文献
Atomic Design | Atomic Design by Brad Frost
http://atomicdesign.bradfrost.com/table-of-contents/
Atomic DesignはWeb開発を救うのか - DMM.comラボ デザイナーズブログ
http://design.dmm.com/entry/2016/02/05/153408
Atomic Designの考え方と利点・欠点 - I'm kubosho_
http://blog.kubosho.com/entry/using-atomic-design
Atomic Design を実案件に導入 - UI コンポーネントの粒度を明確化した結果と副産物 | ygoto3.com
https://ygoto3.com/posts/atomic-design-on-actual-project/
エンジニアが知っておくべきデザインの基本。「デザインガイドライン」と「コンポーネント」を学ぶ！ - エンジニアHub｜若手Webエンジニアのキャリアを考える！
https://employment.en-japan.com/engineerhub/entry/2017/07/21/110000
Vue.js × Atomic Design 【Vue.js Advent Calendar 2017 5日目】 - it's an endless world.
http://migi.hatenablog.com/entry/vue_atomicdesign