Adobe XD に興味がある全ての人に役立つ情報をお伝えする番組「みんなで Adobe XD Trail 2022」。第5回は、以下の内容をお伝えしました。
| # | セクション | 内容 | 関連リソース |
|---|---|---|---|
| 1 | はじめの一歩 | 「Photoshop連携」の使い方 | サンプルファイル |
| 2 | 本日のゲスト | XD を使った効果的なプレゼン資料制作（出演：佐藤実可子） | サンプルファイル |
| 3 | 達人への道 | 自動アニメーションでよくある失敗と解決方法（出演：佐々木雄平） | サンプルファイル |
| 4 | XD Topics | 自分の XD 理解度を分析できる「Adobe XD 検定」の紹介 |
※サンプルファイルをダウンロードすると実際に手元で試しながら動画をご覧になれます。
各セクションの概要
☆ はじめの一歩 – Photoshop 連携
画像編集には欠かせないツール「Photoshop との連携」をテーマに、関連するチュートリアル動画の内容と、様々な連携方法の特徴が紹介されました。番組内で生徒が実演に使用したサンプルファイルは、上のテーブル内のリンクからダウンロードできます。
関連するチュートリアル動画
・外部ツールとの連携 2/5（Photoshop）
・XDとPhotoshopとの連携 1/3（コピー＆ペーストと編集）
・XDとPhotoshopとの連携 2/3（PSDファイルを開く方法と読み込む方法）
・XDとPhotoshopとの連携 3/3（CCライブラリを利用した連携）
☆ 本日のゲスト – XD のアニメーション機能を使った効果的なプレゼン資料制作
レッスン動画シリーズ「Adobe XDでアニメーションするプレゼン用スライドを作成する」を制作した佐藤実可子さんから、効果的なプレゼン資料制作をテーマに、XD のアニメーションやインタラクション機能を活用し、動的な効果をスライドに追加する様々なアイデアが紹介されました。
関連するチュートリアル動画
・スクロールグループの作成
・コンポーネントへの複数ステートの追加 2/3（インタラクションの追加）
☆ 達人への道 – 自動アニメーションでよくある失敗と解決方法
本格的に使い始めると出会うことになる自動アニメーションのよくある失敗について、代表的な 5 種類の例と、それぞれの解決方法が紹介されました。具体期には、アートボードの外に移動するオブジェクトの扱いや、非表示と不透明度の使い分けといったトピックです。
関連するチュートリアル動画
・プロトタイプのアニメーション化 1/3（フェードイン/アウト）
・プロトタイプのアニメーション化 2/3（拡大縮小のアニメーション）
☆ XD Topics – Adobe XD 検定の紹介
XD の理解度をテストして、自己分析と強化ポイントの確認ができる「Adobe XD 検定」が紹介されました。初級編から上級編まで用意されているので、繰り返しチェックしながら、スキルアップを目指せます。
当日の Q&A（Photoshop 連携についての質問編）
☆Photoshop からビットマップをコピーする時、カンバスのサイズでトリミングされてしまうのですが、レイヤーのサイズのままコピーする方法はありますか？
すべての画像を表示機能を使用してコピーする方法があります。
☆Photoshop でフィルタや効果をたくさん使用していると XD で開いた時に引き継げません、その場合は1枚画像にしてからしか XD に持っていかないでしょうか？
CC ライブラリを経由して配置することで、Photoshop で編集可能なデータを、そのまま XD から利用できます。
☆svgが聞き慣れない・・
Scalable Vector Graphics（SVG）とは、Web に適したベクターファイル形式です。
当日のQ&A（佐藤実可子さんへの質問編）
☆オンライン会議の場合、資料にアニメーションをつけても相手の動作環境によって遅延してしまい上手く伝わらないということがあるのですが、そのあたりで気をつけていることはありますか？
スライドの画面遷移のときや、スライドを表示したとき最初に見てほしい場所など、強調したいところを絞ってアニメーション効果を追加するのが良いと思います。コツとしては、「シンプルかつ早すぎない」を心掛けることがおすすめです。 動作環境によって遅延してしまった場合、複雑な動きや早い動きは伝わらない可能性があります。私はできるだけデュレーションを0.8秒以上に設定するようにしています。
☆プレゼン中に人には見せたくない説明などを準備しておきたい場合はどのようにされていますか？
XDにはプレゼンモードなどがないので、ディスプレイが1つの場合はスマホやタブレットに表示しておく、デュアルディスプレイの場合は2枚目のディスプレイに置いておくというような形を取っています。
☆今までパワポでは自分の読み上げる用の文章をメモに入れて、デュアルモニターでプレゼンにするとサブモニタに出てきて読み上げることができたのですが、XDでプレゼン資料を作るとこういった機能がないかと思います。こういう場合はメモ帳などを使うしかなさそうでしょうか。。
仰る通りで、XDにはPowerPointのようなプレゼンモードがないので、カンペ等がある場合は別で用意をしてサブモニターやスマホなどの端末に入れておく必要があります。
当日のQ&A（佐々木雄平さんへの質問編）
☆キービジュアルに自動アニメーションを使うとマウススクロールができなくなってしまうようです。キービジュアルをアニメーションさせながらページの下部に移動できるようにする方法はありますか？
残念ながら、自動アニメーション中はマウススクロールができません。対処方法として、自動アニメーション部分を動画にしてXDに配置する方法があります。