ディレクターが考える
XDの導入・活用方法
栄前田 勝太郎
有限会社リズムタイプ
プランナー／ディレクター

エイマエダ カツタロウ@katsutaroエエマエダ カツタロウ@katsutaro

今日はタコタロウ（大阪バージョン）@katsutaro

現在やっていること@katsutaro-

プロジェクトマネジメント-

サービスデザイン-

Webサービスのグロースハック-

サービス／プロジェクトの改善-

チームビルディング-

ワークショップデザイン

ディレクションの本も書きましたリズムタイプという会社

リズムタイプという会社

ディレクター
2人

エンジニア
1人

デザイナー
1.5人

弊社のプロジェクト体制
内部に入って改善
クライアント
受託制作

クライアントと直接の取引が基本

弊社の制作フローとXD利用シーン
企画

要件定義

企画書

要件定義書

仕様設計

デザイン

実装

ワイヤーフレーム + プロトタイプ + 仕様設計書

デザインデータ+運用ディレクターが考えるXDの導入・活用方法

背景

クライアントが見ていること、思っていること

導入

どのようにXDを導入するか

活用

どのようにXDを活用しているかまとめ

XDの導入によって得られる価値セッションの目的とゴール目的「XDの導入・活用の価値を伝える」

ゴール「XDを導入しない理由はない」

ディレクターが考えるXDの導入・活用方法

背景

クライアントが見ていること、思っていること

導入

どのようにXDを導入するか

活用

どのようにXDを活用しているかまとめ

XDの導入によって得られる価値

XD、便利ですよね？

XDができること

デザイン

制作フローの効率化

プロト
タイピング

イメージの共有

コミュニケーション

そんな便利なXDですが、クライアントから見た場合はどうでしょうか？

クライアントのリテラシーの差

プロトタイプいいよね！
プロトタイプ
おいしいの？

クライアントの熱量の違い

このツール、いいですね！
新しいツール、いらないよ？

クライアントのリテラシーや熱量には幅がありますクライアントの気持ち、姿勢を把握して、それらに見合った対応が必要

負荷を下げたい
新しいツールを増やしたくない
社内用にドキュメントを作りたくない
確認・検討に時間かけたくないこれはクライアントだけではなく、社内でも同様の場合がありますディレクターが考えるXDの導入・活用方法

背景

クライアントが見ていること、思っていること

導入どのようにXDを導入するか活用

どのようにXDを活用しているかまとめ

XDの導入によって得られる価値

5つの導入ケース
1. プロジェクト初期から使い始める
2. 既存サイトをXDで再現する
3. 既存のワークフローに部分的に組み込む
4. CMS設計のイメージを伝える
5. 設計書+プロトタイプをまとめて作る

導入ケース1

プロジェクト初期から使い始めるケース1：プロジェクト初期から使い始める

想定シーン

プロジェクト初期にサイト構成やフローについての話をするとき

導入結果「イメージしやすかった、伝わりやすかった
話した内容がその場で確認できてよかった」

ケース1：プロジェクト初期から使い始める

ヒアリング

MTG

MTG

この間に使い始めます

要件定義

仕様設計

ケース1：プロジェクト初期から使い始める

レイアウト
パターンを用意

打ち合わせ前に用意しておくケース1：プロジェクト初期から使い始める

適宜、ページを追加したり、ページの構成要素を配置
クライアントと話をしながらその場で反映していくケース1：プロジェクト初期から使い始める

プロトタイプ設定

プロトタイプ設定をすると、共有・確認がしやすいケース1：プロジェクト初期から使い始める

手動です

XDのサイトマップから、ファイルリストをつくるケース1：プロジェクト初期から使い始める

ポイント

クライアントに新しいツールであることを意識させずに導入する

導入ケース2

既存サイトをXDで再現する

ケース2：既存サイトをXDで再現する

想定シーン

・既存サイトの部分改修を検討するとき
・新規コンテンツを追加するとき

導入結果「どう変わるのかが、わかりやすかった、話を進めやすかった」

ケース2：既存サイトをXDで再現する

改修依頼

ヒアリング

要件定義

仕様設計

この間で使いますケース2：既存サイトをXDで再現する

要件）
シングルページを再構成する

ケース2：既存サイトをXDで再現する

既存ページをキャプチャ、XD上で切り貼りして、ページ分割・再構成

ケース2：既存サイトをXDで再現する

キャプチャ
キャプチャ

ケース2：既存サイトをXDで再現する

ポイント

必要な箇所を、必要な分だけ、手早く作る

導入ケース3

既存のワークフローに部分的に組み込む

ケース3：既存のワークフローに部分的に組み込む

想定シーン

発注者と直接のコミュニケーションが行えない場合

導入結果「ブラウザでの確認 戻し 再確認がしやすかった！」ケース3：既存のワークフローに部分的に組み込む

弊社

クライアント
サイト構成
画面設計
デザイン
HTML+CMS

エンド
クライアント

サイト要件
デザインイメージケース3：既存のワークフローに部分的に組み込む

弊社

クライアントエンド
クライアントこのフローを変えたくないケース3：既存のワークフローに部分的に組み込む

弊社

クライアントPhotoshopでデザインした
カンプで確認エンド
クライアントケース3：既存のワークフローに部分的に組み込む

弊社

クライアントエンド
クライアント

ワークフローは変えずに弊社担当箇所のアウトプットを変更

ケース3：既存のワークフローに部分的に組み込む

