Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
実務で活かすXD!制作を支える取り組みと代表機能の活用術
Search
isaikaori
August 31, 2019
Technology
2
1.4k
実務で活かすXD!制作を支える取り組みと代表機能の活用術
Adobe XD ユーザーグループ名古屋 vol.3
https://xdstudy-nagoya.connpass.com/event/139537/
isaikaori
August 31, 2019
Tweet
Share
More Decks by isaikaori
See All by isaikaori
熱狂が伝播するチームの作り方
isaikaori
0
63
今日から始めるDesignOpsのヒント
isaikaori
1
660
Deep Dive Adobe XD - レイアウト編
isaikaori
0
220
Adobe XDの『こんな時どうする?』を集めました
isaikaori
0
710
アウトプットむずい
isaikaori
0
330
実践!a-blog cmsユーザーのためのsite2019.xd活用法
isaikaori
0
190
ECサイトで実現したい『体験』のあり方を考える
isaikaori
1
860
a-blog cmsの初心者コンテンツを整備してる話
isaikaori
0
760
強・用・美から考えるテーマデザインのヒント_後編
isaikaori
0
720
Other Decks in Technology
See All in Technology
「クラウドコスト絶対削減」を支える技術—FinOpsを超えた徹底的なクラウドコスト削減の実践論
delta_tech
4
140
Claude Code に プロジェクト管理やらせたみた
unson
5
2.5k
Model Mondays S2E03: SLMs & Reasoning
nitya
0
350
さくらのIaaS基盤のモニタリングとOpenTelemetry/OSC Hokkaido 2025
fujiwara3
2
360
AI専用のリンターを作る #yumemi_patch
bengo4com
5
4.1k
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
21
7.2k
生成AI開発案件におけるClineの業務活用事例とTips
shinya337
0
240
Flutter向けPDFビューア、pdfrxのpdfium WASM対応について
espresso3389
0
130
2025-07-06 QGIS初級ハンズオン「はじめてのQGIS」
kou_kita
0
160
自律的なスケーリング手法FASTにおけるVPoEとしてのアカウンタビリティ / dev-productivity-con-2025
yoshikiiida
1
15k
Delta airlines®️ USA Contact Numbers: Complete 2025 Support Guide
airtravelguide
0
340
LangSmith×Webhook連携で実現するプロンプトドリブンCI/CD
sergicalsix
1
210
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
53
7.7k
How to Ace a Technical Interview
jacobian
277
23k
Why Our Code Smells
bkeepers
PRO
337
57k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
For a Future-Friendly Web
brad_frost
179
9.8k
Designing for humans not robots
tammielis
253
25k
Automating Front-end Workflow
addyosmani
1370
200k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
680
The Art of Programming - Codeland 2020
erikaheidi
54
13k
4 Signs Your Business is Dying
shpigford
184
22k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
Building Adaptive Systems
keathley
43
2.7k
Transcript
実務で活かすXD! 制作を支える取り組みと 代表機能の活用術 Adobe XD ユーザーグループ名古屋 XDUG名古屋 井斉花織
有限会社アップルップル Webデザイナー XDUG名古屋 管理人 井斉花織 自己紹介
2018/04 06 2019/03 08現在 弊社のWebデザインツール事情 最近XDがいい感じ! By先輩デザイナー デザイナー同士で ガイドラインを作成
具体的な活用例 ①Webサイトのデザイン+アセット類の作成 ②自社開発CMSのプロトタイプ用ファイル
具体的な活用例 ③テーマ開発時のアニメーションの伝達 ④自社開発CMSの紹介ムービー https://www.a‒blogcms.jp/
バリバリ使用中 ⋯など
今日お話ししたいこと 実務
今日お話ししたいこと 1 制作を円滑にするための取り組み デザイン時に活躍している代表機能の ちょっとした小技集 2
制作を円滑にするための 取り組み 1
取り組んだこと ガイドラインの 作成 テンプレートの 作成
取り組んだこと ガイドラインの 作成 テンプレートの 作成
ファイル作成時にしておきたいこと、 気をつけたいことを共有し、 デザイナー同士で共通した 作成方法の認識を持っておく ガイドラインの目的
作成フロー 1 2 先輩デザイナーが普段やっている ファイルの作り方をドキュメント化 デザイナー同士でミーティングをして 意見を交換、認識をすり合わせる
①アートボードの命名規則 ガイドラインの内容 XDの特徴
②アセット ガイドラインの内容 (図)ラベルの変化など
③社内での共有方法 ガイドラインの内容 バージョン管理の 方法など
ガイドラインで共有したこと 1 XDでできること&取り組むこと XDが不得意なところを補う方法 2
取り組んだこと ガイドラインの 作成 テンプレートの 作成
毎回揃えるようなパーツ (レギュレーション、アセット類) を予め用意して 少しでも工数を削減する テンプレートの目的
実際のファイルへ
取り組んだこと ガイドラインの 作成 テンプレートの 作成
1 何かにつけて迷う時間が少なくなった 作成者に影響を受けず ファイル内の巡回がしやすくなった 2 よかったこと 3 今後の新人教育や引き継ぎでも活躍しそう
1 アップデートに伴う見直しも必要 レギュレーションはガチガチに揃えすぎない (義務でなく努力) 2 課題と戒め
デザイン時に活躍している 代表機能の ちょっとした小技集 2
1 リピートグリッド コンポーネント 2
1 リピートグリッド コンポーネント 2
エントリータイトルエントリータイト ルエントリータイトル 2019年00月00日(月) カテゴリー名 エントリータイトルエントリータイト ルエントリータイトル 2019年00月00日(月) カテゴリー名 エントリータイトルエントリータイト ルエントリータイトル
2019年00月00日(月) カテゴリー名 エントリータイトルエントリータイト ルエントリータイトル 2019年00月00日(月) カテゴリー名 エントリータイトルエントリータイト ルエントリータイトル 2019年00月00日(月) カテゴリー名 リピートグリッド
メインカラム サブカラム メインカラム グリッドレイアウトのあたりをつける
1 リピートグリッド コンポーネント 2
コンポーネント マスター インスタンス テキスト・画像・カラー・要素の有無・位置をそれぞれ変更することができる ボタン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
バリエーションを広げる時の線引き 同一コンポーネント 新規コンポーネント カラーのみ変化 位置変更のない要素の変化 X軸/Y軸のみのサイズの変化 X軸Y軸双方のサイズ変更を 含む時 アセットで 一括変更できない部分を
伴う時
1 リピートグリッド コンポーネント 2 ×
リピートグリッド×コンポーネント 1 2 3 4 5 1 2 3 ⋯
5 メリット: スタイルの一部を変更できる
リピートグリッド×コンポーネント こんな時に大活躍 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
まとめ
今日お話ししたこと 実務
今日お話ししたこと 1 制作を円滑にするための取り組み デザイン時に活躍している代表機能と ちょっとした小技集 2
※今回紹介したのはほんの一例 他にもたくさんのユーザーさんが いろんな工夫をしてる
ユーザーグループで 聞いて話して調べて学んで いろんなアイデアに出会おう!
ご静聴ありがとうございました Twitter:@isaikaori Facebook:isaikaori Blog:http://isaikaori.com