instagram_icon facebook_icon x_icon
ページトップへ

熱いネタ、あります。

steam
steam
steam

Adobe XDで水がゆれるアニメーションを6分で作ってみた。

Adobe XDで水がゆれるアニメーションを6分で作ってみた。

Adobe XDとは?


Adobe XDは、WEB制作のカンプのような、動きをつけるプロトタイプとその共有に特化したAdobe製のデザイン制作ソフトです。

基本的なXDの使い方はネットで検索するとたくさん出てきます。
しかし、まだ比較的新しいソフトということもあり、詳しい使い方や、面白い使い方に関する動画や記事はあまり見当たりません。

英語で検索する


そこで、検索範囲を拡げるために英語で検索してみます。

Adobe社の本社は元々英語圏にありますし、世界で共通言語に指定されている言語で検索すると圧倒的な量の情報がヒットします。

YouTubeの公式チュートリアルには、基本の使い方だけでなく、高度な情報もあります。

ボタン、スライダー、およびその他のすべてのインタラクションをよりアドバンスなレベルにする方法。
アニメーションやインタラクションを動かすためのコンポーネントやステートの様々な使い方。

球体の中で水がゆれるアニメーションの紹介


今回は、ローディング画面などに使えそうな水のようなアニメーションの英語チュートリアルを日本語で紹介します。

基本的な作り方を理解すれば、動きをアレンジしてデザインに生かすことができます。

ぜひこの動画を参考にアニメーションを作ってみたり、また英語での検索にもトライしてみてくださいね。


英語の参考動画:Adobe XD – 6分で水のアニメーション

プロフィール画像

この記事を書いた人

ITでワクワクする未来を共に創造しませんか?