発注者目線で考えてみるXDの利用

by katsutaro

Slide 1

Slide 1 text

発注者目線で考えてみるXDの利用 XD Meeting #13　2018.2.19 有限会社リズムタイプ栄前田勝太郎

Slide 2

Slide 2 text

自己紹介エイマエダカツタロウについて

Slide 3

Slide 3 text

これまでやってきたこと @katsutaro 大体のWebサービスに生息しています現在やっていること ● 映像ディレクション ● 動画配信ディレクション ● クリエイティブディレクション ● Webディレクション ● プロジェクトマネジメント ● 企業、サービスブランディング ● カイゼン、グロースハック ● コミュニケーションデザイン ● チームビルディング ● プロジェクト、チームの立て直し ● 書籍執筆著書（共著）

Slide 4

Slide 4 text

自己紹介リズムタイプについて

Slide 5

Slide 5 text

改善すること、成長させることコンサルティング・プランニングディレクションプロジェクトマネジメントコミュニケーションデザイン UIデザイン分析・設計プロジェクトの支援や改善を行っています（課題発見のワークショップから、チームビルディングまで）

Slide 6

Slide 6 text

皆さんはどんな仕事をされていますか？ディレクター？制作会社 or 事業会社？質問

Slide 7

Slide 7 text

XD、便利ですよねーイメージの共有しやすいし、制作フローも一元化できるし、コミュニケーションツールとしても使える

Slide 8

Slide 8 text

XDのイメージエクスペリエンス・デザイン！

Slide 9

Slide 9 text

でも、発注者から見た場合はどうでしょう？プロトタイプ、という言葉、伝わりますか？

Slide 10

Slide 10 text

発注者目線、そもそも「発注者」って？クライアントや代理店、制作会社、社内の別部署

Slide 11

Slide 11 text

クライアントA 「プロトタイプ、いいよねー！」発注者のリテラシーの差クライアントB 「プロトタイプ、なにそれおいしいの？」

Slide 12

Slide 12 text

クライアントA 「一緒にいいものを作りましょう！」発注者の熱意、知識の差クライアントB 「よく分からないのでいい感じでお願い！」

Slide 13

Slide 13 text

こちらの発注者を取り上げます

Slide 14

Slide 14 text

発注者の気持ち 1. ツール増やしたくない a. また新しいツール？どれを確認すればいいの？ 2. 上長にそのまま見せたい a. 説明資料が必要？そのまま見せることができる？ 3. 確認・検討に時間かけたくない a. ワイヤーフレーム、プロトタイプ、デザイン、HTML、全部確認しなきゃいけなの？（何が違うの？）

Slide 15

Slide 15 text

最初から使うワイヤーフレームやプロトタイプという形にこだわらずに XDを最初から使う ⇒利用する機会を作る、増やす

Slide 16

Slide 16 text

最初から使う - ムードボード

Slide 17

Slide 17 text

最初から使う - サイトマップ例えば、サイトマップ（キックオフ時点）から使い始めて、テンプレートを完成させるころまで（サイトマップを徐々に育てていく）

Slide 18

Slide 18 text

最初から使う - デザイン（カンプ）確認デザインカンプの任意の場所にピンを置いてコメントできるデザインイメージ（カンプ）の確認や、デザインのバージョン管理に利用し、確認する際のツールとして導入してみる

Slide 19

Slide 19 text

既存サイトを XDで再現する XDを見ながら検討することができる ※サービスでもアプリでも同じです

Slide 20

Slide 20 text

既存サイトをXDで再現する既存サイトのキャプチャを配置、改修で必要な部分だけ、XDで再現 ⇒既存サイトを見ながら検討することで、関係者の確認・検討をしやすくするアイコンはデザイナーが対応、 PSDファイルをCCライブラリでリンク ⇒構成とデザイン表現をある程度切り離して進めることができる

Slide 21

Slide 21 text

既存のフローに組み込む変えることが難しい部分は変えなくてもいい使えるところから既存のフローに組み込んでいく

Slide 22

Slide 22 text

要件定義既存のフローに組み込む課題確認、与件整理仕様設計デザイン実装公開運用、改善 XDの使い方例：既存サイトをXDで作成してみる（キャプチャベースでサイトをXDで構築）対応要件をXDで表現する（サイトマップ、新機能や改修要件をXDで作成）サイト設計、画面設計（ワイヤーフレーム、プロトタイプ作成）デザイン確認、管理（プロトタイプの精度を上げる、カンプ管理）デザインガイドライン（デザイン、動作・遷移の指針、確認）

Slide 23

Slide 23 text

まとめ 1. 発注者に意識させずに、XDを使ってみる a. 新しいツールと意識させない方がいいです 2. ツールをXDに集約してみる a. 確認するツールやポイントが少ないといいです 3. 発注者が「XD」という言葉を使い出す a. XD（の導入）が評価されたかもしれません

Slide 24

Slide 24 text

XDは対話のツール発注者と制作者が対話をするためのツール（対話を続ければ、スタンド使いになれるかもしれない）

Slide 25

Slide 25 text

ありがとうございました！栄前田勝太郎（リズムタイプ） Twitter：@katsutaro