Adobe XD Trail のオンラインイベント「XD Trail 部屋キャンプ」の第2回です。Adobe XD に興味があって、実際に簡単なデザイン作業をする機会が欲しい人を対象に、シンプルなモバイルサイトのデザインから、PCサイト用のレイアウトを制作する手順を紹介します。

配信ページのURLは https://xdtrail.com/live/ です。

【XD Trail 部屋キャンプ】の学び方

1. 生徒役がいます：参加者代表として、生徒役がAdobe XDを使って課題を進める様子が配信されます。ひとりで課題に取り組むのが不安な人は、それを見て使い方を学びましょう。

2. サポーターがいます：見ていて分からないことがあったら、その場で配信ページのQ&Aパネルに質問しましょう。サポーターが順次回答します。ワークショップの途中に何回かQ&Aタイムも設けられます。

3. まとめページが公開されます：当日配信した動画、セッション中のQ&Aなどをまとめたページを後日公開します。時間があるときに自分のペースでゆっくりと復習しましょう。

4. ワークショップキットがあります：学習用の素材と詳細な手順書が提供されます。ダウンロードして、自習、復習、勉強会などに活用してください。

参加するための準備

以下の環境を用意します。

• 最新版の Adobe XD がインストールされた PC
• インターネット接続
• （オプション）最新版のAdobe XD (iOS, Android) がインストールされたスマートフォンと、PCと接続するUSBケーブル

※ Adobe XD を全く操作したことが無い方は、事前に Adobe XD スターターキットをダウンロードして完了しておくことをオススメします。XDの基本操作を紹介した第1回のワークショップ「基本の操作を学ぶ」もご覧ください。

ワークショップの内容

簡単なモバイルサイトのデザインを作成し、それをベースにPCサイトのレイアウト制作を以下の作業工程で進めていきます。

全部で4つのトピックから構成され、各トピックは「講師からの説明」「課題の制作」「Q&Aタイム」から構成されます。各トピックの間には5分程度の休憩があります。

トピック

【レスポンシブデザインの基礎】
レスポンシブデザインに役立つAdobe XDのレイアウト機能の基本を学びます。

【モバイル版デザイン作成】
モバイル画面向けのデザインを行います。

【デスクトップ版デザイン作成】
モバイル版デザインのレイアウトを変更し、PC画面向けのデザインを作成します。

【デザインの修正とデザインレビュー】
レイアウトデザインの効率的な修正、作成したプロトタイプのプレビューを行います。

スタッフ

【講師】
轟 啓介（アドビ）

【生徒】
透子

【テクニカルサポーター】
湯口 りさ（XDUG東京 / Adobe Community Evangelist）