本記事では現役Webデザイナーの筆者が『Adobe XDで自動アニメーションにする方法』を解説していきます。
フェードイン・フェードアウトや拡大縮小など様々なアニメーションの作り方を解説するので、XD上でのアニメーションを習得したい方は是非最後まで読んでいってくださいね。
この記事の信頼性(筆者はこんな人)
- 現役Webデザイナーが執筆
- 継続して月収80万円超のフリーランス
- 完全未経験から独学でWeb制作スキルを習得
- TwitterにてWeb制作のメンター経験多数(→@twinzvlog_yk)
- 認定ランサー(ランサーズ最高ランク)
こんな悩みや疑問を解消できる記事内容になっています。
ふたご
- Adobe XDで自動アニメーションを作りたいな・・
- 無料で学習できれば最高だけど・・
そんな疑問は全て払拭できます
突然ですが、Adobe XDをどうやって学習しようか迷っていませんか?
- A. 本
- B. 動画教材
- C. インフルエンサーが作成したネット商材
- D. Adobe XDチュートリアル
この4つのどれかで学習しようと考えいるかなと思います。Adobe XDの学習教材は多岐にわたるため、『今からXDを学習しよう』という未経験者の方にとってどれを選択するのが正解なのかがわかりづらくなっていますよね。もちろん最低限のコストもかかってしまいます。本や動画教材なら2,000円前後、個人が販売しているネット商材なら1~2万円ほど…!でもご安心ください。
Adobe XDの学習に高額投資は一切必要ありません。
XDは『Adobe XD公式チュートリアル』を使えば無料で学習できます。
筆者自身もAdobeの使い方は『公式チュートリアル』から学びました。
今ではAdobe XDを使いこなし、Web制作のみで月収80万円以上を稼ぐことができています。
Adobe XDを使えれば、自分自身のクリエイティブを自由自在に表現した『LP制作』や『ホームページ制作』なんかも思いのまま。
Adobe XDチュートリアルで学習すれば『0円投資で月30万円以上も稼げるスキルが習得可能』ということです。
ここまで読んでいただいた方はこんなふうにお思いではないでしょうか?
『無料で学べるってかなりお得かも』
『Adobe XDを身につけたら転職も独立も夢じゃないのかも』
『いったん試してみよっかな』
その心意気すばらしいです。
ここまできたらあとはやるだけです。
本記事ではXDチュートリアルの『アニメーション講座』を全てご紹介いたします。
目次
【最新版】Adobe XDチュートリアルで『自動アニメーション』を完全攻略
Adobe XD公式チュートリアルでは『アニメーション』だけでなく、ツールの使い方〜プロトタイプの作り方まで幅広く学習可能です。
本章では、そんな公式チュートリアルの中に含まれる『アニメーション』の導入方法のみを取り上げます。
筆者自身も今回紹介する講座でXDのアニメーションの基礎を身につけたので是非お試しください。
早速、アニメーションを学習できる3つの講座をご紹介いたします。
【レッスン1】インタラクティブプロトタイプの作成
レッスン時間
4分07秒(2レッスン)
値段
無料
言語
日本語音声
この講座の特徴
このレッスンでは、XDのプロトタイプモードでの『プロトタイプの作成方法』から『アートボード間でのスライドアニメーション(ローディング時のアニメーション)』までを学習できます。
この講座の学習範囲はXDアニメーションの初歩的な箇所ですが、より複雑なアニメーションを導入できるようになるためにもしっかりと押さえておくようにしましょう!
この講座はAdobe XDを使って学習していくので、講座を受講する前にAdobe公式ページからXDをインストールしておきましょう。
【レッスン2】プロトタイプのアニメーション化
レッスン時間
8分11秒(3レッスン)
値段
無料
言語
日本語音声
この講座の特徴
このレッスンでは、XDのプロトタイプモードで基本的なアニメーションを導入する方法を学習できます。フェードイン・フェードアウト、拡大縮小、ドラックトリガーなどの基本的なアニメーションを習得できる内容となっています。
自動アニメーションを使用すると、流れるようなトランジションを作成して、アートボード間のコンテンツの関係を視覚的に表現できるようになります。
この講座に沿えばほんの数分の操作時間で自動アニメーションが完成します。
この講座はAdobe XDを使って学習していくので、講座を受講する前にAdobe公式ページからXDをインストールしておきましょう。
【レッスン3】タイマートランジションの作成
レッスン時間
4分28秒(2レッスン)
値段
無料
言語
日本語音声
この講座の特徴
このレッスンでは、XDのプロトタイプモードで『時間トリガー』を使用してたアニメーションを導入する方法を学習できます。
時間の経過により自動的に発生するアートボード間のトランジションの作成方法を理解できる内容となっています。
この講座はAdobe XDを使って学習していくので、講座を受講する前にAdobe公式ページからXDをインストールしておきましょう。
【完全無料】Adobe XD公式チュートリアルで『使い方』を完全マスター
超優秀なプロのWebデザイナーが未経験者向けにわかりやすく解説してくれるので筆者自身もかなり助けられました。あのAdobeの公式チュートリアルで、完全無料とは思えないほどのクオリティ。
『有料級なのに完全無料』かつ『XD専用チュートリアルサイト』なので、初見の方は『え、これが無料..!?』と少し引くくらい有益です。
他のAdobeチュートリアルとは全くの別物です。とにかくまずは見てください。
『教材には極力お金をかけたくない』
『まずは無料で学んでみたい』
『超初心者向けの教材で学び始めたい』
こんな人のための無料教材です。完全初心者の方が「Webデザイン」の基礎を身につけるには十分すぎる内容なので、Adobe XDをインストールしたらまずは下記の『公式チュートリアル動画(Adobe XD Trail)』から学習を開始しましょう!
【Adobe XD】公式チュートリアル動画(Adobe XD Trail)
レッスン時間
全111講座
値段
無料
言語
日本語音声
この講座の特徴
有料商材2万円相当の内容。正直この講座で学習するデメリットも挙げたかったのですが、特にありません。無料でここまでXDを使いこなせるようになる教材は他では見たことがないです。ちなみに日本語音声で学べます。
Adobe XD Trailは、XD内のツールの使い方からプロジェクトの作成までの一連の流れを全て網羅しているため他の教材にお金をかける必要はありません。
また、Adobe XDを一度も触ったことのない方が何も前提知識なしでスキルを習得できる内容となっています。
まず失敗はしません。
筆者のレビュー
筆者自身もこの公式チュートリアル動画を視聴してXDの基礎を習得しました。
今ではWebデザイナーとして月収80万円以上を稼いでいますが、XDの基礎はこのチュートリアルのみで学習し、全く問題なく案件をこなせています。
確かにチュートリアル動画を学習しただけで現役Webデザイナーと同等のスキルを習得するのは難しいですが、基礎はなるはやで身につけて実践でスキルを磨いていけば高度なスキルは後から必ずついてきます。
大丈夫です。このチュートリアルを最後までやり抜けば確実にXDの基礎は習得できます。
この講座はAdobe XDを使って学習していくので、講座を受講する前にAdobe公式ページからXDをインストールしておきましょう。
まだAdobe XDのインストールが完了していない方は早速『Adobe XD (1,180 円/月)』で自分の思うがままにデザインを作っていきましょう!
まだAdobe XDのプラン選びでどれにしようか悩んでいる方もいるかと思います。
そんな方は下の記事で得する『プラン選び〜インストール』までを徹底解説しているので是非参考にしてみてください。
まとめ
最後まで読んでいただきありがとうございます。
この記事のまとめ
1. 【最新版】Adobe XDチュートリアルで『自動アニメーション』を完全攻略
・【レッスン1】インタラクティブプロトタイプの作成
・【レッスン2】プロトタイプのアニメーション化
・【レッスン3】タイマートランジションの作成
2. 【完全無料】Adobe XD公式チュートリアルで『使い方』を完全マスター
・【Adobe XD】公式チュートリアル動画(Adobe XD Trail)
いかがでしたでしょうか?
初心者の方が絶対に失敗することなく、Adobe XDで『自動アニメーション』を導入する方法を書かせていただきました。
少しでもお役に立てたのなら本望です。。
もし何かご不明点や『ひとりだと挫折してしまうから、メンターとしてサポートしてほしい』という方がいましたら、TwitterからDMをいただければご相談に乗ります。
【完全無料】Adobe XD公式チュートリアルを使って本格的に学習を始めたい方は、下の記事で詳しく紹介しているので参考にしてみてください。(筆者は初見で『これが無料…!?』と仰天しました)
Webデザイナーに必須のAdobeツールは『Adobe XD』の他にも 『Illustrator / Photoshop / Dreamweaver』があります。現役Webデザイナーの筆者も当然使っています。
(コンプリートプランならこれら全部が使い放題です)
しかも、その全てが無料で学習できます。
これ実はあまり知られていない情報なのであなたはかなりラッキーだと思います。。!
Adobeを無料で学ぶ
上で紹介したチュートリアルで学習を開始するために、まずはプラン料金を慎重に比較していきましょう。
Web制作学習で挫折した経験はありませんか?
『CSSアニメーションやエフェクトだけではなくWebサイトをゼロから作って稼いでいきたい』
『3ヶ月くらいで最低でも月10万円は稼ぎたい』
『営業とかやったことないけどWeb制作だけで稼いでいきたい』
こんな方のためにWeb制作で月80万超稼ぐ筆者が自身の経験を踏まえて【失敗しない】Webデザイナー(Web制作)独学ロードマップを執筆しました。
少額の投資で3ヶ月後には月10〜30万稼げるよう設計してあります。
(学習教材やAdobeなど最低限のコストはかかります)
【ロードマップの構成】
- Web制作に特化した『確実に身に付く』学習方法
- Web制作会社が喰いつく理想的なポートフォリオの作成手順
- 返信率10%以上!Web制作会社へのメール営業
有料公開も考えましたが「Webデザイナー(Web制作)はまだまだ稼げることを証明したい!」という思いが強く、期間限定で無料公開をすることにしました。
2021年半ばまでは無料公開する予定ではありますが前倒しすることもあり得ますのでご興味ある方はお早めにどうぞ!