![]() |
「Webデザインをやりたい」 「デザインイメージはAdobe XDで作れるらしい」 「Adobe XDはどうやって勉強したらいい?」 |
Webデザインは覚えることがたくさんあって大変ですが、Webデザインの完成イメージはAdobe XDで簡単に作れます。
Webデザインの素材はPhotoshop、Illustratorで作るので、Adobe XDの勉強もそれらまとめて使い方を学べるAdobeベーシック講座がセットになったパッケージを購入することをおすすめします。
ここでは以下を説明します。
- Adobe XDを効率よく安く購入する方法
-
Adobe Creative Cloudをたのまな ヒューマンアカデミーから購入する方法
-
Adobeベーシック講座のAdobe XDの講義内容
目次
Adobe XDを効率よく購入する方法
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を約半額で購入できます。

Adobeベーシック講座の期間は最短で1ヵ月、最長で12ヵ月を選択できます。
最短の1ヵ月の場合、Adobeベーシック講座も含まれているのにAdobeオンラインから購入するのと料金はほとんど変わりません。
たのまな Adobeベーシック講座のAdobe XDの講義内容
ここでAdobeベーシック講座のAdobe XDの講義内容がどういったものかを紹介します。
概要
講義はオンラインの動画になっています。
4つの教程に分かれており、以下構成になっています。
- XDの起動とツールの使い方
- 基礎知識とプロトタイプの作成方法
- ホームページデザインの制作例(前半)
- ホームページデザインの制作例 (後半)
講義で使う素材はダウンロードでき、手を動かしながら学べます。
以下にそれら講義内容を簡単に紹介します。
XDの起動とツールの使い方
新規にファイルを作成、保存、ウィンドウの見方を学べます。
Adobe Photoshopを初めて起動する人向けに、アプリ起動から専門用語まで丁寧に解説されています。
この教程の目次は次の通りです。
- はじめに
- 初期画面の説明とアートボードの種類
- ウィンドウの見方
- アートボードの扱いビューポートの概念
- ツールの使い方
- ピクセル、解像度などの単位
- ガイドの設定
- 図形の整列と合成機能
- 塗と線/様々な効果について
講義内容はこんな感じです。

複数の図形を整列させる方法や合成する方法を分かりやすく解説されています。

図形の塗り、線の変更方法について解説されています。
基礎知識とプロトタイプの作成方法
プロジェクトに素材を読み込み、素材を拡大・移動、テキストを入力の基礎的知識を学べます。
この教程の目次は次の通りです。
- はじめに
- オブジェクト複製とコピー、反転について
- オブジェクトの配置とレイヤー
- シェイプでマスクを作成/リピートグリット
- パスとアンカーポイントについて
- テキストの扱い方
- コンポーネント
- アセットの管理
- プラグインの作成と管理
- プロトタイプ1_ホーム画面の設定・リンクの接続
- プロトタイプ2_オブジェクトの固定と自動アニメーション
講義内容はこんな感じです。

XDの作業を効率化するプラグインについてやその使い方を解説されています。

プロトタイプのWebサイトに動きをつけるため、画像をクリックした際に表示されるページにリンクさせ、ページ移動にアニメーションさせる方法を解説されています。
ホームページデザインの制作例(前半)
音声にエフェクトをつけてノイズを除去したり、映像にエフェクトをつけて映像を切り替えたりする方法を学べます。
この教程の目次は次の通りです。
- はじめに
- ファイルを保存/ページの構成を考える
- ガイドを作成とヘッダーを作成する
- 画像の取得方法とアイキャッチ画像の配置
- トップのビューポートの高さとタイトルデザイン
- HPのデザインを作成
講義内容はこんな感じです。

画像をトップページに配置し、アイキャッチ画像を作成する方法を解説されています。

さまざまな部品を配置し、ホームページをデザインする方法を解説されています。
ホームページデザインの制作例 (後半)
iPhoneで撮影した動画ファイルをAdobe Premiere Proで編集し、YouTube動画を制作する方法を学べます。
この教程の目次は次の通りです。
- はじめに
- フッターの作成
- お問い合わせページを作成
- 作成したデザインの修正とデザイン要素の追加
- プロトタイプでリンクを設定
- 自動アニメーションの追加
- 共有の種類と設定
- まとめ
講義内容はこんな感じです。

お問い合わせページを作成し、お問い合わせ内容を送信するボタンを作る方法について解説されています。

ページ間の移動で自動アニメーションをつける方法について解説されています。
たのまな Adobeベーシック講座 Adobe XDの講義を受けた感想
Adobe XDを最短で基本操作を学ぶのに最適な講座です。
AdobeオンラインにもAdobe XDチュートリアルがあり、そこでも基本操作を勉強できるのですが、ヒューマンアカデミーのAdobeベーシック講座の方が初心者にやさしく、分かりやすい印象です。
Adobe XDの学習の進め方は、まずは、たのまなのAdobeベーシック講座でAdobe XDの基本操作を学び、少し慣れてからAdobe公式のチュートリアルに進むことをおすすめです。
一通りXDを学んだら、実際自分のサイトに素材を置き換えて作ってみると実践的な勉強になります。
本ブログ、「もみノマド」をXDとIllustratorで作ってみました。

本ブログのフィリピンガイドをXDでデザインし、サイトのプロトタイプを作ってみました。
このプロトタイプの動作はこんな感じです。
XDテスト
Uploaded by Momi Nomad on 2020-04-29.
まるでコーディングした後のように動くので、デザイナーとプログラマーのコミュニケーションツールとして使えますね。
「Webデザイナーとして稼ぐ」を目標に、Web制作技術を本格的に勉強する場合、Webデザイナー Web制作コース、Webデザイナー Web制作上級コースを受講するといいでしょう。