3時間でどこまで習得できるかチャレンジ！プロトタイプ＆デザインツール「Drama」編

こんにちは。
皆さんは「Drama」というプロトタイピング＆デザインツールは知っていますでしょうか？このツールはアニメーションに強いことが有名で、デザイン段階で綺麗なアニメーションが手軽に作成できちゃいます。

近年はWEBサイトでのアニメーション活用が当たり前のようになっていますが、エンジニアさんに制作指示するにあたり、どうも細かい動きが伝わりづらい・・。参考サイトを渡しても、違う動きになってしまう・・。
そんな悩みを解決するために、色々探していたところ、面白そうなツール「Drama」に行き着きました。

Drama

「Drama」の特徴

・UIデザインができる
・アニメーションができる
・プロトタイプができる

Dramaの特徴を簡単に言うとこの3つになります。では早速3時間でどのれくらい習得できるかチャレンジしてみます！
今、3時間の熱いドラマが始まる・・！

チュートリアル＆ドキュメントでかんたんに学べる！

まずサイトをのぞいてみると、チュートリアルや参考例、ドキュメントなど初めての人でも使い易いよう、教材が豊富に用意されています。
筆者は英語が全く分かりませんが、それでもXDやSkechを触っている人ならば、1時間あれば感覚でできてしまうので、使い勝手がとても良いツールだと感じました。

ここまでやれるのか！アニメーションが凄い！

基本的な扱い方はあっという間にわかったので、アニメーション部分を試しに触ってみました。
オブジェクト自体にアニメーションをつけられるだけでなく、アートボード間のトランジションを自由に変えられることができます。

何より驚いたのはモーフィング（ある物体から別の物体へと自然に変形する映像技術）が、とてもスムーズだったことです。

動画の6分20秒あたりを見ていただくとわかる通り、自然に滑らかに変化していますよね。これが簡単にできてしまいます！
筆者は昔AfterEffectを使った生業をしていた経験があるので、このスムーズに動くアニメーションに驚愕しました。

拝啓、AfterEffect様。
そちらはいかがお過ごしでしょうか？
今やWEBアニメーションは、簡単かつとんでもない発展をしていました。
あなたが心配です。
どうかお身体に気をつけて。

デザインツールとしても優秀

リアルなプロトタイプやヌルヌル動くアニメーションに目を見張るものがありますが、デザインツールとしても優秀です。

・ワークスペースはシンプルで使い勝手がいい。軽い。
・ブランチが切れる。バージョン管理ができて安心。
・シンボル（コンポーネント）が実装され、デザイン効率◯。

といったように近年のデザインツールに実装されているものは、だいたい揃っています。
プロトタイプ（高収入）やアニメーション（高学歴）だけでなくデザインツールとしても優秀（高身長）。まさにツール界の「三高」と言っても過言ではないでしょう。はい、憧れます。

3時間「Drama」学習してみた結果・・！

アニメーションしか作っていない（笑）

いや実際には、デザインツールとしても色々試して、使いやすくて感動したんですが、他のデザインツールとしてもできるようなところなので、今回はアニメーション部分を中心に習得してみました。

正直、アニメーションのタイムラインが理解できるかどうかで、難易度は変わってきますが、理解できる方にとってはサクサク作れるし、直感的な操作で動きをつけられるので、本当にアニメーションが強力なツールだなと感じました。

「Drama」は実務で使えるのか・・？

結論から言いますと、他のツールで十分。
しかし、他のツールにはない「可能性」があるので、今後のアップデート次第では化ける。

＜Good＞
・誰にでも使いやすいツール
・アニメーション機能が強力
・リアルなプロトタイプ作成が可能

＜Bad＞
・日本語フォント未対応、エラーも見受けられる
・共同作業ができない
・コード自動生成機能が未実装（2020年7月時点）※実装予定！

というわけで「drama」ツールを3時間使ってみたところ、素敵なボタンアニメーションを作ることができました。ぶっちゃけ簡単です。

もし、アニメーション部分のコード自動生成が完璧に再現できるものを実装してくれれば、実務でもかなり使えると考えています。

デザイナーが考えたアニメーションを、エンジニアさんに適切に伝えることができ、しかも工数かからず再現してもらえる。
そんな日も近い？のではないでしょうか。

＼　Wizは一緒に活躍できる人を募集しています！　／

UIUXデザイナーの募集

WEBデザイナーの募集