オンラインイベント「XD Trail 部屋キャンプ」の第二弾はレスポンシブデザインがテーマです。
Adobe XD に興味があって、実際に簡単なデザイン作業をする機会が欲しい人を対象に、シンプルなモバイルサイト用デザインから、PCサイト用のレイアウトを制作する手順を全4パートにまとめたワークショップです。
ワークショップの内容
Adobe XDの様々なレイアウト機能を学びながら、最初に簡単なモバイルサイトのデザインを作成し、それをベースにPCサイトのレイアウト制作を行います。
（詳細は、動画再生エリアの右側に表示されるタイムラインを参照してください）
【 1. レスポンシブデザインの基礎を理解】
レスポンシブデザインに役立つAdobe XD のレイアウト機能の基本を学びます。
【 2. モバイル版デザインを作成】
モバイル画面向けのアートボードにデザインを行います。
【 3. デスクトップ版デザイン作成を作成】
モバイル版デザインのレイアウトを変更し、PC 画面に合わせたレイアウトを作成します。
【 4. デザインの修正とレビュー】
レイアウトを効率的に修正する方法と、インタラクションを設定したプロトタイプのプレビューを行います
当日のQ&A
☆アートボード最下部に配置したボタンが、アートボードの高さを変えたとき、常にアートボードの下辺に付いてくるようにしたい。どうすればできますか？
- アートボードのレスポンシブサイズ変更を有効にします
- ボタンを選択し、レスポンシブサイズ変更の有効無効の切り替えの下にある「手動」をクリックします
- 上下左右にT型のアイコンが並ぶ図が表示されたら、下のアイコンを青い状態、それ以外をグレーの状態にセットします
- これでアートボードを変形し手も可変からの距離が変わらなくなります
☆リピートグリッドについて、一旦画像を流し込んだあと、途中で画像の順番を変更したいときはどうすればよいですか？
残念ながらできないので、画像の挿入をやり直します。エクスプローラーまたはFinderで好みの順番になるよう画像ファイルの名前を変更します。それから必要なファイルをもう一度選択してドラッグ＆ドロップしてください
☆モバイルからデスクトップに広げていくと、トップのイメージなどはかなり大きくなりますが、モバイルの段階から高解像度の画像を使った方がよいのでしょうか？
どう実装するかによりますが、1種類の画像で済ませたい場合には高解像度のものを使うようにしましょう。XDのファイルサイズもその時が一番小さいです。
☆レスポンシブサイズ変更を学べるチュートリアルがあれば教えてください
- XDtrail.comにぴったりのチュートリアルがあります。「レスポンシブサイズ変更とレイアウトの制約」
- こちらの記事も参考になります。「Adobe XDでモバイルファーストのWebデザイン入門 第4回: レイアウト機能を使いこなしてレスポンシブデザインを効率的に作成！」
- 英語ですがこちらのKITも参考になります 。
☆リピートグリッドにテキストファイルをドラッグして、テキストを流し込みたいのですが、何度やってもテキストファイルの内容がそのままペーストされてしまいます
テキストを入れ替えたいオブジェクトの上にドラッグしたら、少し待ってあげてください。うすく青く変化してから離せばうまく入ります。
☆アートボードが増えてくると、全体表示にしたり、部分を拡大したり、操作がけっこう大変です。 特定のアートボードだけを全体表示する機能などはありますか？
いくつか方法があります。【1つ目】カンバス上で大きくしたいアートボードを選択したらCmd/Ctrl+3を押してください。【2つ目】レイヤーパネル上でアートボードの先頭のアイコンをクリックしてください。どちらの方法も、そのアートボードがカンバスいっぱいになります。
☆図形に写真などをドラッグして挿入した後、ダブルクリックで大きさなどを調整できますが、写真の中心を基点に拡大することはできますか？
写真の中心を基準に拡大したいときには、MacはOptキー、WindowsはAltキーを押しながら写真の大きさをマウスドラッグで変更してください
☆WFをモバイルファーストにする場合、どのサイズを基準に考えるのがいいでしょうか。一番小さいiphoneサイズですか、それとも大きいiPhoneでしょうか。
正常に見せたいデバイスのなかで一番小さいものを選ぶのがおすすめです。実装する人が判断しやすいように、大きい端末での表示をどうするかは決めておく必要があります。
☆初歩的な質問ですが…. アートボードをつなげたワイヤーを切るにはどうすればよいのでしょう。deleteですか？
これちょっとわかりにくいですよね！推測の通りです。消したいワイヤーを選択（線の部分をマウスクリックしておくとより安全）して、deleteキーを押してください。
☆プロトタイプでハンバーガーアイコンをうまく選択することができません。クリックする領域を何か指定するようにした方が良いですか？
小さいアイコンはとてもつかみにくいので、座布団（透明な長方形）をアイコンの1つ下のレイヤーに置いてグループ化しておくのがおすすめです。
☆XD使ったことがないのですがXDからhtml書き出しはできるのでしょうか。
CSSの書き出しはできますがXD単体ではHTMLの書き出しができません