【最新版】Adobe XD『自動アニメーション』を完全攻略

本記事では現役Webデザイナーの筆者が『Adobe XDで自動アニメーションにする方法』を解説していきます。

フェードイン・フェードアウトや拡大縮小など様々なアニメーションの作り方を解説するので、XD上でのアニメーションを習得したい方は是非最後まで読んでいってくださいね。

この記事の信頼性（筆者はこんな人）

現役Webデザイナーが執筆
継続して月収80万円超のフリーランス
完全未経験から独学でWeb制作スキルを習得
TwitterにてWeb制作のメンター経験多数（→@twinzvlog_yk）
認定ランサー（ランサーズ最高ランク）

こんな悩みや疑問を解消できる記事内容になっています。

ふたご

Adobe XDで自動アニメーションを作りたいな・・
無料で学習できれば最高だけど・・

そんな疑問は全て払拭できます

突然ですが、Adobe XDをどうやって学習しようか迷っていませんか？

A. 本
B. 動画教材
C. インフルエンサーが作成したネット商材
D. Adobe XDチュートリアル

この４つのどれかで学習しようと考えいるかなと思います。Adobe XDの学習教材は多岐にわたるため、『今からXDを学習しよう』という未経験者の方にとってどれを選択するのが正解なのかがわかりづらくなっていますよね。もちろん最低限のコストもかかってしまいます。本や動画教材なら2,000円前後、個人が販売しているネット商材なら1~2万円ほど…！でもご安心ください。

Adobe XDの学習に高額投資は一切必要ありません。

XDは『Adobe XD公式チュートリアル』を使えば無料で学習できます。

筆者自身もAdobeの使い方は『公式チュートリアル』から学びました。

今ではAdobe XDを使いこなし、Web制作のみで月収80万円以上を稼ぐことができています。

Adobe XDを使えれば、自分自身のクリエイティブを自由自在に表現した『LP制作』や『ホームページ制作』なんかも思いのまま。

Adobe XDチュートリアルで学習すれば『０円投資で月３０万円以上も稼げるスキルが習得可能』ということです。

ここまで読んでいただいた方はこんなふうにお思いではないでしょうか？

『無料で学べるってかなりお得かも』

『Adobe XDを身につけたら転職も独立も夢じゃないのかも』

『いったん試してみよっかな』

その心意気すばらしいです。

ここまできたらあとはやるだけです。

本記事ではXDチュートリアルの『アニメーション講座』を全てご紹介いたします。

【最新版】Adobe XDチュートリアルで『自動アニメーション』を完全攻略

Adobe XD公式チュートリアルでは『アニメーション』だけでなく、ツールの使い方〜プロトタイプの作り方まで幅広く学習可能です。

本章では、そんな公式チュートリアルの中に含まれる『アニメーション』の導入方法のみを取り上げます。

筆者自身も今回紹介する講座でXDのアニメーションの基礎を身につけたので是非お試しください。

早速、アニメーションを学習できる３つの講座をご紹介いたします。

【レッスン１】インタラクティブプロトタイプの作成

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

値段

(5.0)

学習しやすさ

(4.5)

わかりやすさ

(5.0)

熟練度

(3.5)

初心者向け

(5.0)

オススメ度

(5.0)

総合評価

(4.5)

この講座のポイント

レッスン時間
4分07秒（２レッスン）

値段
無料

言語
日本語音声

この講座の特徴

このレッスンでは、XDのプロトタイプモードでの『プロトタイプの作成方法』から『アートボード間でのスライドアニメーション（ローディング時のアニメーション）』までを学習できます。
この講座の学習範囲はXDアニメーションの初歩的な箇所ですが、より複雑なアニメーションを導入できるようになるためにもしっかりと押さえておくようにしましょう！

注意

この講座はAdobe XDを使って学習していくので、講座を受講する前にAdobe公式ページからXDをインストールしておきましょう。

この無料講座を見てみる

【レッスン２】プロトタイプのアニメーション化

プロトタイプのアニメーション化

値段

(5.0)

学習しやすさ

(4.5)

わかりやすさ

(5.0)

熟練度

(4.5)

初心者向け

(5.0)

オススメ度

(5.0)

総合評価

(5.0)

この講座のポイント

