2019年のAtomicDesignコンポーネント設計/Atomic Design Component Design 2019

by haraguchi

Slide 1

Slide 1 text

2019年の Atomic Design コンポーネント設計 2019/12/10 原口渉 SPACEMARKET Design & Frontend Meetup

Slide 2

Slide 2 text

2 自己紹介原口渉マークアップとコンポーネントの設計・運用をメインで行っています。

Slide 3

Slide 3 text

3 はじめに

Slide 4

Slide 4 text

4 どのようにマークアップをしているか ● 開発環境 ○ コンポーネント：React、styled-components、Atomic Design ○ デザインツール：Figma ○ 確認：Storybook

Slide 5

Slide 5 text

5 どのようにマークアップをしているか ● サービス共通コンポーネントリポジトリでマークアップ ○ スペースマーケットで運営しているサービスで共通で使われているコンポーネントのこと ■ 前回の登壇で話しているのでよろしければご覧ください ● 資料を見てくださっている方へ Speacker Deckだとリンクが無効になるので下にリンク貼っています

Slide 6

Slide 6 text

6 コンポーネント推進PJ

Slide 7

Slide 7 text

7 コンポーネント推進PJ ● コンポーネント設計・運用を職域としているエンジニアとデザイナー ● コンポーネントの設計・運用について ○ 方針決め ○ 課題の共有・相談 ● 目標 ○ スペースマーケットのコンポーネントのガイドラインを作るどんなことをしているか

Slide 8

Slide 8 text

8 コンポーネント推進PJでやったことを紹介します

Slide 9

Slide 9 text

9 コンポーネント推進PJ 1. 共通コンポーネントの反映 2. コンポーネントの粒度と命名規則の策定 3. 課題管理フローの策定 4. プロダクトとStorybookの状態が異なる問題の対応やったこと

Slide 10

Slide 10 text

10 やったこと1：共通コンポーネントの反映 ● 共通コンポーネントが適用されていないページが存在している課題

Slide 11

Slide 11 text

11 やったこと1：共通コンポーネントの反映 SPACEMARKET SPACEMARKET DASHBOARD SPACEMARKET EVENT SPACEMARKET BUSINESS SPACEMARKET ACCOUNT フロントエンド共通リポジトリサービス共通コンポーネントリポジトリスペースマーケットのフロントエンドのリポジトリ構成

Slide 12

Slide 12 text

12 やったこと1：共通コンポーネントの反映共通コンポーネントが反映されていないと...

Slide 13

Slide 13 text

13 やったこと1：共通コンポーネントの反映共通コンポーネントが反映されていると...！

Slide 14

Slide 14 text

14 やったこと1：共通コンポーネントの反映 ● 一部のリポジトリの移行が完了し、更新の手間が減った ○ 完了していないところもあるので引き続き結果

Slide 15

Slide 15 text

15 やったこと2：コンポーネントの粒度と命名規則の策定 ● 明確なコンポーネントの粒度や命名規則が決まっていなかった ○ 粒度・命名規則にばらつき課題

Slide 16

Slide 16 text

16 やったこと2：コンポーネントの粒度と命名規則の策定 ● 適切な粒度に区切って運用管理しやすくするのが目的 ● 似た見た目でもコンポーネントを分ける ○ 再利用性は副次的なものという考え（優先度は高くない）コンポーネントの粒度について：方針

Slide 17

Slide 17 text

17 やったこと2：コンポーネントの粒度と命名規則の策定 ● 粒度に関しての悩みごとが減りそう...！コンポーネントの粒度について：結果

Slide 18

Slide 18 text

18 やったこと2：コンポーネントの粒度と命名規則の策定 ● OrganismsかMoleculesか ○ 難しい ○ 判断基準の1つとして、見た目で役割がわかることコンポーネントの粒度について：OrganismsかMoleculesか

Slide 19

Slide 19 text

19 やったこと2：コンポーネントの粒度と命名規則の策定 ● スペースのリストという役割がわかる

Slide 20

Slide 20 text

20 やったこと2：コンポーネントの粒度と命名規則の策定 ● なんとなくスペースの情報を掲載しているコンポーネントということはわかる ● 単体ではページの構成要素にならないと判断

Slide 21

Slide 21 text

21 やったこと2：コンポーネントの粒度と命名規則の策定 ● どこのページのコンポーネントかを明確にする ○ Page名を接頭につけて命名するコンポーネントの命名規則

Slide 22

Slide 22 text

22 やったこと2：コンポーネントの粒度と命名規則の策定 ● Pages：Pages名 = URLとなるもの ○ /portal → PortalPage ● Templates：Pages名 + template = ラップする要素に関連する ○ PortalPageTemplate ● Organisms：Page名 + コンポーネント名（単体で意味を成す） ○ PortalCategoryList ● Molecules：Page名 + コンポーネント名（単体では意味を成さない） ○ PortalCategoryListItem ● Atoms：このルールにはあてはまらない。汎用的な命名にする

Slide 23

Slide 23 text

23 やったこと3：課題管理フローの策定 ● 日々増えてくコンポーネントの課題 ● ドキュメントで管理していた課題

Slide 24

Slide 24 text

24 やったこと3：課題管理フローの策定 ● ボードで一覧化できるツールで管理することにした ○ JIRA 解決策

Slide 25

Slide 25 text

25 やったこと3：課題管理フローの策定

Slide 26

Slide 26 text

26 やったこと3：課題管理フローの策定

Slide 27

Slide 27 text

27 やったこと3：課題管理フローの策定

Slide 28

Slide 28 text

28 やったこと3：課題管理フローの策定結果 ● 課題の管理が楽になった ○ ブログに書いてますやったこと3：課題管理フローの策定

Slide 29

Slide 29 text

29 やったこと4：プロダクトとStorybookの状態が異なる問題の対応 ● storiesファイルの更新がされず、プロダクト側とStorybookのpropsに差が出てしまう課題

Slide 30

Slide 30 text

30 やったこと4：プロダクトとStorybookの状態が異なる問題の対応 ● マークアップに入る前にpropsをstoriesファイルに書いてもらう ○ 記載してもらったpropsに沿ってマークアップをすることで、FE開発者の修正が減る ● 基本は見つけたら直す ○ すぐに対応できない場合は課題管理票に残す ○ 毎週チェックするので忘れない解決策

Slide 31

Slide 31 text

31 所感 ● やることはたくさんある ● 共通の認識を持つことができる ● デザイナーとの連携がとりやすくなった

Slide 32

Slide 32 text

32 最後に

Slide 33

Slide 33 text

33 最後に ● こんな感じでスペースマーケットのコンポーネントは、デザイナーとエンジニアで協力しながら作っています ● 少しでも興味あったら是非一度遊びに来てください！ ● うちはこんなことやってるよ、とかあったら是非教えてください！

Slide 34

Slide 34 text

No content