Adobe XD に興味がある全ての人に役立つ情報をお伝えする番組「みんなで Adobe XD Trail 2022」。第4回は、以下の内容をお伝えしました。
| # | セクション | 内容 | 関連リソース |
|---|---|---|---|
| 1 | はじめの一歩 | 「コンポーネント」の使い方 | サンプルファイル |
| 2 | 本日のゲスト | XD のレイアウト機能を使った装飾表現のアイデア（出演：田中由花） | サンプルファイル |
| 3 | 達人への道 | モーダルダイアログのつくり方あれこれ（出演：湯口りさ） | サンプルファイル |
| 4 | XD Topics | 初めての人におすすめ「スターターキット」の紹介 |
※サンプルファイルをダウンロードすると実際に手元で試しながら動画をご覧になれます。
各セクションの概要
☆ はじめの一歩 – コンポーネント
制作を効率化するために欠かせない機能「コンポーネント」をテーマに、関連するチュートリアル動画の内容を紹介しました。番組内で生徒が実演に使用したサンプルファイルは、上のテーブル内のリンク（または下の動画ページ）からダウンロードできます。
関連するチュートリアル動画
・コンポーネントの操作 1/3（作成方法）
・コンポーネントの操作 2/3（インスタンスのカスタマイズ）
☆ 本日のゲスト – XD のレイアウト機能を使った装飾表現のアイデア
「Adobe XD でシェイプを加工してつくる装飾表現」レッスン動画シリーズを制作した田中由花さんから、「文字数に対応する装飾」をテーマに、レイアウト機能を活用した装飾表現のつくり方の紹介がありました。また、番組内で紹介された波線などの表現のつくり方は、以下のレッスン動画でご覧になれます。
関連するレッスン動画
・Adobe XD でシェイプを加工してつくる装飾表現
☆ 達人への道 – モーダルダイアログのつくり方
ユーザーの注意を100%引き付けたいときに便利なモーダルダイアログのつくり方について、目的別にお薦めの 3 種類のつくり方が紹介されました。オーバレイ機能を使う方法、自動アニメーションを使う方法、コンポーネントのステート & Lottie アニメーションを使う方法の 3 種類です。
関連するチュートリアル動画
・オーバーレイを使用したプロトタイプの作成
・プロトタイプのアニメーション化 1/3（フェードイン/アウト）
・コンポーネントへの複数ステートの追加 2/3（インタラクションの追加）
☆ XD Topics – スターターキットの紹介
XD の基本的な使い方を自習形式で学べる「スターターキット」が紹介されました。XD の製品ページからダウロードできますので、ぜひご活用ください。
当日のQ&A（コンポーネントについての質問編）
☆インスタンスの要素を変更した後、元に戻す方法はありますか？
変更したインスタンスの上で右クリックでコンテキストメニューを開くと、「メインの状態にリセット」がありますのでそれを選択してください。メインコンポーネントの同じステートの状態に戻してくれます。この機能は上部のメニューの「オブジェクト」からも使用できます。
当日のQ&A（田中由花さんへの質問編）
☆リピートグリッドと四角を先にグループ化して文字は後でグループ化ましたが、まとめてグループ化してはダメですか？
まとめてグループ化するとうまくいかないはずです。 先にグループ化したものが、パディングの箱になって伸び縮みする仕掛けです。 面倒ですが2回にわけてグループ化してください。
☆リピートグリッドのオブジェクトがパディングに応じて延びない。。。?
伸びなかったですか。 さきに透明の四角形とリピートグリッドをグループ化して、そのあと文字とグループ化します。 2回に分けてグループ化するのがポイントです。 ちょっと説明が速かったかもしれませんね。 イベントのアーカイブを停止して見ながら、ゆっくりやってみてくださいね。
☆塗りを変更すると、文字の白色が塗りの色になってしまうのですが・・・
おそらくボタンのテキストがボタンの背景部分の塗りと一緒になってしまうということではないかと思うのですが、コンポーネント自身を選択している場合は塗りと線を変更するとコンポーネントに含まれているオブジェクトがすべてその色に変わってしまいます。 この仕組みはグループも一緒です。
☆ご紹介いただいたような装飾のつくり方をいつどのように考えていますか？
実務で装飾を使うときに、ちょっと楽できないかな、と思ってその都度工夫しています。 今回のアイデアを参考にして、ぜひいろいろ考えてみてください。
当日のQ&A（湯口りささんへの質問編）
☆オーバーレイの位置調整の上手いやり方があれば教えてください
オーバーレイを被せるアートボードのおきたい位置にオーバーレイで表示するオブジェクト（アートボードと同じ大きさの長方形でも可）を配置します。その上でオーバーレイを設定し矢印アイコンを掴んでいい感じの位置に配置してください。
☆お勧めのプラグインがあれば知りたいです
今回紹介したのは Metaboll ですが、おすすめしたいプラグインの数が多くなかなか絞れないので、以前のプラグイン紹介番組をおすすめします。去年配信された「ADOBE XD TRAIL 部屋キャンプ 中級編！ プラグインを使いこなす」や「CC道場 #343」をぜひご覧ください。