Adobe XD に興味がある全ての人に役立つ情報をお伝えする番組「みんなで Adobe XD Trail 2022」。第2回は、以下の内容をお伝えしました。
| # | セクション | 内容 | 関連リソース |
|---|---|---|---|
| 1 | はじめの一歩 | 「スタック」の使い方 | サンプルファイル |
| 2 | 本日のゲスト | ドラッグトリガーと自動アニメーションを使ったパララックス効果のつくり方のお話（出演：青山益美） | サンプルファイル |
| 3 | 達人への道 | XDだけで描いて使える便利な矢印の紹介（出演：湯口りさ） | スライド/CCライブラリ |
| 4 | XD Topics | ライブラリの公開 |
※サンプルファイルをダウンロードすると実際に手元で試しながら動画をご覧になれます。
各セクションの概要
☆ はじめの一歩 – スタック
レスポンシブデザインに便利な機能「スタック」の使い方を紹介するチュートリアル動画（パート1、パート2）を取り上げて紹介しました。番組内で生徒が実演に使用したサンプルファイルは、動画ページからダウンロードできます。
関連するチュートリアル動画
・スタックを使用した動的なデザイン 1/2（スタックの作成方法）
・スタックを使用した動的なデザイン 2/2（スタックの使用方法）
☆ 本日のゲスト – ドラッグトリガーと自動アニメーションを使ったパララックス効果
「XD でアニメーションするランディングページをデザイン」のレッスン動画シリーズを制作した青山益美さんから、パララックス効果のつくり方や、自動アニメーションに便利なヒントの紹介がありました。番組内で紹介されたパララックスは、このレッスン動画ページからサンプルをダウンロードすると実際に試せます。
関連するレッスン動画
・XD でアニメーションするランディングページをデザイン
関連するチュートリアル動画
・プロトタイプのアニメーション化 3/3（ドラッグトリガー）
☆ 達人への道 – XDだけで描ける便利な矢印
XD で遷移図やサイトマップを作成したり、アイデアを共有するためのホワイトボードとして使うとき、矢印は欠かせないアイテムです。そこで、湯口りささんが、使いやすい矢印を作成する方法を紹介してくれました。番組内で湯口さんが使用したスライドと、リンクまたは自分のライブラリにコピーして使用できる CC ライブラリが公開されています。
関連するチュートリアル動画
・シェイプの合成
・レスポンシブサイズ変更とレイアウトの制約
☆ XD Topics – ライブラリの公開
公開リンクを通じてライブラリを共有する手順が紹介されました。
当日のQ&A（スタックについての質問編）
☆背景のあるスタックが作れるようですが、背景として認識されるオブジェクトはどんなルールになりますか？
次のような条件であるようです。グループ内で一番下にあること、グループ内のメンバーのパディング以外の領域が重なっていること、コンポーネント以外のオブジェクトであること、それ自体にパディングが設定されていないこと（背景にあたるグループの中にあるオブジェクトにパディングがあるのは大丈夫です）。
☆すでに縦方向のスタックを設定しているとき、ある行に複数の要素を置きたくなった場合どうするとよいでしょうか。単純にオブジェクトを追加するとそのまま縦に並んでしまいます。
一度スタックを解除した状態で作りたい形にしまってもいいですが、解除しない方法を説明します。
①追加したい行のオブジェクトを選択してグループ化します。
②そのグループの中にオブジェクトを追加すれば配置したい位置にオブジェクトを配置できます。
☆複数のオブジェクトをまとめて複製した時、思ったように並ばないのですが後から順番を変えるしかないのでしょうか？（ABABとしたいがAABBで並んでしまう）
Ctrl/Cmd＋Dで複製するとそれぞれが自分自身の真上に複製されてそれぞれのオブジェクトの次に挿入された形になります。いったんコピーをして任意のオブジェクトを選択してペーストするとそのオブジェクトの下に挿入されるようになります。
当日のQ&A（青山益美さんへの質問編）
☆コンポーネント化したほうが良いもの、グループ化したほうが良いものをどのように判断しているのか教えてください。
コンポーネント化したほうがよいものは、 繰り返し使うオブジェクトです。 グループ化したほうがよいものは、 位置を移動させるオブジェクトです。 ただし、スクロール時に位置を固定しておきたいオブジェクトは、グループ化してしまうと固定の機能が使えなくなるので、グループ化はしないておくとよいです。
☆ドラッグトリガー用の透明オブジェクトは、プロトタイプモードのアートボード全体からのインタラクション設定では実現できないのでしょうか。アートボードサイズの透明オブジェクトを用意する理由があればお聞きしておきたいです。
ドラッグトリガーはオブジェクトをドラッグすると発動するトリガーですが、この透明オブジェクトを配置しておくことにより、ドラッグ領域（スクロール領域）を調整しやすくなります。 アートボード全体からでも設定自体はできますが、ドラッグ操作で自動アニメーションはされません。（できなくはないですが、意図したとおりのドラッグアニメーションはされません。）
☆先ほどのようなスクロール時のアニメーションをXD上で作成するとなるとデザイン以上の工数がかかると思うのですが、工数を使ってでもアニメーションを作ってよかった時はありましたか？
アニメーションは慣れるまで難しく感じるかもしれませんが、慣れてしまえばそれほど工数はかかりません。クライアントに対してこんなかんじのアニメーションをつけますと伝えるときや、エンジニアにこんなかんじで実装してほしいなど伝えるときに、テキストや言葉だけだと伝わりにくい場面が多々あるので、実際の動きを見てもらったほうが工数的には早い場合が多いです。
☆順番としては、アニメーションを作るときは、デザインが決まった後につけるといいですかね？
そうですね！なんとなく頭の中で動きを想定しながら、静止画状態のデザインを作成するのがよいかと思います。
当日のQ&A（湯口りささんへの質問編）
☆矢印関係をXDで扱えるプラグインで何かおすすめはありますか？
イベント中に紹介したFlowkit 矢印のスニペットがあるホワイトボードあたりは使いやすいです。
☆線ツールで1pxの線をひくとオブジェクトのセンターが0.5pxの所になるので、ピクセルを整数で配置させたい場合ちょっと不便に感じているのですが、いい対策方法がありますか？いつも１pxの長方形を作って使っていたので、良い方法があれば知りたいです。
こちらは毎回プロパティインスペクタやプラグインのRemove Decimal Numbersで端数を修正できますが整列で元に戻ってしまったり、線の揃えが中央になっているシェイプ以外と揃えようとすると整数時ずれてしまうので残念ながら今おやりになっているように長方形で代用していただくのが良いと思います。
☆レスポンシブの手動設定の判断が分かりません。?
基本的には自動で、うまくいかなかったら手動設定するようにしています。右に固定したい左に固定したいくらいの感覚で決めています。今回紹介したbool組み合わせだけは絶対に毎回設定しないと変形してしまう仕様なので、形を変えたくないものは幅高さ固定、幅高さを固定した場合はそれに接するオブジェクトは上下左右を固定することが多いです。
☆資料を社内で共有したいのですが、問題ありませんでしょうか
矢印の資料についてはこれからの公開になりますがご自由にご利用くださってかまいません。ライブラリもあわせてどうぞ！XDTrailで配布されているものについてはその規約に従ってください。