SlideShare ist ein Scribd-Unternehmen logo
1 von 42
Downloaden Sie, um offline zu lesen
Atomic Design
にまつわるエトセトラ
2015-05-30
Edward Fox
• Repro Inc.
• Front-end Developer
• Ruby on Rails, CSS, JavaScript, Git, AWS
今回話すこと
• Atomic Designという設計思想
• 銀の弾丸はない
今回話さないこと
• 完璧なデザイン・設計
• デザインのハウツーや技法
デザインを外注することに
Atomic Designというものがあるらしい
Brad Frost
Atomic design provides a clear methodology for
crafting design systems. It gives us the ability to
traverse from abstract to concrete. Because of this, we
can create systems that promote consistency and
scalability while simultaneously showing things in their
final context. And by assembling rather than
deconstructing, we’re crafting a system right out of the
gate instead of cherry picking patterns after the fact.
ようするに
• デザインシステムを作る方法論の1つ
• デザインの一貫性と拡張性
• 多人数の作業においても、デザインシステ
ムが1つ1つ組み上がって構築される
Atoms
Atoms
Molecules
Molecules
Organisms
Organisms
Templates
Templates
Pages
Pages
わかりやすい
• 最小単位のコンポーネントを作り、それを
組み合わせてより複雑なデザインを形作る
デザイナーとエンジニアが協調しやすそう
• デザインのコンポーネント(視覚的なまと
まり)と実装の単位(HTMLタグ/CSS
ファイル)が対応する
色々と問題もある
問題:
エラーメッセージは
Molecule? Organism? Template?
解決:
単体で意味をもって機能するから
Organismに集約
問題:
多言語対応とかどうすんの?
解決:
それぞれの言語を
1つのテンプレートとして考える
ゼロからプロダクトやブログテーマなどを作っていく
には良さそう
• 既存のサービスから要素を抽出してAtomicな要素に
分割していくのは難しい
• PhotoshopとかSketchでできたデザインを実装してい
く場合にはAtomicな要素の漏れがありそう
• 単一ページにAtomic Designを使わない
結論
• Atomic Design良い。でもサービスの段階や開発にあっ
たデザイン哲学・設計を選択するの大事
• CSSはすぐ腐る
• 完全無欠な設計を目指すのではなく、壊れたとしても
復旧がすぐに出来る設計と心構えを
Sample:
https://github.com/edwardkenfox/atomic-sample
We’re hiring!
完

Weitere ähnliche Inhalte

Ähnlich wie Atomic Designにまつわるエトセトラ

実践!AWSクラウドデザインパターン
実践!AWSクラウドデザインパターン実践!AWSクラウドデザインパターン
実践!AWSクラウドデザインパターン
Hiroyasu Suzuki
 
Rdbms起点で考えると見えない世界 okuyama勉強会
Rdbms起点で考えると見えない世界 okuyama勉強会Rdbms起点で考えると見えない世界 okuyama勉強会
Rdbms起点で考えると見えない世界 okuyama勉強会
Masakazu Muraoka
 
広島Ruby勉強会#35プレゼン
広島Ruby勉強会#35プレゼン広島Ruby勉強会#35プレゼン
広島Ruby勉強会#35プレゼン
Kakigi Katuyuki
 

Ähnlich wie Atomic Designにまつわるエトセトラ (20)

AWS Summit San Francisco 2017 Werner Vogelsによる基調講演を徹底紹介
AWS Summit San Francisco 2017 Werner Vogelsによる基調講演を徹底紹介AWS Summit San Francisco 2017 Werner Vogelsによる基調講演を徹底紹介
AWS Summit San Francisco 2017 Werner Vogelsによる基調講演を徹底紹介
 
実践!AWSクラウドデザインパターン
実践!AWSクラウドデザインパターン実践!AWSクラウドデザインパターン
実践!AWSクラウドデザインパターン
 
メテオフォール型開発 X サーバーレス開発
メテオフォール型開発 X サーバーレス開発メテオフォール型開発 X サーバーレス開発
メテオフォール型開発 X サーバーレス開発
 
クラウドネイティブなアーキテクチャでサクサク解析
クラウドネイティブなアーキテクチャでサクサク解析クラウドネイティブなアーキテクチャでサクサク解析
クラウドネイティブなアーキテクチャでサクサク解析
 