レッスン時間
8分11秒（３レッスン）

値段
無料

言語
日本語音声

この講座の特徴

このレッスンでは、XDのプロトタイプモードで基本的なアニメーションを導入する方法を学習できます。フェードイン・フェードアウト、拡大縮小、ドラックトリガーなどの基本的なアニメーションを習得できる内容となっています。

自動アニメーションを使用すると、流れるようなトランジションを作成して、アートボード間のコンテンツの関係を視覚的に表現できるようになります。
この講座に沿えばほんの数分の操作時間で自動アニメーションが完成します。

注意

この講座はAdobe XDを使って学習していくので、講座を受講する前にAdobe公式ページからXDをインストールしておきましょう。

この無料講座を見てみる

【レッスン３】タイマートランジションの作成

タイマートランジションの作成

値段

(5.0)

学習しやすさ

(4.5)

わかりやすさ

(4.5)

熟練度

(4.0)

初心者向け

(5.0)

オススメ度

(5.0)

総合評価

(4.5)

この講座のポイント

レッスン時間
4分28秒（２レッスン）

値段
無料

言語
日本語音声

この講座の特徴

このレッスンでは、XDのプロトタイプモードで『時間トリガー』を使用してたアニメーションを導入する方法を学習できます。
時間の経過により自動的に発生するアートボード間のトランジションの作成方法を理解できる内容となっています。

注意

この講座はAdobe XDを使って学習していくので、講座を受講する前にAdobe公式ページからXDをインストールしておきましょう。

この無料講座を見てみる

【完全無料】Adobe XD公式チュートリアルで『使い方』を完全マスター

超優秀なプロのWebデザイナーが未経験者向けにわかりやすく解説してくれるので筆者自身もかなり助けられました。あのAdobeの公式チュートリアルで、完全無料とは思えないほどのクオリティ。

『有料級なのに完全無料』かつ『XD専用チュートリアルサイト』なので、初見の方は『え、これが無料..!?』と少し引くくらい有益です。

他のAdobeチュートリアルとは全くの別物です。とにかくまずは見てください。

【Adobe XD】公式チュートリアル

『教材には極力お金をかけたくない』

『まずは無料で学んでみたい』

『超初心者向けの教材で学び始めたい』

こんな人のための無料教材です。完全初心者の方が「Webデザイン」の基礎を身につけるには十分すぎる内容なので、Adobe XDをインストールしたらまずは下記の『公式チュートリアル動画(Adobe XD Trail)』から学習を開始しましょう！

【Adobe XD】公式チュートリアル動画（Adobe XD Trail）

【Adobe XD】公式チュートリアル動画(Adobe XD Trail)

値段

(5.0)

学習しやすさ

(5.0)

わかりやすさ

(5.0)

熟練度

(5.0)

初心者向け

(5.0)

オススメ度

(5.0)

総合評価

(5.0)

この講座のポイント

レッスン時間
全111講座

値段
無料

言語
日本語音声

この講座の特徴

有料商材２万円相当の内容。正直この講座で学習するデメリットも挙げたかったのですが、特にありません。無料でここまでXDを使いこなせるようになる教材は他では見たことがないです。ちなみに日本語音声で学べます。
Adobe XD Trailは、XD内のツールの使い方からプロジェクトの作成までの一連の流れを全て網羅しているため他の教材にお金をかける必要はありません。
また、Adobe XDを一度も触ったことのない方が何も前提知識なしでスキルを習得できる内容となっています。
まず失敗はしません。

筆者のレビュー

筆者自身もこの公式チュートリアル動画を視聴してXDの基礎を習得しました。
今ではWebデザイナーとして月収８０万円以上を稼いでいますが、XDの基礎はこのチュートリアルのみで学習し、全く問題なく案件をこなせています。
確かにチュートリアル動画を学習しただけで現役Webデザイナーと同等のスキルを習得するのは難しいですが、基礎はなるはやで身につけて実践でスキルを磨いていけば高度なスキルは後から必ずついてきます。
大丈夫です。このチュートリアルを最後までやり抜けば確実にXDの基礎は習得できます。

MEMO

筆者はチュートリアル動画に加えて公式ドキュメント教材も併せて学習しました。Adobe XDチュートリアル動画で学習しながら読むとより理解が深まりますよ。