【PR】この記事には広告を含む場合があります。

【2022年7月】ヒューマンアカデミー たのまな のAdobeベーシック講座 Adobe XDの講座内容と感想

2022 たのまな Adobe Xd
XD デザイン

「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を効率よく購入するには次の手順で進めるといいです。

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

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

(個人向け)

たのまな Adobe XD たのまな Adobe Creative Cloud

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

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

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

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

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

たのまな Adobe 2022

【2022年7月】ヒューマンアカデミー たのまな Adobeベーシック講座の体験談

2022年7月2日

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

Adobe たのまな

Adobe Creative Cloudと動画解説のAdobeベーシック講座がセットになったパッケージです。

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

Adobe たのまな

Adobeベーシック講座の期間は最短で1ヵ月、最長で12ヵ月を選択できます。

最短の1ヵ月の場合、Adobeベーシック講座も含まれているのにAdobeオンラインから購入するのと料金はほとんど変わりません。

たのまな Adobeベーシック講座のAdobe XDの講義内容

ここでAdobeベーシック講座のAdobe XDの講義内容がどういったものかを紹介します。

概要

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

4つの教程に分かれており、以下構成になっています。

Adobe XDの講義内容(2022年7月)

  1. XDの起動とツールの使い方
  2. 基礎知識とプロトタイプの作成方法
  3. ホームページデザインの制作例(前半)
  4. ホームページデザインの制作例 (後半)

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

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

XDの起動とツールの使い方

新規にファイルを作成、保存、ウィンドウの見方を学べます。

Adobe Photoshopを初めて起動する人向けに、アプリ起動から専門用語まで丁寧に解説されています。

この教程の目次は次の通りです。

教程の目次

  1. はじめに
  2. 初期画面の説明とアートボードの種類
  3. ウィンドウの見方
  4. アートボードの扱いビューポートの概念
  5. ツールの使い方
  6. ピクセル、解像度などの単位
  7. ガイドの設定
  8. 図形の整列と合成機能
  9. 塗と線/様々な効果について

講義内容はこんな感じです。

たのまな Adobe XD

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

たのまな Adobe XD

図形の塗り、線の変更方法について解説されています。

基礎知識とプロトタイプの作成方法

プロジェクトに素材を読み込み、素材を拡大・移動、テキストを入力の基礎的知識を学べます。

この教程の目次は次の通りです。

教程の目次

  1. はじめに
  2. オブジェクト複製とコピー、反転について
  3. オブジェクトの配置とレイヤー
  4. シェイプでマスクを作成/リピートグリット
  5. パスとアンカーポイントについて
  6. テキストの扱い方
  7. コンポーネント
  8. アセットの管理
  9. プラグインの作成と管理
  10. プロトタイプ1_ホーム画面の設定・リンクの接続
  11. プロトタイプ2_オブジェクトの固定と自動アニメーション

講義内容はこんな感じです。

たのまな Adobe XD

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

たのまな Adobe XD

プロトタイプのWebサイトに動きをつけるため、画像をクリックした際に表示されるページにリンクさせ、ページ移動にアニメーションさせる方法を解説されています。

ホームページデザインの制作例(前半)

音声にエフェクトをつけてノイズを除去したり、映像にエフェクトをつけて映像を切り替えたりする方法を学べます。

この教程の目次は次の通りです。

教程の目次

  1. はじめに
  2. ファイルを保存/ページの構成を考える
  3. ガイドを作成とヘッダーを作成する
  4. 画像の取得方法とアイキャッチ画像の配置
  5. トップのビューポートの高さとタイトルデザイン
  6. HPのデザインを作成

講義内容はこんな感じです。

たのまな Adobe XD

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

たのまな Adobe XD

さまざまな部品を配置し、ホームページをデザインする方法を解説されています。

ホームページデザインの制作例 (後半)

iPhoneで撮影した動画ファイルをAdobe Premiere Proで編集し、YouTube動画を制作する方法を学べます。

この教程の目次は次の通りです。

教程の目次

  1. はじめに
  2. フッターの作成
  3. お問い合わせページを作成
  4. 作成したデザインの修正とデザイン要素の追加
  5. プロトタイプでリンクを設定
  6. 自動アニメーションの追加
  7. 共有の種類と設定
  8. まとめ

講義内容はこんな感じです。

たのまな Adobe XD

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

たのまな Adobe XD

ページ間の移動で自動アニメーションをつける方法について解説されています。

たのまな Adobeベーシック講座 Adobe XDの講義を受けた感想

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

AdobeオンラインにもAdobe XDチュートリアルがあり、そこでも基本操作を勉強できるのですが、ヒューマンアカデミーのAdobeベーシック講座の方が初心者にやさしく、分かりやすい印象です。

Adobe XDの学習の進め方は、まずは、たのまなのAdobeベーシック講座でAdobe XDの基本操作を学び、少し慣れてからAdobe公式のチュートリアルに進むことをおすすめです。

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

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

XD_もみノマド

本ブログのフィリピンガイドをXDでデザインし、サイトのプロトタイプを作ってみました。

このプロトタイプの動作はこんな感じです。

XDテスト

Uploaded by Momi Nomad on 2020-04-29.

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

Webデザイナーとして稼ぐ」を目標に、Web制作技術を本格的に勉強する場合、Webデザイナー Web制作コースWebデザイナー Web制作上級コースを受講するといいでしょう。