2017年時点でもっとも全方位をめざすデザインツール Gravit Designer

Risa Yuguchi
7 min readMay 7, 2017

--

Adobe/Macromedia Fireworks がCS6で新規開発が停止になったのは丁度2013年の今日5/7。Fireworksユーザに衝撃とやっぱり感が襲った日でした。記念日でもあるので今回はデザインツールGravit Desinger v3を紹介したいと思います。

2017/05/07現在バージョンはv3.0.5。私が試したのはWindows版で他のプラットフォームで試したわけではないことに注意してください。

2017/05/09追記:日本語の表示は、日本語フォントをimportした上テキストのSpace(Char)を20前後にすると一応できます。しかし、直接のタイプはできません。

限りなく全てに近いクロスプラットフォーム対応!

Gravit Desiner v3は、MacOS版、Windows10版(Store版とインストール不要なバージョンがある)、さらに、Linux版、Chrome OS版が存在します。

ブログによるとネイティブアプリだそうなのですが…もともとはElectornを使ったアプリであることを考えるとv2→v3はかなりの変更になっていそうです。

近いうちにiOS、Android版も公開される予定なので、Windows以外のタブレットでデザインツールの定番になるかもしれません。期待して待ちましょう!

イラスト、印刷/スクリーン向けデザインなんでもコレ一本で!

新規ドキュメント作成時のドキュメントサイズテンプレートは印刷からPC向け、モバイル向け、そしてSNS向けが選べて大変多彩です。

(個人的にはちょっと色気を出しすぎて、選ぶのも大変だろうという印象も受けました。)

標準で用意されているサイズセットはかなり豊富

SNS向けテンプレートが大変便利

最終的に仕様確認したほうが良いですが、SNSはウェブサイト以外の広告チャンネルとしてよく使われますし、カバーのような定型サイズが必要なものをサイズ確認しなくても作れるのは好印象です。

印刷向けサイズとしてA4が準備されているのには驚きです。日本でもユーザがいるのでしょうか?個人的にはRGBよりも印刷特有の機能をカバーしていれば良い気もしますがそういう部分はもうちょっとかもしれません。

UIの独自性

21世紀向けに進化したデザインツールであるけれど、Fireworksの後継的なモノ(Adobeによる後継プロジェクトではないのでフォロワーという方が正しいかも)を目指しているようで、配置は一見Sketchに代表されるような今風のデザインツールらしいですが、操作性はよりFireworksに似ています。

ざっとさわって興味を惹かれた・役に立ちそうな機能をいくつか説明しましょう。

ページシステム

Fireworksからの流れを一番感じる機能。マスターページシステムがあるためか、いまのところページには複数のキャンバスを持つことはできない点が今後実装が予定されているプロトタイプ機能にどう影響をあたえるか気になります。

HTML/印刷でも使えそうなページ自体にMarginを持たせられる(レイアウト的な強制力はない)設定項目は今後生きてくるのではないでしょうか。

テキスト

1行テキストと複数行テキストエリアを選択できるもので、デザインツールとしては一般的なタイプ。しかし、デフォルトのフォントがWeb Fontであったり、高さだけ固定/幅だけ固定できる複数行テキストにできるのはスクリーン向けデザインでは使い勝手がよく◎

日本語フォントは選択肢にないのでシステムフォントを使うほうが良さそう

グループ内の要素選択に一工夫あり

グループの設定に、「Click-through this element」というそのグループはマウスで選択されないで中の要素を直接選択できるという設定があります。これはマスターページの固定要素に使っておくと、タイトルなどの変更が楽になりました。ダブルクリックの手間が省けます。

カラー設定

In Useという使用済みカラーリストが標準で存在するところが使いやすいです。カラースウォッチは増えてくると不安ですがドキュメント単位・グローバル単位と分けて登録できるのでよく使うワイヤーフレーム用カラーなどをグローバルに指定しておくと便利に使えるでしょう。

独特のカラーパネル。MixerはFireworksにあった懐かしい機能

Appearanceにあるshare styleを設定しておけば、それがついているものはsyncボタンで反映できます。色だけでなく最初に設定しておいた属性すべてが反映されます。特に設定はないのでこちらはドキュメント内のみで有効のよう。

予定されているが存在しない機能

プロトタイプ

ページを繋いでプロトタイプを作れるとのこと。アニメーションの対応が予定されているのでマイクロインタラクションやボタンステータスのデザインが加えられるようになるのではないでしょうか。

シンボル

すでにあると思いこんでいて探しましたが、今のところ存在しない様子。ページにマスターページ機能があるので代替できるものもあるでしょう。

最後に

なぜGravit Designerを選んだのか、このタイミングで紹介したのかを。

Gravit Designerは2013年夏から開発が始まっていたAdobeとは関係ない、しかしFireworksに近しい人達によって制作を開始されたデザインツールです。だからGravitはFireworksゆかりのデザインツールの一つです。

開発当初からクロスプラットフォームで使えるアプリケーションがうたわれていたものの、今年になるまでMacのみでブラウザ版があるからかろうじてクロスプラットフォームといえる状況でGravitに対する興味はかなり薄れていたのですがv3で宣言通りのクロスプラットフォームとなったタイミングが重なったのでこのタイミングで紹介記事を書きました。

デザイン以外の開発環境に合わせて選べるデザインツールが高機能で、十分代替になるというのはとても素晴らしいと思います。Adobe XDとは違ったコンセプトを感じるこのオールインワンデザインツールの動向を追っていきたいと思います。

--

--

Risa Yuguchi

UI Designer / Interaction Designer. Adobe Community Evangelist(2017-)