誰でもかんたんに学べるAdobe XD入門講座
3.7 (230 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.
1,349 students enrolled

誰でもかんたんに学べるAdobe XD入門講座

正式版のリリースで益々注目が集まるAdobe XDの基本操作からケーススタディでの実践演習までを学習。 ノンデザイナーでも「早く」「簡単に」「楽しく」プロトタイプを作成できるようになります。
3.7 (230 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.
1,349 students enrolled
Created by 濱野 将
Last updated 12/2017
Japanese
Current price: $11.99 Original price: $89.99 Discount: 87% off
4 days left at this price!
30-Day Money-Back Guarantee
This course includes
  • 4 hours on-demand video
  • 2 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to Udemy's top 3,000+ courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • AdobeXDが使えるようになる。
  • デザインのプロトタイプを簡単に楽しく作成できる。

  • デザイナーと円滑なコミュニケーションを図ることができる。

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

■■■■■

AdobeXDは随時バージョンを更新しております。  本コースでは追加機能や変更機能などがあった場合、カリキュラム動画も随時更新していきます。  常に最新のXD情報をお送りしていく予定です。

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

■■■■■

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

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

なぜなら、ユーザビリティが高くないと利用者が使いづらいと感じてしまい、せっかく作ったサービスやサイトからユーザーが離れていってしまうからです。これでは本末転倒ですね。
最近ではプロトタイプツールを用いて、開発前になるべくプロトタイプを作っておくことでテストマーケティングをしたり、コミュニケーションコストなどを削減して、なるべくリスクを軽減する動きが増えています。

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

2016年6月22日に、デザインツールの大手であるAdobe社がUI・UXツールとしてAdobe XDをリリースしました。
本コースでは、「Adobe XDの基本操作」から「Adobe XDを用いたプロトタイプの制作方法」は勿論のこと、「UI/UXの重要性」「利用方法」「用語の理解」「ケーススタディを用いた実践」などを解説していきます。

なお、講師が使用するのは、Windows版を使用します。

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

2017/10/19に正式版がリリースされました。それに伴いベータ版(無料)ではなくなってしまいましたが、体験版を7日間無料で利用出来るので、その間に学習いただいてもかまいません。

※録画期間中に正式版がリリースされたので、基本操作の動画に関してはベータ版のものとなっております。 随時、正式版のバージョンに更新していきますので、しばらくお待ちください。

UdemyでAdobe XDの日本語解説動画を公開するのはこのコースが初です。
それに恥じぬように、随時ケーススタディを追加してボリュームを増やしていく予定です。

ご興味がある方は是非この機会に動画をご覧いただき、Adobe XDを使ってプロトタイプを作成して公開できるところまで一緒に学んでいけたらと思います。

また、東京の八王子にあるコワーキングスペース八王子 8Beatでは、定期的にデザインもくもく会を行っておりますので、参加いただいて質問をその場でいただくことも可能です。

Who this course is for:
  • これからデザイナーを目指す方
  • ノンデザイナーなプロデューサーやディレクター、エンジニア、企業の広報担当者など。
  • 思わぬ形でデザイン作業をやることになってしまった方。
  • AdobeXDをこれから使ってみたい方。
  • デザイナーとのコミュニケーションツールを探している方。
  • ワイヤーフレーム・デザインカンプ・プロトタイプをすべて補えるツールを求めている方。
Course content
Expand all 37 lectures 03:57:19
+ 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
+ 基本操作を学んでみよう
16 lectures 01:22:18

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

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

Preview 04:54

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

操作画面(ワークスペース)の解説
02:06

無限キャンパス内で行う基本操作を解説いたします。

無限キャンパス内の操作方法
03:26

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

レイヤーの解説
02:48

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

描画ツールとシェイプの使い方
04:28

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

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

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

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

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

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

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

パスの操作方法
04:34

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

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

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

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

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

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

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

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

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

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

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

アセット機能の解説
06:40

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

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

CCライブラリ機能の解説
04:07

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

プロトタイプの設定方法
06:43

保存方法やアセットの書き出し方法、クライアントに共有するための方法、共有後にブラウザでクライアントとコミュニケーションを図るため方法なども解説しております。

保存・データ書き出し・プレビュー共有方法
09:16

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

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

UIキットのご紹介
07:08
+ 基本操作を駆使してアイコンを作成してみよう
4 lectures 31:13

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

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

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

Preview 05:31

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

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

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

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

これまで作った機能を応用して、カレンダーアイコンや歯車アイコンを作っていきます。

少々難しいので、こちらは繰り返し同じものを作っていくことをお勧めします。

【応用編】カレンダー・歯車アイコンを作成してみよう
08:22
+ チュートリアルをやってみよう -アプリデザインの作成-
2 lectures 08:49

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

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

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

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

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

後編「画面スクロール部分の作成・インタラクティブな動きの作成・作品の共有」
02: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