Adobe XDで爆速作業するためのかんたんなTips

スタメンのデザイナーの (@kiyoshifuwa)です。先日、Adobe XD ユーザーグループ名古屋 vol.3にて、XDの作業スピードアップについてのライトニングトークを行いました。そこでお話しした、いくつかのかんたんなTipsをご紹介します。

その１.便利なものは使い倒す

自分は計算しない！「四則演算機能」

数値フィールドに計算式を入力すると、計算結果がフィールドに入ります。 IllustratorやInDesignを使われる方にとってはお馴染みの機能ですね。

自分で計算するよりも速く、また計算ミスも起こらないため変形をするときは必ずこの機能を使うようにしています。

計算の仕方は以下の通りです。足し算：100+2 引き算：100-2 掛け算：100*2 割り算：100/2

また、カッコのついた計算にも対応しています。 (100+50)*2

変形はマウスよりキーボード

少しの変形のためにわざわざマウスを動かすのが面倒なので、Adjust Size by Shortcutというプラグインを使っています。オブジェクトやアートボードのサイズ変更をキーボードで、1px または 10px 単位で行えるプラグインです。 ※デフォルトのショートカットコマンドから、作者様オススメのコマンドに割り当て直して使用しています。

もうこれ無しでは困ってしまうほど便利です✨

アートボードのリサイズは一瞬で終わらせよう

アートボードのサイズをマウスで調整すると、狙ったところにピタッと止まらないことがありませんか？何回もやり直したり、拡大表示してゆっくりあわせたりするのは時間がもったいないです。

Resize Artboard toFit Contentを使えば、なんと一瞬でコンテンツに合わせてアートボードがリサイズされます。さらに、複数のアートボードを選択した場合、それぞれのコンテンツに合わせてリサイズされます。アートボードを長めに用意して、後から縮めることが多い方には大変オススメです。

その2.ショートカットは覚えやすく押しやすく

デフォルトのショートカットを覚えたり、自分で追加したりするのはもちろんですが、早いスピードを求めるのであれば「覚えやすく」「押しやすく」カスタマイズすることをおすすめします！

覚えやすく

ペンツールならpenのP、ロックはLockのLなど、XDには連想しやすく覚えやすいショートカットがデフォルトで用意されています。しかし、中にはキーと挙動がいまいち結びつかないもの、commandだったかcontrolだったかわかりづらいものもあります。ショートカットを間違えて手が止まったり、メニューバーから選んだりするのは時間のロスになるので、わかりにくいコマンドは自分がわかりやすくなるようカスタマイズしています。また、新規で追加する場合も同じです。例えば、小数点以下を切り捨てる「Remove Decimal Numbers」というプラグインを実行するショートカット。デフォルトでは何も設定されていませんが、よく使うので小数点のピリオドをそのまま使い「command+.」に設定してみました。安易な考えですが、連想しやすいのですぐに覚えることができ、業務のスピードアップに大変役立っています。

押しやすく

押しやすさも重要です。「水平/垂直方向中央揃え」のショートカットは「control+command+C/M」です。これは「Center」のC、「Middle」のMで十分覚えやすいのですが、私は連続して使うことが多いので、隣同士でもっと押しやすい位置に変えました。「control+command+ [ / ] 」です。ちなみにPhotoshopでも同じショートカットで登録しています。同じことをしている人は見たことがありませんが、押しやすくてとてもおすすめなのでぜひ試してみてほしいです。