Adobe XDで始めるAtomic Design

by assialiholic

Slide 1

Slide 1 text

自己紹介・会社：24‒7/パンセ　ーテクニカルディレクター/シニアエンジニア・ブログ：Thinking Salad ・マーケティングからコンテンツ制作からUI設計からエンジニアリングまで割と何でも器用貧乏

Slide 2

Slide 2 text

Bracketsの本を出しています最近アップデートしていなくてアレですが…

Slide 3

Slide 3 text

PRECSSというCSSアーキテクチャも作っています OOCSS、SMACSS、BEMをベースにした中規模以上向けCSSアーキテクチャ http://precss.io/ja/

Slide 4

Slide 4 text

Adobe XDで始めるAtomic Design Adobe XD ユーザーフェス 2019 (札幌)

Slide 5

Slide 5 text

Atomic Designとは

Slide 6

Slide 6 text

Atomic Designとは・Brad Frost氏によって提唱されたデザインシステム構築、運用の方法論・UIを以下の5つの粒度に分解して整理しているのが特徴　ー Atoms（原子）　ー Molecules（分子）　ー Organisms（有機体）　ー Template（テンプレート）　ー Page（ページ） http://atomicdesign.bradfrost.com

Slide 7

Slide 7 text

なぜAtomic Designが必要なのか？・別Atomic Designでなくてもよい・ただし、いずれにしても「UIをロジカルに整理する」というアプローチはあった方がよい　ーデザイン的な観点でも、それを実装するコード的な観点でも・現状世界的に1番有名で、受け入れられているのがAtomic Designというだけ

Slide 8

Slide 8 text

恐らくUIが整理されていないであろう、某webサイト

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

左に右向きの矢印、テキストの後に鍵アイコン

Slide 11

Slide 11 text

矢印がなぜか右に！？（しかも大きく）　突然現れた角丸ボタン。どうやら「戻る」系は角丸らしい

Slide 12

Slide 12 text

どうやら「戻る」系は角丸らしい　そうでもないらしい。左向き矢印は当然左に。（さっき右向き矢印が左についてなかったっけ…？）

Slide 13

Slide 13 text

ボタンオールスターはこんな感じ

Slide 14

Slide 14 text

ボタンオールスターもう1つ。同じUIパーツかと思いきや……

Slide 15

Slide 15 text

ボタンの位置と余白が全然違う…！

Slide 16

Slide 16 text

UIが整理されていないと・運用を進めれば進めるほど、「同じ機能・異なるパターン」のUIが増えていく　ーユーザーを戸惑わせる原因になりかねない　ーユーザーが戸惑えば、当然ページ遷移が上手くいかず、CV率の低下に・異なるパターンのUIであれば、当然エンジニアも新たに実装しなければならない　ーその工数無駄では？

Slide 17

Slide 17 text

Atomic Designの考えるUI整理論 http://atomicdesign.bradfrost.com

Slide 18

Slide 18 text

Atoms（原子）・1番最小単位となるコンポーネント・どのwebページでも使用され得る、例えばボタンやinput 要素、タイトルなど・「これ以上分解できないもの」と捉えるとわかりやすい http://atomicdesign.bradfrost.com

Slide 19

Slide 19 text

Atomsの例 http://atomicdesign.bradfrost.com

Slide 20

Slide 20 text

Molecules（分子）・Atomsが集まり、グループを形成したもの・比較的小さめなUIパーツの集合・コンポーネントとして機能を持ち始める・「単一責任原則」に倣い、1つのMoleculesが持つ機能は 1つであるべき http://atomicdesign.bradfrost.com

Slide 21

Slide 21 text

Moleculesの例 http://atomicdesign.bradfrost.com

Slide 22

Slide 22 text

Organisms（有機体）・AtomsやMolecules、他のOrganismsの組み合わせからなる比較的複雑なUIグループ・Organismsの中に他のOrganismsも含められることが粒度のポイント・特定のエリアを大きく形成することが多い http://atomicdesign.bradfrost.com

Slide 23

Slide 23 text

Organismsの例 http://atomicdesign.bradfrost.com

Slide 24

Slide 24 text

Organismsの例 http://atomicdesign.bradfrost.com

Slide 25

Slide 25 text

Templates（テンプレート）・今まで出てきたもののを組み合わせ、レイアウトを形成したもの・実際に使用する画像やテキストなどのコンテンツは考慮せず、あくまでレイアウトや構造の定義に留まる http://atomicdesign.bradfrost.com

Slide 26

Slide 26 text

Templateの例 http://atomicdesign.bradfrost.com

