AtomicDesignの考え方

アトミックデザイン(AtomicDesign)の語源は「原子」から来ていて、細かいパーツに分ける考え方のデザインです。
細かいパーツに分けることで大規模なサイトでも全体の統一感が出ます。WEBのデザインデータではシンボル化、WEBコーディングではモジュール化という言葉がありますがデザイン、コーディングのどちらの視点から見てもメリットが大きいと感じたのでまとめて見ました。

アトミックデザインのメリット

無駄な作業が減る

以前、制作会社に勤めていた時はページの数だけデザインを作っていました。全体の余白調整、ボタンのデザインの統一など実際の成果物よりもはるかに時間のかかりました。ボタンのデザイン一つ変えただけでも、全ページを修正する必要が出て来るからです。
シンボル化や別ファイルに分けるなどの方法もありますが、それでも余白の調整などに時間がかかります。
ボタン、フォーム、見出し、テキスト、テキストリンク、カードデザインなど細かいパーツに分けてフォーマットを作成することでページの数だけデザインをする必要がなくなりました。

ワイアーフレーム・構成の意味を考えてデザインしやすい

アトミックデザインでは、パーツの意味を考えてデザインをします。例えば、ボタンだと「お問い合わせ」「もっと見る」「外部サイト」なのかというように意味を考えてデザインすることが出来、構成・フレームワークの意図から大きくブレることが少なくなります。

メンテナンスがしやすく、他のサイトにも流用しやすい

他のサイトで流用した場合にも、ボタンやフォームのパーツが意味する理由や使い勝手が変わらないため、メンテナンスがしやすく他のサイトにも流用できます。

アトミックデザインに向かないサイト

アトミックデザインのメリットを書きましたがランディングページやキャンペーンサイトのようなページには向かないと感じました。凝ったデザインが多くサイトをパーツで考えた時に綺麗にまとめることが難しいことが多いからです。
シンプルで機能性を重視したサイトには向いていると感じました。

アトミックデザインのプロジェクトに取り入れたいこと

StoryBookで動くガイドライン作成する

StoryBookはjavascriptのコンポーネントファイルを利用してボタンやフォームなどのガイドラインを作成するサービスです。StoryBookを利用してガイドラインを作成することで動きとコーディング方法が共有でき、ページや機能を増やす時に便利な機能です。vue.jsとreactに対応しています。
参考リンク→ストーリーブックサンプル

Sketch

デザインのツールは、Sketchがおすすすめです。他のツールとの違いはバージョン管理がしやすいという点が大きく違います。アートボードごとに管理でき、細かいパーツのどこを更新したのかをわかりやすく共有できます。Abstractなどのツールを利用すればSketchを利用していないディレクターやエンジニアに中身を共有することができます。

まとめ

アトミックデザインを取り入れることで全体の調整にかかる時間がへり、動き・機能・デザインにかける時間が増えました。プロジェクトによって使い分けて、サイト全体のクォリティを無駄なく上げることお勧めします。