Atomic Designで
業務を改善した話

v-kansai Vue.js/Nuxt Meetup #10

@chan_kakuz

@chan_kakuz

Work

FURYU Corp.

ServerSide Engineer

  • Java
  • Kotlin

FrontEnd Engineer(sometimes)

  • Vue

Who

Today's Topic is...

Atomic Designを
導入して
業務改善できた話

ところで!

Atomic Design
知ってますか?

Atomic Design

小さなUIコンポーネントを組み合わせて大きな
コンポーネントを
作っていくための
デザインフレームワーク

UIコンポーネントの
粒度は5つある

  • Atoms(原子)

  • Molecules(分子)

  • Organisms(有機体)

  • Templates(テンプレート)

  • Pages(ページ)

Atoms(原子)
UIを構築する最小単位
例:ボタン、テキストなど

Molecules(分子)
複数のAtomsを組み合わせたもの
例:入力フォーム+ボタン

Organisms(有機体)
MoleculesやAtomsで構成される
コンポーネント
Moleculesとの違いとしては
独立して成立するコンポーネント
例:ヘッダーなど

Templates(テンプレート)
ワイヤーフレーム

Pages(ページ)
Templatesに対して実際のデータを反映させたもの

なんでAtomic Design
だったのか?

それまでいろんな問題があった、、、

ページごとに若干デザインが違うものがあったり、、、

デザイナーも全てのページを把握できていないので、違いに気づけない、、、

ワイアーフレーム作成に時間がかかる、、、

フロントチームもできたばかりで責務の分割がうまくできない

Atomsをアセットとして入れておく

Cacoo,Zeplin,etc,,,

デザインがページごとに
若干違う、、、
みたいなことは
起きなくなった

ワイアーフレームの
作成の工数が
大きく削減

開発が進めやすくなった

とはいえ

まだまだ課題も

コンポーネントの分け方とか
MoleculesとOrganisms

開発以外にAtomic Designを知ってもらうとか

注意

Atomic Designは
銀の弾丸ではない

注意

たまたまうちのチーム(部署)にはあっていた

世の中の全ての課題を解決できるわけではないしあっていない環境もある

まとめ

  • Atomic Designで業務改善できたよ

  • 扱うには注意が必要

最後に

Atomic Designで業務を改善

By chan_kakuz

Atomic Designで業務を改善

  • 2,092