ポイント変えられる部分だけを変える（変えることに時間をかけない）

導入ケース4CMS設計のイメージを伝える

ケース4：CMS設計のイメージを伝える

想定シーン

CMS管理画面で入力した内容がどのように反映されるかを伝えるとき

導入結果「仕様書ではよくわからなかった点がイメージできるようになった」

ケース4：CMS設計のイメージを伝える

表示画面

CMS
画面

1つのXD上で、表示画面とCMS画面を作成

ケース4：CMS設計のイメージを伝える

表示画面

CMS画面

1つのXD上で、表示画面とCMS画面を確認

ケース4：CMS設計のイメージを伝える

ポイント

ドキュメントだけでは伝わりづらい部分に使ってみる

導入ケース5

設計書+プロトタイプをまとめて作る

ケース5：設計書+プロトタイプをまとめて作る

想定シーン

仕様設計書とプロトタイプを作成するとき（クライアントと開発会社が別の場合）

導入結果「管理・更新するファイルがまとめられてよかった」

ケース5：設計書+プロトタイプをまとめて作る

クライアント仕様設計

マネジメント

仕様設計書
プロトタイプ

弊社

開発会社

ディレクション

ケース5：設計書+プロトタイプをまとめて作る

XD上で、仕様設計書の情報を記載

ケース5：設計書+プロトタイプをまとめて作る

画面ごとにGoogleスライドにコピペ

ケース5：仕様設計書と実装指示書を作成するとき

ポイント

作成・共有するドキュメントを少なくする

5つの導入ケースのポイント
1. 新しいツールと意識させずに導入する
2. 必要な箇所を、必要な分だけ、手早く作る
3. 変えられる部分だけを変える
4. 伝わりづらい部分に使ってみる
5. 作成・共有するドキュメントを少なく

XD導入における失敗例とふりかえり

失敗例

デザインであることを認識してもらえてなかった！

失敗例：デザインであることを認識してもらえてなかった

デザイン
完成形

XD上で徐々に構成とデザインを詰めていった失敗例：デザインであることを認識してもらえてなかった

デザイン
完成形

デザインはまだ確認できないの？

XDとデザインは別だと思われていた失敗例：デザインであることを認識してもらえてなかった

XD上で確認していた内容がまだデザインではなく、途中段階だと思われていた失敗例：デザインであることを認識してもらえてなかった

クライアントの理解度に合わせたコミュニケーションができていなかった
以前に担当していた制作会社のフローの認識が残っていたクライアントとしっかりと向き合うことが大事ディレクターが考えるXDの導入・活用方法

背景

クライアントが見ていること、思っていること

導入

どのようにXDを導入するか

活用

どのようにXDを活用しているかまとめ

XDの導入によって得られる価値

どのようにXDを活用しているか活用ケース1

デザイン確認・共有するケース1：デザイン確認・共有する

デザイン共有弊社

クライアントフィードバック

デザインの共有とフィードバックが異なるツールになってしまっていたケース1：デザイン確認・共有するデザイン共有

弊社

クライアントフィードバック

XDのみで完結するようになりましたケース1：デザイン確認・共有する

XD上で履歴も確認できるようにしていますケース1：デザイン確認・共有する
日付表記

リスト表示

ケース1：デザイン確認・共有する

リスト表示

履歴確認
できる

ケース1：デザイン確認・共有する

1つの場所（URL）で確認できる
これまでの経緯が確認しやすい
社内共有がしやすい活用ケース2

ドキュメントをXDに統一する

ケース2：ドキュメントをXDに統一する

弊社

構成案の共有クライアントクライアントの部署ごとに共有される
ドキュメントのフォーマットがバラバラ

ケース2：ドキュメントをXDに統一する

弊社

構成案の共有クライアントドキュメントをXDに統一しましたケース2：ドキュメントをXDに統一する

パワポやエクセルで構成案を作れる人はXDを使える

ケース2：ドキュメントをXDに統一する

作業環境があれば、1〜2時間でXDに移行することは可能ですケース2：ドキュメントをXDに統一する

短時間で作ることができる
確認、共有がしやすい
制作進行がスムーズになった2つの活用ケースのポイント

1. ツールやドキュメントをまとめる2. 導入の負荷を上回るメリットを伝える
3. 実際に体感してもらう機会をつくるディレクターが考えるXDの導入・活用方法

背景

クライアントが見ていること、思っていること

導入

どのようにXDを導入するか

活用

どのようにXDを活用しているかまとめ

XDの導入によって得られる価値

XDが導入・活用できるポイント

デザイン

制作フローの効率化

プロト
タイピング

イメージの共有

コミュニケーション

スタータープランの登場

無料でいますぐに使うことができるスターターキットの提供

すぐにXDの使い方を学ぶことができる

日本語版ワイヤーフレーム UIキットの提供

ワイヤーフレームを短時間で作れることができる

日本語版ワイヤーフレーム UIキットの提供

ワイヤーフレームを短時間で作れることができる

使ってみない理由がない

XDの導入によって得られる価値
負荷

価値

学習コスト
ツールの使い分け確認の手間作業の軽減
新しい体験

＜

XDは対話のためのツール最後にクライアントやプロジェクトメンバーにXDを導入することによって得られる価値を伝えることを忘れずに

One more thing…

XDを使ったワークショップ

ワークショップで使用した、XDで作ったワークシートを限定公開します正式公開は近日中にnoteで行います

https://note.mu/katsutaroありがとうございました@katsutaro