【Adobe Animate CC】Flashツールから進化したWebアニメーションとは

今回はWebの一時代を華やかに着飾った「Flash」の、
代表的な制作ツールの進化(需要対応?)についてです。


そもそも「Flash」とは?

元々は旧Macromediaが開発したインタラクティブWEBアニメーションファイルを制作するツールで、
現在はAdobe内にて開発が継続しています。
Webページの切り替えにオーバー表現なアニメーションが展開されたり、
アーティスティックな個人WebサイトのUIでは目を奪われる表現に使われたり、
さらには、
YouTubeなど、Web動画再生の仕組みにも過去使われていました。

そんなFlashの制作ツールはタイムライン制御GUIによる直感的な操作が特徴で、
JavaScriptやhtmlなどが苦手なWebデザイナーでも簡単にアニメーションが作れたことで大変支持を得たのです。

「Flash」で出来ること

また、
特に独自のActionScriptを使用することでインタラクティブな制御か可能となり、
プログラムスキルがあればFlashアプリも作ることが出来る特徴があります。

近年では、SEO対策や脆弱性問題とブラウザ組み込みプラグインという特性上から標準搭載されなくなっている傾向もあり、
AdobeはFlashを「2020年末に終了」を正式発表しております。

時代の流れにも対応

そんな、Web業界で余命を宣告されたFlashのオーサリングツールである「Adobe Flash」ですが、
ツールの名称を「Adobe Animate CC」に変更して開発が継続されることになり、世のフラッシャーに希望を与えました。

注目は、近年対応を進めてきた「HTML5 Canvas」機能の実装によるJavaScriptアニメーションアウトプットであり、
今後のアップデートによって、動画書き出し含めて機能充実が期待されています。

「Adobe Animate CC」の活用

個人的な意見を述べるのであれば、
デザイナーが慣れ親しんだこのオーサリングツールを、
最終的なアウトプットやコンテンツを制作する目的に限定するのは大変もったいないので、
UIの確認を行う「プロトタイピング」の工程で大いに活躍することが出来ると考えています!

UX全体を考慮するのであれば単純な画面遷移アニメーション(トランジション)具合も重要なサービスの振る舞いになってきますので、
「静」でなく「動」の表現を企画者や開発者に伝える手段として適切なツールなのではないでしょうか。

「Adobe CC」を導入している環境であれば「Adobe Animate CC」を是非活用して、
プロジェクトメンバー間で、プロトタイピングによる使用感の共有を進めてみてください。

次回も日々変化するWeb制作環境などにスポットを当ててご紹介します。
サービスデザインに関わっているデジマースのネモトでした。

マテリアルデザイン
~アニメーション~

こんにちはもしくはこんばんは!
デザイン業務に関わっております、デジマースのスガです!

前回の記事にて、マテリアルデザインはこのようなもの、とざっくりお話しさせて頂きました。
今回は「マテリアルデザインのアニメーション」に触れていきたいと思います。

*。゜・。ここでは全部を理解せずとも、デザイナーでなくとも
何となく分かるをベースに書いております。・。゜*


簡単に前回のおさらい!
「マテリアルデザイン」とは?

★「マテリアルデザイン」をそのまま直訳すると「物質的デザイン」という意味になる!
★デバイスが変わってもユーザーが使いやすいUI表現を目指す!
★フラットデザインに「光」や「影」、「奥行き」の触感的表現を含ませたものが「マテリアルデザイン」
★マテリアルデザインでは影の要素が大事!
フラットデザインとは異なりオブジェクト同士の階層の構造が重要になり、高さの概念がある。
★マテリアルデザインでは、1つのページ内で色を多様しません。

マテリアルデザインのアニメーション

アニメーションといえばざっくりいえば動いているものを連想しますよね。
ですがマテリアルデザインとは触感的表現を含ませたものをさしますのでアニメーション効果にもリアリティのあるルールを適応させます。

例えば……

pic_161118_01

pic_161118_02

コロコロ…

pic_161118_03

紫のボールが先にゴールへたどり着きました。
もちろん紫のボールの方が急斜面になっていますので、スピードが早くなります。
黄色のボールの方は斜面が緩いのでゆっくりとした速さで進んでいきます。

この結果は現実的な自然なのものとなっています。
けして、紫のボールと黄色のボールが距離は同じといえど、斜面の関係から同じ速さにはなりません。

★基本的に状態が同じものを除き、アニメーションを行う際は個々のUIパーツが加減速され、等速の動きは致しません。
現実的な動きに合わせたモーションが推奨されます。

pic_161118_04

仮想ではなく現実によせることで、よりユーザーの視点や動きに合わせた表現が可能になるそう。
静止画の見え方だけではなく動的な動きの見せ方も新しさを感じますね。

まだまだ、マテリアルデザインは奥が深いですね。次回もマテリアルデザインについて、項目をピックアップしながら全部を理解せずとも、デザイナーでなくとも何となく分かるをベースにお伝えしていければと思います。

それでは、またお会いしましょう!