Adobe XDとは
一言で説明すると、UI/UXデザインツールです。
プロトタイピングツールとも呼ばれ、ワイヤーフレームからデザインカンプ、アニメーションも含めたモックアップまで制作できるデザインツールです。
毎月アップデートが実施され、どんどん機能が追加されています。
https://www.adobe.com/jp/products/xd.html
スタータープランが存在するので、無料アカウントでも基本機能を利用できます。
大阪 Adobe XD meeting #04の概要
全国6都市に存在する、XD好きが集まるユーザーグループ。
その大阪版「大阪 Adobe XD Meeting」の第4回目の勉強会&交流会に参加してきました。
主宰はWEBデザイナー・講師として幅広く活躍されている松下絵梨さん。弊社スタッフも生徒としてお世話になっている方です。
今回の勉強会は2部制になっており、1部はXD初級者に向けたツールの基本機能や使い方についてのセッション。
2部からは、さらに突っ込んだXDの機能や、おすすめプラグインについての解説。
後半は特別講師の森 和恵さんを迎え、XDをとにかく掘り下げた内容でした。
勉強会後の交流会にも参加してきましたよ!
タイムテーブルは下記をご覧ください。
タイムテーブル
開始 | 終了 | 内容 |
---|---|---|
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はアニメーションをデザインに設定し、それをプレビューして再生する事ができます。
↓プレビュー画面
↓画面操作の様子
プラグインの追加
さらに特徴的なのが、プラグインによる機能拡張です。
一応、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の普及率は決して高くありませんが、この機会に導入を啓蒙していこうと思います。