|
「Webデザインをやりたい」 「デザインイメージはAdobe XDで作れるらしい」 「Adobe XDはどうやって勉強したらいい？」 |
Webデザインは覚えることがたくさんあって大変ですが、Webデザインの完成イメージはAdobe XDで簡単に作れます。
Webデザインの素材はPhotoshop、Illustratorで作るので、Adobe XDの勉強もそれらまとめて使い方を学べるオンライントレーニング通信講座がセットになったパッケージを購入することをおすすめします。
ここでは以下を説明します。
- Adobe XDを効率よく安く購入する方法
-
Adobe Creative Cloudをたのまな ヒューマンアカデミーから購入する方法
-
アドビオンライントレーニング通信講座のAdobe XDの講義内容
※本記事は2020年の古い情報です。
最新の2022年7月の情報、「たのまな Adobeベーシック講座」の記事を参照してください。
目次
Adobe XDを効率よく購入する方法（2020年4月）
Adobe XDを効率よく購入するには次の手順で進めるといいです。
- Adobe XDが含まれるAdobe Creative Cloudを無料で始める
- Adobe XDを7日間無料で体験する
- 以下いずれかの方法でAdobeパッケージを購入する
・独学で使いこなせそうならAdobeオンラインでコンプリートプランを直接購入する
・（学生・教職員の場合）独学で使いこなせそうならAdobeオンラインでコンプリートプランを直接購入する
・オンライン講座で基礎を勉強したいなら、たのまな ヒューマンアカデミーでAdobe Creative Cloudを購入する
まず、Adobe製品の各ソフトは7日間の無料体験がついています。
（個人向け）
（学生・教職員向け）
Adobe XDのみのプランもありますが、WebデザインではIllustratorやPhotoshopが必要になるので、コンプリートプランを選ぶといいです。
Adobeオンラインにアクセスし、「無料で始める」からAdobe製品をダウンロード & インストールし、まず無料で体験してみるのがいいです。
無料期間中に解約すれば料金は発生しません。
解約が面倒な場合、もしくは、基礎からしっかりと勉強すると決めてる場合、次の方法でAdobe Creative Cloudとアドビオンライントレーニング通信講座がセットになったパッケージをたのまな ヒューマンアカデミーから購入すると良いです。
その他のAdobeソフトについてはこちらを参照してください。
Adobe Creative Cloudをたのまな ヒューマンアカデミーから購入
Adobe Creative CloudとAdobeトレーニング通信講座がセットになったパッケージです。
その通信講座を受けることで学生扱いになるので、Adobe Creative Cloudを約半額で購入できます。
オンライントレーニング通信講座の期間は最短で1ヵ月、最長で3年を選択できます。
最短の1ヵ月の場合、Adobeトレーニング通信講座も含まれているのにAdobeオンラインから個人で購入するより安いです。
アドビオンライントレーニング通信講座のAdobe XDの講義内容
概要
講義はオンラインの動画になっています。
以下構成になっています。
- 完成例の確認
- ドキュメントの新規作成
- ワイヤーフレームの作成（HOMEページ）
- Illustratorの素材の使用
- 高精度なデザインの作成
- インタラクティブなプロトタイプの作成
- 開発者との共有
講義で使う素材はダウンロードでき、手を動かしながら学べます。
以下にそれら講義内容を簡単に紹介します。
完成例の確認
本チュートリアルの完成例の確認です。
これからどのようなWebサイトを作るのか一つ一つ機能を解説されています。
ドキュメントの新規作成
ドキュメントの新規作成を学べます。
デザインモード、プロトタイプモード、プロパティインスペクター、選択、アートボードのサイズ変更、ガイドの設定方法について解説されています。
ワイヤーフレームの作成（HOMEページ）
Webページの下地、ワイヤーフレームを作成する方法を学べます。
長方形、楕円形等のツールやレイアウトグリッドの使い方を解説されています。
Illustratorの素材の使用
作成したワイヤーフレームにIllustratorの素材を配置する方法を学べます。
素材の配置、配置した素材を再編集等についても解説されています。
高精度なデザインの作成
ワイヤーフレーム内に画像やテキストを配置してデザインする方法を学びます。
コンポーネント化、コンポーネントのコピー、画像の配置、リピートグリッド、リピートグリッド内に画像・テキストの配置方法について解説されています。
インタラクティブなプロトタイプの作成
インタラクティブなプロトタイプを作成し、デザインをプレビューして確認する方法を学びます。
画面遷移（トランザクション）とインタラクションの設定、デスクトッププレビューで動作確認する方法を解説されています。
開発者との共有
完成したプロトタイプを開発者間で共有して確認する方法を学びます。
プロトタイプをリンク先に公開し、Webサイトを介して開発者間でデザインを確認する方法を解説されています。
まとめ
Adobe XDを最短で基本的操作を学ぶのに最適な講座です。
AdobeオンラインにもAdobe XDチュートリアルがあり、そこでも基本操作を勉強できるのですが、ヒューマンアカデミーのアドビオンライントレーニング通信講座の方がまとまっている印象です。
もちろん、Adobe本家のチュートリアルの以下の基礎講座も見ておくことをおすすめします。
- クイックスタート
- XDの基本を学ぶコース
- 初心者向けプロジェクト
（2020年4月）
なお、ヒューマンアカデミーの講座ではモバイルのみです。
一通りオンライン講座で学んだら実際自分のサイトに素材を置き換えて作ってみると実践的な勉強になります。
本ブログ、「もみノマド」をXDとIllustratorで作ってみました。
元のヨーロッパガイドを本ブログの内容、フィリピンガイドに置き換えてます。
これのプロトタイプがこちらの動画です。
XDテスト
Uploaded by Momi Nomad on 2020-04-29.
まるでコーディングした後のように動くので、デザイナーとプログラマーのコミュニケーションツールとして使えますね。
