オンラインイベント「XD Trail 部屋キャンプ」！今回は中級編です。Adobe XD を利用していて、より効率的な使い方を学びたい人のために、実際の業務を想定した修正が容易なレイアウトの方法と、そのために必要なレイアウト機能の基本的な使い方をまとめたワークショップです。
ワークショップの内容
簡単なページレイアウト制作と修正作業を行います。それぞれの場面ごとに、役立つ機能の使い方とレイアウト方法を紹介します。
（詳細は、動画再生エリアの右側に表示されるタイムラインを参照してください）
【 1. 状態変化に対応する「いいねボタン】
効率的に変更できるボタンを作成してステートやスタックの基礎を学びます。
【 2. カードを複製し全体バランスを確認】
状況に合わせたカードUIの最適な複製方法を学びます。
【 3. コンテンツに合わせて変化するUI】
テキスト量に合わせてレイアウトが変かするカードUIのつくり方を学びます。
【 4. コンテンツに合わせて変化するページ】
変更や修正に強いページのレイアウト機能を学びます。
【 5. Photoshop連携を意識した画像の配置】
Photoshopでの修正が効率的になる画像の扱い方を学びます。
当日のQ&A
☆要素を繰り返し配置するときに、リピートグリッドを使うのとコンポーネントを使うのとどちらが良いのかいつも迷います。何か良いアイデアがあれば教えてください。
単純に繰り返し配置することや複数の画像やテキストを素早くレイアウトすることが目的ならリピートグリッド、後の修正に強いデータをつくるならコンポーネントが向いています。Step Guide の 25 ページに、それぞれの複製方法に関するメリット・デメリットが記載されていますのでご覧ください。
☆コンポーネントにしたものにはリピートグリッドを使わない方がよいのでしょうか。
リピートグリッドを単純なレイアウト機能として使用するのであれば構わないと思います。修正はコンポーネントの機能を使うことになるため、リピートグリッドの利点がひとつ使えなくなる点には注意してくだささい。
☆リピートグリッドで作成したカラムを一気に修正しようとした時に、たまに一気に変更がされないと時があるのですが、それには理由がありますか？そうなってしまった時の対処法はありますか？
修正が反映されない場合は、その要素がコンポーネント化されている可能性があります。対処するには、コンポーネントを解除するか、メインコンポーネントを編集します。
☆メインコンポーネントを何人かと別ファイルで手分けして作った場合、最後に一つのファイルにまとめたいのですが、コピーペーストで持ってこようとすると、リンクになってしまいます。最終的にメインコンポーネントを一つのファイルにまとめたい場合どうしたら良いですか？
リンクされたコンポーネントから「ローカルを作成」し、さらに「メインコンポーネントを編集」すればメインコンポーネントのコピーができます。ただし、他のドキュメントアセットに依存していると思い通りの結果にならない場合もあります。おすすめはCCライブラリとして共有するか、最初から専用のファイルを共有する方法です。
☆レイヤーパネルで、スタック/パディングが設定されたグループとそうでないものを見分ける方法はありますか？（うっかりグループ化解除してしまうのを防止したいです。命名で見分けるしかないでしょうか？）
見分けるにはプロパティインスペクターを確認するしかありません。 場合によっては、レイヤーを選択してから、実際に変更した時の動作を試してみた方が早いかもしれません。
☆スペースを数値で指定するためだけにスタックを使うのは邪道ですか？
そういった活用もできます。一時的な利用のためだけにスタックを使う場合は、すぐ解除しておいた方が後で混乱せずに済むでしょう。
☆スマートフォン版を作るときに、IllustratorやPhotoshopだと2倍の大きさでつくりますが、XDではサイズは原寸でも良いのでしょうか？
XDでは原寸サイズでも2倍サイズでも、ワークフローに合わせて自由に作ることができます。ベクターベースのデザインツールであるXDでは原寸サイズを避ける必要はありませんが、画像を挿入するときは2倍以上のサイズのものを用意するよう注意しましょう。
☆スタックを適用したグループに、スタックの影響を受けないように要素を追加したい場合、スタックを解除する以外の方法はないでしょうか？
解除するのもひとつの手段ですが、更にグループ化すればスタックを解除せずに追加できます。
☆テキストをアウトライン化すると ラインハイトが無くなくなるので、 スタックしていた場合 アウトライン化前よりも 自動でマージンが縮まってしまいます。 これを防ぐ方法はありますか？
残念ながら自動調整の機能はありません。アウトライン化する前に領域を確保するための不透明度0の長方形を、ラインハイトに合わせてテキストの下に敷くといった方法は利用できます。
☆リピートグリッドからコンポーネント＋スタックに移行したい欲が高まってますが、移行するとメインコンポーネントの数が100以上になりそうです。メインコンポーネントの管理方法でおすすめがあれば、この機会に伺いたいです。
メインコンポーネント置き場として専用のアートボードを用意して管理すると見通しが良くなりますし、誤操作なども防げます。数が極端に多い場合は、スタイルガイド専用ドキュメントを用意して、そこにまとめても良いかもしれません。
☆スタックを使用した動的なデザインは、コーダーに特に伝えなくてもデータ上に記載されるものなのでしょうか？
XDドキュメントを直接共有する場合はプロパティインスペクターからスタックが設定されていることを確認できます。ただ、本来スタックはデザインの動的な側面を伝えるためのものではありません。動きを伝えたい場合は、プロトタイプや、共有モードのコメントを利用するのが良いでしょう。
☆今回のトピックとは少し趣旨がズレるのですが、プロトタイプは別ファイルでも繋ぐ事は出来るのでしょうか？
プロトタイプで遷移先を指定することができるのは、同一ファイルのアートボードのみになっています。実際に、プロトタイプの設定を行うと分かりやすいと思います。
☆アコーディオンの操作感が伝わるつくり方はありますか？
プロトタイプモードを使うことで、操作感も表現できます。 XD Trailにはプロトタイプに関するTUTORIAL動画もたくさんありますので参考にしてみてください。
https://xdtrail.com/tutorial/prototyping/