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

エイマエダ カツタロウ@katsutaro今日の登壇者の中で唯一デザイナーではありません！

ディレクターです現在やっていること@katsutaro-

プランニング／ディレクション-

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

プロジェクト／チームの改善-

組織における意識、仕組みの改善-

ワークショップデザイン

ディレクションの本も書きましたNEW!

リズムタイプという会社

リズムタイプという会社

ディレクター
2人

エンジニア
1人

デザイナー
1.5人

こんなサービス作ったりこんなサービスに関わっていましたそして現在はコンサルティング+改善／グロースハック

制作／開発

弊社の特徴としてプロジェクトへの途中参加、立て直しのケースが多いですクライアント視点から考える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設計のイメージを伝える

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

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

表示画面

画面ごとに切替

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

CMS画面

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

ポイント

ドキュメントだけでは伝わりづらい部分を伝える

導入ケース5

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

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

想定シーン

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

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

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

クライアント
ディレクション

仕様設計
仕様設計書
プロトタイプ

開発会社

弊社

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

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

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

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

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

ポイント

作成・共有するドキュメントを少なくする（まとめる）

XD導入における留意点、失敗例

失敗例1

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

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

デザイン
完成形

XD上で徐々にデザインイメージを詰めていた

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

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

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

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

クライアントの理解度に合わせたコミュニケーションができていなかった

失敗例2

XDを求められすぎるようになってしまった！

失敗例2：XDを求められるすぎるようになってしまった

クライアント

ディレクター

デザイナー

デザイナーがPhotoshopでデザインし、クライアントにはカンプで確認

失敗例2：XDを求められるすぎるようになってしまった

クライアント

ディレクター

デザイナーの負荷を減らすためにXDを導入

デザイナー

失敗例2：XDを求められるすぎるようになってしまった

サイト設計

全部XDでお願いします！

ワイヤー
フレーム

バナー
デザイン

LPデザイン

テキスト
調整失敗例2：XDを求められるすぎるようになってしまった

クライアント

ディレクター

デザイナー

ディレクターで完結するため、ディレクターの負荷が高くなってしまった

失敗例2：XDを求められるすぎるようになってしまった全社的にXDを常用できる体制とするか、XDを利用するポイントをきちんと伝える必要があったクライアントとしっかりと向き合うことが大事クライアント視点から考えるXDの導入・活用方法

背景

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

導入

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

活用

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

まとめ

クライアントが得られる価値

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

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

クライアント

弊社

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

クライアント弊社

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

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

一覧で閲覧

履歴確認
できる

ケース1：デザイン確認・共有する・1箇所で確認できる
・これまでの経緯が確認しやすい
XD上でフィードバックが完結しないケースもある活用ケース2

XD上で原稿を作成する

ケース2：XD上で原稿を作成する「実際のページ表示を確認しながら、Webページの原稿作成を行いたい」（CMSは導入されていない）

ケース2：XD上で原稿を作成する

XDで編集

XDで編集

ケース2：XD上で原稿を作成する

原稿ファイルが、WordからXDに変わりました
クライアントがXDで編集

ケース2：XD上で原稿を作成する

書籍の執筆でも使ってみましたケース2：XD上で原稿を作成する

XDで編集
XDで編集

XDで編集フォーマット
配置

ケース2：XD上で原稿を作成する

複数ページを1ファイルで作成

ケース2：XD上で原稿を作成する

イメージしやすい、動作が軽い

XDじゃなくてもいいかもしれない

活用ケース3

ワークシートのアーカイブ化ケース3：ワークシートのアーカイブ化

アーカイブ化

ケース3：ワークシートのアーカイブ化

カスタマージャーニーマップをアーカイブ化ケース3：ワークシートのアーカイブ化

URLで共有できる
再整理
しやすい追加・削除できるケース3：ワークシートのアーカイブ化

デザインしてみましたケース3：ワークシートのアーカイブ化

イメージ、共有しやすくなった

XDじゃなくてもいいかもしれないクライアント視点から考えるXDの導入・活用方法

背景

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

導入

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

活用

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

まとめ

クライアントが得られる価値

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

デザイン

制作フローの効率化

プロト
タイピング

イメージの共有

コミュニケーション

クライアントが得られる価値
負荷

価値

学習コスト
ツールの使い分け
確認の手間

負荷の軽減
新しい体験＜XDは対話のためのツール最後にクライアントやプロダクトオーナーにXDを導入することによって得られる価値を伝えることを忘れずにありがとうございました@katsutaro