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/

0

0

AUTHOR

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

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

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

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

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

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

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

sasakki デザイナー

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

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

yamakawa

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

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

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

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

はらた

はらた エンジニア

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

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

kobori

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

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

sasai

ささい エンジニア

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

damien

Damien

WebAR/VRを中心に企画やディレクションやエンジニアもちょっとやっています。森に住んでいます。

CONTACT PAGE TOP