便利なのが登場!UIのデザイン、プロトタイプ、アニメーションがコードなしで、手軽に作成できるツール -Drama

すごいツールが登場しました!
コードは一切必要とせず、スマホアプリのデザイン、プロトタイプ、アニメーションが手軽に作成できるmacOS用のアプリを紹介します。

実際に試してみたところ、操作は非常に簡単で、動作も快適、さまざまなスマホアプリの構築に役立つと思います。

デモのキャプチャデモのキャプチャ

Drama

Dramaの特徴

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

Dramaのキャプチャ

Dramaのキャプチャ

  • ユーザーインターフェイスを描画
    コードは一切不要、プロトタイプの視覚的な状態をシーンに描きます。
  • インタラクティブなプロトタイプを作成
    各シーンをトランジションに繋げるだけで、インタラクティブなプロトタイプを作成できます。
  • アニメーションを作成
    レイヤー名に基づいてシーン間でモーフィングアニメーションを自動的に作成します。

Dramaの動画がYouTubeにアップされています。
下記は、Transitionを使ったプロトタイプです。完成は6:23あたり。

Dramaで作成したプロトタイプは、実機で確認できます。
iPhone, iPadで確認できるiOSアプリが無料で利用できます。

サイトのキャプチャ

Drama Mirror on the App Store

Dramaのダウンロード

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

サイトのキャプチャ

Drama Beta

「Download Beta」をクリックし、メールアドレスを入力すると、無料でダウンロードできます。
※現在は、ベータ版のみです。

Dramaの使い方

Dramaをダウンロードしてみたので、さっそく使用してみました。
私の環境(macOS Mojave 日本語)で問題なく、動作しました。

Dramaのキャプチャ

Dramaの初期画面

デザイン、プロトタイプ、アニメーションなど、どんな感じにできるのかは、動画を見るとよく分かると思います。

シミュレーターの機能などもあるので、かなり便利です。

動画の一覧は、下記にまとめられています。

サイトのキャプチャ

Drama Beta

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

Dramaのキャプチャ

上記動画のDramaファイル

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

サイトのキャプチャ

Drama Beta

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

Dramaのキャプチャ

サンプルファイルを開いたところ

プロトタイプやアニメーションは、内蔵のシミュレーターや実機でも確認できます。

Dramaのキャプチャ

Dramaのシミュレーター機能

sponsors

top of page

©2019 coliss