【2019年7月更新】誰でもかんたんに学べるAdobe XD入門講座｜実戦で使えるXDの基本機能を完全にマスターできる！

Adobe XDの大きな特徴3つを解説いたします。

頻繁に行われているAdobe XDのアップデート。

開発チームが考えている開発手法からアップデートを考察していきます。

はじめてのUI/UXの設計をすると、わからない用語が飛び交って混乱することが多々あります。

その中でも「ワイヤーフレーム」・「デザインカンプ」・「プロトタイプ」・「モックアップ」は、意味が似ていて用語の使い分けがわからない場合があります。

今回は意味が似ているようで違う、上記の用語の違いについて解説いたします。

Adobe XDを触る前に、UI/UXやプロトタイプの必要性を感じてもらえるように解説いたします。

Adobe Creative Cloud（通称CC）をダウンロードし、CCよりAdobe XDをインストールするまでの流れを解説いたします。

なお、体験版は7日間無料で使う事が出来ます。

実際にAdobe XDに触れながら、作業するワークスペース内にあるツールやプロパティについて解説いたします。

【2019年7月更新】UI変更に伴い解説内容を変更

アートボード内で行う基本操作を解説いたします。

【2019年7月更新】UI変更に伴い解説内容を変更

レイヤーの構造や機能の解説をいたします。

描画ツール「長方形ツール」「楕円形ツール」「線ツール」「ペンツール」の基本的な操作方法の解説をいたします。

【2019年7月更新】多角形ツールの解説追加

プロパティインスペクタ内にある、配色やグラデーション・シャドウ・ぼかしなどの効果の基本操作や設定方法について解説をいたします。

テキスト入力には2パターンの方法があります。その操作方法や使い道などを解説いたします。

パスファインダーと呼ばれるパスの編集機能を解説いたします。

また、パスファインダーを使う際の注意点や応用編も用意しております。

こちらをうまく活用することで、幾何学的な図形を作成することもできます。

画像の配置方法や操作方法、シェイプを使って画像にマスクをかける方法などを解説いたします。

非常によく使う機能なので、覚えて頂けたらと思います。

Adobe XDの機能といえばコレ！といっても過言ではないほどの目玉機能です。

リストの連続配置や感覚の一括調整、画像の配置機能・文面の配置機能などの基本的な使い方はもちろんのこと、「今までの作業の方法」VS「リピートグリッドを使った方法」の比較検証も解説しております。

制作や改修などの作業効率を大幅にアップさせる機能なので、是非覚えて頂けたらと思います。

レイアウトするうえでキレイに配置したい場合によく使われる機能の「グリッド」・「距離の計測方法」を解説いたします。

レイアウトの位置などにこだわりがある方は、こちらを使うとよりキレイなレイアウトにすることができます。

作業の効率を上げ、編集に強くなるアセット機能「カラー」「文字スタイル」「コンポーネント」の解説をいたします。

【2019年7月更新】「シンボル」→「コンポーネント」の機能変更に伴い解説内容を変更

CCライブラリの解説をいたします。

補足：2017/10/18に正式版がリリースされ、CCライブラリ機能にIllustratorやPhotoshopとの連携・画像データもXDに取り込むことができるようになりました。

【2019年7月更新】上記補足内容を含めた解説を追加

プロトタイプを作るためにプロトタイプモードで任意のページへ遷移させるための設定方法や、トランジション・イージングなどの基本操作方法などを解説いたします。

【2019年7月更新】プロトタイプ機能のプロパティインスペクタ追加に伴い解説内容を変更

【2019年7月追加】

第三者（クライアントなど）に公開するためのプレビュー機能について解説します。

公開するための細かい設定や、パスワードの注意点なども補足で解説しています。

共有後にブラウザでクライアントとコミュニケーションを図るため方法なども解説しています。

【2019年7月更新】

第三者（エンジニア向け）に公開するための方法と、プレビューとは違う部分の解説します。

エンジニア向けという事もあり、その使い方や活用方法も解説しています。

制作したファイルの保存方法や、書き出し方法・書き出しの種類、録画機能などについて解説します。

※ 録画機能については2017年現在のものなので、最新の機能と違いがある可能性がありますのでご注意ください。

事前に基本的なパーツが作られているUIキットを数点ご紹介いたします。

今まで学んだ基本操作を理解した上でUIキットを用いれば、自由度が高く作業効率の良いプロトタイプデザインを作成する事ができると思います。

Adobe XD内にあるチュートリアルを使って、今まで学んだ操作を駆使して実践的な操作をしていきます。

前編はデザインプレビュー・スプラッシュスクリーンの作成・プロファイルの画像選択・ブログ投稿リストの作成まで行います。

Adobe XD内にあるチュートリアルを使って、今まで学んだ操作を駆使して実践的な操作をしていきます。

