オンラインイベント「XD Trail 部屋キャンプ」！今回は、新年度の始まりに合わせ、Adobe XD に興味があって、実際に簡単なデザイン作業を試してみたい人のために、シンプルなモバイルサイトのデザインおよびプロトタイプ制作フローを全4パートにまとめたワークショップです。
ワークショップの内容
簡単なモバイルサイト（2ページ程度）を制作します。ワイヤーフレームから始めてスタイルを適用し、さらにインタラクションの設定と、デザインの共有を行います。
（詳細は、動画再生エリアの右側に表示されるタイムラインを参照してください）
【 1. 基本レイアウトの作成】
XDの描画ツールやテキストツールを使って基本レイアウトを作成します。
【 2. グラフィックの作成】
アイコンを作成し、画像の配置とマスクを行います。
【 3. スタイルの適用】
基本レイアウトにスタイルを適用し、スタイルの管理方法を学びます。
【 4. プロトタイプの作成と共有】
画面遷移のインタラクションを設定し、でき上がったデザインを共有します。
当日のQ&A
☆スマートフォン版を作るときに、IllustratorやPhotoshopだと2倍の大きさでつくりますが、XDではサイズは原寸でも良いのでしょうか？
XDでは原寸サイズでも2倍サイズでも、ワークフローに合わせて自由に作ることができます。ベクターベースのデザインツールであるXDでは原寸サイズを避ける必要はありませんが、画像を挿入するときは2倍以上のサイズのものを用意するよう注意しましょう。
☆ガイドを他のアートボードにコピーすることはできますか？
可能です。複製したいガイドがあるアートボードを選んで、メニューから「表示＞ガイド＞ガイドをコピー」と選びます。それから複製したいアートボードを選んで「表示＞ガイド＞ガイドをペースト」(Ctrl+V/Cmd +V) で複製できます。
☆コンテンツに合わせてアートボードサイズを自動調整することはできますか？
アートボードサイズの高さを合わせる機能はありません。同じ目的で使えるプラグインがありますので、そちらをインストールして使ってみてください。 Resize Artboard to Fit Content
☆文字組みを縦に組む方法はあるでしょうか？現状は改行したり、切り離したりして表現しています。
縦の文字組はできません。リピートグリッドに入れる方法もありますが原稿を別に持たないとコーディングしにくくなることもあり、XDでの縦組みは難しいと思います。縦書きプラグインというのが試験的に公開されていますが、これは改行の手間を省けるくらいなイメージで使うとよいでしょう。
☆グループ化したものを一部だけ取り出すことはできますか？
XDのグループはダブルクリックすると編集できます。その状態で切り取りを行い、ESCキーを押して編集を終了すればグループ内のオブジェクトを取り出すことが可能です。
☆グループ化した後の名前をつける画面がうまく表示できないのですが、どこをクリックすればよいのでしょうか
オブジェクトやグループに名前を付けるには、レイヤーパネルを表示する必要があります。レイヤーパネルはウィンドウの左側のツールバーの下から二番目の紙が二つ重なったようなアイコンをクリック、もしくは、ショートカットキーのCtrl+Y/Cmd＋Yで表示できます。
☆リピートグリッドにした後に部分的に位置変更することは可能ですか？
可能です！ダブルクリックするとリピートグリッドの中身が編集できるようになります。位置を変更したいオブジェクトをダブルクリックするか、レイヤーパネルでオブジェクトを探して選択しましょう。そのあとは普通に動かせます。
☆リピートグリットにすると、繰り返し配置されたアイテムを個別に微調整することはできなくなるのでしょうか？
リピートグリッドではテキストの値と画像データ以外はすべてアイテム間で共有されます。個別に変更したいオブジェクトをコンポーネントにすることで一部的に変更できますがリピートグリッドの機能の一部が使えなくなる可能性があります。
☆リピートグリッドのパディングを数値で指定する方法はありますか？
残念ながら、現在のところリピートグリッドのパディングを数値で設定する方法はありません。
☆数値を変えるときに他のAdobeソフトウェアだとマウスのホイールで調整できたと思うのですがXDでその操作は可能ですか？
XDの数値入力はキーボード操作のみ対応しています。矢印キーの上下で1ずつ変更、Shiftキーを押しながら矢印キーの上下キーで10ずつ変更できます。
☆アピアランスのペーストが出来ませんでした。原因としては何が考えられますか？
シェイプやテキストを選択したつもりでグループを選択していたような場合には、アピアランスのコピー＆ペーストができません。オブジェクトを選択したらレイヤーパネルを見てみましょう。また、プロパティインスペクターを確認するとコピーまたはペーストされるアピアランスが確認できます。
☆配置済みの画像を変えたら前の画像はどうなりますか？
ドラッグで画像自体を差し替えた場合には消えてしまいます。「Photoshopで編集」を使用した場合も、ドキュメントを閉じるとオリジナル画像はなくなってしまいます。加工前の写真を残したい場合は先に複製するのがオススメです。
☆ライブラリパネルにカラーやスタイルが出ないのですが。。
カラーや文字スタイルがドキュメントに登録されていないと何も出てきません。オブジェクトを選択し、右クリックでアセットのカラーを追加して、その後ライブラリパネルを確認してみてください。ライブラリパネルは、ウィンドウの左側にあるツールバーの下から3番目のアイコンをクリックする（もしくは青くなっている）と表示されます。
☆ライブラリにスペースは登録できますか？また、アードボードをまたいで同時にスペースを調整する方法はありますか？
コンポーネントとして登録して再利用することは可能ですが、共通スペースとして利用するにはスタックと組み合わせるなどちょっと工夫が必要です。
☆たまたま同じ色を違う目的で使用している場合、2つのスタイルとして登録する方法はありますか？
現在のところその方法はありません。XDのカラーはどちらかというとデザイントークンのように使う想定をしておくとよいです。
☆XDではライブラリをスタイルガイド代わりに使うのでしょうか？その場合、すべてのスタイルがガイドに従っていることを確認する手段はありますか？
オブジェクトで使われているカラーや文字スタイルがアセットに登録されているかを確認したり、逆にアセットのカラーや文字スタイルがどこに使用されているかを確認する機能があります。オブジェクトやアセットのカラーの上で右クリックしてハイライトしてみてください。
☆ハンバーガーメニューなどのアイコンは、パスをアウトライン化しなくても、pngやSVGなどに書き出しする時に問題はないのでしょうか？
PNGは書き出す人が必要なフォントを持っていれば問題ありません。SVGでは問題が起きる場合と起きない場合があります。拡大縮小して使う可能がある場合、Illustratorでデザインしてアウトライン化したものを使用するのがよいでしょう。
☆Illustratorのデータは貼り付けでしか使えないのでしょうか？
XDはIllustratorファイルをそのまま開くことができます。MacはアイコンにAIファイルをドロップすれば開けます。Windowsの場合は、ローカルファイルを開くで開くのが楽だと思います。
☆XDをもっていなくても共有された人は画像もフォントも元のデザインのまま見れるのでしょうか？
はい。見られます。ブラウザでの共有ではアドビの共有用のサーバーに必要な素材がアップロードされますので、相手はオリジナル画像やフォントを持っている必要はありません。
☆共有のコメントの名前を変更できますか？
Adobe IDでログインしている場合はプロフィールに登録している名前を変更すれば変えられます。ゲストとしてコメントした場合は名前を決めたら接続し直すまで変えることはできません。
☆共有したいアートボードを指定することはできますか？また、相手ごとに指定することはできますか？
できます！共有したいアートボードを選択して、左上に表示されるアイコンをクリックすると共有リンクが作成されます。
☆IllustratorやPhotoshopに書き出すことは出来ますか？
どちらにも書きだすことはできません。Illustrator 向けにはPDFで書き出したものを開くという手がありますが、オブジェクトの構造が複雑であまり実用的ではありません。
☆プロトタイプモードはスマートフォン版で2倍サイズで作った場合は、2倍で表示されるのでしょうか？
XDのプレビューには、2倍で作れば2倍で表示されます。モバイル版のXDアプリでは、100％表示/幅を合わせて表示/カスタム表示が可能です。