Adobe XD に興味がある全ての人に役立つ情報をお伝えする番組「みんなで Adobe XD Trail 2022」。晩秋SP Day 2 は、以下の内容をお伝えしました。
| # | セクション | 内容 | 関連リソース |
|---|---|---|---|
| 1 | はじめの一歩 | 「時間トリガー」の使い方 | サンプルファイル |
| 2 | 本日のゲスト | リモート環境での XD を使った効率的及び効果的なデザイン（出演：野澤未帆） | |
| 3 | 達人への道 | Adobe XD の自動アニメーションで楽しく遊ぼう！（出演：佐々木雄平） | サンプルファイル |
※サンプルファイルをダウンロードすると実際に手元で試しながら動画をご覧になれます。
各セクションの概要
☆ はじめの一歩 – 時間トリガー
知っているとプロトタイプ作成にとても便利な「時間トリガー」をテーマに、関連するチュートリアル動画の内容に沿った使い方が紹介されました。番組内で生徒が実演に使用したサンプルファイルは、上のテーブル内のリンクからダウンロードできます。
関連するチュートリアル動画
・タイマートランジションの作成 1/2（時間トリガーの基本）
☆ 本日のゲスト – リモート環境での XD を使った効率的及び効果的なデザイン
MAX セッション「Adobe XD で実現するニューノーマル時代のチームクリエイティブ」の講師である野澤未帆さんから、実際のプロジェクトがリモート環境でどのように行われていたのかを紹介していただきました。丁寧にアニメーションが作りこまれた XD ファイルも披露されました。
関連するチュートリアル動画
・デザインの共同編集
・XDとPhotoshopとの連携 3/3（CCライブラリを利用した連携）
☆ 達人への道 – Adobe XD の自動アニメーションで楽しく遊ぼう！
XD の自動アニメーションを使いこなすための様々な知識を、楽しいゲームを題材に詳しく解説していただきました。サンプル兼資料として使われていた XD ファイルはこちらからダウンロードできます。
関連するチュートリアル動画
・音声コマンドや音声再生を使用したプロトタイプの作成 1/2（音声コマンドの使用）
・キーボードを使用したプロトタイプの作成
当日の Q&A（時間トリガーについての質問編）
☆時間の設定をどうするのがよいか、おすすめはあるのでしょうか？
最初は何度も再生して確認、感覚を鍛えるのがオススメです。 気になるアニメーションがあれば録画して、スローで再生すると様々な気づきが得られます。
☆Lottie アニメーションやビデオにも時間トリガーがありましたが、それを使って画面遷移などのアクションを設定できますか？
Lottie や動画を使って画面遷移させるには、再生終了トリガーを使うことで再生終了時に画面遷移を行います。 Lotti eや動画が配置されたアートボードから別のアートボードに遷移させるには、アートボードに自動アニメーション「時間」を設定します。
☆1秒の透明な Lottie アニメーションの「透明」にする方法が知りたいです・・・
長方形などのオブジェクトの「塗り」「線」両方のチェックを外すと透明なオブジェクトが作成できます。 こちらを After Effects に書き出し、Lottie アニメーションを作成します。
☆制作物（デザイン）に対する評価や意見をどのように得ていますか
所属企業によって様々な方法が考えられますが、Adobe XD であれば共有したデザインにコメントをつけることができます。
当日のQ&A（野澤未帆さんへの質問編）
☆web 制作では XD と psd どちらを使用した方がいいでしょうか。
今は XD や sketch が一般的なのかなと思います。デザインの工数が確実に減ります！実装側からするとどちらでも変わらないのかもしれませんが。。
☆MAX セッション拝見しました。アニメーションを丁寧に作りこんでいるのが印象的でしたが、そこに時間をかけているのはなぜか？どんなプロジェクトでも同じようにアプローチするのか？を教えてください
自分たち含め、全スタッフ、クライアント内で共通イメージを持つためにしています。 ただ、そこばかりに時間をかけるのは本末転倒なので、普段は必要な箇所だけ作ったりします。サイトのキモになる部分だけなど。あとは、参考事例を駆使しながら伝えます！
☆エンジニアに事前に相談して本当に実装できるか相談してからプロト作りますか。私はエンジニアなんですが、デザイン先行のものが多く結構ハードル高い要件が多く、ちょっと相談してほしかったなということがあります。
経験則で、相談しておいた方が良いと判断したものは、社内ideaが通った段階でしています！（プロデューサーもそこは早めに判断してくれます）先程のういるすのサイトの場合、初期段階で、中に入っていく動きが可能かは確認しました！
☆PC とモバイルだと先にデザイン起こしはどちらを先に優先しますか。うちはモバイルフレンドリと言いつつ、PCを先に作ってしまいます。XD だとモバイルが作りやすいですが。
必ずモバイルを先に進めるようにしています！モバイルの方が制限が多いので、モバイルフレンドリーの観点において必ずそうすべきかなという持論があります！（場合によるかもしれないですが）
☆デザインが出来てから、プロトタイプの動きをつけるだけでどのくらいの期間かかるのでしょうか。
デザインと同時進行でプロトタイプを作っています！プロトタイプに時間をかているというよりは、デザインの一貫として行っているイメージで、その後の出し戻しの工数が減るので、かかる時間も正直トータルするとそんなに＋＠にならないです！むしろ減っています。
☆お客さまにもこのようないろいろな情報が入った状態で共有するのですか、それとも社内用、社外用と目的別に、ボードや見せる素材の取捨選択表示ができるのでしょうか？うっかり内部情報かいたまま社外に提供してしまって事故・・・とか、ちょっと怖くなりました（当方内部のみで XD 利用しています）
共有用は書き出した動画のみを共有したり、「共有」を活用してリンクを使って確認いただくので、アートボードを見せることはほぼありません！
☆ぶしつけながら 実装する側からの意見として、「この表現は難しい」と言われた事はないですか。
XD で実現できることは大抵できるはずです！できることしか XD で作れないかと思います！（おそらく）逆に、他社事例でこういうエフェクトかけたいと追加でお願いすると、技術的にできないと言われることはありますね！
☆エンジニアにデータを共有する時は XD で動きを見せてパーツは別の PSD や AI のデータで共有しているのでしょうか、それとも XD だけでデータの共有も完結しているのでしょうか？
XD でデザインデータも渡しています。プロトタイプはデータが汚いので、レイアウト用のアートボードは別で同じデータ内に整理して作っております。（最終的にプロトタイプはデザインが古い状態になります！）
☆このような動画をアートボードに分ける時は頭の中で動画をコマ割りしている状態なのでしょうか？アートボードに分けるタイミングのコツなどありましたらお教えください。
自動アニメーションの自動で制御できる範囲でアートボードを分けているイメージです！（同時に動画を頭の中でコマ割りもしていると思います）
☆ドキュメントの共有以外にリモートワークで役立った機能はありますか？
CCライブラリかなと思います！！
☆CCライブラリで画像を管理して配置した場合、入れ替えはファイル名が同じであればCCライブラリにアップして一括で変換できるということでしょうか？
そうですね、リンクしているpsdの中身を上書きするイメージで行っています！
☆PC/SP/言語別、などアートボートが増えた場合 XD の領域いっぱいいっぱいで、これアートボート以上増やせない！という時があります。そういう場合はどのように XD を管理されていますか？別々に XD を作って各リンクをクライアントに共有などでしょうか？
領域がいっぱいになった場合は、PC/SP/言語別で分ける必要があります。 そのとき、ドキュメントアセットを共有するとコンポーネントなどを使い回すことができます。
☆xd ファイルを横断しての、プロトタイプモードでの画面遷移は可能なのでしょうか？（大規模案件の際に１つのxdファイルにおさまりきらず、ファイルを分けざるをえないときに別ファイルに画面遷移させたいです）
デスクトッププレビューの状態でファイルの横断は難しいです。あまりお勧めはできないですが、プロトタイプの URL を発行してハイパーリンクを設定すれば近いものは作れるかもしれません。
当日のQ&A（佐々木雄平さんへの質問編）
☆アニメーションがぎこちなく感じたときに、見直す際のコツはありますか？
イージングの設定を見直すと良いかもしれません。2つのアートボード間でのイージング設定も大事ですが、アニメーション全体の流れを設計できると印象が変わります。