【ゼロから月30万】Webデザイン独学ロードマップ ▶︎

【完全攻略版】Adobe XD『マウスオーバー』でアニメーション作成

本記事では現役Webデザイナーの筆者が『マウスオーバー時のアニメーションの導入方法』を、XDを初めて使う人でもわかりやすく解説していきます。

 

Adobe製品を使うのが初めての方も難しい操作は一切ないので安心してください。

この記事では、操作方法をより確実に最短で身につけていただくために『これだけ見れば安心』のAdobe公式講座を1つだけご紹介いたします。

記事後半では無料かつ独学でAdobe XDを習得するのに最適な、『Adobe XD公式チュートリアル』をご紹介しています。お楽しみに!

 

この記事の信頼性(筆者はこんな人)

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

 

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

ふたご

  • Adobe XDのマウスオーバー時のアニメーションってどうやって作るのかな・・
  • できれば最短で操作方法を身につけたいな・・

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

 

Adobe XDを無料で本格的に学習したい方は、筆者が3ヶ月かけて作った独学ロードマップで一緒に転職・独立を勝ち取りましょう!

【ゼロからのAdobe XD】最短で習得する無料学習ロードマップ

 

【5分で習得】Adobe XD『マウスオーバー』でアニメーション作成

XDでマウスオーバー時にアニメーション作成をするには『ホバーステート』という機能を使います。

 

ホバーステートを使いこなせるようになれば、ボタンや画像などのオブジェクトにカーソルを合わせた時に色や透明度、形などのあらゆるプロパティを変化させることができるようになります。

 

今回ご紹介するやり方に沿っていけば『不透明度』『背景色』『形状』が変化するかなり実践的なアニメーションを作れるようになります。XDでアニメーションをマスターすれば仕事の幅がぐんっとUPするので是非身につけてくださいね。

本章は動画とテキストの両方で『マウスオーバー時のアニメーション作成手順』を学習できるように構成されているので、動画とテキストのどちらかお好きな方で学習してみてください。

ご紹介する動画はAdobe公式チュートリアル動画なので痒い所に手が届く内容となっています。(日本語音声)

テキストでサクッと空き時間に学習したい方は動画紹介の直後に手順を記載しているのでご覧ください。

 

余談ではありますが、マウスオーバー以外のアニメーションも学びたい方は下の記事を読めば爆速で習得できます。

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

 

