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

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

2016年も残すところあとわずかになりました。
お家の片づけも仕事もやる事いっぱいの師走は本当に忙しいですね。
日に日に時間の流れが速くなっているような気がします。

さてさて、前回の記事にてマテリアルデザインのアニメーションについてお話しさせて頂きました。
今回も引き続きアニメーション部分に触れていきたいと思います!

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


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

★マテリアルデザインとは触感的表現を含ませたものをさしますので、
よってアニメーション効果にもリアリティのあるルールを適応
★現実的な動きに合わせたモーションが推奨されている

マテリアルデザインのアニメーションの利点とは?

さっそくではありますが、アナタは下記の様に見たい記事を見つけました。

pic_161222_01

如何でしょうか。このパッと切り替わる動作は普段見慣れている人が多いかと思います。
求めている動作が早いことはとても良い事です。
まるで、長いマラソンのスタートとゴールの部分だけを見た様な感じです。

そこで、もっとユーザーメリットが組み込まれたらどうでしょう?
動作からすぐに結果が出ている時点でスピード面において充分メリットがありますが、
ここに「ユーザー自身が行った動作に対して、今自分がどのような状態なのかが一目で分かる」とどうでしょう。

またまた、アナタは下記の様に見たい記事を見つけました。

pic_161222_02

如何でしょうか。動作と結果の間にこのようなモーションを加えることで、
ユーザーは自分が行った行動に対して、アクションが起こるので、
今自分がどのような状態なのかが一目で分かる状態になります。

長いマラソンはスタートとゴールの間に、走っている過程があります。
その過程の部分をマテリアルデザインではユーザーの操作に合わせてリアリティのある現実的な動き
を加えスライドや拡大などのモーションで次のページへ誘導を行います。
つまり今までなかったはっきりとした遷移過程のアニメーションによって、
ユーザーの目線の動きもバッチリとらえ(人はつい動くものなどを追ってしまいますよね)
次々起こる動作をスムーズに解消していくことが出来ますね。

最後に

現実的な動き(例:スタートとゴールの間)に合わせたモーションを加えると操作もより分かりやすくなります。
これらのモーションには様々な種類があり、スライドしたり、画面内のパーツが入れ替わったり回ったり……様々なものがあります。

もしこれからスマートフォンでサイトなどを見るときに少し注意して見てみて下さい。
特に気にしていなかっただけで、実は上記のようなモーションで誘導されていたかもしれません。

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

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

【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」を是非活用して、
プロジェクトメンバー間で、プロトタイピングによる使用感の共有を進めてみてください。

「Adobe Animate CC」を使った広告制作の紹介はコチラ↓

簡単!『Adobe Animate CC』の使い方_HTML5 で広告作り

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

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

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

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

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


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

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

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

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

例えば……

pic_161118_01

pic_161118_02

コロコロ…

pic_161118_03

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

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

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

pic_161118_04

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

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

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