実務で活かすXD！制作を支える取り組みと代表機能の活用術

by isaikaori

Slide 1

Slide 1 text

実務で活かすXD！制作を支える取り組みと代表機能の活用術 Adobe XD ユーザーグループ名古屋 XDUG名古屋　井斉花織

Slide 2

Slide 2 text

有限会社アップルップル Webデザイナー XDUG名古屋管理人井斉花織自己紹介

Slide 3

Slide 3 text

2018/04 06 2019/03 08現在弊社のWebデザインツール事情最近XDがいい感じ！ By先輩デザイナーデザイナー同士でガイドラインを作成

Slide 4

Slide 4 text

具体的な活用例 ①Webサイトのデザイン+アセット類の作成 ②自社開発CMSのプロトタイプ用ファイル

Slide 5

Slide 5 text

具体的な活用例 ③テーマ開発時のアニメーションの伝達 ④自社開発CMSの紹介ムービー https://www.a‒blogcms.jp/

Slide 6

Slide 6 text

バリバリ使用中 ⋯など

Slide 7

Slide 7 text

今日お話ししたいこと実務

Slide 8

Slide 8 text

今日お話ししたいこと 1 制作を円滑にするための取り組みデザイン時に活躍している代表機能のちょっとした小技集 2

Slide 9

Slide 9 text

制作を円滑にするための取り組み 1

Slide 10

Slide 10 text

取り組んだことガイドラインの作成テンプレートの作成

Slide 11

Slide 11 text

取り組んだことガイドラインの作成テンプレートの作成

Slide 12

Slide 12 text

ファイル作成時にしておきたいこと、気をつけたいことを共有し、デザイナー同士で共通した作成方法の認識を持っておくガイドラインの目的

Slide 13

Slide 13 text

作成フロー 1 2 先輩デザイナーが普段やっているファイルの作り方をドキュメント化デザイナー同士でミーティングをして意見を交換、認識をすり合わせる

Slide 14

Slide 14 text

①アートボードの命名規則ガイドラインの内容 XDの特徴

Slide 15

Slide 15 text

②アセットガイドラインの内容 (図)ラベルの変化など

Slide 16

Slide 16 text

③社内での共有方法ガイドラインの内容バージョン管理の方法など

Slide 17

Slide 17 text

ガイドラインで共有したこと 1 XDでできること＆取り組むこと XDが不得意なところを補う方法 2

Slide 18

Slide 18 text

取り組んだことガイドラインの作成テンプレートの作成

Slide 19

Slide 19 text

毎回揃えるようなパーツ (レギュレーション、アセット類) を予め用意して少しでも工数を削減するテンプレートの目的

Slide 20

Slide 20 text

実際のファイルへ

Slide 21

Slide 21 text

取り組んだことガイドラインの作成テンプレートの作成

Slide 22

Slide 22 text

1 何かにつけて迷う時間が少なくなった作成者に影響を受けずファイル内の巡回がしやすくなった 2 よかったこと 3 今後の新人教育や引き継ぎでも活躍しそう

Slide 23

Slide 23 text

1 アップデートに伴う見直しも必要レギュレーションはガチガチに揃えすぎない（義務でなく努力） 2 課題と戒め

Slide 24

Slide 24 text

デザイン時に活躍している代表機能のちょっとした小技集 2

Slide 25

Slide 25 text

1 リピートグリッドコンポーネント 2

Slide 26

Slide 26 text

1 リピートグリッドコンポーネント 2

Slide 27

Slide 27 text

エントリータイトルエントリータイトルエントリータイトル 2019年00月00日(月) カテゴリー名エントリータイトルエントリータイトルエントリータイトル 2019年00月00日(月) カテゴリー名エントリータイトルエントリータイトルエントリータイトル 2019年00月00日(月) カテゴリー名エントリータイトルエントリータイトルエントリータイトル 2019年00月00日(月) カテゴリー名エントリータイトルエントリータイトルエントリータイトル 2019年00月00日(月) カテゴリー名リピートグリッド

Slide 28

Slide 28 text

メインカラムサブカラムメインカラムグリッドレイアウトのあたりをつける

Slide 29

Slide 29 text

