- Coding Methodology
- 第100回 Adobe XDの紹介と今後の可能性
第100回 Adobe XDの紹介と今後の可能性
Web 制作のデザインツールといえばPhotoshop（Mac 環境ではSketch もよく使われています。）がまだまだ主流かなとは思いますが、昨年プレビュー版としてリリースされたAdobe Experience Design（以下、Adobe XD）も注目されています。ということで、今回はAdobe XD について紹介をしたいと思います。
【Adobe XD とは】
一言で言えば、UX デザインツールです。ワイヤフレーム、ビジュアルデザイン、インタラクションデザイン、プロトタイプ化、プレビュー等ができるオールインワンの強力なツールです。
【Adobe XD の特長】
↑弊社デザイナーが制作したXDのサンプルデータです。
1. とにかく軽い！
コンテンツ量が多いPSD データは開くだけで時間がかかるし、使っている間にモタつくこともしばしば。その点、Adobe XD はベクターベースで出来ているのでとても軽く、サクサク動いて気持ちが良いです。
2. サイト全体のページデザインを 1 ファイルにまとめられる。
コーディング時にも都度ファイルを探して開くといった手間も省けますし、サイト全体を見ることができるので共通モジュールの判別もしやすいです。また、各モジュールを個別にシンボル化し、まとめて管理することもできます。デザインに変更があった際、シンボルに変更を加えると全体に反映されるので有難いです。
Photoshop にもアートボード機能がありますが、ページ数が多く、ファイルサイズが大きい場合、PC のスペックによってはメモリ不足で画像書き出しができないこともあります。
【Adobe XD での画像書き出し方法】
↑書き出し時のダイアログ画面。
画像書き出し方法はとてもシンプルです。以下の手順で行います。
- 1. 書き出したいアイテムを選択。
- 2. [ ファイル] → [ 書き出し] を選択。
- 3. 画像名、保存先、書き出しフォーマット（PNG or SVG or PDF）などの書き出し設定をして [ 書き出し] ボタンをクリック。
【Adobe XD の今後】
冒頭でもお伝えしている通り、Adobe XD はまだプレビュー版で現在も頻繁 にバージョンアップしており、今後も新しい機能が追加されていきます。今 後の追加予定の機能の一つに「Spec」機能があり、css コードもXD 上で取 得できるようになるとのことなのでコーダーにとってはより使い勝手の良さ そうなツールになりそうです。
（参考）https://blogs.adobe.com/creativestation/web-collaborative-design-with-adobe-xd