後編は画面スクロール部分の作成・インタラクティブな動きの作成・作品の共有まで行います。

今まで学んだ基本操作を駆使してアイコンを作ってみましょう。

このような操作を繰り返し行うことで、操作方法を身に着けることができます。

今回は、楕円形ツールのみを使ってマップのピンアイコンを作っていきます。

楕円形ツールや長方形ツール、楕円形ツールの変形、ペンツールを使ってハートを作っていきます。

マスク機能を駆使したり、長方形ツールの角丸を活用してアイコンを作っていきます。

今まで学んだ機能を使って、もっと複雑なアイコンを作っていきます。

Adobe Illustratorを使ったほうが適切なのですが、敢えて機能の復習として行っていきます。

Webサービスのサイトを作る上で欠かせないのが料金表。

このレクチャーでは基本操作で簡単に早く料金表のワイヤー部分を作成していきます。

コンバージョンや離脱率などを左右する入力フォーム。

このレクチャーでは基本操作で簡単に早く入力フォームのワイヤー部分を作成していきます。

数が多い下層ページのワイヤーをどれだけスムーズに作れるかがWeb・アプリデザインをする上で重要なファクターになります。

このレクチャーでは基本操作で簡単に早く記事一覧・記事詳細ページのワイヤー部分を作成していきます。

アニメーションを用いたインタラクション表現にすることで、アプリ制作や開発をする上でエンジニアなどの第三者に、オブジェクトの細かい動きやデザインの意図が伝えやすくなります。

このレクチャーでは、アニメーション機能の基本的な作り方から、アニメーション機能の躓く点などを解説します。

様々な媒体に対応できるデザインをすばやく作成するために欠かせないのが、このレスポンシブ対応機能。

このレクチャーでは、レスポンシブ設定の基本と、2カラム以上作成するうえでの注意点、ECサイトなどによくある商品の一覧を柔軟に対応・修正できるような機能を学んでいきます。

実戦編という事で、ディスカッションから制作するという実戦さながらのシチュエーションで進めていきます。

「Salone（サロネ）」というプラットフォームを開発するにあたって、プロトタイプが欲しいという事で、Salone開発者のオッシア株式会社 吉岡さんに来ていただき話を伺いました。

そのお話の要件に沿ってプロトタイプ制作をしていきます。

※予め「XDfile」と「shiryo」をダウンロードしてから受講を行って下さい。

前回お話しいただいた要件に合わせて、AdobeXDでプロトタイプデザインをしていきます。

先ずはじめにTOPページから制作していきます。

---

■ 作業概要

名前を付けて保存

アートボードの名前を変更

ヘッダーの作成

• 画像挿入（ロゴ・背景・人物）
• バーガーアイコンの作成（リピートグリッド）

背景のぼかし

バーガーメニューのアイコンをリピートグリッドを活用して作成していきます。

前回に引き続き、TOPページのメニュー部分を作成していきます。

---

■ 作業概要

リストをリピートグリッドで作成

• 画像差し込み
• テキスト差し込み

レイアウトをグリッドで調整

グリッドを使った「TOPへ戻るボタン」の作成

---

リピートグリッドの基本的な使い方や、グリッドレイアウト、ボタンの作成などの解説をしています。

TOPページでメニュー内のリストが選択された場合のアクティブ状態を作成していきます。

---

■ 作業概要

アートボードの名前を変更
アセットの登録
リピートグリッドの解除
アクティブ状態の枠線と太字
パスファインダーで吹き出しを作る
選択ボタン

• フラットパターン
• グラデーションパターン

---

キャストプロフィール用のページを作成していきます。

---

■ 作業概要

アートボードの名前を変更
ヘッダーコピー
項目の作成（リピートグリッド→解除）
画像の挿入
SNS用のボタン作成
戻るボタンの作成

---

予約ページの「ヘッダー」と「予約ページ用のフッターメニュー」を作成していきます。

---

■ 作業概要

アートボードの名前を変更
ヘッダーコピー
メニュー部分の文字数考慮
背景画像の透明度変更

---

予約ページの「予約ボタン」「5日後用のページ」「10日後用のページ」を作成していきます。

---

■ 作業概要

リピートグリッドの応用（日付・背景）
○×ボタンの作成とシンボル化
リピートグリッドを使って複製
戻るボタンの作成

---

お役内容確認ページを作成していきます。

---

■ 作業概要

アートボードの名前を変更
ヘッダーコピー
グラデーションを当てる
ボタンの作成
フォームの作成（リピートグリッド→解除）

---

予約完了のページを作成していきます。

---

■ 作業概要

アートボードの名前を変更
ヘッダーコピー
グラデーションを当てる
コンテンツの作成（リピートグリッド）

---

クライアントにページ遷移や操作性を理解してもらうために、プロトタイプモードで設定をしていきます。

その後、共有してコメントなどでコミュニケーションを図るための方法も解説しております。