お役立ちコラム

Adobe XDでwebサイトデザイン・ワイヤー作成の効率アップ

本コラムをご覧の皆様、Adobe社の「XD」というソフトをご存知でしょうか?Webサイトのデザインに関わる方や、Adobeの月額制サービスCreative Cloudをご利用の方は聞いたことがあるかもしれません。
XDは、eXperience Designの略称で、webサイトのUI/UXデザインとプロトタイプの作成ができるソフトです。これまではCreativeCloud加入者しか使えませんでしたが、今年5月にスタータープランとして無料版の提供がスタートし、誰でもその恩恵にあずかることができるようになりました。

これまでwebサイトのデザインを行うツールとしては、同じAdobeのphotoshopやIllustrator、最近ですとsketch等が挙げられますが、XDは特にプロトタイプの作成において他のツールを凌ぐ利便性を持っています。一方で、細かいデザインについては前述のツールに譲ります。

XDの特徴・メリット

・動作が軽い
・adobe製品に慣れた人なら直感的に操作できるインターフェイス
・photoshop・illustratorのデータが読み込み可能
・画像書き出しが簡単
・アセット機能によるデザインのコンポーネント化が可能
・プロトタイピング機能により実動に近いサンプルが作成可能
・リピートグリット機能によりプロトタイプ作成業務が簡略化
・プラグイン機能←New!

などが挙げられます。

特徴1 動作が軽い
何よりもメリットとしてあげられるのが動作の軽さです。Windowsの場合64bitバージョンであることが必須となりますが、スペックの高くないPCでも問題なく軽快に動作します。
特徴2 インターフェイス
主だったメニューアイコンはillustratorやphotoshopと共通となっています。
いずれかのソフトを使ったことがある方はもちろん、初めてXDを触った方でも戸惑うことは少ないのではないでしょうか。

特徴3 photoshop・illustratorのデータが読み込み可能
Photoshopやillustratorで作成したデータをXDに直接読み込むことが可能です。プロトタイプ機能だけを使う場合などに有用です。
特徴4 画像書き出しが簡単
作成したデザインを書き出しする場合も簡単な動作で書き出しが可能です。ページ全体・オブジェクト毎を選んで書き出しができるほか、画像倍率も設定可能なためスマートフォン対応も容易です。
特徴5 アセット機能によるデザインのコンポーネント化
ヘッダーやフッターなど、各ページ間でデザインが共通となる箇所をアセットとして共通化し、管理が容易となります。オブジェクトだけでなく、文字スタイルもアセット化できるため、タグに対してデザインを規定している場合など迅速にスタイル適用が可能となります。
特徴6 プロトタイピング機能による実動に近いサンプルが提供可能
XDに備えられた特徴的な機能としてプロトタイプ機能があります。この機能は、ページ内の特定の要素をクリッカブルにし(昔よく使われた画像に対するクリッカブルマップがイメージ的に近いかもしれません)、ページ遷移ができるようになります。例えば、スマホサイトのデザインでメニュー展開前後のデザインを用意し、ハンバーガーメニュー部分にクリッカブル設定を行えば、メニューが開閉するイメージを作成できます。
単なる一枚絵では動きの確認までは難しいですが、このプロトタイプ機能を使えばかなり精度の高いサンプルが作成でき、後工程に差し掛かってからの戻りなども減らせるかもしれません。
特徴7 リピートグリッド機能によるプロトタイプ作成の簡略化
プロトタイプ作成はなかなか面倒な作業ですが、XDに備えられたリピートグリット機能は特定のデザイン要素の繰り返しを一気に作れる機能です。Webデザインにはリピート要素がつきものですが、リピートグリットでわざわざコピペしていた手間が大幅に削減されます。
画像は、四角形などのオブジェクトをリピートグリットに設定しておけば、複数枚の画像をリピートグリット部分にドラッグ&ドロップすることで一気に配置してくれます。

特徴8 プラグイン機能で機能拡張が可能
今月(2018年11月)のアップデートで実装された機能として、プラグイン機能があります。まだあまり数は多くありませんが、プラグインの豊富さで定評のあるsketchにも肩を並べることになるのではないかと予想しています。

終わりに

このような特徴のあるXDですが、「安い・早い・うまい」の三拍子揃った良ソフトです。デザイン業務の全てを代替え出来るわけではありませんが、特にプロジェクト序盤のワークフローが大幅に効率化することは間違いありません。また、デザイン業務に携わる方だけでなく、企業のweb担当者の方がweb製作会社とのやりとりをする中でラフを作成する場合などでも有用であると感じます。

ぜひ一度お試しいただければ幸いです。