2019年12月5日

デザイン

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

ogp_dramaogp_drama

目次

  1. はじめに
  2. Dramaとは
  3. ダウンロードしてみた
  4. 基本操作
  5. バージョン管理
  6. ファイルの読み込み / 書き出し形式について
  7. 戸惑った点
  8. まとめ

はじめに

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

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

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

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

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

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

ogp_drama.jpg (130.7 kB)

Dramaとは

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

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

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

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

1.jpg (68.4 kB)

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

ダウンロードしてみた

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

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

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

2.jpg (76.8 kB)

こちらが、最初の操作画面です。シンプルでわかりやすいですね。
4.jpg (48.2 kB)

基本操作

図形の作成

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

よく使うショートカット

四角:R

丸:O

ペンツール(ベジェ):P または VまたはB

テキスト:T

レイヤー操作

よく使うショートカット

レイヤーのグループ化:複数レイヤーを選択し、Command + G

複製:option + ドラッグ

同じ操作を続ける:Command + D

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

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

5.jpg (51.2 kB)

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

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

Dramaの良いところ:Scroll

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

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

6.jpg (39.4 kB)

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

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

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

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

12.jpg (37.7 kB)

バージョン管理

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

9.jpg (102.7 kB)

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

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

11.jpg (67.7 kB)

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

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

読み込めるファイル形式

・PSD(レイヤーではなく、画像として読み込まれます)

・ai (レイヤー構造あり)

・Sketch(レイヤー構造あり)

・PDF

・GIF (アニメーションは静止の状態でした)

・PNG

・JPG

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

13.jpg (55.5 kB)

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

戸惑った点

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

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

14.jpg (31.8 kB)

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

・Symbols
・Handoff
・Styles
・Code Generation
・Collaboration

まとめ

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

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

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

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

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

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

・シンボル機能の実装

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

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

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

デザインのお仕事に関するご相談

Bageleeの運営会社、palanではデザインに関するお仕事のご相談を無料で承っております。
zoomなどのオンラインミーティング、お電話、貴社への訪問、いずれも可能です。
ぜひお気軽にご相談ください。

無料相談フォームへ

0

0

AUTHOR

ゲスト bagelee

ゲスト bagelee

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

簡単に自分で作れるWebAR

「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。

palanARへ
palanar

palanはWebARの開発を
行っています

弊社では企画からサービスの公開終了まで一緒に関わらせていただきます。 企画からシステム開発、3DCG、デザインまで一貫して承ります。

webar_waterpark

palanでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にpalan(旧eishis)を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReactやReact Nativeをよく触っています。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

damien

Damien

WebAR/VRの企画・開発をやっています。森に住んでいます。

ゲスト bagelee

ゲスト bagelee

かっきー

かっきー

まりな

まりな

suzuki

suzuki

miyagi

ogawa

ogawa

雑食デザイナー。UI/UXデザインやコーディング、時々フロントエンドやってます。最近はARも。

いわもと

いわもと

デザイナーをしています。 好きな食べ物はラーメンです。

kobari

taishi kobari

フロントエンドの開発を主に担当してます。Blitz.js好きです。

shogokubota

kubota shogo

サーバーサイドエンジニア。Ruby on Railsを使った開発を行いつつ月500kmほど走っています!

nishi tomoya

aihara

aihara

グラフィックデザイナーから、フロントエンドエンジニアになりました。最近はWebAR/VRの開発や、Blender、Unityを触っています。モノづくりとワンコが好きです。

nagao

SIerを経てアプリのエンジニアに。xR業界に興味があり、unityを使って開発をしたりしています。

kainuma

Kainuma

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

sugimoto

sugimoto

asama

ando

CONTACT PAGE TOP