【XD】初心者でも簡単にできるXDアニメーション5選

[say name=ななみん img=”http://nanaminlabo.com/wp-content/uploads/newicon.jpg”]XDにハマって5日の成果です![/say]

皆さん、「XD」というツールはご存知でしょうか?

主にワイヤーフレームを作成するときに使われるのですが、動きがなめらかなので「イラストを動かすときに使えないかな?」と思い、XDを学ぶことにしました!

目次

Adobe XDとは?

XDは、webサイトやモバイルアプリ、音声デバイスのUI/UXのためのデザインツールです。

ワイヤーフレーム、デザインカンプ、プロトタイプを作成し、クライアントや制作チームへの共有を一つのアプリで実現します。

デザイナーだけでなくディレクターやプランナーも思い描いたアイデアをすぐにカタチに落とし込めます。

またwebサイトデザインといえばPhotoshopやIllustrator等が主流でしたが、XDが登場してから一気にXDが主流となりつつあります。

メリットとデメリット

メリット

・デザイナーではない人(ディレクターや初心者)でも気軽に使えるデザインツール
・とにかく動作もファイルも軽い
・繰り返し機能により作業スピードの短縮が可能
・ワイヤーフレームや簡単な資料を作るのにも便利
・作ったものを共有しやすく、ディレクターやクライアントにデザインチェックしてもらうのが楽

デメリット

・細かなデザインはできない
・レイヤー効果や画像補正ができない
・字詰めや縦書きが出来ない(※縦書きはプラグインを入れれば可能です)

成果物

自動アニメーション

下から上、そして左に移動する文字を作成しました。

https://twitter.com/nanaminlabo/status/1401464819966889984?s=20

自動アニメーション

iの●の部分をひよこに変換して、上下に動かしています。

https://twitter.com/nanaminlabo/status/1401511594496958464?s=20

自動アニメーション スライド式

スライドアニメーションを作成してみました。

https://twitter.com/nanaminlabo/status/1401865211011735561?s=20

破線のアニメーション+オーバーレイ

ハートのシェイプを線→着色と浮かび上がらせてます。

https://twitter.com/nanaminlabo/status/1401927523013775360?s=20

自動アニメーション

3つのイラストを交互に移動させています。

https://twitter.com/nanaminlabo/status/1402254751933239299?s=20

コンポーネント ホバーステート

マウスを持っていくと口を開くアニメーションです。

https://twitter.com/nanaminlabo/status/1402609942066958339?s=20

まとめ

「AEは難しい」「簡単なアニメーションを作成してみたい」という方には、Adobe XDがおすすめです!

ここに上げているアニメーションは後日解説ブログを書きますのでお待ち下さい〜!!!

広がれXDの輪!!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

東京在住のマルチクリエイターです。あなたの特技やスキルを"コンテンツ"に変えて収益化するお手伝いをしています。
>>詳しいプロフィールをみる

目次