便利なのが登場!UIのデザイン、プロトタイプ、アニメーションがコードなしで、手軽に作成できるツール -Drama
Post on:2019年8月19日
すごいツールが登場しました!
コードは一切必要とせず、スマホアプリのデザイン、プロトタイプ、アニメーションが手軽に作成できるmacOS用のアプリを紹介します。
実際に試してみたところ、操作は非常に簡単で、動作も快適、さまざまなスマホアプリの構築に役立つと思います。


Dramaの特徴
DramaはPaintCodeのクリエイターによる、デザイン、プロトタイプ、アニメーションがオールインワンになったmacOS用のアプリです。先月リリースされたばかりで、現在はベータ版として提供されており、無料で利用できます。

Dramaのキャプチャ
-
- ユーザーインターフェイスを描画
- コードは一切不要、プロトタイプの視覚的な状態をシーンに描きます。
-
- インタラクティブなプロトタイプを作成
- 各シーンをトランジションに繋げるだけで、インタラクティブなプロトタイプを作成できます。
-
- アニメーションを作成
- レイヤー名に基づいてシーン間でモーフィングアニメーションを自動的に作成します。
Dramaの動画がYouTubeにアップされています。
下記は、Transitionを使ったプロトタイプです。完成は6:23あたり。
Dramaで作成したプロトタイプは、実機で確認できます。
iPhone, iPadで確認できるiOSアプリが無料で利用できます。

Dramaのダウンロード
Dramaのダウンロードは、下記ページから。

「Download Beta」をクリックし、メールアドレスを入力すると、無料でダウンロードできます。
※現在は、ベータ版のみです。
Dramaの使い方
Dramaをダウンロードしてみたので、さっそく使用してみました。
私の環境(macOS Mojave 日本語)で問題なく、動作しました。

Dramaの初期画面
デザイン、プロトタイプ、アニメーションなど、どんな感じにできるのかは、動画を見るとよく分かると思います。
シミュレーターの機能などもあるので、かなり便利です。
動画の一覧は、下記にまとめられています。

動画で使用しているファイルはダウンロードでき、自分の環境で試すこともできます。

上記動画のDramaファイル
スマホアプリで見かけるさまざまなアニメーションも楽しめます。Dramaファイルのダウンロードは、下記ページの中程ちょい下あたり。

ダウンロードしたファイルをDramaで開いてみました。

サンプルファイルを開いたところ
プロトタイプやアニメーションは、内蔵のシミュレーターや実機でも確認できます。

Dramaのシミュレーター機能
sponsors