完全版 Adobe XDユーザーインタビュー：ソニー・インタラクティブエンタテインメント池原健治氏～コミュニケーションをAdobe XDが視覚化するワークフロー
Adobe XD事例
個人的な興味からAdobe XDを実験的に使い始め、業務に採用したことで新しいワークフローの可能性を見つけたという池原氏は、コーポレートサイトやプロモーションサイトのデザインを主な業務としてこなすWebデザイナーです。Adobe XDをプロジェクトに採用する意味や、池原氏が考えるライブデザインの利点についてお話を伺いました。
スピード感とプロトタイプ機能を評価して実戦に投入
最初は個人的な興味から使い始めたと伺いました
**池原：**Adobe XDというツールが新しく出て、さくさく使えるという評判を耳にしていたものの、周囲に実際に使っている人がまだいないという状況でした。そこで、個人的に触ってみたら、確かにかなり取っ付きやすく、軽くて使いやすいということが分かりました。
普段デザインをしていると繰り返し要素が頻繁に出てくるのですが、XDにはリピートグリッドと呼ばれる特徴的な機能があり、それを使うと簡単に繰り返し要素がつくれる。つくって要素の間隔を調節すると、繰り返し要素の全てに反映される。それが非常にWebデザインと相性が良いと感じました。
実際のプロジェクトへの採用までに、どのような準備をしたのでしょうか？
**池原：**軽くて速い、ワイヤーフレームにもページのデザインにも使える、そして、アートボードを使って動きを簡単につくれる。これらの特徴が、業務にも役に立てられるかもしれないと考えて、まずは個人的な実験から始めました。
例えば、Webデザインをするとき、最初にXDを使ってざっくりとした動きを確認してからPhotoshopやIllustratorで作業をすると、どれだけ作業効率が上がるのか？ということを調べました。
最初に評価期間があったわけですね
**池原：**はい。他の人にも勧められると思ったのは、まずは、軽くて使いやすいので、「こんな感じのデザイン」をすぐにその場で形に落とし込めるという所。つまりスピード感ですね。
それともう一つは、プロトタイプとして、組みあげたものを動きを含めて確認できる点です。完成形に近い形で関係者に見せられて、簡易なユーザーテストという感覚で使えるのが便利だと感じました。
それで、私がツールの使い方をレクチャーする感じでチーム内に広め、それからリクルートサイトのリニューアルにXDを使ってみようという話になりました。
XDで視覚化して、コミュニケーションの質を向上
いよいよ実戦投入ですね。どう活用したいと考えていましたか？
**池原：**チームでデザインを進めるとき、普段から心がけているのは、コミュニケーションをしっかりとる、ということです。お互いに何かを伝えたつもりで進めていても、どこかで伝達ミスや認識の違いが生じて、思っていたものと違うものができてしまう。そうすると、最初の方からデザインのやり直しになってしまうこともあります。
なるほど。プロジェクトではよく聞く話です
**池原：**そこで、伝えたつもりだったことを、それが本当に伝わっているのかどうかを確認するために、都度XDでデザインして、ミーティング参加者全員でデザインを見ながら議論をしました。例えば、サイト全体のコンセプトや要望について、ここはこういうテーマだったよねとか、ここはこういう要望があったからこういうデザインにしようとか。
デザイナーからエンジニアに動きを伝える際、言葉では伝えづらいところがあります。例を挙げると、「ここは下からシュッと」とか「上にフワッと」とか。XDはページ遷移のアニメーションを具体的につくれるので、伝えたいことをそのまま形として伝えられることも良かったですね。
その効果は実際に感じることができましたか？
**池原：**XDがコミュニケーションを上手く視覚化してくれるというか、見えやすいような形にしてくれるなあと感じました。認識に違いがないか、その場その場でミーティング参加者がそれぞれの目線で確認できたと思います。
ライブデザインがやり直しを減らす
そうした会議を繰り返し行っていたということですね？
**池原：**そうですね。都度、XDを使ったライブデザインミーティングのような会議を開いていました。XDで会話をするような感覚で、ミーティングではあるもののデザイン作業の場でもあるような形で。一見すると歩みが遅くなりそうなんですけれども。
確かに、デザイン作業の負荷は気になるところです
**池原：**XDで素早くデザインできるので、効率的に作業を進められました。むしろ、いいデザインだけじゃなく、悪いデザインもすぐにつくれて。それにすぐに気づけたことが大きかったですね。
ライブデザインにより、実際に形や動きを見ながら議論することで、ユーザー体験として問題がないか、要望が正しく反映されているかなど、ダメなところはすぐにその場で見つけることができました。本格的にエンジニアがつくる前の段階で問題に気づけたことが、結果的に全体的な効率アップにつながりました。
ライブデザインにより、問題に早く気がついて、修正が容易になった、というのは重要な点だと思います
**池原：**データのまとめとコミュニケーションのまとめ、そういうところでXDがうまくはまったと思います。
想像力を加速する「XDストーム」
まとめると、「コミュニケーションの質の向上」と「手戻りの少なさ」の2点がライブデザインの利点ということですね
**池原：**ライブデザインには、企画の途中で、様々な案をデザインする機会があります。これには、デザインの質や創造性を高める効果もあると考えています。
「デザインの質」もですか？
**池原：**通常のプロジェクトは、方向性を絞り込んで確認、デザインして確認、のように段階的に目的地を目指して進行する、いわば線のコミュニケーションで成り立っています。デザインの段階ではある程度方向性が決まっているのが普通ですね。
一見真っ直ぐ進んでいるように見えて、タイムラグや認識のずれなどが原因となり、いつのまにか目的からブレが生じてしまうこともあります。
確かに、デザインの段階で発揮されるクリエイティビティは限定されたものになりそうです
**池原：**それぞれの分岐したアイデアには理由があって、選ばれなかったからといって無意味ではありません。ライブデザインでは、ブレインストーミングとデザインを同時に行うことで、幅広い選択肢を持ちながらデザインを進められます。承認する立場の人間も同席すれば、認識を共有したまま次のステージに進めるため、全体の進行も加速します。従来の線のコミュニケーションと比べると、面のコミュニケーションと言えるでしょう。
なるほど。ライブデザインでは、アイデアとデザインが一緒に議論されている訳ですね
**池原：**ライブデザインの本質は、次の3点が同時に起こることだと思います。
- お互いの認識を合わせながら
- 理由を持って分岐と選択を繰り返し
- 目的に向けてその場でデザインを最適化する
「考える速度でデザインできる」を目標に開発されたXDの特長が活きそうです
**池原：**ブレインストーミングが、ブレイン（頭脳）を集めてストーム（嵐）を起こしてアイデアを生み出す手法だとすれば、そこで生まれたアイデアを、XDを使うことにより、ライブデザインで更にストームして、その場で視覚化していく手法が可能になります。個人的には、この手法を「XDストーム」と呼んでいます。
XDストームにより、コミュニケーションとデザイン両方の質が上がり、無駄なやり直しがなくなりました。また、複数の選択肢を残しながら進行するため、目的に向けて効率的に修正や最適化できます。
XDだけでワークフローが完結するわけではありませんが、XDはコミュニケーションとデザインの起点になる存在として、使い出のあるツールだと思います。