Adobe XDでプレゼンしてみよう

Adobe XD Advent Calendar 2017の8日目の記事です。

去年XDアドベントカレンダーに投稿してからもう1年経ったということに愕然としたり・・

そして去年の今頃はまったく想像だにしていなかったのですが、2017年11月28日に行われたAdobe MAX Japan 2017というクリエイター向けカンファレンスにて「伝言ゲームをなくしてデザインの質を高める!Adobe XDを使ったライブデザインのコツ」(少々重いのでPC環境にてご覧頂くことをオススメします)というテーマでお話をさせて頂く機会がありました。

そのときのセッションで登壇用のスライドをすべてAdobe XD(以下XD)で作成して発表を行ったところ、意外と「XDってプレゼン資料にも使えるの?」みたいな感想もありましたので、この記事では「XDでプレゼンするってどうよ?」というところをお話したいと思います。

 

はじめに

Adobe XDは、Webサイトやモバイルアプリのデザイン、プロトタイプ作成、共有までを1つのアプリで実現する全く新しいUI/UXデザインツールです。(公式ページより抜粋)

去年はβ版でしたが、2017年の10月に正式にAdobe XDとなってリリースされました。

これだけ見るとあくまでデザインツールの一つなんですが、Web業界歴が結構長い方は昔Flashでプレゼンするのが流行ったことがあるのを思い出したりするかもしれないですね。

「XDでプレゼンしてみよう」というタイトル記事ではありますが、正直言って通常のプレゼン用途なら素直にプレゼン資料作りに最適化されてリッチなアニメーションエフェクトも手軽に入れられるPowerPointやKeynoteをおすすめします

 

XDでプレゼンのメリット

ではそもそもXDでプレゼン資料を作ることによるメリットがあるのか?

個人的に「ここが便利だからXDでプレゼンした」というところを挙げてみます。

 

  •  プレゼンとデザインを一つのツールで完結できる
  •  フローチャート風に分岐ルートをビジュアライズできる
  •  資料を簡単に即共有できる

プレゼンとデザインを一つのツールで完結できる

これはまず今回の自分の登壇テーマが「XDによるライブデザイン」(その場でサクッとデザインする)だったので、プレゼン中にXDのデザインモードとプロトタイプモードで実際の作業の様子を見せながら進めるというのは必須事項でした。

そして、他のプレゼンツールとXDを行ったり来たりするのが嫌だったので、プレゼン部分もXDのアートボードとして作成して、デザインモードとデスクトッププレビューを行き来することで、プレゼンとデザイン工程をXDだけでスムーズに完結させることができました。

また、大きさの異なるアートボードを配置できるので、スライド用フルHDサイズ→iPhone用サイズ→スクロール有りのフルHDサイズなどを織り交ぜながら見せることができ、表現の幅を広げることができます。
最終的に配布資料として作ったファイルは、アートボード数250枚くらいになりましたが、それでもサクサク動作するXDは凄いですね。

さらにXDは修正した内容がリアルタイムにプレビューに反映されるので、プレビューを見せながら、裏でデザインをその場で修正する、といったことも可能です。

 

フローチャート風に分岐ルートをビジュアライズできる

自分が考えるプレゼンは「楽しくあるべき」ということもあり、ただ見せるだけではなく、プレゼン中の選択によってストーリーが分岐してゲーム感覚で楽しめるものを目指していました。

スライド内に選択肢を置いて別のスライドにリンクさせるということならPowerPointやKeynoteでもやろうと思えば可能です。
ただ、PowerPointやKeynoteは全体の遷移図が俯瞰しにくいのが欠点です。

そこでXDのプロトタイプ機能を使ってアートボード間の遷移を分岐させていったのですが、アートボードを自由に配置できるので以下のようにフローチャート風にストーリーの中でどのような分岐がされているのかを分かり易く配置できました。

どのようなルートがあるのか一目瞭然ですね。

さらにそれぞれ固有のトランジションをつけることができるので、例えば左の選択肢を選ぶと左にスライド、右の選択肢は右にスライド、のような視覚的に違和感のない動きなども可能です。

ただし、調子に乗って分岐させるととんでもないルートの数になってしまうので注意しましょう。

 

資料を簡単に即共有できる

最後に、XDの特徴の一つでもある共有機能を使うことで、例えばプレゼンしながらデザインを修正した結果をプレゼンの最後にプロトタイプをWebにアップロードして、その場で最新の資料としてブラウザ経由で閲覧してもらうことも可能です。

このときあらかじめ一度アップロードしてURLを発行し、そのURLをQRコードにしてプレゼンの最後のページに貼り付けておくと、その場でスマホ(のQRコードリーダー)経由でプロトにアクセスしてもらう、なんてこともできます。
(Twitterなどの皆が見れるツールでURLを共有してもいいですね)

以前やったのが、事前に(一度アップしたプロトの)QRコードを印刷して参加者に配っておいて、プレゼン中に分岐してたどり着いた結果の一つをその場でこっそりアップロードしてプロトを上書きし、「みなさんの選択はすでに予想済みでした!(ドヤァ)」と事前に配ったQRコードにアクセスしてもらうというものでした。

この場合PCとモニタはミラーリングではなく、モニタ側はXDのデスクトッププレビューのみを表示、PC側はデザインモードとプロトタイプモードを表示して、Web共有してるところを見せないのがポイントです。

・・・まあバレバレでしたが!

 

まとめ

このようにXDでプレゼンするというのはすべての発表に有効なわけではなく、「デザイン」「双方向コミュニケーション」「共有」のシナリオが合致したときに面白いプレゼンができる!・・・かもしれない、くらいに思って頂くのが良いのではないでしょうか。

また、遷移アニメーションの豊富さは各種プレゼンツールには及びませんが、スライド間のトランジションに緩急をつけるだけでも思わず魅入ってしまうプレゼン資料にもなり得ます。

@nomal_fさんの「Xdを共通言語にしよう」というXDで作られた素敵プレゼンスライドをとても参考にさせて頂きました!

 

面白XDプレゼンをされた方は是非シェアして教えてください。

それでは!