【2019年7月更新】誰でもかんたんに学べるAdobe XD入門講座|実戦で使えるXDの基本機能を完全にマスターできる!
4.2 (619 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
2,979 students enrolled

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

アメリカに次いで日本が世界で2番目に使われているほど大注目されているAdobe XD。 この講座では、XDの基本操作から実践演習までを学習し、誰でもプロトタイプを作成できるようになります。 また、バージョンアップで追加された機能も随時更新!
Bestseller
4.2 (619 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
2,981 students enrolled
Created by 濱野 将
Last updated 6/2020
Japanese
Current price: $53.99 Original price: $89.99 Discount: 40% off
1 day left at this price!
30-Day Money-Back Guarantee
This course includes
  • 5 hours on-demand video
  • 7 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • AdobeXDが使えるようになる。
  • デザインのプロトタイプを簡単に楽しく作成できる。
  • デザイナーと円滑なコミュニケーションを図ることができる。
  • 外部に依頼する際のコミュニケーションコストを削減できる。
  • 開発段階でクライアントフィードバックを早く得るためのプロトタイプを作成することができる。
Requirements
  • OS環境:Windows / Mac(カリキュラムではWindows版を使用しております)
  • ツール:Adobe XD(体験版でも可能です)
  • 初歩的なPC操作スキルが必要
  • デザインを学びたいという意欲
Description

■■■■■

【2019年7月更新】

・基本機能の一部を最新バージョンに合わせて更新

 └ 多角形ツールの追加に伴い「描画ツールの使いかた」を更新

 └ アセット機能内の「シンボル」→「コンポーネント」変更に伴い「アセット機能の解説」を更新

 └ 最新バージョンに合わせた「アートボード内の基本操作」「CCライブラリ機能の解説」「プレビューの公開・共有方法について」 「プロトタイプの設定方法」を更新

 └ 「デザインスペックの確認・共有方法について」の解説を追加

・基本操作のおさらいとして「フォームや表を作成してみよう」のセクションを追加

・アニメーション機能などの基本的な解説「アプリのような動きや機能をつけてみよう」のセクションを追加

■■■■■

※注意

AdobeXDは随時バージョンを更新しており、一部機能やインターフェイスに若干の違いがあります。

一部ベータ版を使用しているレクチャーもありますが、基本的な操作に影響はありませんのでご安心ください。

■■■■■

皆さん初めまして、 デザイナーをしております株式会社IMAKEの濱野と申します。 

昨今、UI・UXデザインの重要性に注目されています。

なぜなら、ユーザビリティが高くないと利用者が使いづらいと感じてしまい、せっかく作ったサービスやサイトからユーザーが離れていってしまう可能性があるためです。

また、サイトやアプリが完成した後に、ユーザーやクライアントから使い勝手のレビューをもらって、ワイヤーフレームから作り直さなければいけないケースもあります。

最近の制作フローでは、プロトタイプツールを用いて開発前になるべくプロトタイプを作っておくことで、テストマーケティングをしたり、コミュニケーションコストなどを削減して、なるべくリスクを軽減していく動きが増えています。

しかし、今までWebデザイン・アプリデザインの動的なアプローチを相手に伝えるためのプロトタイプを作るには、大変な労力を必要としました。そこで開発されたのがAdobe XDです。

本コースでは、「Adobe XDの基本操作」から「Adobe XDを用いたプロトタイプの制作方法」は勿論のこと、「UI/UXの重要性」「利用方法」「用語の理解」「ケーススタディを用いた実践」などを解説していきます。

なお、講師が使用するOSはWindows10です。

今回は”誰でも”と使えるいうところを踏まえ、Windowsユーザーでも使えるように解説をしていきたいと思います。 
Macユーザーでもわかるような説明をしておりますのでご安心ください。
ちなみに、一部Mac版にしかない機能もありますので、予めご了承下さい。


是非この機会に動画をご覧いただき、一緒にAdobe XDの基本を学んで実際の制作現場で使っていけるようにXDを使いこなしましょう!

Who this course is for:
  • これからデザイナーを目指す方
  • ノンデザイナーなプロデューサーやディレクター、エンジニア、企業の広報担当者など。
  • 思わぬ形でデザイン作業をやることになってしまった方。
  • AdobeXDをこれから使ってみたい方。
  • デザイナーとのコミュニケーションツールを探している方。
  • ワイヤーフレーム・デザインカンプ・プロトタイプをすべて補えるツールを求めている方。
Course content
Expand all 43 lectures 05:05:57
+ Adobe XDとは?
4 lectures 15:54

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

Preview 02:46

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

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

開発手法から見るXDのアップデート
02:51

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

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

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

ワイヤーフレーム・デザインカンプ・プロトタイプ・モックアップなどの用語の違い
06:11

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

プロトタイプの必要性
04:06
+ 基本操作を学んでみよう
17 lectures 01:44:04

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

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

Preview 04:54

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

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

操作画面(ワークスペース)の解説
04:44

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

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

アートボード内の基本操作
05:06

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

レイヤーの解説
02:48

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

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

描画ツールの使い方
07:42

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

配色・グラデーション・シャドウ・ぼかし効果の設定方法
07:11

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

2パターンのテキスト入力方法
03:42

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

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

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

パスの操作方法
04:34

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

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

画像の配置とマスクの設定
03:10

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

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

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

XDの真骨頂!リピートグリッド
08:41

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

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

レイアウトを整えるための基本操作(グリッド・距離と位置の計測)
03:24

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

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

アセット機能の解説
08:51

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

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

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

CCライブラリ機能の解説
06:25

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

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

プロトタイプの設定方法
10:15

【2019年7月追加】

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

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

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

プレビューの公開・共有方法について
09:01

【2019年7月更新】

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

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

デザインスペックの確認・共有方法について
06:28

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

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

UIキットのご紹介
07:08
+ チュートリアルをやってみよう -アプリデザインの作成-
2 lectures 08:49

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

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

デザインプレビュー・スプラッシュスクリーンの作成・プロファイルの画像選択・ブログ投稿リストの作成
06:02

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

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

画面スクロール部分の作成・インタラクティブな動きの作成・作品の共有
02:47
+ 基本操作を駆使してアイコンを作成してみよう
4 lectures 31:13

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

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

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

Preview 05:31

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

ハートのアイコンを作成してイイねボタンを作ってみよう
10:22

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

マイク・虫眼鏡・ユーザーアイコンを作成してみよう
06:58

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

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

カレンダー・歯車のアイコンを作成してみよう
08:22
+ フォームや表を作成してみよう
3 lectures 30:13

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

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

料金表を作ってみよう
11:09

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

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

入力フォームを作ってみよう
08:46

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

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

記事一覧・記事詳細ページを作ってみよう
10:18
+ アプリのような動きや機能をつけてみよう
2 lectures 16:39

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

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

アニメーション機能を使って表現してみよう
11:52

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

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

レスポンシブに対応できるように調整しよう
04:47
+ 【ケーススタディ】実際にプロトタイプ作ってみよう ~アプリUI編~
10 lectures 01:36:24

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

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

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


Preview 05:36

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

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

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

---

■ 作業概要

名前を付けて保存

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

ヘッダーの作成

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

背景のぼかし

---

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

TOPページを作成しよう ヘッダー編
10:32

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

---

■ 作業概要

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

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

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

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

---

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

TOPページを作成しよう メニュー編
09:25

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

---

■ 作業概要

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

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

---

TOPページを作成しよう メニュー選択・リンクメニュー編
15:52

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

---

■ 作業概要

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

---

プロフィールページを作成しよう
09:38

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

---

■ 作業概要

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

---

予約ページを作成しよう ヘッダー・フッターメニュー編
09:20

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

---

■ 作業概要

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

---

予約ページを作成しよう 予約ボタン・複数ページ編
10:42

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

---

■ 作業概要

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

---

予約内容確認ページを作成しよう
08:11

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

---

■ 作業概要

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

---

予約完了ページを作成しよう
05:11

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

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

プロトタイプモードでリンク付けしてみよう
11:57