Adobe XD に興味がある全ての人に役立つ情報をお伝えする番組「みんなで Adobe XD Trail 2022」。第3回は、以下の内容をお伝えしました。
| # | セクション | 内容 | 関連リソース |
|---|---|---|---|
| 1 | はじめの一歩 | 「自動アニメーション」の使い方 | サンプルファイル |
| 2 | 本日のゲスト | カレンダーを題材にしたグループ関連機能の使い分け（出演：井斉花織） | サンプルファイル |
| 3 | 達人への道 | Lottie を使ったスクロールの表現（出演：佐々木雄平） | サンプルファイル |
| 4 | XD Topics | 便利な UI Kit の紹介 |
※サンプルファイルをダウンロードすると実際に手元で試しながら動画をご覧になれます。
各セクションの概要
☆ はじめの一歩 – 自動アニメーション
動きを表現したいときに便利な機能「自動アニメーション」をテーマに、関連するチュートリアル動画の内容を紹介しました。番組内で生徒が実演に使用したサンプルファイルは、上のテーブル内のリンク（または下の動画ページ）からダウンロードできます。
関連するチュートリアル動画
・プロトタイプのアニメーション化 1/3（フェードイン/アウト）
・プロトタイプのアニメーション化 2/3（拡大縮小のアニメーション）
☆ 本日のゲスト – カレンダーを題材にしたグループ関連機能の使い分け
「XDで縦横スクロールできるカレンダーをデザイン」レッスン動画シリーズを制作した井斉花織さんから、カレンダーの縦軸のデザインにリピートグリッド、横軸のデザインにスタックとコンポーネントの組み合わせ、と異なるつくり方をした理由の解説、およびドラッグトリガーの便利な使い方の紹介がありました。番組内で取り上げられたカレンダーアプリの UI のつくり方は、以下のレッスン動画でご覧になれます。
関連するレッスン動画
・XDで縦横スクロールできるカレンダーをデザイン
☆ 達人への道 – Lottie を使ったスクロールの表現
前回のみんトレでは、青山さんからドラッグトリガーを使ったスクロール表現のつくり方の紹介がありましたが、佐々木さんからは、さらに上級のテクニックとしてLottie アニメーションを使ったスクロール表現のつくり方が紹介されました。Lottie アニメーションを自動再生にしておいて、再生終了のトリガーを自動アニメーションの開始合図として利用する方法です。
関連するチュートリアル動画
・Adobe XD での Lottie アニメーションの操作
☆ XD Topics – 便利な UI Kit の紹介
いざという時のために手元に置いておくと便利な UI キットが紹介されました。XD Trail サイトにも関連ページがありますのでぜひご覧ください。
当日のQ&A（自動アニメーションについての質問編）
☆テキストもアニメーションできますか？
はい。テキストもアニメーション可能です。
当日のQ&A（井斉花織さんへの質問編）
☆ドラッグ操作で大きさを変えるインタラクションはつくれるでしょうか？以前に試したことがあるのですがうまくいきませんでした
ドラッグ操作でそのまま大きさを変えることはできませんが、位置変化する透明オブジェクトを配置すると大きさが変化しているように見せることが可能です◎
当日のQ&A（佐々木雄平さんへの質問編）
☆矢印関係をXDで扱えるプラグイLottieを使ったテクニックはほかにも色々使えそうですが、何かアイデアがあれば教えていただけないでしょうか？
コンポーネントに時間トリガーを持たせることができるので、様々なものに応用が可能だと思います。例えば、ポップアップ、クッキーに関する表示、FV内のコンバージョンボタンの表示を遅らせて目立たせる、コンポーネントだけで自動でアニメーションするスライダーなどが作れます。（番組中に紹介されたサンプルがダウンロードできます）