Webサイト制作が快適になるAdobeXDの導入活用Tips

Web Designer’s Tips ! の登壇資料です
https://web-designers-tips.peatix.com/

Transcript

1. AdobeXDの導入活用Tips! Web サイト制作が快適になる
2. ろくぜうどん @rokuzeudon - 粟屋元太 Genta Awaya - 2012.03~ 会社員Web デザイナー - 2018.07 転職!! NEW
3. 私とXD
4. 私とXD 2015.10 2016.03 2017.10 Adobe XD Public Preview 版 公開 Adobe XD CC 正式リリース Project Comet 発表
5. 2016.08 ～09 UI デザインの オンラインスクール課題で Adobe XD 初挑戦 私とXD
6. 私とXD ベーシックコース エキスパートコース
7. 私とXD ベーシックコース エキスパートコース ６画面 × ５ファイル
8. 私とXD ６画面 × ５ファイル 80画面程度 １ファイルだけ❤ ベーシックコース エキスパートコース
9. 私とXD 実務でも活用開始 2016.12 ～
10. 私とXD 圧倒的快適 実務でも活用開始 2016/08 ～09
11. 私と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
12. XD とは？
13. Adobe XD (Experience Design) 公式サイト
14. Adobe XD (Experience Design) web サイト、モバイルアプリ、その他のデザインが これ 1 つで可能な、まったく新しい UI/UX ソリューションです
15. Adobe XD (Experience Design)
16. Adobe XD (Experience Design)
17. Adobe XD (Experience Design) デザイン レイアウト・配色など
18. Adobe XD (Experience Design) デザイン 画面遷移 プロトタイピング レイアウト・配色など
19. Adobe XD (Experience Design) 共有/ 確認 デザイン 画面遷移 プロトタイピング レイアウト・配色など
20. Adobe XD (Experience Design) 共有/ 確認 デザイン 画面遷移 プロトタイピング レイアウト・配色など オールインワンなソリューション Web ・アプリUI デザインの
21. Adobe XD (Experience Design) Web デザインもできる Web デザインもできる Web 制作で主要なAdobe のデザインツール
22. Adobe XD (Experience Design) Web サイト/ アプリの UI デザインに特化 Web 制作で主要なAdobe のデザインツール NEW
23. どんな感じで使うのか
24. - 受託Web サイト制作 - 直受け - 納期だいたい1 ～2 ヶ月 - ページもだいたい10 ～20 ページ とある例 どんな感じで使うのか
25. ディレクター お客様 デザイナー エンジニア どんな感じで使うのか とあるメンバー
26. ワイヤーフレーム デザイン 企画/ 提案書 コーディング とある制作の流れ どんな感じで使うのか
27. XD 使い始める前 どんな感じで使うのか
28. どんな感じで使うのか ワイヤーフレーム デザイン 企画/ 提案書 コーディング
29. どんな感じで使うのか XD 使い始めた後
30. どんな感じで使うのか ワイヤーフレーム デザイン 企画/ 提案書 コーディング
31. どんな感じで使うのか ワイヤーフレーム デザイン 企画/ 提案書 コーディング
32. ほぼ Photoshop Only XD + Photoshop/Illustlator それぞれの強みを活かす 私のWeb デザイン制作環境 どんな感じで使うのか
33. 過去のデザインデータ構成 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/ … ページ毎に 分けてた どんな感じで使うのか
34. XD 使い始めてから img_assets/ img.psd icons_assets/ icons.ai design.xd スッキリ！ どんな感じで使うのか
35. 使ってわかった 5つ XD のメリット
36. あらゆる面で時短 1. 使ってわかったXD のメリット 1/5
37. 1. あらゆる面で時短 圧倒的に軽い・早い
38. 1. あらゆる面で時短 圧倒的に軽い・早い 容量
39. 200MB 超 40MB いろんなところに影響 リモート作業、共同作業、データのバックアップ etc... 1. あらゆる面で時短
40. 1. あらゆる面で時短 圧倒的に軽い・早い 容量 動作
41. 全ページ・全ディスプレイ対応の アートボード作成してもサクサク動く DEMO1 1. あらゆる面で時短 普通に使ってる限り超快適
42. 1. あらゆる面で時短 圧倒的に軽い・早い 容量 動作 共有
43. 画像書き出して専用サーバーの 指定フォルダにアップして 個別にHTML 書き換えて ベーシック認証して送る 共有リンク送るだけ 1. あらゆる面で時短 今まで 今 DEMO2
44. 使ってわかったXD のメリット 2/5 習得がカンタン 2.
45. ワイヤーフレームの作成 2. 習得がラク LOGO お問い合わせ 事業紹介 会社案内 採用情報 キャッチコピー •••••••••••
46. 選択範囲 アートボード 長方形/ 円 テキスト + マウス or トラックパッド操作 2. 習得がラク
47. ゼロから作る必要もない https://blogs.adobe.com/creativestation/web-adobe-xd-ui-kit-wires-jp 2. 習得がラク
48. デザイン制作でも... Illustrator かPhotoshop を 使ったことあればすぐ慣れる ・ 学習機会、学習方法がいろいろある 公式スターターキット、公式チャンネル、書籍など ・ 2. 習得がラク
49. 使ってわかったXD のメリット 3/5 やりとりがカンタン 3.
50. 画面に映して一緒に見ながらパパッと修正 3. やりとりがカンタン
51. 一つのデータにまとまる！ あれこれ探す手間が省ける 3. やりとりがカンタン
52. DEMO3 プロトタイプのコメント機能が便利 どこをどう調整したらいのか意思疎通が楽 https://xd.adobe.com/view/1d0721f4‑d0b7‑452c‑b19a‑5814e29104ea/screen/dbf68357‑f199‑47cb‑823f‑fe59e75c77af/pc‑01‑index/ 3. やりとりがカンタン
53. 使ってわかったXD のメリット 4/5 修正作業がカンタン 4.
54. リピートグリッド カラー（アセット） 文字スタイル シンボル ・ ・ ・ ・ 後からの修正に強いデザインデータへ 4. 修正作業がカンタン
55. 使ってわかったXD のメリット 5/5 ほぼ毎月アップデート 5.
56. パスワード機能ないのか～ 数値を演算入力したいなあ プロトタイプは 固定ヘッダー/ フッター機能ないのか～ psd/ai データインポート できたら良いのに JPG で書き出せないのか～ シンボルの文字個別に変えたい 5. ほぼ毎月アップデート
57. パスワード機能ないのか～ 数値を演算入力したいなあ プロトタイプは 固定ヘッダー/ フッター機能ないのか～ psd/ai データインポート できたら良いのに JPG で書き出せないのか～ シンボルの文字個別に変えたい できるように なった 5. ほぼ毎月アップデート
58. アップデートが毎回楽しみ 5. ほぼ毎月アップデート
59. デザインカンプ作成時に 注意していたこと
60. Photoshop が得意なことはそっちでやる 機能より装飾的な要素が重要になる バナー/ ランディングページ作成 大量の画像編集/ 書き出し デザインカンプ作成時に注意していたこと
61. 書き出したい画像は 専用のアートボードか別途psd で デザインカンプ作成時に注意していたこと DEMO4
62. ロゴ/ アイコン作成 パスの細やかな調整 文字とパス 文字とパス デザインカンプ作成時に注意していたこと Illustrator が得意なことはそっちでやる
63. 複数オブジェクトの拡大・縮小は慎重に DEMO デザインカンプ作成時に注意していたこと
64. 正直あんまり 活用してなかった機能
65. あんまり活用しきれていない機能 プロトタイプ
66. プロトタイピングが求められる環境ではなかった プロトタイプで 検証し精度高める コーディングして から調整・修正 あんまり活用しきれていない機能
67. やってみたけど 正直イマイチだった工夫
68. あんまり活用しきれていない機能 プロジェクト関連情報の集約 1.
69. あんまり活用しきれていない機能 扉ページを作成し、サイトマップや状況を集約 DEMO5 https://xd.adobe.com/view/1d0721f4‑d0b7‑452c‑b19a‑5814e29104ea
70. あんまり活用しきれていない機能 扉ページを作成し、サイトマップや状況を集約 https://xd.adobe.com/view/1d0721f4‑d0b7‑452c‑b19a‑5814e29104ea 求められる 環境では なかった DEMO5
71. あんまり活用しきれていない機能 CC Library の連携 2.
72. あんまり活用しきれていない機能 DEMO6 Photoshop などとスムーズに連携できる Cmd + Shift + L でパネル表示
73. あんまり活用しきれていない機能 もう一歩使いやすくなれば… ！ XD 上からライブラリへ追加できない 数が多いと一覧で探しにくすぎる ・ ・
74. 転職してからも バリバリ使ってる機能
75. スクショをいい感じにトリミング 転職してからもバリバリ使ってる機能 DEMO7
76. ＸＤに関するオススメの コンテンツ・サイト
77. 公式Adobe XD スターターキット ＸＤに関するオススメのコンテンツ・サイト https://www.adobe.com/jp/products/xd.html#starterkit 基礎編 中級編
78. #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 ＸＤに関するオススメのコンテンツ・サイト SNS のハッシュタグ・公式アカウント
79. ＸＤに関するオススメのコンテンツ・サイト アップデート情報 最新機能 | Adobe XD CC Adobe Creative Station https://www.adobe.com/jp/products/xd/features.html https://blogs.adobe.com/creativestation/serialization/adobe-xd-update
80. ＸＤに関するオススメのコンテンツ・サイト Adobe XD Feedback https://adobexd.uservoice.com/
81. 終わりに
82. XD はいいぞ 終わりに 圧倒的に軽い・早い 1. 習得がカンタン 2. やりとりがカンタン 3. 修正作業がカンタン 4. ほぼ毎月アップデート 5.
83. 全部使う必要はない 終わりに XD には魅力的な機能がたくさんある
84. Enjoy XD! 終わりに