2017の8日目の記事です。XDを使ったライブデザインのコツ」(少々重いのでPC環境にてご覧頂くことをオススメします)というテーマでお話をさせて頂く機会がありました。XD(以下XD)で作成して発表を行ったところ、意外と「XDってプレゼン資料にも使えるの?」みたいな感想もありましたので、この記事では「XDでプレゼンするってどうよ?」というところをお話したいと思います。XDは、Webサイトやモバイルアプリのデザイン、プロトタイプ作成、共有までを1つのアプリで実現する全く新しいUI/UXデザインツールです。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プレゼンをされた方は是非シェアして教えてください。