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.3k
実務で活かす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
22
今日から始めるDesignOpsのヒント
isaikaori
1
590
Deep Dive Adobe XD - レイアウト編
isaikaori
0
200
Adobe XDの『こんな時どうする?』を集めました
isaikaori
0
670
アウトプットむずい
isaikaori
0
310
実践!a-blog cmsユーザーのためのsite2019.xd活用法
isaikaori
0
180
ECサイトで実現したい『体験』のあり方を考える
isaikaori
1
800
a-blog cmsの初心者コンテンツを整備してる話
isaikaori
0
730
強・用・美から考えるテーマデザインのヒント_後編
isaikaori
0
630
Other Decks in Technology
See All in Technology
Amazon Route 53, 待ちに待った TLSAレコードのサポート開始
kenichinakamura
0
170
デジタルアイデンティティ人材育成推進ワーキンググループ 翻訳サブワーキンググループ 活動報告 / 20250114-OIDF-J-EduWG-TranslationSWG
oidfj
0
540
なぜfreeeはハブ・アンド・スポーク型の データメッシュアーキテクチャにチャレンジするのか?
shinichiro_joya
2
490
技術に触れたり、顔を出そう
maruto
1
150
FODにおけるホーム画面編成のレコメンド
watarukudo
PRO
2
280
ゼロからわかる!!AWSの構成図を書いてみようワークショップ 問題&解答解説 #デッカイギ #羽田デッカイギおつ
_mossann_t
0
1.5k
re:Invent2024 KeynoteのAmazon Q Developer考察
yusukeshimizu
1
150
「隙間家具OSS」に至る道/Fujiwara Tech Conference 2025
fujiwara3
7
6.5k
メンバーがオーナーシップを発揮しやすいチームづくり
ham0215
2
140
Oracle Exadata Database Service(Dedicated Infrastructure):サービス概要のご紹介
oracle4engineer
PRO
0
12k
Accessibility Inspectorを活用した アプリのアクセシビリティ向上方法
hinakko
0
180
AIアプリケーション開発でAzure AI Searchを使いこなすためには
isidaitc
0
110
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
133
9k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
98
18k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
The Language of Interfaces
destraynor
155
24k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
VelocityConf: Rendering Performance Case Studies
addyosmani
327
24k
Scaling GitHub
holman
459
140k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
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