この記事は公開されてから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の構成要素
- Atomic
- Molecules
- Organisms
- Ecosystem
- Environment
Qiitaに和訳が公開されているので興味がるかたは確認してみてください。 A brief look at Atomic Components[和訳]
@kahirokunnさんの以下フレーズが、わかりすぎて自分に一番ささりました。
UIのボリュームが多いとデータソース部分がウルトラFat化するし、 データの伝搬機構もスパゲティが可愛く見える
デザイナーとエンジニアの協業について
弊社はスクラム&アジャイルでプロダクト開発を行うことがあるのですが、デザイナーとエンジニアの協業やプロジェクトの進行に課題があり、 他社の取り組みを聞かせていただいて参考にできればと思ってました。
聞けたお話として
- デザイナーとエンジニアのロール別にチームを分けている。
- デザイナーチームが先行してプロダクトバックログを対応し、WFなどの視覚情報がある状態で開発チーム(エンジニアロール)のフィードバックを受けて対応する。
などなど、プロダクト開発をやりながら改善し、最適化を模索していってるとのことでした。いい話きけました。
おまけ
SPA(React)でこれから、AtomicDesignをベースにプロダクト開発を検討されている方は以下を参考になさってみると良いかもです。
参考になったところ
- Page単位での組み方。
- Template層でのpropsでOrganisms渡しつつ、レイアウト責務の持ち方など
自分が構築するうえで参考になるポイントが沢山あったので、誰かのお役にたてれば幸いです。
18
