[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が主流となりつつあります。
メリットとデメリット
メリット
・デザイナーではない人（ディレクターや初心者）でも気軽に使えるデザインツール
・とにかく動作もファイルも軽い
・繰り返し機能により作業スピードの短縮が可能
・ワイヤーフレームや簡単な資料を作るのにも便利
・作ったものを共有しやすく、ディレクターやクライアントにデザインチェックしてもらうのが楽
デメリット
・細かなデザインはできない
・レイヤー効果や画像補正ができない
・字詰めや縦書きが出来ない（※縦書きはプラグインを入れれば可能です）
成果物
自動アニメーション
下から上、そして左に移動する文字を作成しました。
自動アニメーション
iの●の部分をひよこに変換して、上下に動かしています。
自動アニメーション スライド式
スライドアニメーションを作成してみました。
破線のアニメーション＋オーバーレイ
ハートのシェイプを線→着色と浮かび上がらせてます。
自動アニメーション
3つのイラストを交互に移動させています。
コンポーネント ホバーステート
マウスを持っていくと口を開くアニメーションです。
まとめ
「AEは難しい」「簡単なアニメーションを作成してみたい」という方には、Adobe XDがおすすめです！
ここに上げているアニメーションは後日解説ブログを書きますのでお待ち下さい〜！！！
広がれXDの輪！！
