Help us understand the problem. What is going on with this article?

「Drama」リアルなプロトタイプを最速で作れるUIデザインツール

「Drama」リアルなプロトタイプを最速で作れるUIデザインツール

partsDramaMidashi.jpg
規模や環境によりますがAdobeXD/Figma/InVision Studio/Sketchより良いと感じます。

DramaひとつでUIデザイン制作/プロトタイプ作成/アニメーション(モーション)作成が可能で軽快で使いやすくデザインツールとしての完成度が高いです。
早い段階で実機挙動に近いリアルなプロトタイプを作成できるので、フィードバックや認識共有の精度も上がりテスト/改善のサイクルが効率よく回り開発をスムーズに進めることが出来ます。
partsAnime.gif
PixelCut社が開発したDramaは”デザイン/プロトタイピング/アニメーション”それぞれに強力で魅力的な機能があり、快適な動作や直感的な使いやすい操作性で完成までワンストップでプロトタイプを作れるオールインワンのMac Appデザインツールです。
最近ベータテスト期間があり9月4日に正式にリリースされました。Drama Mirror .iOS Appでは実機でプロトタイプの操作感を確認できます。
partsSim.gif

Drama UI

Dramaは相互接続されたSceneの全体構造を作成してトランジションで繋げ、アニメーションを設計し、ユーザーの操作をプロトタイプ化するためのアプリです。すべてのレイヤーすべての属性を制御し詳細なアニメーションを作成できます。
partsdrama.png
ワークスペース内ではレイヤーのサイズ変更/回転/グラデーションの編集などを選択要素のすぐ近くにあるギズモでコントロール編集できます。
partsgizmos.png

上部にはツールバーパネル。
partstoolbar.png

左側にはレイヤーやヒストリーなどのパネル。
partsLpanel.jpg

右側にはインスペクターパネル。
partsinspector.png

下部にはアニメーションタイムライン/マジックムーブタイムライン/ドライバーなどのパネルがありす。
partsBpanel.jpg

レイヤー

レイヤーはSceneの基本的な構成要素で単純な図形やパスで作成して回転/拡大最小/調整できます。塗りつぶし/ストローク/シャドウ/ぼかしなど視覚的なフィーチャーも付けられます。縦横スクロールエリア指定もできます。
partsLayers.jpg

グループ化もでき親レイヤーに子レイヤーをネストし論理的な階層で管理できます。
partsHierarchy.jpg

プロトタイピングツール

トランジション

ドローツールでビジュアルの状態を表すSceneを何枚も作り、トランジションで繋げUIを作っていきます。
Transitions
トランジションにはMagic Move/Jump/Cross Fade/Push/Slide Inがあります。
partsTansitions.png

イベント

イベントは基本的な相互作用の一つで、各イベントに対応したアクションがあり実機での操作感に近いプロトタイプを作れます。
Advanced Events

特徴的な機能

Dramaの突き抜けた機能や使いやすい機能にはアニメーション、3Dレイヤー、マジックムーブ、マジックドラッグ、ドライバー、シミュレーター、タイムトラベルなどがあります。

アニメーション

強力なアニメーション機能はタイムラインエディタ管理で簡単にUIモーションが作れます。
partsAnimations.png
サンプル
サンプルファイルをダウンロード
Animations & Timing Functions

3Dレイヤー

2Dレイヤーを3次元空間に配置してZ位置XY回転により3Dコンテンツを作成でき、これまでにないインタラクションを創造できます。
parts3DContent.jpg

パースペクティブの調整もできます。
partsPerspective.jpg

マジックムーブ

トランジションで繋げた各Sceneに同じレイヤー名の要素があれば自動でアニメーションが作られ補完されます。
Magic Move

マジックドラッグ

マジックムーブ、トランジションと組み合わせて作成したインタラクティブなイベントでシミュレーターやDrama Mirror .iOS Appでドラッグできるオブジェクトになります。
Magic Drag

ドライバー

レイヤーAとレイヤーBのバインディングを作成して、ユーザーがシミュレーターを操作するなどによりAの属性が変更されるたび従属Bの属性も自動的に更新され駆動できます。
Drivers
ドライバー属性はドライバーパネルで管理できます。
partsDriver.jpg

シミュレータ

アニメーション/インタラクションをデザインしたら、シミュレータウィンドウで選択されてるSceneのプレビューができ、変更はすぐシミュレーターに反映されます。マウスとキーボードで操作してクリック/ダブルクリック/ドラッグ/オンカーソルでイベントの実行、レイヤースクロールやレイヤードラッグができます。
Simulator & Mirror
シミュレーターでの出来事はビデオ録画することができます。
partsSimulatorVideoRecording.png

タイムトラベル

タイムトラベルはドキュメントのバージョン管理機能で任意の過去の状態に遡れて、作業の並列分岐も作成できます。
History
Gitになじみ深いバージョン/ブランチ管理システムです。複数のブランチを持てることによりいろいろなアイデアを試して見ることが出来ます。履歴は簡単に切り替えられて削除もできます。
partsVersionBranche.jpg

20200127追記

シンボル

すべてのシーンはシンボル機能を使えば他のシーンで再利用できます。複製せず複雑なUIが作成でき猥雑な要素管理がなくなります。シンボルはネスト可能。

ロードマップ

partsRoadmap.png

開発中

Symbols、Handoff、Styles、Code Generation、Collaboration

実装済み

Drawing Tools、Magic Move、3D Layers、Drivers、Sketch Import

20200127追記

Symbolsが実装されました。

Drama/Figma/AdobeXD比較

良いところ

Drama: 動作が軽快。独自の突き抜けた機能が光っていて、開発初期段階で実機での操作や挙動に近い完成度のリアルなプロトタイプが作られていて開発がよりスムーズに進む。現時点のツールの完成度とロードマップを見ると宇宙史上最高のUIデザインツールになる期待感があります。

Figma: 優秀なコンポーネント(シンボル)管理、共同編集。

AdobeXD: 無料、PhotoshopやIllustratorとの親和性。

良くないところ

Drama: macOSのみ。リリースしたばかりでまだ機能が足らない箇所がある。プラグインやインテグレーションはロードマップにない。

Figma: 日本語入力やフォント関連が不安。

AdobeXD: 使ってないときでもAdobeらしく副アプリがいくつも常時起動してる。

Info

Drama
価格はサブスクリプション11815円/年。体験版もあります。

20190919追記

正式リリースの当初は決算のとき年払いみたいに書いてあったのでサブスクリプションなのかと思ったのですが
partslicense.png
ライセンスライセンスページが追加されていて

  • 体験ライセンス:無料。機能制限なし、7日間(起動しなかった日はカウントされない)
  • 標準ライセンス:$99(11970円)。商用利用可、買い切り
  • 教育ライセンス:無料。教師と生徒のみ、商用利用不可、1年間有効

から選べるようになってました!12000円の買い切り嬉しすぎる💫

20200127追記

現在$99/Aのサブスクリプションになってました。

ドキュメント

開発中のシンボル/スタイル/コード生成が実装されたら12000円/年の価値を感じます。体験版があるので試しになにか作って遊んでみてください。私はベータテストで触って好きになってたので実装まで待たず導入を決めました。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした