デザインツール「Drama」を触ってみた

はじめに

新しい技術にチャレンジし続けるpalanのアドベントカレンダーDay5です！

昨日は 「遠近感を味わえるマウスインタラクションを作ってみた！」の記事でした。

遠近感を味わえるマウスインタラクションを作ってみた！

今日は、デザインツール「Drama」を触ってみた感想についてご紹介します。

ちなみに、筆者はWEBデザインを作成する際に使うツールとして、Sketch / Figma / Photoshopを使用しています。

これらのツールとの使い心地の差も紹介したいと思います！

Dramaとは

デザイン、アニメーション、そしてインタラクティブなプロトタイプが作成できるMacアプリケーションです。

また、作成したデザインは、iPhone / iPadアプリ「Drama Mirror」から実際にプレビューすることができます。

UIや機能は FigmaやSketchと似ており、かつ「アニメーションタイムライン」や３Dレイヤー機能に特化しているのが特徴です。

実際にどんな機能が使えるのかは、公式サイトのチュートリアルページからご覧いただけます。

プランについては無料 / 有料があり、今回は無料プランで体験してみます。
（Trialプランでは７日間無料で使用できます。
有料のStandardプランでは、１年につき$99です。）

ダウンロードしてみた

まずは、公式サイトから「Try for Free」でダウンロードします。
https://www.drama.app/

ダウンロードしたデータ量は6.3MBでとても軽いです！

実際に開き、名前とメールアドレスを入力すると使用できるようになります。

こちらが、最初の操作画面です。シンプルでわかりやすいですね。

基本操作

図形の作成

基本的な図形作成のショートカットキーはSketchやFigmaと同じです。

レイヤー操作

Dramaの良いところ：ショートカットのヒント

個人的に感動したのは、ショートカットキーが「ヒント」として表示される点です。

例えば、パスの操作を行いたいけど「あれ、どうやって片側のハンドルだけ動かすんだっけ？」という時、そのパスをクリックし続けると、画面左下の方にヘルプで出てきてくれます。

このヘルプのおかげでショートカットを一つ一つ覚えなくて助かりますね！

Dramaの良いところ：Scroll

Figma, Sketchにはないアイコンとして、ツールバー内に「Scroll」というのがあります。

文字通り、WEBサイトやテキストエリアでよく見るスクロールバーを作成できます。

実際にスクロールバーとして機能するため、
例えばWEBサイトをデザインする時に、デバイスの縦幅に合わせて作成すると、ユーザー視点でどのようにデザインが見えるのかを試せて良さそうです。

Dramaの良いところ：オブジェクト間の余白表示

オブジェクトを移動させる時に、何もしなくても隣り合うオブジェクトとの距離を数値で表示してくれます。

Sketch, Figmaだと「Alt」キーが必要となる操作なので、この機能は個人的にすごく嬉しいです。

バージョン管理

Dramaでは、簡単にバージョン管理（何をどのように変更したか）の記録を見ることができます。

ヘッダーメニューの「History」をクリックし、「Version of Main Branch」をそれぞれクリックするだけで、過去にデザインした流れを見ることができます。

用途としては、「やっぱりさっき作ったデザインに戻したい…！」という時に活躍します。ブランチも複数作ることができます。
（GithubやSourceTreeに慣れている方だと、操作に馴染みやすいかもしれません）

ファイルの読み込み / 書き出し形式について

読み込みできるファイル形式について、「File < Import…」から試してみた限りですが、
以下の形式が可能でした。

書き出し形式については、ヘッダーメニューの「File < Export To」から、
定番のPNGやPDFの他に、MP4やGIFもありました。

特に読み込み可能な形式の種類が豊富なので、これまでイラレやSketchなど別のデザインツールを使われていた方も参入しやすそうですね。

戸惑った点

他のデザインツールでよく使う機能として、オブジェクトの書き出しの操作が見当たりませんでした。
(↓Figmaでいう「Export」の部分)

これから実装される機能なのかもしれません。

また、公式サイトに掲載されている「これから実装される予定の機能」はこちらです。

・Symbols
・Handoff
・Styles
・Code Generation
・Collaboration

まとめ

以上、Dramaを触ってみた感想のまとめです。

Dramaの良いなと思ったところ

・基本操作がSketchやFigmaに近く、馴染みやすい

・対応しているファイル形式が豊富

個人的にこれから期待しているところ

・パーツの書き出し機能が欲しい

・シンボル機能の実装

・使い方の記事増えて欲しい

今回、メインであるプロトタイプ機能や3Dレイヤー機能について触れられなかったため、次回の記事でご紹介していきつつ、Dramaの良いところを沢山発信していきたいと思います！

【Dramaダウンロードはこちら！】
https://www.drama.app/