読者です 読者をやめる 読者になる 読者になる

ウェブとすっぽん

INNOVATOR JAPAN Director's Blog

表参道と大濠公園ではたらくマーケティングチームの仕様書となります、ご査収ください。

ATOMIC DESIGNは長期的なサイト運営にむいていると思った

f:id:yamagishibaster:20160908203508p:plain

こんにちは、ディレクターの山岸です。
ここ1年ぐらいで、ATOMIC DESIGNというワードをよく目にするようになりました。
デザイン手法の一つなのですがサイトを運用する上でとても効率的で理にかなっているので、デザイナーだけでなくディレクターも知っておくべきことだと思いブログで紹介します。

ATOMIC DESIGNとは

Brad Frost 氏が提唱したデザインシステムを作る方法論となります。
デザインシステムというのはスタイルガイドやブランドのガイドラインなどを指すようです。
ATOMIC DESIGNは以下の5要素からつくられるデザインシステムになります。

ATOMIC DESIGNの5要素

f:id:yamagishibaster:20160908203509p:plain

  • ATOMS(原子)もっとも小さい粒度
  • MOLECULES (分子)アトムが組み合わさってできたモジュール
  • ORGANISMS(有機体)組織-モジュールが合わさったデザイン
  • TEMPLATES(テンプレート)テンプレート
  • PAGES(ページ)完成したページ

ATOMS = 原子

ATOMSはデザインの最小単位であり、絶対的な基本的エレメントです。
カラーパレットやフォント、図形などの基礎的なものです。
他の原子と組み合わせることによって分子になります。

MOLECULES = 分子

2つ以上のATOMSから構成されるエレメントです。
ラベルのあるフォームフィールドや、タイトル行や複数の列がある表などがあります。

ORGANISMS = 有機体

複数のMOLECULESが組み合わさったものです。
ロゴ(ATOMS)やボタン(MOLECULES)を組み合わせてヘッダーというORGANISMSが完成します。 ATOMSやMOLECULESと違って、複雑になります。 ORGANISMSになることでページのオリジナル差がでてきます。

TEMPLATES = テンプレート

複数のORGANISMSの合わさったものです。
ワイヤーフレームとなるものです。

PAGES = ページ

PAGESはより精密さが増したTEMPLATESになります。 PAGESが復数集まることによって、webサイトが完成します

原文:ATOMIC DESIGN | Brad Frost

多少、省略させて頂きましたがここまでがATOMIC DESIGNの主なデザインシステムです。

何故、webサイトの長期的な運営にむいているのか?

デザインの統一と変更・拡張に優れている

最小単位でデザインを設計しているので、デスクトップとスマホ間のディスプレイの大きさに合わせたデザイン調整が簡単です。
ATOMSやMOLECULESへの細かい単位でデザインされてるので、新規で考え直すことが少なく変更と拡張に強いです。

事例

例えば下記の画像はサイバーエージェントさんが運営するマッチングアプリのCROSS MEのトーン&マナーになります。

f:id:yamagishibaster:20161104214636p:plain

参照元:コンセプトを担うCROSS MEのUI|Technical Creator Hub

この記事内にはATOMIC DESIGNについては書かれていませんが、一番はじめにUIのパーツのデザインやフォントや色を設定することで統一性が生まれます。

webサービスは常にユーザーの反応から分析し、新規機能の追加やUIの改善が求められます。
すべての改修で、0からデザインを考えるのは時間と労力を要します。
あらかじめ最小単位のデザインガイドを作っておくことで、0から考える時間を短くすることができ、既存部分と改修部分でデザインを統一させることもできます。

CSSの設計・拡張に優れている

CSSを書く上でも最小単位でデザインが分けられているので、SMACSS(*注)などの既存の設計方法にマッチしやすいです。
新たにコンテンツやページが増えた場合は、デザインが最小単位で決められているので新規で考える必要が少なく速やかに対処できます。
SMACSSなどの既存の設計方法を用いることで専任制の低い、再利用のしやすいものになります。

(*注)SMACSSとは?

SMACSSはCSSの設計手法のひとつで、CSSのルールを5種類にカテゴライズした上で、それぞれの考え方や記述ルールが取り決められているのが特徴的な手法です。
参照元:SMACSSによるCSSの設計 - ベースとレイアウト | CodeGrid

webサイトは作って終わりじゃない

webサイトも現在はビジュアル重視の広告塔としてではなく、ユーザーの閲覧履歴から情報を分析・改善し、コンテンツの配信・拡充をするマーケティングツールとしての意味合いが高まっています。
新たな施策があったとしても、デザインとCSSがシステム化されていないと施策を投じる度にデザインを新しく考え、コーディングしなくてはいけません。
そうなると制作や運用に時間がかかってしまい、新しい価値を創造する時間が減ってしまいます。

デザインをシステム化することで、運用を効率化し施策を投じるスパンを早めることができます。

webサイトは作ったら終わりではなく、サイトをオープンした後にどれだけ改善と運用を継続的に続けられるかが重要です。
実際にデザインをしない立場でも、「ATOMIC DESIGN」の概念を理解することで、よりよいサイトの制作・運用ができると思いブログでまとめてみました。

ATOMIC DESIGNで満足度の高いサイトを制作・運用しましょう!ではっ!