atomicdesignを公開 ※ 株式会社GIGでは毎月社内勉強会を実施しています GIG inc. Good is good. We provide opportunities to the SEKAI by fusing technology and ideas. テクノロジーとクリエイティブでセカイをより良くする。小さなチームからスタートした多くの先人達が、世界をより豊かなモノに変革してきました。通信、UX、デバイス、技術の変化と共に世界はまだまだ加速度的に変わります。 Good is good. いいものはいい。GIGは、関わったユーザーやクライアントが前に進める“きっかけ”をつくりつづけます。 ■ お問い合せ https://giginc.co.jp/contact/

1. Atomic DesignとSketch

2. ● Atomic Designの概要
● Atomic DesignとSketchの親和性
を、理解する
このLTの目的

3. Atomic Design
Atomic Designとは、パーツを合体させて、繰り返し使える (UI)要
素やテンプレートを作成する システムを構築する手法 のことです
Brad Frost - 2013

4. Atomic Design
目的、背景
開発に関わる全員に理解してもらうためのデザインシステム(ルール)を作成する
一言で言うと
UI要素を粒度によってカテゴリー分けする手法

5. Atomic Design
atom =
物理学に倣って、小さいものの組み合わせで全体ができているという考えが前提
原子

6. 原子
これ以上分解できない構成要素
カラースキームやフォントなどもatomとして扱う
例）labelやinput、buttonなど
Atomic Design - Atoms

7. 分子
2つ以上のAtomを組み合わせてできる最小限のユニット
「一つの機能をよく果たす」ことが理想
例）ラベルのあるフォームフィールド
Atomic Design - Molecules

8. 有機体
Molecule(分子)が組み合わさりより複雑で独自のセクションを構
成する
例）ヘッダー
Atomic Design - Organisms

9. テンプレート
Organismsが組み合わさった全体像
Templateは文脈が明確なので、ここにあるMolculeやOrganism
は意味がわかる
ただし、具体的な文言などは仮の状態
Atomic Design - Templetes

10. ページ
代表的なページ。ここで仮テキストなどを実際に入れこみ、最
終的にユーザーが実際見る形で検証する
Atomic Design - Pages

11. Atomic Design
具体的になっていく
各レベルは、互いに依存しないのが理想

12. Atomic Designおさらい
atom =
物理学に倣って、小さいものの組み合わせで全体ができているという考えが前提
原子
コンポーネント指向開発のためのガイドラインになる！

13. Atomic Designおさらい
私たちはページのデザインをしているのではありません
コンポーネントのシステムをデザインしているのです
We’re not designing pages, we’re designing systems of components.
Stephen Hay

14. Atomic Design導入のメリット(原著より)
デザインシステムは一貫した経験をもたらす。これは、ユーザーが UIをより早く習得することを意味し、ス
テークホルダーが気にかけている指標に基づいてより多くのコンバージョンとより多くの収益をもたらす。
デザインシステムがチームの仕事をスピードアップする。新しいリクエストが来るたびに車輪を再開発する
のではなく、チームは既に確立された UIパズルを再利用して、新しいページや機能をこれまで以上早く公
開することができる。
一貫性
効率化

15. Atomic Design導入事例 - AbemaTV
コンポーネントの粒度を論理的に説明できる ガイドラ
イン（共通言語）をもつことで、 チーム開発の効率が
上がる
再利用性が高いAtomsやMoleculesを使用することで
デザイン仕様の変化に強くなる

16. デザイナー視点のAtomic Design
良いこと
-デザインを構造化できる
-共通言語化でチーム制作しやすい
-再現性、再利用性の高いパーツを作れる
疑問
-Atomsから作り始めるデザインフローが現実的でない
これが活きる
デザインデータをつくりたい！

17. Sketchの特徴
Sketchは、シンボルがつくれます
シンボルは、オーバーライドできます

18. Sketchシンボルとオーバーライド
再現性、再利用性の高いUI要素を簡単に作れる

19. SketchでAtomic Design導入のポイント
・デザイン制作しながら、構造を意識してSymbol化
・コンポーネントの構造が見える状態でフロントに渡す
・命名をルール化しておく
・粒度に関しては認識を合わせる必要がありそう

20. まとめ
Atomic Designとは、デザインガイドを作るための開発フロー
デザインの構造化とSketchは親和性が高い
SketchとAtomic Designを使って、サイトを作りながら
副産物的にデザインシステムを運用できたら理想ですね

21. 参考
概要
http://bradfrost.com/blog/post/atomic-web-design/
より詳しく学びたい人
http://atomicdesign.bradfrost.com/table-of-contents/

22. ご静聴ありがとうございました

23. Good is good.
We provide opportunities to the SEKAI by fusing technology and ideas.
テクノロジーとクリエイティブでセカイをより良くする
お問い合わせはこちらから
https://giginc.co.jp/contact/