2019年12月5日
デザイン
デザインツール「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と同じです。
よく使うショートカット
四角：R
丸：O
ペンツール(ベジェ)：P または VまたはB
テキスト：T
レイヤー操作
よく使うショートカット
レイヤーのグループ化：複数レイヤーを選択し、Command + G
複製：option + ドラッグ
同じ操作を続ける：Command + D
Dramaの良いところ：ショートカットのヒント
個人的に感動したのは、ショートカットキーが「ヒント」として表示される点です。
例えば、パスの操作を行いたいけど「あれ、どうやって片側のハンドルだけ動かすんだっけ？」という時、そのパスをクリックし続けると、画面左下の方にヘルプで出てきてくれます。
このヘルプのおかげでショートカットを一つ一つ覚えなくて助かりますね！
Dramaの良いところ：Scroll
Figma, Sketchにはないアイコンとして、ツールバー内に「Scroll」というのがあります。
文字通り、WEBサイトやテキストエリアでよく見るスクロールバーを作成できます。
実際にスクロールバーとして機能するため、
例えばWEBサイトをデザインする時に、デバイスの縦幅に合わせて作成すると、ユーザー視点でどのようにデザインが見えるのかを試せて良さそうです。
Dramaの良いところ：オブジェクト間の余白表示
オブジェクトを移動させる時に、何もしなくても隣り合うオブジェクトとの距離を数値で表示してくれます。
Sketch, Figmaだと「Alt」キーが必要となる操作なので、この機能は個人的にすごく嬉しいです。
バージョン管理
Dramaでは、簡単にバージョン管理（何をどのように変更したか）の記録を見ることができます。
ヘッダーメニューの「History」をクリックし、「Version of Main Branch」をそれぞれクリックするだけで、過去にデザインした流れを見ることができます。
用途としては、「やっぱりさっき作ったデザインに戻したい…！」という時に活躍します。ブランチも複数作ることができます。
（GithubやSourceTreeに慣れている方だと、操作に馴染みやすいかもしれません）
ファイルの読み込み / 書き出し形式について
読み込みできるファイル形式について、「File < Import…」から試してみた限りですが、
以下の形式が可能でした。
読み込めるファイル形式
・PSD(レイヤーではなく、画像として読み込まれます)
・ai (レイヤー構造あり)
・Sketch(レイヤー構造あり)
・GIF (アニメーションは静止の状態でした)
・PNG
・JPG
書き出し形式については、ヘッダーメニューの「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/
この記事は
参考になりましたか？
0
0
AUTHOR
しまだ デザイナー
WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。
関連記事
アプリでもっと便利に！気になる記事をチェック！
記事のお気に入り登録やランキングが表示される昨日に対応！毎日の情報収集や調べ物にもっと身近なメディアになりました。
簡単に自分で作れるWebAR
「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。
palanARへ
palanでは一緒に働く仲間を募集しています
正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。
運営メンバー
Eishi Saito 総務
SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。
sasakki デザイナー
アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。
しまだ デザイナー
WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。
Miu マーケター
ドイツでWEBマーケティングしています。
しんのき エンジニア
主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。
やまかわたかし デザイナー
フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReact NativeやReact360をよく触っています。
furuya エンジニア
サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。
Sayaka Osanai デザイナー
Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。
はらた エンジニア
サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています
うえまつゆい エンジニア
サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。
こぼり ともろう エンジニア
サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。
ささい エンジニア
フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。
Damien
WebAR/VRを中心に企画やディレクションやエンジニアもちょっとやっています。森に住んでいます。
