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
みんなでブラッシュアップするDesign Sprint_BASE BANKチームの場合
base
PRO
3
620
デザインシステム構築の進め方 基本から実践まで、具体的な手順を徹底解説
ncdc
1
170
20240921-図書館の実空間とデジタル資源の接点をデザインする-dtk55-Designing-the-interface-between-the-library's-physical-space-and-digital-resources
majimasachi
0
230
Money Forward UIの紹介 / Introducing Money Forward UI
taigakiyokawa
0
450
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
4
630
アフォーダンスとシグニファイア
ryokanakai
0
300
Yahoo Newsletter Clicker Template
xuechunwu
0
290
Managing Design Systems (Smashing NY 2024)
nathanacurtis
2
280
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
13
5.8k
想像するためのデザイン - LARPの可能性を探求してみた話
okabemy
0
490
Tataki Ryu
olgastoryboard
0
140
Designship2024 Panel Discussion インハウスデザイナーは 何をデザインしているか、するべきか で使用したスライドを公開します。
kiyoshifuwa
0
1.9k
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
A designer walks into a library…
pauljervisheath
202
24k
Designing Experiences People Love
moore
138
23k
Fireside Chat
paigeccino
32
3k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Done Done
chrislema
181
16k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
7
150
BBQ
matthewcrist
85
9.3k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
Six Lessons from altMBA
skipperchong
26
3.5k
We Have a Design System, Now What?
morganepeng
50
7.2k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
107
49k
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! 終わりに