Adobe XD ユーザーグループ名古屋 vol.3 https://xdstudy-nagoya.connpass.com/event/139537/
実務で活かすXD！制作を支える取り組みと代表機能の活用術Adobe XD ユーザーグループ名古屋XDUG名古屋 井斉花織
View Slide
有限会社アップルップルWebデザイナーXDUG名古屋 管理人井斉花織自己紹介
2018/04 06 2019/03 08現在弊社のWebデザインツール事情最近XDがいい感じ！By先輩デザイナーデザイナー同士でガイドラインを作成
具体的な活用例①Webサイトのデザイン+アセット類の作成②自社開発CMSのプロトタイプ用ファイル
具体的な活用例③テーマ開発時のアニメーションの伝達④自社開発CMSの紹介ムービーhttps://www.a‒blogcms.jp/
バリバリ使用中⋯など
今日お話ししたいこと実務
今日お話ししたいこと1 制作を円滑にするための取り組みデザイン時に活躍している代表機能のちょっとした小技集2
制作を円滑にするための取り組み1
取り組んだことガイドラインの作成テンプレートの作成
ファイル作成時にしておきたいこと、気をつけたいことを共有し、デザイナー同士で共通した作成方法の認識を持っておくガイドラインの目的
作成フロー12先輩デザイナーが普段やっているファイルの作り方をドキュメント化デザイナー同士でミーティングをして意見を交換、認識をすり合わせる
①アートボードの命名規則ガイドラインの内容XDの特徴
②アセットガイドラインの内容(図)ラベルの変化など
③社内での共有方法ガイドラインの内容バージョン管理の方法など
ガイドラインで共有したこと1 XDでできること＆取り組むことXDが不得意なところを補う方法2
毎回揃えるようなパーツ(レギュレーション、アセット類)を予め用意して少しでも工数を削減するテンプレートの目的
実際のファイルへ
1 何かにつけて迷う時間が少なくなった作成者に影響を受けずファイル内の巡回がしやすくなった2よかったこと3 今後の新人教育や引き継ぎでも活躍しそう
1 アップデートに伴う見直しも必要レギュレーションはガチガチに揃えすぎない（義務でなく努力）2課題と戒め
デザイン時に活躍している代表機能のちょっとした小技集2
1 リピートグリッドコンポーネント2
エントリータイトルエントリータイトルエントリータイトル2019年00月00日(月) カテゴリー名 エントリータイトルエントリータイトルエントリータイトル2019年00月00日(月) カテゴリー名エントリータイトルエントリータイトルエントリータイトル2019年00月00日(月) カテゴリー名エントリータイトルエントリータイトルエントリータイトル2019年00月00日(月) カテゴリー名エントリータイトルエントリータイトルエントリータイトル2019年00月00日(月) カテゴリー名リピートグリッド
メインカラム サブカラムメインカラムグリッドレイアウトのあたりをつける
コンポーネントマスター インスタンステキスト・画像・カラー・要素の有無・位置をそれぞれ変更することができるボタン1タイトルが入ります。タイトルが入ります。ラベル ラベルボタン1タイトルが入ります。タイトルが入ります。ラベル ラベル
ただし同一コンポーネントでバリエーションを広げすぎると後からの編集が大変⋯マスター インスタンスエントリータイトルエントリータイトルエントリータイトル2019年00月00日(月)カテゴリー名 #タグ #タグ #タグ #タグ #タグ#タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグエントリータイトルエントリータイトルエントリータイトル2019年00月00日(月)カテゴリー名 #タグ #タグ #タグ #タグ #タグ#タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグエントリータイトルエントリータイトルエントリータイトル#タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ#タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグエントリータイトルエントリータイトルエントリータイトルインスタンス インスタンス
バリエーションを広げる時の線引き同一コンポーネント 新規コンポーネントカラーのみ変化位置変更のない要素の変化X軸/Y軸のみのサイズの変化X軸Y軸双方のサイズ変更を含む時アセットで一括変更できない部分を伴う時
同一コンポーネント個人的におすすめ
同一のコンポーネントにする場合①カラーのみ変化マスター インスタンスボタン1ボタン1ボタン1ボタン1ボタン1ボタン1ボタン1ボタン1ボタン1カラーの変更はアセットの方で行う
同一のコンポーネントにする場合②ラベルなど位置変更のない要素の変化マスター インスタンスボタン1タイトルが入ります。タイトルが入ります。マスターはなるべく全ての情報量が詰まった状態で作成するボタン1タイトルが入ります。タイトルが入ります。ラベルボタン1タイトルが入ります。タイトルが入ります。ラベル
同一のコンポーネントにする場合③X軸/Y軸のみのサイズの変化PCの見出しマスターインスタンス必ずレスポンシブリサイズを併用するマスターボタン1タイトルが入ります。タイトルが入ります。ラベルインスタンスボタン1タイトルが入ります。ラベルPCの見出し
新規コンポーネント個人的おすすめ
新規コンポーネントにする場合①エントリータイトルエントリータイトルエントリータイトル2019年00月00日(月)カテゴリー名 #タグ #タグ #タグ #タグ #タグ#タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグエントリータイトルエントリータイトルエントリータイトル2019年00月00日(月)カテゴリー名 #タグ #タグ #タグ #タグ #タグ#タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグエントリータイトルエントリータイトルエントリータイトル2019年00月00日(月)カテゴリー名 #タグ #タグ #タグ #タグ #タグ#タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグマスター インスタンス縦横比固定の画像などX軸Y軸双方のサイズ変更がある時
新規コンポーネントにする場合②マスター インスタンスボタン1 ボタン1ボタン1 ボタン1枠線の太さなどアセットで一括変更できない部分を伴う時ボタン1
1 リピートグリッドコンポーネント2×
リピートグリッド×コンポーネント1 2 3 4 5 1 2 3 ⋯ 5メリット：スタイルの一部を変更できる
リピートグリッド×コンポーネントこんな時に大活躍1 2 3 45 6 7 8 9 10 1112 13 14 15 16 17 1819 20 21 22 23 24 2526 27 28 29 30 31
まとめ
今日お話ししたこと実務
今日お話ししたこと1 制作を円滑にするための取り組みデザイン時に活躍している代表機能とちょっとした小技集2
※今回紹介したのはほんの一例他にもたくさんのユーザーさんがいろんな工夫をしてる
ユーザーグループで聞いて話して調べて学んでいろんなアイデアに出会おう！
ご静聴ありがとうございましたTwitter:@isaikaoriFacebook:isaikaoriBlog:http://isaikaori.com
isaikaori
sbtechnight
nasa9084
fixstars
sat
tsubakimoto_s
doradora09
kthrtty
dongjin
kazumax55
line_developers
morganepeng
bluesmoon
geoffreycrofte
danielanewman
matthewcrist
shlominoach
swwweet
philnash
phodgson
tmm1
ddemaree
trallard