Adobe XD に興味がある全ての人に役立つ情報をお伝えする番組「みんなで Adobe XD Trail 2022」。第1回は、以下の内容をお伝えしました。
| # | セクション | 内容 | 関連リソース |
|---|---|---|---|
| 1 | XD Topics | Adobe XD 50 アップデートの新機能 | |
| 2 | はじめの一歩 | 「レスポンシブサイズ変更」の使い方 | サンプルファイル |
| 3 | 本日のゲスト | コンポーネントのステートを使った自動アニメーションのお話（出演：田中由花） | サンプルファイル |
| 4 | 達人への道 | コンポーネントとして作成したボタンのラベル更新を効率化するテクニック紹介（出演：佐々木雄平） | サンプルファイル |
※サンプルファイルをダウンロードすると実際に手元で試しながら動画をご覧になれます。
各セクションの概要
☆ XD Topics – Adobe XD 50 の新機能
1. 名前にパス「/」を使ったアセットの整理
2. リンク切れアセットの解決方法の改善
3. 読み込める動画サイズの上限が25MBに
☆ はじめの一歩 – レスポンシブサイズ変更
レスポンシブデザインに便利な機能「レスポンシブサイズ変更」の使い方を紹介するチュートリアル動画を取り上げて紹介しました。番組内で生徒が実演に使用したサンプルファイルは、リンク先の動画ページからダウンロードできます。
関連するチュートリアル動画
・レスポンシブサイズ変更とレイアウトの制約
☆ 本日のゲスト – ステートを使った自動アニメーション
「EC サイトでよく使われる UI パーツをつくる」のレッスン動画シリーズを制作した田中由花さんから、ステートを使った自動アニメーション機能の紹介がありました。番組内で実演されたカルーセルのつくり方は、このレッスン動画ページからサンプルをダウンロードすると実際に試せます。
関連するレッスン動画
・カルーセル（EC サイトのよくある UI パーツをつくるシリーズ）
関連するチュートリアル動画
・コンポーネントの操作 1/3（作成方法）
・コンポーネントへの複数ステートの追加 2/3（インタラクションの追加）
☆ 達人への道 – ボタンコンポーネントのラベル更新
ステートを持つボタンのインスタンスをたくさん配置した場合、ラベルの更新は面倒な作業になりがちです。そこで、ラベルもコンポーネントとして管理する方法が佐々木雄平さんから紹介されました。番組内で佐々木さんが使用したサンプルファイルをダウンロードできます。
関連するチュートリアル動画
・コンポーネントの操作 2/3（インスタンスのカスタマイズ）
当日のQ&A（レスポンシブサイズ変更についての質問編）
☆レスポンシブサイズ変更を使ってアートボードごと要素を一気に広げて、あとから調整するという使い方はできないのでしょうか？
アートボードのレスポンシブサイズ変更をオンにすれば変更可能です。
☆レスポンシブサイズ変更は、オンなのかオフなのか、自動なのか手動なのかわからなくなりそうです。複雑な画面では使わない方がよいしょうか？
通常は違和感なく使用できると思いますので、意識せずXDを操作できます。 触ってみて違和感があれば「レスポンシブサイズ変更」機能を切り替えてみると良いです。
当日のQ&A（田中由花さんへの質問編）
☆自動アニメーションを使用するときに、ステートとアートボードを使えるとのことですが、どのように使い分けるとよいでしょうか？
こちらの質問はイベント中に取り上げさせていただきました。 ステートは、一つのアートボードに複数配置したり、パーツとして使いまわしたいときに便利です。 アートボードは、時間トリガーで動かしたいときに使うといいです。
☆アートボードとステートで作成する違いはなんですか？ステートで作成すると動きのデータが重くなったり軽くなったりしますか？
ステートだとパーツとしてあちこちに使いまわせます。 複数の機能が同一画面にある場合に、アートボードだと全ての組み合わせが必要になってしまいます。 ステートだとそれぞれの状態変化がそれぞれ独立しているので、複数置いても大丈夫です。 一方、アートボードでは、時間トリガーを使えます。 データの重さは、それほど違いはないように思います。
☆ステートで作成するメリットはなんでしょうか？
パーツとしてあちこちに使いまわせることと、アートボードが増えすぎないことだと思います。 複数の機能が同一画面にある場合に、アートボードだと全ての組み合わせが必要になってしまいます。 ステートだとそれぞれの状態変化がそれぞれ独立しているので、ひとつのアートボードに複数置いても大丈夫です。
☆カルーセルの画像を背面の長方形と左側で揃えるのをワンアクションで操作されてるようですが、ショートカット ってあるのですか？
画像をずらして送り出す一連の操作で、いくつかのショートカットキーをつかっているので順に説明しますね。
・カルーセルの画像を選択するときは、command(ctl)+クリックでダイレクト選択
・そして画像を反対側に（shiftを押しながら水平をキープして）移動
・そして、Escキーでグループ階層をひとつ上がります。
・それから背面の長方形をshift+クリックで追加選択
・最後に、画像と背面の長方形をcontrol+左矢印キー（Win:Ctrl＋shift+左矢印キー）で整列しています。
☆サイト作成の場合、XDではラフを作っているんですが、皆さんここまで作り込むものなのでしょうか？
私のWEB制作の現場では、実のところ平凡なカルーセルやドロップダウンは作り込まないことが多いです。 独特な動きで予測できないものや、ビジュアルが重要なファーストビュー、検討する際の論点になりそうなところに絞って作っています。
☆私自身は口頭でカルーセルで動きますと伝えて、意思疎通を図った方が工数が省けると考えてしまうタチですが、自動アニメーションを駆使されていてすごいですね！ カルーセル以外で特に、アニメーション機能を使うことでクライアントの反応が良かったものはありますか？
そうですね。実のところ私も、今回ご紹介したような平凡なカルーセルは口頭で伝えちゃいますね！独特の動きをするカルーセルや、ビジュアルを重要視する場合に動かして見せる感じです。 カルーセル以外だと、WEBサイトのオープニングは感触が良いと思います。 あとは、「上に戻る」ボタンにちょっとしたかわいいホバーのしかけを仕込むのも好きです。
☆XDはプレゼン資料作りでもよく使用されるのでしょうか？
私の現場では、ディレクターさんもXDで提案資料を作られているようです。（パワポをお使いの方もいらっしゃいます） 私は、セミナーに登壇するときのスライドはいつもXDです。
☆デジタルスピードメーターのような数字が増減するアニメーションは作れますか？
デジタルスピードメーターの動きを動画でググってみましたが、再現するのはなかなか大変そうですね。作れるには作れると思いますが、かなり工夫と根気が必要かもしれません。よそのブログですがこのような表現であれば作りやすいです。（デジタル数字とはちょっと違いますが。）
☆URL共有は現場ではどのように共有しているのか？修正した場合は同じURLで共有できるのか？
私の現場では、チーム内ではURL共有よりも共同編集を主に使っています。 URL共有はコメント機能があるので、コメントをつけてもらいたいときに使います。 URLを共有した場合は、変更があった時は「更新」でおなじURLを更新できます。
当日のQ&A（佐々木雄平さんへの質問編）
☆コンポーネントを入れ子にすると複雑になりそうですが、今回のテクニックを使うときの注意点などあれば教えていただけますでしょうか。
マスクを使ったボタンなど、修正に伴って変化する文字長に対応できない構造は注意が必要です。
☆コンポーネントインコンポーネント（コンポーネントの入れ子）を多用するとXDの操作がもさっとしてしまう気がするのですが、佐々木さんご紹介のボタンの作り方ではいかがでしょうか？
コンポーネントの入れ子で操作感が損なわれてしまう経験はありませんので、問題ないと思います。
☆メインコンポーネントは制作とは別のアートボードにまとめておきますか？それとも実際の制作アートボード１枚目など決めておくのでしょうか？
私の場合は、あまり決めずにやっています。 メインコンポーネント置き場を決めて作ることもやってみましたが、徹底できませんでした。 なので、作りたくなったときにどこでもメインコンポーネントを作って、もしインスタンスにしたくなったら置き換えます。 右クリックで「メインコンポーネントを編集」で探せるので、あちこちに散らばっていてもそれほど不便を感じません。
☆ラベルのテキストに合わせてボタンサイズが自動的に変わったように見えましたが、これはどうすればよいのでしょうか？
ボタンにはあらかじめパディングを設定しています。
☆佐々木さんが使用されたテキスト検索のプラグインは何でしょうか？
Find and Showというものです。