1 リピートグリッドコンポーネント 2

Slide 30

Slide 30 text

コンポーネントマスターインスタンステキスト・画像・カラー・要素の有無・位置をそれぞれ変更することができるボタン1 タイトルが入ります。タイトルが入ります。ラベルラベルボタン1 タイトルが入ります。タイトルが入ります。ラベルラベル

Slide 31

Slide 31 text

ただし同一コンポーネントでバリエーションを広げすぎると後からの編集が大変⋯ マスターインスタンスエントリータイトルエントリータイトルエントリータイトル 2019年00月00日(月) カテゴリー名 #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグエントリータイトルエントリータイトルエントリータイトル 2019年00月00日(月) カテゴリー名 #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグエントリータイトルエントリータイトルエントリータイトル #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグエントリータイトルエントリータイトルエントリータイトルインスタンスインスタンス

Slide 32

Slide 32 text

バリエーションを広げる時の線引き同一コンポーネント新規コンポーネントカラーのみ変化位置変更のない要素の変化 X軸/Y軸のみのサイズの変化 X軸Y軸双方のサイズ変更を含む時アセットで一括変更できない部分を伴う時

Slide 33

Slide 33 text

同一コンポーネント個人的におすすめ

Slide 34

Slide 34 text

同一のコンポーネントにする場合① カラーのみ変化マスターインスタンスボタン1 ボタン1 ボタン1 ボタン1 ボタン1 ボタン1 ボタン1 ボタン1 ボタン1 カラーの変更はアセットの方で行う

Slide 35

Slide 35 text

同一のコンポーネントにする場合② ラベルなど位置変更のない要素の変化マスターインスタンスボタン1 タイトルが入ります。タイトルが入ります。マスターはなるべく全ての情報量が詰まった状態で作成するボタン1 タイトルが入ります。タイトルが入ります。ラベルボタン1 タイトルが入ります。タイトルが入ります。ラベル

Slide 36

Slide 36 text

同一のコンポーネントにする場合③ X軸/Y軸のみのサイズの変化 PCの見出しマスターインスタンス必ずレスポンシブリサイズを併用するマスターボタン1 タイトルが入ります。タイトルが入ります。ラベルインスタンスボタン1 タイトルが入ります。ラベル PCの見出し

Slide 37

Slide 37 text

新規コンポーネント個人的おすすめ

Slide 38

Slide 38 text

新規コンポーネントにする場合① エントリータイトルエントリータイトルエントリータイトル 2019年00月00日(月) カテゴリー名 #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグエントリータイトルエントリータイトルエントリータイトル 2019年00月00日(月) カテゴリー名 #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグエントリータイトルエントリータイトルエントリータイトル 2019年00月00日(月) カテゴリー名 #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグマスターインスタンス縦横比固定の画像など X軸Y軸双方のサイズ変更がある時

Slide 39

Slide 39 text

新規コンポーネントにする場合② マスターインスタンスボタン1 ボタン1 ボタン1 ボタン1 枠線の太さなどアセットで一括変更できない部分を伴う時ボタン1

Slide 40

Slide 40 text

Slide 41

Slide 41 text

1 リピートグリッドコンポーネント 2 ×

Slide 42

Slide 42 text

リピートグリッド×コンポーネント 1 2 3 4 5 1 2 3 ⋯ 5 メリット：スタイルの一部を変更できる

Slide 43

Slide 43 text

リピートグリッド×コンポーネントこんな時に大活躍 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

Slide 44

Slide 44 text

まとめ

Slide 45

Slide 45 text

今日お話ししたこと実務

Slide 46

Slide 46 text

今日お話ししたこと 1 制作を円滑にするための取り組みデザイン時に活躍している代表機能とちょっとした小技集 2

Slide 47

Slide 47 text

※今回紹介したのはほんの一例他にもたくさんのユーザーさんがいろんな工夫をしてる

Slide 48

Slide 48 text

ユーザーグループで聞いて話して調べて学んでいろんなアイデアに出会おう！

Slide 49

Slide 49 text

ご静聴ありがとうございました Twitter:@isaikaori Facebook:isaikaori Blog:http://isaikaori.com