まだAdobe XDのインストールが済んでいない方は学習前に下の記事からインストールしておきましょう!(今なら14日間の全額返金保証付き

【失敗しない】Adobeコンプリートプランのインストール手順|Creative Cloud

 

【動画学習】マウスオーバーで見た目が変わるボタンをデザイン – 全3回

【Adobe XD Trail】マウスオーバーで見た目が変わるボタンをデザイン - 全3回

値段
(5.0)
学習しやすさ
(4.5)
わかりやすさ
(4.5)
熟練度
(4.5)
初心者向け
(5.0)
オススメ度
(5.0)
総合評価
(4.5)
この講座のポイント

レッスン
全3講座

 

値段
無料

 

言語
日本語音声

 

この講座の特徴

この講座では、XDの『ホバーステート機能』を使って『マウスオーバー時のアニメーション』を作成する方法を学習できます。基本的な操作方法はもちろん、実際の業務でも使える実践的な内容も含まれています。

この講座で『不透明度』『背景色』『形状』が変化する3つのアニメーション作成を行います。それに加えてご自身で好きなアニメーションを作成すればより確実にスキルを身につけられると思います。

XDでアニメーションを使いこなせる『駆け出しWebデザイナー』はまだまだ少ないので、この機会に周りと差をつけていきましょう!

 

注意

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

マウスオーバーで不透明度が変わるボタンをデザイン

 

マウスオーバーで背景色が変わるボタンをデザイン

 

マウスオーバーで形状が変わるボタンをデザイン

 

【テキスト学習】マウスオーバーで変化するボタンの作成手順 | 画像で解説

チュートリアル動画ではなくテキストでサクッと学びたい方は下の手順に沿って進めてみてください。

前述の動画で学習可能な内容の一部のみをテキストで解説していきます。
(ステート機能の使い方は十分理解できる内容となっています)

 

マウスオーバーで変化するボタン

まずは使用する素材を下のボタンから無料ダウンロードしておきましょう。

素材をダウンロード(マウスオーバー)

 

①右クリックしてボタンのオブジェクトをコンポーネントする

 

②ホバーステートを追加する

 

③ホバーステートを選択した状態で、コンポーネントしたボタンの背景をダブルクリックして選択。不透明度を60%に変更

 

④「デザインモード」→「プロトタイプモード」に移動

 

⑤「初期設定のステート」を選択。スクショ右側のパネルでお好みの動きをつける

 

⑥スクショ右上のプレビューウィンドウのアイコンをクリックして動きを確認

 

学んだことをXDで実際に手を動かして確実に定着させていきましょう!

【失敗しない】Adobeコンプリートプランのインストール手順|Creative Cloud

 

【完全無料】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講座

 

値段
無料

 

言語
日本語音声

 

この講座の特徴

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

 

筆者のレビュー

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

 

MEMO

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

 

 

注意

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

 

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

 

まだAdobe XDのインストールが完了していない方は早速『Adobe XD (1,180 円/月)』で自分の思うがままにデザインを作っていきましょう!

 

さっそく学習してみる

 

まだAdobe XDのプラン選びでどれにしようか悩んでいる方もいるかと思います。

そんな方は下の記事で得する『プラン選び〜インストール』までを徹底解説しているので是非参考にしてみてください。

【失敗しない】Adobe XD『プラン選び』と『インストール方法』

 

まとめ

最後まで読んでいただきありがとうございます。

この記事のまとめ

 

1. 【5分で習得】Adobe XD『マウスオーバー』でアニメーション作成

【動画学習】マウスオーバーで見た目が変わるボタンをデザイン – 全3回

【テキスト学習】マウスオーバーで変化するボタンの作成手順 | 画像で解説

 

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

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

いかがでしたでしょうか?

初心者の方が絶対に失敗することなく、Adobe XD『マウスオーバー時のアニメーション作成』をマスターできるよう書かせていただきました。

少しでもお役に立てたのなら本望です。。

もし何かご不明点や『ひとりだと挫折してしまうから、メンターとしてサポートしてほしい』という方がいましたら、TwitterからDMをいただければご相談に乗ります。

 

【完全無料】Adobe XD公式チュートリアルを使って本格的に学習を始めたい方は、下の記事で詳しく紹介しているので参考にしてみてください。(筆者は初見で『これが無料…!?』と仰天しました)

【絶対に損しない】Adobe XD公式チュートリアルで無料学習|Adobe XD Trail

 

Webデザイナーに必須のAdobeツールは『Adobe XD』の他にも 『Illustrator / Photoshop / Dreamweaver』があります。現役Webデザイナーの筆者も当然使っています。

(コンプリートプランならこれら全部が使い放題です)

しかも、その全てが無料で学習できます。
これ実はあまり知られていない情報なのであなたはかなりラッキーだと思います。。!

 

上で紹介したチュートリアルで学習を開始するために、まずはプラン料金を慎重に比較していきましょう。

【知らないと損する】Adobe製品の『料金プラン』を徹底比較 | Webデザイン

 

Web制作学習で挫折した経験はありませんか?

 

『Webサイトをゼロから作って稼いでいきたい』

『3ヶ月くらいで最低でも月10万円は稼ぎたい』

『営業とかやったことないけどWeb制作だけで稼いでいきたい』

 

 

こんな方のためにWeb制作で月80万超稼ぐ筆者が自身の経験を踏まえて【失敗しない】Webデザイナー(Web制作)独学ロードマップを執筆しました。

 

 

少額の投資で3ヶ月後には月10〜30万稼げるよう設計してあります。
(学習教材やAdobeなど最低限のコストはかかります)

 


ロードマップの構成

  • Web制作に特化した『確実に身に付く』学習方法
  • Web制作会社が喰いつく理想的なポートフォリオの作成手順
  • 返信率10%以上!Web制作会社へのメール営業

 

有料公開も考えましたが「Webデザイナー(Web制作)はまだまだ稼げることを証明したい!」という思いが強く、期間限定で無料公開をすることにしました。

 

 

2021年半ばまでは無料公開する予定ではありますが前倒しすることもあり得ますのでご興味ある方はお早めにどうぞ!

 

以下Twitterでの評判

 

 

 

この記事を読んでいる時点であなたは相当な熱意と行動力をお持ちなので、確実にスキルを習得できると断言します。独学だろうが未経験だろうが関係ありません。あとはやるだけです。

 

【3ヶ月で10万稼ぐ】本物のWebデザイナー独学ロードマップ