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
Webサイト制作が快適になるAdobeXDの導入活用Tips
Search
あげ
August 11, 2018
Design
1
330
Webサイト制作が快適になるAdobeXDの導入活用Tips
Web Designer’s Tips ! の登壇資料です
https://web-designers-tips.peatix.com/
あげ
August 11, 2018
Tweet
Share
More Decks by あげ
See All by あげ
カスタマーサポートメンバーが開発チーム年末大掃除大会で音頭をとった話
60d
0
34
デザイナー不在だった開発チームの中でデザイナーとして何ができるのか by @rokuzeudon
60d
5
940
わたしのオススメのタスク管理ツール by @rokuzeudon
60d
1
220
BootstrapベースなツールのデザインフェーズでのAdobe XD活用チャレンジ
60d
3
2.6k
プロジェクトをなめらかに進めるのにAdobe XDが役立ってる話
60d
3
3k
「稼ぐ」以外でブログ発信を楽しむ視点あれこれ
60d
0
450
オンラインスクール DelightU EX 課題発表資料 @rokuzeudon
60d
0
660
Other Decks in Design
See All in Design
AIと創る広告の未来 ― タップルと極AIお台場スタジオの最新事例― / ai-tapple-odaiba
cyberagentdevelopers
PRO
1
360
Managing Design Systems (Smashing NY 2024)
nathanacurtis
2
300
Managing Design Systems (Antwerp 2024)
nathanacurtis
1
300
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
baasie
0
160
Cardápio - Caraguá A Gosto 2024 - De 01/08 a 08/09/2024
caraguatatuba
0
5.9k
太田博三(@usagisan2020)
otanet
0
190
Credence
lratmansunu
0
460
管理画面の全体UXは利用時品質モデルで考える
readymadegogo
2
2k
アクセシビリティのはじめかた デザイナー編
tokimari
3
1.4k
(第1回) アーキテクト・テックリード育成講座
masakaya
0
100
今日から始める グラレコ チャレンジ DevRel/Tokyo #94 〜グラレコ チャレンジ〜
moshimoshiyuki
0
110
デザイナー視点の体験設計とデザインレビューを事業部全員で体験するワークショップをしたお話
masayofff
3
210
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Making the Leap to Tech Lead
cromwellryan
133
8.9k
Testing 201, or: Great Expectations
jmmastey
38
7.1k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2.1k
Done Done
chrislema
181
16k
YesSQL, Process and Tooling at Scale
rocio
169
14k
Making Projects Easy
brettharned
115
5.9k
Become a Pro
speakerdeck
PRO
25
5k
Visualization
eitanlees
145
15k
What's in a price? How to price your products and services
michaelherold
243
12k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
Transcript
AdobeXDの導入活用Tips! Web サイト制作が快適になる
ろくぜうどん @rokuzeudon - 粟屋元太 Genta Awaya - 2012.03~ 会社員Web デザイナー
- 2018.07 転職!! NEW
私とXD
私とXD 2015.10 2016.03 2017.10 Adobe XD Public Preview 版 公開
Adobe XD CC 正式リリース Project Comet 発表
2016.08 ~09 UI デザインの オンラインスクール課題で Adobe XD 初挑戦 私とXD
私とXD ベーシックコース エキスパートコース
私とXD ベーシックコース エキスパートコース 6画面 × 5ファイル
私とXD 6画面 × 5ファイル 80画面程度 1ファイルだけ❤ ベーシックコース エキスパートコース
私とXD 実務でも活用開始 2016.12 ~
私とXD 圧倒的快適 実務でも活用開始 2016/08 ~09
私とXD XD 大好き❤ Web デザイン制作を快適・円滑にす る Adobe XD の役割について https://blog.rokuzeudon.com/entry/adobe-xd
デザイン・プロトタイプ制作だけじ ゃない Adobe XD の魅力について 資料作成・共有が快適に!?ビジネ スマンにもオススメなデザインツー ル、AdobeXD https://blog.rokuzeudon.com/entry/adobe-xd- case https://mens.esupro.co.jp/entry/AdobeXD
XD とは?
Adobe XD (Experience Design) 公式サイト
Adobe XD (Experience Design) web サイト、モバイルアプリ、その他のデザインが これ 1 つで可能な、まったく新しい UI/UX
ソリューションです
Adobe XD (Experience Design)
Adobe XD (Experience Design)
Adobe XD (Experience Design) デザイン レイアウト・配色など
Adobe XD (Experience Design) デザイン 画面遷移 プロトタイピング レイアウト・配色など
Adobe XD (Experience Design) 共有/ 確認 デザイン 画面遷移 プロトタイピング レイアウト・配色など
Adobe XD (Experience Design) 共有/ 確認 デザイン 画面遷移 プロトタイピング レイアウト・配色など
オールインワンなソリューション Web ・アプリUI デザインの
Adobe XD (Experience Design) Web デザインもできる Web デザインもできる Web 制作で主要なAdobe
のデザインツール
Adobe XD (Experience Design) Web サイト/ アプリの UI デザインに特化 Web
制作で主要なAdobe のデザインツール NEW
どんな感じで使うのか
- 受託Web サイト制作 - 直受け - 納期だいたい1 ~2 ヶ月 -
ページもだいたい10 ~20 ページ とある例 どんな感じで使うのか
ディレクター お客様 デザイナー エンジニア どんな感じで使うのか とあるメンバー
ワイヤーフレーム デザイン 企画/ 提案書 コーディング とある制作の流れ どんな感じで使うのか
XD 使い始める前 どんな感じで使うのか
どんな感じで使うのか ワイヤーフレーム デザイン 企画/ 提案書 コーディング
どんな感じで使うのか XD 使い始めた後
どんな感じで使うのか ワイヤーフレーム デザイン 企画/ 提案書 コーディング
どんな感じで使うのか ワイヤーフレーム デザイン 企画/ 提案書 コーディング
ほぼ Photoshop Only XD + Photoshop/Illustlator それぞれの強みを活かす 私のWeb デザイン制作環境 どんな感じで使うのか
過去のデザインデータ構成 common/header.psd common/footer.psd common/part-***.psd 00_index.psd 01_about.psd 02_concept.psd 03_plan.psd … common/header-assets/
common/footer-assets/ common/part-***-assets/ 00_index-assets/ 01_about-assets/ 02_concept-assets/ 03_plan-assets/ … ページ毎に 分けてた どんな感じで使うのか
XD 使い始めてから img_assets/ img.psd icons_assets/ icons.ai design.xd スッキリ! どんな感じで使うのか
使ってわかった 5つ XD のメリット
あらゆる面で時短 1. 使ってわかったXD のメリット 1/5
1. あらゆる面で時短 圧倒的に軽い・早い
1. あらゆる面で時短 圧倒的に軽い・早い 容量
200MB 超 40MB いろんなところに影響 リモート作業、共同作業、データのバックアップ etc... 1. あらゆる面で時短
1. あらゆる面で時短 圧倒的に軽い・早い 容量 動作
全ページ・全ディスプレイ対応の アートボード作成してもサクサク動く DEMO1 1. あらゆる面で時短 普通に使ってる限り超快適
1. あらゆる面で時短 圧倒的に軽い・早い 容量 動作 共有
画像書き出して専用サーバーの 指定フォルダにアップして 個別にHTML 書き換えて ベーシック認証して送る 共有リンク送るだけ 1. あらゆる面で時短 今まで 今
DEMO2
使ってわかったXD のメリット 2/5 習得がカンタン 2.
ワイヤーフレームの作成 2. 習得がラク LOGO お問い合わせ 事業紹介 会社案内 採用情報 キャッチコピー •••••••••••
選択範囲 アートボード 長方形/ 円 テキスト + マウス or トラックパッド操作 2.
習得がラク
ゼロから作る必要もない https://blogs.adobe.com/creativestation/web-adobe-xd-ui-kit-wires-jp 2. 習得がラク
デザイン制作でも... Illustrator かPhotoshop を 使ったことあればすぐ慣れる ・ 学習機会、学習方法がいろいろある 公式スターターキット、公式チャンネル、書籍など ・ 2.
習得がラク
使ってわかったXD のメリット 3/5 やりとりがカンタン 3.
画面に映して一緒に見ながらパパッと修正 3. やりとりがカンタン
一つのデータにまとまる! あれこれ探す手間が省ける 3. やりとりがカンタン
DEMO3 プロトタイプのコメント機能が便利 どこをどう調整したらいのか意思疎通が楽 https://xd.adobe.com/view/1d0721f4‑d0b7‑452c‑b19a‑5814e29104ea/screen/dbf68357‑f199‑47cb‑823f‑fe59e75c77af/pc‑01‑index/ 3. やりとりがカンタン
使ってわかったXD のメリット 4/5 修正作業がカンタン 4.
リピートグリッド カラー(アセット) 文字スタイル シンボル ・ ・ ・ ・ 後からの修正に強いデザインデータへ 4.
修正作業がカンタン
使ってわかったXD のメリット 5/5 ほぼ毎月アップデート 5.
パスワード機能ないのか~ 数値を演算入力したいなあ プロトタイプは 固定ヘッダー/ フッター機能ないのか~ psd/ai データインポート できたら良いのに JPG で書き出せないのか~
シンボルの文字個別に変えたい 5. ほぼ毎月アップデート
パスワード機能ないのか~ 数値を演算入力したいなあ プロトタイプは 固定ヘッダー/ フッター機能ないのか~ psd/ai データインポート できたら良いのに JPG で書き出せないのか~
シンボルの文字個別に変えたい できるように なった 5. ほぼ毎月アップデート
アップデートが毎回楽しみ 5. ほぼ毎月アップデート
デザインカンプ作成時に 注意していたこと
Photoshop が得意なことはそっちでやる 機能より装飾的な要素が重要になる バナー/ ランディングページ作成 大量の画像編集/ 書き出し デザインカンプ作成時に注意していたこと
書き出したい画像は 専用のアートボードか別途psd で デザインカンプ作成時に注意していたこと DEMO4
ロゴ/ アイコン作成 パスの細やかな調整 文字とパス 文字とパス デザインカンプ作成時に注意していたこと Illustrator が得意なことはそっちでやる
複数オブジェクトの拡大・縮小は慎重に DEMO デザインカンプ作成時に注意していたこと
正直あんまり 活用してなかった機能
あんまり活用しきれていない機能 プロトタイプ
プロトタイピングが求められる環境ではなかった プロトタイプで 検証し精度高める コーディングして から調整・修正 あんまり活用しきれていない機能
やってみたけど 正直イマイチだった工夫
あんまり活用しきれていない機能 プロジェクト関連情報の集約 1.
あんまり活用しきれていない機能 扉ページを作成し、サイトマップや状況を集約 DEMO5 https://xd.adobe.com/view/1d0721f4‑d0b7‑452c‑b19a‑5814e29104ea
あんまり活用しきれていない機能 扉ページを作成し、サイトマップや状況を集約 https://xd.adobe.com/view/1d0721f4‑d0b7‑452c‑b19a‑5814e29104ea 求められる 環境では なかった DEMO5
あんまり活用しきれていない機能 CC Library の連携 2.
あんまり活用しきれていない機能 DEMO6 Photoshop などとスムーズに連携できる Cmd + Shift + L でパネル表示
あんまり活用しきれていない機能 もう一歩使いやすくなれば… ! XD 上からライブラリへ追加できない 数が多いと一覧で探しにくすぎる ・ ・
転職してからも バリバリ使ってる機能
スクショをいい感じにトリミング 転職してからもバリバリ使ってる機能 DEMO7
XDに関するオススメの コンテンツ・サイト
公式Adobe XD スターターキット XDに関するオススメのコンテンツ・サイト https://www.adobe.com/jp/products/xd.html#starterkit 基礎編 中級編
#AdobeXD www.facebook.com/AdobeXDJapan/ 日本語Facebook ページ「Adobe XD Japan 」開設! – Adobe Creative
Station https://blogs.adobe.com/creativestation/web-facebook-page-adobe-xd-japan #adobexd_study @adobexd XDに関するオススメのコンテンツ・サイト SNS のハッシュタグ・公式アカウント
XDに関するオススメのコンテンツ・サイト アップデート情報 最新機能 | Adobe XD CC Adobe Creative Station
https://www.adobe.com/jp/products/xd/features.html https://blogs.adobe.com/creativestation/serialization/adobe-xd-update
XDに関するオススメのコンテンツ・サイト Adobe XD Feedback https://adobexd.uservoice.com/
終わりに
XD はいいぞ 終わりに 圧倒的に軽い・早い 1. 習得がカンタン 2. やりとりがカンタン 3. 修正作業がカンタン
4. ほぼ毎月アップデート 5.
全部使う必要はない 終わりに XD には魅力的な機能がたくさんある
Enjoy XD! 終わりに