ヒューマンアカデミー たのまな Adobe XDオンライン講座内容と感想【2020年5月】

ヒューマンアカデミー Adobe XD 感想
XD デザイン

「Webデザインをやりたい」

「デザインイメージはAdobe XDで作れるらしい」

「Adobe XDはどうやって勉強したらいい?」

Webデザインは覚えることがたくさんあって大変ですが、Webデザインの完成イメージはAdobe XDで簡単に作れます。

Webデザインの素材はPhotoshop、Illustratorで作るので、Adobe XDの勉強もそれらまとめて使い方を学べるオンライントレーニング通信講座がセットになったパッケージを購入することをおすすめします。

ここでは以下を説明します。

  • Adobe XDを効率よく安く購入する方法
  • Adobe Creative Cloudをたのまな ヒューマンアカデミーから購入する方法

  • アドビオンライントレーニング通信講座のAdobe XDの講義内容

その他のAdobeソフトについてはこちらを参照してください。

ヒューマンアカデミー たのまな Adobe

ヒューマンアカデミー たのまな のAdobeオンライン講座の体験談【2020年5月】

2020年5月8日




Adobe XDを効率よく購入する方法(2020年4月)

Adobe XDを効率よく購入するには次の手順で進めるといいです。

  1. Adobe XDが含まれるAdobe Creative Cloud無料で始める
  2. Adobe XDを7日間無料で体験する
  3. 以下いずれかの方法でAdobeパッケージを購入する
    ・独学で使いこなせそうならAdobeオンラインコンプリートプランを直接購入する
    ・(学生・教職員の場合)独学で使いこなせそうならAdobeオンラインコンプリートプランを直接購入する
    ・オンライン講座で基礎を勉強したいなら、たのまな ヒューマンアカデミーでAdobe Creative Cloudを購入する

まず、Adobe製品の各ソフトは7日間の無料体験がついています。

(個人向け)

Adobe XD料金プラン

(学生・教職員向け)

Adobeコンプリートプラン

Adobe XDのみのプランもありますが、WebデザインではIllustratorやPhotoshopが必要になるので、コンプリートプランを選ぶといいです。

Adobeオンラインにアクセスし、「無料で始める」からAdobe製品をダウンロード & インストールし、まず無料で体験してみるのがいいです。

Adobeソフトパッケージ

無料期間中に解約すれば料金は発生しません。

解約が面倒な場合、もしくは、基礎からしっかりと勉強すると決めてる場合、次の方法でAdobe Creative Cloudとアドビオンライントレーニング通信講座がセットになったパッケージをたのまな ヒューマンアカデミーから購入すると良いです。

Adobe Creative Cloudをたのまな ヒューマンアカデミーから購入

たのまな アドビトレーニング講座

Adobe Creative CloudとAdobeトレーニング通信講座がセットになったパッケージです。

その通信講座を受けることで学生扱いになるので、Adobe Creative Cloud約半額で購入できます。

たのまなAdobeオンライントレーニング1ヵ月

オンライントレーニング通信講座の期間は最短で1ヵ月、最長で3年を選択できます。

最短の1ヵ月の場合、Adobeトレーニング通信講座も含まれているのにAdobeオンラインから個人で購入するより安いです。

アドビオンライントレーニング通信講座のAdobe XDの講義内容

概要

講義はオンラインの動画になっています。

以下構成になっています。

Adobe XDの講義内容(2020年4月)

  • 完成例の確認
  • ドキュメントの新規作成
  • ワイヤーフレームの作成(HOMEページ)
  • Illustratorの素材の使用
  • 高精度なデザインの作成
  • インタラクティブなプロトタイプの作成
  • 開発者との共有

講義で使う素材はダウンロードでき、手を動かしながら学べます

以下にそれら講義内容を簡単に紹介します。

完成例の確認

XD_スクリーンショット 2020-04-24 8.50.01

本チュートリアルの完成例の確認です。

これからどのようなWebサイトを作るのか一つ一つ機能を解説されています。

ドキュメントの新規作成

XD_スクリーンショット 2020-04-25 11.42.48

ドキュメントの新規作成を学べます。

デザインモード、プロトタイプモード、プロパティインスペクター、選択、アートボードのサイズ変更、ガイドの設定方法について解説されています。

ワイヤーフレームの作成(HOMEページ)

XD_スクリーンショット 2020-04-25 11.59.04

Webページの下地、ワイヤーフレームを作成する方法を学べます。

長方形、楕円形等のツールやレイアウトグリッドの使い方を解説されています。

Illustratorの素材の使用

XD_スクリーンショット 2020-04-25 12.04.18

作成したワイヤーフレームにIllustratorの素材を配置する方法を学べます。

素材の配置、配置した素材を再編集等についても解説されています。

高精度なデザインの作成

XD_スクリーンショット 2020-04-29 12.15.58

ワイヤーフレーム内に画像やテキストを配置してデザインする方法を学びます。

コンポーネント化、コンポーネントのコピー、画像の配置、リピートグリッド、リピートグリッド内に画像・テキストの配置方法について解説されています。

インタラクティブなプロトタイプの作成

XD_スクリーンショット 2020-04-29 12.26.32

インタラクティブなプロトタイプを作成し、デザインをプレビューして確認する方法を学びます。

画面遷移(トランザクション)とインタラクションの設定、デスクトッププレビューで動作確認する方法を解説されています。

開発者との共有

XD_スクリーンショット 2020-04-29 12.40.11

完成したプロトタイプを開発者間で共有して確認する方法を学びます。

プロトタイプをリンク先に公開し、Webサイトを介して開発者間でデザインを確認する方法を解説されています。

まとめ

Adobe XDを最短で基本的操作を学ぶのに最適な講座です。

AdobeオンラインにもAdobe XDチュートリアルがあり、そこでも基本操作を勉強できるのですが、ヒューマンアカデミーのアドビオンライントレーニング通信講座の方がまとまっている印象です。

もちろん、Adobe本家のチュートリアルの以下の基礎講座も見ておくことをおすすめします。

  • クイックスタート
  • XDの基本を学ぶコース
  • 初心者向けプロジェクト

(2020年4月)

なお、ヒューマンアカデミーの講座ではモバイルのみです。

一通りオンライン講座で学んだら実際自分のサイトに素材を置き換えて作ってみると実践的な勉強になります。

本ブログ、「もみノマド」をXDとIllustratorで作ってみました。

XD_もみノマド

元のヨーロッパガイドを本ブログの内容、フィリピンガイドに置き換えてます。

これのプロトタイプがこちらの動画です。

まるでコーディングした後のように動くので、デザイナーとプログラマーのコミュニケーションツールとして使えますね。

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください