Pocket

xdmeeting04

Adobe XDとは

xd

一言で説明すると、UI/UXデザインツールです。
プロトタイピングツールとも呼ばれ、ワイヤーフレームからデザインカンプ、アニメーションも含めたモックアップまで制作できるデザインツールです。
毎月アップデートが実施され、どんどん機能が追加されています。

https://www.adobe.com/jp/products/xd.html

スタータープランが存在するので、無料アカウントでも基本機能を利用できます。

大阪 Adobe XD meeting #04の概要

全国6都市に存在する、XD好きが集まるユーザーグループ
その大阪版「大阪 Adobe XD Meeting」の第4回目の勉強会&交流会に参加してきました。

Facebook

主宰はWEBデザイナー・講師として幅広く活躍されている松下絵梨さん。弊社スタッフも生徒としてお世話になっている方です。
今回の勉強会は2部制になっており、1部はXD初級者に向けたツールの基本機能や使い方についてのセッション。
2部からは、さらに突っ込んだXDの機能や、おすすめプラグインについての解説。
後半は特別講師の森 和恵さんを迎え、XDをとにかく掘り下げた内容でした。
勉強会後の交流会にも参加してきましたよ!

S__13025284

タイムテーブルは下記をご覧ください。

タイムテーブル

開始 終了 内容
15:40 16:00 開場・第1部受付開始
16:00 16:10 第1部オープニング
16:10 17:40 session1「XD for Beginners」
松下 絵梨
17:40 18:00 休憩・第2部受付開始
18:00 18:05 第2部オープニング
18:05 18:30 session2「XD Pick up」
松下 絵梨
18:30 18:40 休憩
18:40 19:20 session3「クイズで学ぼ!Adobe XD《作図&書き出し編》」
森 和恵
19:20 19:30 転換
19:30 20:30 交流会
20:30 終了・みんなでお片付け

続いては、勉強会に参加してみて気づいたXDの魅力をご紹介します。

XDでデザインすべき5つのポイント

  • 1.動作が軽い
  • 2.ワイヤーフレームからデザインまで1つのツールで制作できる
  • 3.アニメーション機能が充実
  • 4.プレビュー・共有機能でクライアントやコーダーとのやり取りがスムーズ
  • 5.プラグインで便利な機能を拡張できる

要点をもう少し解説してみたいと思います。

アニメーション機能

アニメーションは、従来のPhotoshopやIllustratorで制作するデザインカンプでは表現できず、
クライアントに説明する際には頑張って口頭で伝えるか、別に参考を用意する必要がありました。
しかし、XDはアニメーションをデザインに設定し、それをプレビューして再生する事ができます。

↓プレビュー画面

↓画面操作の様子

プラグインの追加

S__13025289

さらに特徴的なのが、プラグインによる機能拡張です。
一応、photoshopなどにも拡張機能(アドオン)は存在しますが、
XDではより手軽に利用することが可能です。

↓プラグインを追加する様子

ここでは、セッション内で紹介されたおすすめのプラグインをご紹介します。

  • Resize Artboard Fit Content -オブジェクトに合わせてアートボードをリサイズしてくれる
  • Swap Fill and Border -イラレみたいに線と塗りの色を入れ替えてくれる
  • PhotoSplash -商用フリーの画像をキーワード検索から配置できる
  • Color Blender -異なる2色を選択して指定数の階調を作成してくれる
  • Content Generator -要素に合わせたダミー文言を生成してくれる(英語のみ)
  • Google Sheets -グーグルシートから文章や画像をインポートしてくれる

まとめ

Adobe XDをはじめとしたプロトタイピングツールは、今後益々使われる場面が増えてくるだろうと感じました。
デザイナーだけでなく、ディレクターやプロデューサーをされている方も多く参加されていましたし、
制作フローの上流から一貫して使えるツールというのが強みです。

もちろん弱点もあって、写真のレタッチにはこれまで通りPhotoshopを使う必要がありますし、
ペンツールはあるものの、パスの取り扱いはIllustratorに軍配が上がります。
かといって、XDのみでデザインを仕上げることが出来ないかというと、
全くそんな事はなく、十分に実用できるツールである事が理解できました。
何より、毎月アップデートが実施され機能がどんどん追加されていますし、
無料プランが存在するなどAdobeの本気度が見て取れます。

私自身はコーダーの立場ですが、デザインをXDで作ってみたいと感じましたし、
コーディングする上でも、XDのデザインスペック共有機能は非常に有用で、
デザインの各部が数値化されるので、制作効率が上がります。

弊社ではXDの普及率は決して高くありませんが、この機会に導入を啓蒙していこうと思います。

Post Navigation