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

by Futoshi

Slide 1

Slide 1 text

Adobe XD の接し⽅とテクニック有限会社イー‧オフィス webディレクター本⼭太志 web ディレクターこそ⾝に付けたい 2020.09.26

Slide 2

Slide 2 text

Introduction ⾃⼰紹介

Slide 3

Slide 3 text

本⼭太志（もとやまふとし）イー‧オフィス Webディレクター DTPオペレーター‧デザイナー、 ECサイトのWebデザイナーを経て 2015年から現職。 Webサイトの⽴ち上げから運⽤に従事し、実績は100サイト以上。担当業種は多種多様。 Introduction ⾃⼰紹介

Slide 4

Slide 4 text

Goal 本セッションのゴール

Slide 5

Slide 5 text

XD使ったことがないディレクター、キャリアが浅いディレクターすでに活⽤しているディレクター、中級者以上の⽅ ‧まずXDを開いて触れてもらいたい、使ってもらいたい ‧このツールを使えるようになって、実際のウェブ制作の現場に導⼊して欲しい。 ‧こういう応⽤ができそうだな、このツールでこういう使い⽅を導⼊すれば作業効率が上がるかもというヒントになってほしい。 ‧まだXDの利⽤をしていないディレクター、デザイナーにおすすめしてほしい。 Goal

Slide 6

Slide 6 text

Session Start セッションスタート

Slide 7

Slide 7 text

web ディレクターの役割ってなんでしょう？

Slide 8

Slide 8 text

web ディレクターの役割とは？ ‧プロジェクトのゴールを設定し、メンバーをゴールへ導くこと。 ‧プロジェクトの中⼼⼈物であり、成功するか否かがかかっている。

Slide 9

Slide 9 text

プロジェクトの成功の鍵って？

Slide 10

Slide 10 text

プロジェクトの成功の鍵って？ ‧プロジェクトを成功に導くための 1つの⼤きな鍵は「コミュニケーション」 ‧特に、クリエイティブにおけるコミュニケーションは⼝頭やテキストだけでは⾮常に難しい。

Slide 11

Slide 11 text

サイトマップ TOPページがあって、第⼆階層にサービス、コンセプト、スタッフ紹介、会社概要、お問い合わせを⽤意しましょう。サービスの下層（第三階層）には、●● と▲▲と■■の紹介ページが必要ですね。あ、プライバシーポリシーもお問い合わせページの下層に⽤意して欲しいです！

Slide 12

Slide 12 text

サイトマップ TOPページがあって、第⼆階層にサービス、コンセプト、スタッフ紹介、会社概要、お問い合わせを⽤意しましょう。サービスの下層（第三階層）には、●● と▲▲と■■の紹介ページが必要ですね。あ、プライバシーポリシーもお問い合わせページの下層に⽤意して欲しいです！ TOP サービス ●● ▲▲ ■■ コンセプトスタッフ紹介会社概要お問い合わせプライバシーポリシー

Slide 13

Slide 13 text

ワイヤーフレーム ‧ヘッダー ‧グローバルナビゲーション ‧MV ‧サービス紹介 ‧●● ‧▲▲ ‧■■ ‧コンセプト TOPページ ‧ ‧

Slide 14

Slide 14 text

ワイヤーフレーム LOGO サービススタッフ紹介会社概要お問い合わせ MV ●● ▲▲ ■■ サービスコンセプトここにテキストが⼊ります。ここにテキストが⼊ります。ここにテキストが⼊ります。ここにテキストが⼊ります。ここにテキストが⼊ります。ここにテキストが⼊ります。ここにテキストが⼊ります。 ‧ヘッダー ‧グローバルナビゲーション ‧MV ‧サービス紹介 ‧●● ‧▲▲ ‧■■ ‧コンセプト TOPページ ‧ ‧

Slide 15

Slide 15 text

ビジュアル化された成果物を基にしたコミュニケーションは圧倒的に早く‧深く相⼿の理解を助ける。

Slide 16

Slide 16 text

プロジェクトの成功の鍵って？ビジュアル化された成果物をいかに素早く作り、いかに早く関係者に共有できるかが⼤きな要素を占める。

Slide 17

Slide 17 text

ビジュアル化されたコミュニケーションは圧倒的に早く‧深く相⼿の理解を助ける。

Slide 18

Slide 18 text

なぜwebディレクターがXD？ ① 動作が軽く、アイデアをすぐに形に (ビジュアライズ)できる。 ② (XDをより扱えれば)デザイン案をその場でFixさせることも可能。 ③ 企画提案から設計‧デザイン、コーディングまで⼀貫して同じツールを使えることで情報が集約できる。

Slide 19

Slide 19 text

サイト制作における成果物‧制作物営業‧提案設計（デザイン）開発‧テスト公開‧運⽤ ‧企画書 ‧提案書 ‧⾒積書 ‧サイトマップ ‧ワイヤーフレーム ‧原稿 ‧撮影データ ‧デザイン ‧ソースコード ‧運⽤マニュアル

Slide 20

Slide 20 text

Slide 21

Slide 21 text

具体例

Slide 22

Slide 22 text

具体例 ① 提案書‧プレゼンスライドの作成 ② ワイヤーフレームの作成 (Wires jp 2.0 の紹介) ③ クライアントとのデザインの打ち合わせ (アセット‧コンポーネント機能の紹介)

Slide 23

Slide 23 text

プラグインの紹介

Slide 24

Slide 24 text

プラグインの紹介 ① テキスト校正くん ② Whiteborad

Slide 25

Slide 25 text

まとめ

Slide 26

Slide 26 text

まとめ ① ビジュアライズされた成果物を基にしたコミュニケーションは相⼿の理解の助けになり、XDは形を作るのに最適なツール。 ② XDはweb制作のワークフローのカバー範囲が広く、ディレクターが扱えれば、スケジュールを短縮できる。 ③ プラグインやワイヤーのテンプレートを⽤いることで、業務効率をさらにあげることが可能。

Slide 27

Slide 27 text

Enjoy XD Life!! Twitter ：@futoshi0620 note ：futoshi