Adobe XD に興味がある全ての人に役立つ情報をお伝えする番組「みんなで Adobe XD Trail 2022」。第6回は、以下の内容をお伝えしました。
| # | セクション | 内容 | 関連リソース |
|---|---|---|---|
| 1 | はじめの一歩 | 「マスク」の使い方 | サンプルファイル |
| 2 | 本日のゲスト | XD を使った動きのあるボタン制作（出演：青山益美） | サンプルファイル |
| 3 | 達人への道 | もう一回見直そう！リピートグリッド（出演：湯口りさ） | サンプルファイル |
| 4 | XD Topics | XD を総合的に学べる「Adobe XD Trail」の紹介 |
※サンプルファイルをダウンロードすると実際に手元で試しながら動画をご覧になれます。
各セクションの概要
☆ はじめの一歩 – マスク
思い通りにデザインするためには欠かせない「マスク」をテーマに、関連するチュートリアル動画の内容に沿った使い方が紹介されました。番組内で生徒が実演に使用したサンプルファイルは、上のテーブル内のリンクからダウンロードできます。
関連するチュートリアル動画
・シェイプでマスクを作成
☆ 本日のゲスト – XD を使った動きのあるボタン制作
レッスン動画シリーズ「マウスオーバーで見た目が変わるボタンをデザイン」や「タップで見た目が変わるボタンをデザイン」を制作した青山益美さんから、動きのあるボタンをテーマに、コンポーネントのステート、自動アニメーション、マスクを活用して、動的な効果をボタンに追加する様々なアイデアが紹介されました。
関連するチュートリアル動画
・コンポーネントへの複数ステートの追加 1/3（ホバーステート）
・コンポーネントへの複数ステートの追加 2/3（インタラクションの追加）
☆ 達人への道 – もう一回見直そう！リピートグリッド
XD の代表的な機能であるリピートグリッドを取り上げ、普通に使用しているだけでは気づかないような使い方が紹介されました。リピートグリッドの性質を学ぶという観点からも参考になるお話です。資料だけ見たい方のために、共有されたアートボードがこちらに公開されています。
関連するチュートリアル動画
・繰り返しオブジェクトの作成
☆ XD Topics – Adobe XD Trail の紹介
XD を総合的に学べるサイト Adobe XD Trail のコンテンツと、そのおすすめの利用方法が紹介されました。前回紹介したAdobe XD 検定と組み合わせれば、弱点補強など、さらに様々なスキルアップができるようになります。
当日の Q&A（マスクについての質問編）
☆動画ファイルもマスクできますか？
動画もLottieも「シェイプでマスク」でマスクをかけることが可能です。
当日のQ&A（青山益美さんへの質問編）
☆動きのあるボタンをデザインするとき、どんなことに気をつけていますか？
動きのあるボタンをデザインする前に、CSSやJSで実装できる範囲の動きかどうかをまず確認してからデザインをしています。 CSSやJSで実装可能かどうかわからない時は、エンジニアに事前に確認をすることをお勧めします。 これはボタンに限らず、XDでアニメーションを取り入れる場合は必ず確認をしています。
当日のQ&A（湯口りささんへの質問編）
☆リピートグリッドでやらないほうが良いことを教えてください
今回装飾に使用することを紹介しましたが、装飾や背景にリピートグリッドを使用する場合、簡単にXDの挙動を遅くしたり、最悪フリーズに近い状態になる可能性もあります。 リピートグリッドの中で、背景ぼかしを使ったり、オブジェクトやアンカーポイントが多いオブジェクトを使うのはできるだけ避けましょう。
☆リピートグリッドの間隔を数値入力できますか？
XDのアプリ上からはできません。プラグインのために公開されているAPIからは設定できるのでそんなプラグインを作れば可能です。