軽やかに走るAdobeXDの使いどころ
note初投稿になります。宜しくお願いします。
「#できるぞAdobeXD」企画ということで投稿させていただきます。
私は制作を始めて10数年間、制作ツールはAdobe Photoshop、Adobe Illustratorを使用していたのですが、最近はAdobeXDを使うことが増えてきました。
AdobeXDが活躍できる場面は、実に幅広く・たくさんあるのですが、今回は、私の思う「Adobe PhotoshopやAdobe Illustratorと比べて、こんなところが便利だぞ」というポイント、主に「描画・造形作業」について、デザイナー目線で書いてみました。
1.パターン画像が作りやすいぞ
AdobeXDの代名詞とも言える機能「リピートグリッド」ですが、その使い方は様々です。まず1つ目は、パターン画像を作るときに便利だったので、そのご紹介です。
これまでのAdobeツールでパターンを作るときは、非常に工程が多かったように思います。
例えば、Photoshopでパターン画像を作成する場合の工程は、下記のようになります。
1.画像・オブジェクトを作成
2.パターン登録
3.反映・確認
4.調整
5.パターンを再登録
6.反映・再確認
このように、4〜6を何度も繰り返し、とても手間がかかっていました。
しかし、AdobeXDでパータンを作ると、
1.画像・オブジェクトを作成
2.リピートグリッドに変換
3.調整・反映・確認
となり、半分の工数で仕上げることができます。
どこが違うのかというと、「編集しながら、その結果を反映することができる」という点です。この「結果を見ながら編集できる」という操作が、デザイン思考を止めることなく進められる要因の1つと言えるでしょう。
2.こんな使い方「リピートグリッド」＋「シンボル」もできるぞ
また「リピートグリッド」は、「シンボル」の機能と合わせて使うと、今まででは思いつかないようなパターンに巡り合うことができます。ぜひ、楽しみながら使っていただきたいと思います。
3.表組みが作りやすいぞ
「リピートグリッド」の使い方。2つ目は、表組みです。
よく見てみれば、表も要素の繰り返しですよね。つまり、ここでも「リピートグリッド」が使えるということです。
「リピートグリッド」で表を作成する際に、これまでのAdobeツールより優れている点は、2つあると思っています。
1つ目は、テキストの流し込みがカンタンなこと。
メモ帳などのテキストファイルを、ドラック＆ドロップするだけで流し込めるので、作業負担が少なくてすみます。
2つ目は、編集作業の負担が小さいこと。
Illustratorなどでリサイズをすると、テキストが長体（平体）に変形してしまうのですが、AdobeXDでは、変形しないので、調整がスムーズにできます。
4.CSSを編集するようにデザイン調整ができるぞ
AdobeXDの持つ機能「アセット」を使うと、まるでCSSを編集するようにデザインを調整することができます。「アセット」とは、ドキュメント内の要素を効率よく管理・編集するためのパレットです。
例えば、
・ページタイトル
・見出しテキスト
・本文テキスト
・キーカラー
などの要素を「アセット」に登録しておくと、「アセット」を編集するだけで、ドキュメント内にある共通する要素をまとめて編集することができます。この方法で作成・編集すると、ページ数（アートボード数）が多くなったときの編集作業を、CSSを編集するような感覚で作業ができるので、とても効率よく作業ができます。
5.デザインのデバイス展開が驚きの早さだぞ
また、「アセット」をうまく活用すると、デザインのデバイス展開（スマホ→PCへの展開など）を、とてもラクに作成することができます。
方法は、先ほどの「見出しテキスト」などの要素を、シンボルに登録することでできます。
シンボルには、フォント情報の他に、ポジション（XY座標）、エリアテキストのサイズ（幅と高さ）も含んでいるので、レイアウト変更も一括でできる素晴らしさがあります。
サンプルのアニメーションgifでは、スマホをPCに展開しています。左のアートボードを操作しているだけで、右のアートボードもみるみる修正されていく様子がご覧いただけると思います。
最後に
いかがでしたでしょうか。
これまでのAdobeのツールでは難しかった作業を、カンタンにできたのではないでしょうか。
しかも「軽やか」に。
実は、この「軽さ＝軽やかさ」こそ、AdobeXDの最大の強みではないかと思っています。理由は、あらゆる操作・機能が活きるのは、この「軽さ＝軽やかさ」があってこそ実現できるからです。
今回はデザイナーの制作フローに偏ったご紹介をさせていただきましたが、冒頭で述べた通り、AdobeXDの魅力はこれだけではありません。それは、他の方の投稿をご覧いただければおわかりいただける通り、実に様々な使い方をされています。ぜひ、自分らしいAdobeXDの使い方・発見をして、充実した制作ライフを過ごしていただければ幸いです。