Slide 27

Slide 27 text

Page（ページ）・前述のテンプレートに、実際に画像やテキストなどのコンテンツなどを適用した形・webページとしてそのまま公開しても差し支えないもの http://atomicdesign.bradfrost.com

Slide 28

Slide 28 text

Pageの例 http://atomicdesign.bradfrost.com

Slide 29

Slide 29 text

Atomic Designに基づいて XDでデザインしてみる

Slide 30

Slide 30 text

ファイル構成（全てクラウドドライブ） Atoms.xd Molecules.xd Organisms.xd Templates.xd Pagesはサイトに公開される状態なので、HTMLに任せて必ずしもデザインデータは作らなくて良いと思っています。お好みで。

Slide 31

Slide 31 text

なぜファイルを分けるのか？・全て1つのXDファイルにまとめてしまうと、コンポーネントが増えたときに探すのが大変なため・どれがAtomsなのか、Moleculesなのかなどを強く意識するため・Q. いろんなファイル行き来するのめんどくさくない？・A. 若干めんどくさいです。が、やはり1つのファイルの肥大化は避けたい・デザインが進んでコンポーネントが増えたときに、後々これが必ず効いてくる

Slide 32

Slide 32 text

なぜクラウドドライブなのか？・クラウドドライブのファイルは、アセットソースとして参照することができます・アセットソースごとに、コンポーネントのフィルタリングも可能

Slide 33

Slide 33 text

アセットソースの指定方法

Slide 34

Slide 34 text

コンポーネントのフィルタリング

Slide 35

Slide 35 text

しかし粒度が1つ足りない

Slide 36

Slide 36 text

Atomsの例 CONFIRM タイトルが入ります

Slide 37

Slide 37 text

Atomsよりさらに細かい粒度・AtomsがUIの最小単位として、しかしさらに分解すると、デザイン要素として下記が抽出される　ー色　ーフォントファミリー　ーアイコン　　ーーアイコンをAtomsとすると、アイコンを含む単純なボタンすらMoleculesとなるので都合が悪い・Atomsを「独立した意味のあるUIの最小単位」とすると、下記もAtoms以下の単位となる　ー本文の標準フォントサイズ　ー（注釈のフォントサイズ）

Slide 38

Slide 38 text

ファイル構成（Nucleusは半田が勝手に命名） Atoms.xd Nucleus.xd Molecules.xd Organisms.xd Templates.xd

Slide 39

Slide 39 text

あとはどんどん作るだけ（ここからはデモをしながら） https://bit.ly/2IpcgYm

Slide 40

Slide 40 text

1. 実際にやってみて思う Atomic Design実施のポイント

Slide 41

Slide 41 text

Atomic Designの考えるUI整理論（再掲） http://atomicdesign.bradfrost.com

Slide 42

Slide 42 text

じゃあこの順番で作るのか？ http://atomicdesign.bradfrost.com

Slide 43

Slide 43 text

そんなことはない・ボタンや見出しから作り、それらを組み合わせてUIグループをつくり、それらを組み合わせてページを作れる人がいたら尊敬します・私は結局TemplatesまたはPagesから作成します・そのプロセスの中で作成したUIを、随時AtomsやMoculesなどの他のファイルに登録して、 TemplatesまたはPagesのファイルに再輸入します・つまり1ページ作るごとに、他のファイルのコンポーネントが少しずつ増えていくイメージ・ただし見出しやボタンなどのAtoms系はパターンがあるので、タイミングの良いときにバリエーションを一気に作ってしまってもいいかも

Slide 44

Slide 44 text

その他の細かいはなし・自分はNucleusで管理するコンポーネントは英語で名前を付けるようにしています　ーそうするとパッと見て区別しやすい　ー Nucleusの粒度のものはTemplates/Pagesで直接使うべきではないので、その防止も含めて　ー将来的にアセットパネルのソートとかもくると思うので、それも見越して

Slide 45

Slide 45 text

その他の細かいはなし・バリエーションはスラッシュで区切って名前を付けるようにしています　ーそうするとパッと見て区別しやすい　ー将来的にアセットパネルのソートとかもくると思うので、それも見越して

Slide 46

Slide 46 text

その他の細かいはなし・文字スタイルはフォントファミリーの管理にしか使っていないです　ー意図して大きさも登録してしまうと、それっとつまり Atomsなので、Nucleusで管理するものじゃないなと（つまり大きさとファミリーのセットはAtomsでコンポーネントとして管理している）　ーただし本文などの標準テキストは例外として、大きさと行間もセットにしています　　ーー本文をAtomsとして定義できなくもないですが、それってやりすぎかなと

