Adobe XD

Adobe XDで爆速ライブデザインTips

Adobe XD(以下XD)でライブデザインを効率的に行う場合の自分なりのTipsです。

ライブデザインって何?

いろいろ定義の仕方はあるかもしれませんが、ここではひとまず「皆で集まってブレスト感覚でデザインすること」としましょう。

メリットとしては、

  • 「テーマカラーは青がいいな」
  • 「もうちょっとボタンが大きいほうがいいな」

みたいな、人によって異なる主観的な要望を、その場で認識を合わせながら形にできることです。
1人でじっくり考えながらデザインしたい!というデザイナーさんも多いとは思いますが、後からガッツリ手戻り来るくらいなら、最初にざっくりと関係者間の合意を得ながらデザインを進めることが結果的に近道だったりすることもあります。

そんなライブデザインにサクサク動くXDは最適なのですが、その場で出たアイデアや要望を形に落とし込んでいくのは、とにかくスピードが大事です。

プロシュート兄貴の言葉を借りるならこうです。

そこでXDをより効率的に使うためのポイントをまとめてみました。

 

XDライブデザインを効率化する3つのポイント

  • UIキット
  • アセットとCCライブラリ
  • ショートカット+α

UIキット

まずはXDにデフォルトで備わっているUIキットをダウンロードして使うのが効率化の第一歩です。

XDのスタートアップスクリーンのUIキットのリンク、もしくは[ファイル] > [UIキットを取得]から各種ダウンロードします。

UIキットをダウンロード

ダウンロードしたファイルの中には、AppleのiOS、Googleのマテリアルデザイン、Microsoft Windowsなどのテンプレートファイルが入っているので、対象となるデバイス向けに適時必要なパーツなどを切り貼りするだけでそれっぽい見た目を素早く作ることができます。

またUIキットの中のWiresは、ブログやWebサイトなどでよくあるレイアウト群やUIが含まれているので、Webコンテンツのワイヤーフレーム作りに便利なセットです。

各テンプレートにはシンボル化されたパーツも含まれていますが、別のXDファイルにコピペした時点でシンボルからグループファイルに変換されるので、プロジェクト用に修正して使い回すなら改めてシンボル化しておきましょう。

これらのファイルを開きつつ、必要なものだけ持ってきてもよいですが、自分が関わるプロジェクトに最適化したオレオレUIキットを作っておくのもおすすめです。

ライブデザインでは細かいところは気にせず、既存のパーツセットなどを流用して、まずはイメージをおおまかに形作るところから始めましょう。

アセットとCCライブラリ

ファイルの中で共通のカラー、文字スタイル、シンボルをまとめた「アセット」機能と、XDだけではなく他のAdobeツールとも横断的に連携するCreative Cloudライブラリ(CCライブラリ)を活用することで、効率的に使い回しができ、尚且つ後からの修正にも強いデータを作ることができます。

アセットのカラーや文字スタイルは、単に使いたいものを素早く選択するためのパレットではなく、強力な編集機能があります。
例えるならプログラムの変数定義のように、アセットに登録したものを編集することで合致する箇所すべてにまとめて編集効果を与えることができます。

アセットカラー

この編集機能の便利なところは、後出しで登録ができることです。
デザインしていて何箇所かに同じ色が出てきたときに、後からその色をキーカラーとしてアセットに登録しても、すでに使われている同じ色すべてに編集を適用できます。

そしてその効果範囲は、

  • アートボードの背景色
  • XDのツールで書いたオブジェクトの塗りと線、テキスト
  • イラレから持ってきたベクターデータ

など、XD上で色を編集できるものすべてになります。
(CCライブラリのベクターデータも参照できるようになったときに、アセットのカラー編集はどうなるのか興味深いところ)

ただし、便利な反面、白(#ffffff)など極めて汎用的な色をアセットに登録後に編集すると、思わぬところまで編集効果が出てしまうので気を付けましょう。

CCライブラリは参照のみとなりますが、プロジェクトを通して共通のブランドカラーやロゴデータ(ベクター待ち)などをまとめておくことで、新しくファイルを作成するときにも素早く共通の世界観で制作することができます。

ショートカット+α

XDだけに限らず、デザインツールを効率よく使うためにはショートカットキーを使いこなすことが有効です。

XDのショートカット一覧はこちら

いきなり全部を覚える必要はなく、まずは自分が普段頻繁に使う機能のショートカットを使ってみるだけでも効果があるはずです。

そしてここからは個人的な意見になりますが、「ゲーミングマウス」とショートカットを組み合わせるととても幸せになれます。

ゲーミングマウスと聞くと、基本的にガチのPCゲーマー向きのデバイスというイメージですが、実はデザイナーやエンジニアにもとても相性が良いと思っています。

まずはボタンがたくさん(10個くらい)ついたゲーミングマウスを用意します。

参考として自分が愛用中のゲーミングマウス

そして各ボタンをカスタマイズしてXDのショートカットキーを割り振っていきます。
おすすめは、第一に自分がよく使う機能、第二に複数のキーを使うもの(特に片手では入力し辛いもの)を登録していくといいんじゃないかと思います。

ゲーミングマウス
親指シフトキーを押すことでボタンを切り替えることが可能

こうすることで、ショートカットキーを発動するために一瞬キーボードを確認することも無く、画面を見たままマウスを握る手の指先一つで各種機能を呼び出すことができ、さらなるスピードアップを図ることが可能です。
(個人差あり)

ちなみにアプリケーションごとにカスタマイズできるので、アプリを切り替えても大丈夫です。

弊害としてオレオレショートカット付きマウスに慣れてしまうと、PC単体になったときに著しくパフォーマンスが低下するのと、LTなどの場面でもマイマウスとマイマウスパッドを持ち歩く必要があるため機動性に欠けるということがあります・・

 

以上、XDのライブデザインを加速させるTipsでした。