Pro Yearly is on sale from $80 to $50! »

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

5478c15ea5fd291f3888b32652227cd5?s=47 Futoshi
September 26, 2020

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

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

5478c15ea5fd291f3888b32652227cd5?s=128

Futoshi

September 26, 2020
Tweet

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