Slide 47

Slide 47 text

その他の細かいはなし・ちなみにグリッド表示にすると、文字スタイルがプレビューされます。便利。

Slide 48

Slide 48 text

その他の細かいはなし・とりあえず1回しか使っていないコンポーネントは、 MoleculesまたはOrganismsとして定義しないこともありますー特にOrganisms。例えばこのレイアウトなどー厳密にやろうとし過ぎると、デザインという本質的なところ以外で時間を取られてしまうので、ある程度の雑さは必要ですーただし再度似たようなコンポーネントを作りそうであれば、きちんと定義して整理すべき

Slide 49

Slide 49 text

その他の細かいはなし・このページもそうーフォームなど、ページごとに項目が変わることがほとんどなので、Moleculesの繰り返しであり、いちいち Organismsにはしていないです

Slide 50

Slide 50 text

2. コンポーネントを操るうえで使いこなすべきXDの機能

Slide 51

Slide 51 text

基本のショートカット・Cmd + Y 　ーレイヤー表示/非表示・Cmd + Shift + Y 　ーアセットの表示/非表示・Cmd + Shift + K 　ーマスターコンポーネントを編集　　ーー別ファイルでも大丈夫！　　（アクション名が変わるらしい）

Slide 52

Slide 52 text

Slide 53

Slide 53 text

Slide 54

Slide 54 text

コンポーネントのフィルタリング・とにかくこれは便利なので、駆使しない手はない・クラウドドライブでファイルを分けているのも、半分これが理由です

Slide 55

Slide 55 text

コンポーネントのテキストはエリア内テキストがオススメ・ポイントテキストだと、横幅を変えると拡大縮小してしまう・エリア内テキストだと、文字が下に流れるため、つまり HTMLの挙動と同じように

Slide 56

Slide 56 text

複数の要素を一斉にインスタンスに差し替える・コンポーネント/インスタンスに他のコンポーネントをドロップすると、差し替えることができます・マスターコンポーネントに他のコンポーネントをドロップすると、インスタンスが全て差し替わります・そのため、とりあえずTemplates/Pages内で一時的にコンポーネント/インスタンス化しておくと、後で他のファイルから再輸入するときの差し替えがかなり楽に

Slide 57

Slide 57 text

同じ位置にインスタンスを配置したい場合は、コピペで・例えばヘッダーなど、常に同じ位置にあって欲しいインスタンスの場合　ーアセットパネルからのドロップではなく、他アートボードからコピペで　ーそうすると、全く同じ位置に配置してくれます（コンポーネント/インスタンスに限らず）

Slide 58

Slide 58 text

Atomic Designの真価について

Slide 59

Slide 59 text

Atomic Designの真価について・実際に実装を行う、エンジニアとの共通言語となる・UIがロジカルに整理されるこの2点だと考えています。

Slide 60

Slide 60 text

しかし共通言語とはしかしながら共通言語とは言っても、実際にAtomic Designで定義した・Nucleus ・Atoms ・Molecules ・Organisms ・Templates の粒度が、そのままコード設計・実装の粒度になることはまずありません。それをやろうと思うと、デザイナーとエンジニア間でかなり密なコミュニケーションが必要になり、結局それでもどちらかに必ず負担がかかります。無理に完全一致させようとするものではない。

Slide 61

Slide 61 text

結局Atomic Designの役割とは優秀なエンジニアであればあるほど、Atomic Designなどなくても、デザインカンプからコンポーネントの依存関係を読み解き、コードとしてきちんと整理することができます。そのためAtomic Designの担う役割としては、デザイナーとエンジニアで認識を完全一致させるのではなく、あくまで架け橋になればよい、程度に捉えた方がよいでしょう。それなりに整理されているだけでエンジニアとしては大助かりなので、無理に一致させようとせず、「デザインをする上での思考整理」を主目的とするのが、1番無理のない実施方針だと考えています。それと、整理することはデザインの本質ではないので、目的を見失わないように。

Slide 62

Slide 62 text

まとめ

Slide 63

Slide 63 text

何も整理しないよりは、絶対整理した方がいい！

Slide 64

Slide 64 text

2019年5月アップデートで、 XDでのデザインシステム構築がかなり現実的になってきた！

Slide 65

Slide 65 text

いきなり大規模案件でやってみても絶対破綻するので、小規模からでも始めよう！

Slide 66

Slide 66 text

Thank YOU ;) assialiholic atsushi.handa.3