[レポート] 第２回AtomicDesignについて考える会に参加してきました #ThinkAtomicDesign

清田隆志

2019.02.12

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

オハコンバンニチハ

モバイルアプリサービス部イノベーショングループの清田隆志です。本当に久しぶりにブログ執筆するので、ガクブルしてますがどうぞヨロシクオネガイします。

2019/02/08(金)に 株式会社エウレカ様で 第２回AtomicDesignについて考える会 が開催されました。そのイベントレポートを書いてみたいと思います。

なんとか始められたぜ?

#ThinkAtomicDesign pic.twitter.com/Fl9DbPfETJ

— こばしゅん (@ksyunnnn) 2019年2月8日

余談　今回初エウレカさんのオフィスにお邪魔したのですが洗練&オシャレですごく魅力的なオフィスでテンションあがりましたｗ

AtomicDesignについて考える会について

オーガナイザーとしてフリーランスのフロントエンドエンジニアのこばしゅん(@ksyunnnn)さんのもと、 AtomicDesignの実践についての悩みや課題、TIPSなどの共有や参加者同士の意見交換を目的とする会とのこと。

今回の勉強会は２回目とのことで、テーマは以下です。

デザイナーからみたAtomicDesign、エンジニアからみたAtomicDesign

AtomicDesignというデザインシステムを題材にしてデザイナーさん&エンジニアさんの両視点から考察が聞けるの機会なのですごく楽しみでした。

きっかけ

自分とAtomicDesignの出会いは、2013年頃、中間言語としてSASS/SCSS/LESSが登場してタスクランナーツールでcssをビルドして使っていたころに遡りますｗ

コンポーネントベースでUI構築する際に、妙案はなかろうかとリサーチをかけていたところAtomicDesignというデザインシステムと出会い試行錯誤して取り込もうとしましたが結構挫折を味わいました。素のCSSとしての落とし込みや管理にコストがかかりすぎた、ネイティブアプリ(iOS/Android)でのUIを考えたときもOS別の思想まで考慮して落とし込めない(実力不足)など、壁にぶち当たりまくりましたw

そんな中、時代が進みSPA(Single Page Application)といったフレームワークや周辺のツールが充実してきたことや、AbemaTVでの採用事例など、ちょっとずつ採用され始めてきてることもあり。各社でどのようにプロダクトに落とし込んでいるのか、デザイナーとエンジニアの協業についての取り組みかたなど聞けるのかなと思って参加しました。

タイムテーブル

デザインとエンジニアリングをつなぐコンポーネントの運用設計

Speaker
おすみさん( @cawpea ) さん
Role:
フロントエンドエンジニア
Company
株式会社グッドパッチ

AtomicDesignとFLOCSS

Speaker
rukiadia ( @rukiadia ) さん
Role:
フロントエンドエンジニア
Company
株式会社オミカレ

Building Design Systems with Atomic Design

Speaker
Hidemi Atarashi( @ooDEMi ) さん
Role:
フロントエンドエンジニア
Company
株式会社エウレカ

Atomic Designの話

Speaker
k-okina ( @kahirokunn ) さん
Role:
フロントエンドエンジニア

発表のスライドは こちら で確認できます。

AtomicDesignとフロントエンドのインピーダンスミスマッチ

Speaker
nrs ( @nrs )さん
Role:
フロントエンドエンジニア
サーバーサイドエンジニア

Webサイト制作でのAtomic Designとの付き合い方

Speaker
やまかわたかし( @y_taka520 ) さん
Role:
フロントエンドデザイナー
Company
エイシス株式会社

ユニークなデザインシステム改革

Speaker
菊池将史( @makiozamurai )さん
Role:
CDO / デザイナー
Company
アウルス株式会社

懇親会

本来であれば、軽食とお酒のみのところ。なんとフードスポンサーとして アウルス株式会社 がお寿司とピザをご提供いただきました。この場をかりてありがとうございます！美味しかったです！

懇親会の雰囲気

豪華！！?x?！！！ #ThinkAtomicDesign pic.twitter.com/K8rWj0s5Sj

— chashu (@mp030) 2019年2月8日

パネルディスカッションの雰囲気

パネルディスカッション！ #ThinkAtomicDesign pic.twitter.com/oCsMY3CysB

— れむ (@9almondchocola) 2019年2月8日

感想

今回は結構実装や、導入や運用面のネタが結構聞けた印象でした。

Atomic Component

そんな中で、@kahirokunnさんがご紹介していただいた Atomic Component が興味深かったです。登場構成としては、AtomicDesignの Atomic、Molecules、Organismsは登場しつつ、Ecosystemがデータストアとのやり取りの責務を担当ぽく、Environmentがビュー全体またはページ単位で管理するようです。

Atomic Componentの構成要素