クラウド時代のものづくり(分散アーキテクチャ時代におけるWebシステムの開発と運用) #seccamp
クラウド時代のものづくり(分散アーキテクチャ時代におけるWebシステムの開発と運用) #seccampクラウド時代のものづくり(分散アーキテクチャ時代におけるWebシステムの開発と運用) #seccamp
クラウド時代のものづくり(分散アーキテクチャ時代におけるWebシステムの開発と運用) #seccamp
 
20130309 春のJAWS-UG三都物語 美人CDP
20130309 春のJAWS-UG三都物語 美人CDP20130309 春のJAWS-UG三都物語 美人CDP
20130309 春のJAWS-UG三都物語 美人CDP
 
IoT(Bluetooth mesh) × サーバーレス
IoT(Bluetooth mesh) × サーバーレスIoT(Bluetooth mesh) × サーバーレス
IoT(Bluetooth mesh) × サーバーレス
 
エンジニア勉強会20140424
エンジニア勉強会20140424エンジニア勉強会20140424
エンジニア勉強会20140424
 
(Japanese) Build A Cloud With Open Source
(Japanese) Build A Cloud With Open Source(Japanese) Build A Cloud With Open Source
(Japanese) Build A Cloud With Open Source
 
Infra as Code in Azure
Infra as Code in AzureInfra as Code in Azure
Infra as Code in Azure
 
MicrosoftのOSSへの取り組み
MicrosoftのOSSへの取り組みMicrosoftのOSSへの取り組み
MicrosoftのOSSへの取り組み
 
Rdbms起点で考えると見えない世界 okuyama勉強会
Rdbms起点で考えると見えない世界 okuyama勉強会Rdbms起点で考えると見えない世界 okuyama勉強会
Rdbms起点で考えると見えない世界 okuyama勉強会
 
CloudConductorの特長と最新動向(OSSユーザーのための勉強会#7)
CloudConductorの特長と最新動向(OSSユーザーのための勉強会#7)CloudConductorの特長と最新動向(OSSユーザーのための勉強会#7)
CloudConductorの特長と最新動向(OSSユーザーのための勉強会#7)
 
スマートフォン×Cassandraによるハイパフォーマンス基盤の構築事例
スマートフォン×Cassandraによるハイパフォーマンス基盤の構築事例スマートフォン×Cassandraによるハイパフォーマンス基盤の構築事例
スマートフォン×Cassandraによるハイパフォーマンス基盤の構築事例
 
【日商USA】Webinar 2023.12.13 AWS re:Invent ハイライト ~データ活用の最先端を垣間見る~
【日商USA】Webinar 2023.12.13 AWS re:Invent ハイライト ~データ活用の最先端を垣間見る~【日商USA】Webinar 2023.12.13 AWS re:Invent ハイライト ~データ活用の最先端を垣間見る~
【日商USA】Webinar 2023.12.13 AWS re:Invent ハイライト ~データ活用の最先端を垣間見る~
 
2013.06.20 oss
2013.06.20 oss2013.06.20 oss
2013.06.20 oss
 
AWSクラウドデザインパターン - JEITA講演 -
AWSクラウドデザインパターン - JEITA講演 - AWSクラウドデザインパターン - JEITA講演 -
AWSクラウドデザインパターン - JEITA講演 -
 
広島Ruby勉強会#35プレゼン
広島Ruby勉強会#35プレゼン広島Ruby勉強会#35プレゼン
広島Ruby勉強会#35プレゼン
 
concrete5で社内システムのお話し
concrete5で社内システムのお話しconcrete5で社内システムのお話し
concrete5で社内システムのお話し
 
【Japan Partner Conference 2019】遂に来た! フルマーネージド Azure Red Hat OpenShift で実現する O...
【Japan Partner Conference 2019】遂に来た! フルマーネージド Azure Red Hat OpenShift で実現する O...【Japan Partner Conference 2019】遂に来た! フルマーネージド Azure Red Hat OpenShift で実現する O...
【Japan Partner Conference 2019】遂に来た! フルマーネージド Azure Red Hat OpenShift で実現する O...
 

Atomic Designにまつわるエトセトラ