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

1.

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

2.

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

3.

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

4.

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

5.

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

6.

バリバリ使用中 ⋯など

7.

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

8.

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

9.

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

10.

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

11.


12.

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

13.

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

14.

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

15.

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

16.

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

17.

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

18.


19.

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

20.

実際のファイルへ

21.


22.

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

23.

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

24.

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

25.

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

26.


27.

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

28.

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

29.


30.

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

31.

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

32.

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

33.

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

34.

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

35.

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

36.

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

37.

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

38.

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

39.

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

40.

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

41.

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

42.

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

43.

リピートグリッド×コンポーネントこんな時に大活躍 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

44.

まとめ

45.

今日お話ししたこと実務

46.

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

47.

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

48.

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

49.

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

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

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

Want more?

Transcript