webディレクターこそ身に付けたいAdobe XDの接し方とテクニック@XDUFes2020

XDはデザインツールという認識が一般的ですが、コミュニケーションツールとしての側面もあります。
コミュニケーションが仕事と言っても過言ではないディレクターが、コミュニケーションツールとしてのXDを使いこなすことで、web制作におけるワークフローを円滑に進めることが可能です。
そのためにディレクターがどのような考えでXDに接すれば良いのか、覚えると便利なテクニックなどの紹介をしたいと思います。

Transcript

1. Adobe XD の接し⽅とテクニック 有限会社イー‧オフィス webディレクター 本⼭ 太志 web ディレクターこそ⾝に付けたい 2020.09.26
2. Introduction ⾃⼰紹介
3. 本⼭ 太志（もとやま ふとし） イー‧オフィス Webディレクター DTPオペレーター‧デザイナー、 ECサイトのWebデザイナーを経て 2015年から現職。 Webサイトの⽴ち上げから運⽤に 従事し、実績は100サイト以上。 担当業種は多種多様。 Introduction ⾃⼰紹介
4. Goal 本セッションのゴール
5. XD使ったことがないディレクター、キャリアが浅いディレクター すでに活⽤しているディレクター、中級者以上の⽅ ‧まずXDを開いて触れてもらいたい、使ってもらいたい ‧このツールを使えるようになって、実際のウェブ制作の現場に導⼊して欲しい。 ‧こういう応⽤ができそうだな、このツールでこういう使い⽅を導⼊すれば作業効率が    上がるかもというヒントになってほしい。 ‧まだXDの利⽤をしていないディレクター、デザイナーにおすすめしてほしい。 Goal
6. Session Start セッションスタート
7. web ディレクターの役割って なんでしょう？
8. web ディレクターの役割とは？ ‧プロジェクトのゴールを設定し、  メンバーをゴールへ導くこと。 ‧プロジェクトの中⼼⼈物であり、  成功するか否かがかかっている。
9. プロジェクトの成功の鍵って？
10. プロジェクトの成功の鍵って？ ‧プロジェクトを成功に導くための  1つの⼤きな鍵は「コミュニケーション」 ‧特に、クリエイティブにおけるコミュニケーションは  ⼝頭やテキストだけでは⾮常に難しい。
11. サイトマップ TOPページがあって、第⼆階層にサービ ス、コンセプト、スタッフ紹介、会社概 要、お問い合わせを⽤意しましょう。 サービスの下層（第三階層）には、•• と▲▲と▪▪の紹介ページが必要です ね。あ、プライバシーポリシーもお問い 合わせページの下層に⽤意して欲しいで す！
12. サイトマップ TOPページがあって、第⼆階層にサービ ス、コンセプト、スタッフ紹介、会社概 要、お問い合わせを⽤意しましょう。 サービスの下層（第三階層）には、•• と▲▲と▪▪の紹介ページが必要です ね。あ、プライバシーポリシーもお問い 合わせページの下層に⽤意して欲しいで す！ TOP サービス •• ▲▲ ▪▪ コンセプト スタッフ紹介 会社概要 お問い合わせ プライバシー ポリシー
13. ワイヤーフレーム ‧ヘッダー ‧グローバルナビゲーション ‧MV ‧サービス紹介  ‧••  ‧▲▲  ‧▪▪ ‧コンセプト TOPページ ‧ ‧
14. ワイヤーフレーム LOGO サービス スタッフ紹介 会社概要 お問い合わせ MV •• ▲▲ ▪▪ サービス コンセプト ここにテキストが⼊ります。ここにテキストが⼊り ます。ここにテキストが⼊ります。ここにテキストが ⼊ります。ここにテキストが⼊ります。ここにテキス トが⼊ります。ここにテキストが⼊ります。 ‧ヘッダー ‧グローバルナビゲーション ‧MV ‧サービス紹介  ‧••  ‧▲▲  ‧▪▪ ‧コンセプト TOPページ ‧ ‧
15. ビジュアル化された成果物を基にした コミュニケーションは 圧倒的に早く‧深く相⼿の理解を助ける。
16. プロジェクトの成功の鍵って？ ビジュアル化された成果物を いかに素早く作り、  いかに早く関係者に共有できるか が⼤きな要素を占める。
17. ビジュアル化されたコミュニケーションは 圧倒的に早く‧深く相⼿の理解を助ける。
18. なぜwebディレクターがXD？ ① 動作が軽く、アイデアをすぐに形に (ビジュアライズ)できる。 ② (XDをより扱えれば)デザイン案をその場でFixさせることも可能。 ③ 企画提案から設計‧デザイン、コーディングまで   ⼀貫して同じツールを使えることで情報が集約できる。
19. サイト制作における成果物‧制作物 営業‧提案 設計（デザイン） 開発‧テスト 公開‧運⽤ ‧企画書 ‧提案書 ‧⾒積書 ‧サイトマップ ‧ワイヤーフレーム ‧原稿 ‧撮影データ ‧デザイン ‧ソースコード ‧運⽤マニュアル
20. サイト制作における成果物‧制作物 営業‧提案 設計（デザイン） 開発‧テスト 公開‧運⽤ ‧企画書 ‧提案書 ‧⾒積書 ‧サイトマップ ‧ワイヤーフレーム ‧原稿 ‧撮影データ ‧デザイン ‧ソースコード ‧運⽤マニュアル
21. 具体例
22. 具体例 ① 提案書‧プレゼンスライドの作成 ② ワイヤーフレームの作成 (Wires jp 2.0 の紹介) ③ クライアントとのデザインの打ち合わせ   (アセット‧コンポーネント機能の紹介)
23. プラグインの紹介
24. プラグインの紹介 ① テキスト校正くん ② Whiteborad
25. まとめ
26. まとめ ① ビジュアライズされた成果物を基にしたコミュニケーションは  相⼿の理解の助けになり、XDは形を作るのに最適なツール。 ② XDはweb制作のワークフローのカバー範囲が広く、  ディレクターが扱えれば、スケジュールを短縮できる。 ③ プラグインやワイヤーのテンプレートを⽤いることで、  業務効率をさらにあげることが可能。
27. Enjoy XD Life!! Twitter ：@futoshi0620 note ：futoshi