「Adobe XDを使おうか迷っているけど、使い勝手は？」と 思うWebデザイナーさんも多いのではないでしょうか？ 現在でも「Photoshop」や「Illustrator」などは、制作現場で今だ定番ですし、XDを使うか迷いますね。しかしXDは定番ソフトより、さらに効率よくデザイン・共有が可能で最近は欠かせないツールとなりつつあります！そこで今回、WebデザイナーがXDを使うメリットやデメリット、さらにオススメ「プラグイン」なども紹介します。
前編はこちら
【Adobe XD活用】Webディレクターに使ってほしい分かりやすいイメージ共有法 ～前編～
目次
■WebデザイナーがAdobe XDを使う7つの『メリット』
1. ファイルや動作が「軽い」
XDを使う一番のメリットは 、XDはとにかくファイルや動作が軽いということ。デザイナーは複数ページやデバイスデザインを1つのデータ内にまとめ作ることが多いと思いますが、PhotoshopやIllustratorだとデータが重くてフリーズしたり起動時間がかかり、ストレスになることも多いでしょう。
しかし、XDはファイルが軽い上、長時間の操作でも重くならず、フリーズや画面が落ちる心配も少ないのでスラスラとデザインに集中できます。 そのため、上記の悩みがある方には、ぜひ使用して欲しいツールです。
2. 初心者でも「使いやすい」シンプルさ
XDは画面や操作が比較的シンプルで、初心者でも使いやすいと思います。例えば、Adobe製品は様々な機能が搭載され、ツールバーなども複雑なので、特に初心者は慣れるまでに多くの時間がかかります。
しかし、XDは画面がとてもシンプルで使いやすい以外にも、新人教育などのコスト面でも、比較的少ない投資で行うことが可能です。
そのため、Photoshopなどからの乗り換えを検討している人や、これからWebデザインを学習したい人にもよいツールでしょう。
3. 「リピートグリッド」で繰り返しコンテンツを簡単に作成
ブログの記事一覧部分のような、繰り返しが発生するコンテンツは「リピートグリッド」モードで簡単に作成できます。例えばPhotoshopだと、コピー&ペーストでそれぞれのコンテンツ間の設定を細かく行わなくてはなりません。
しかし、XDならリピート作成後に余白や配色なども一括編集でき、テキスト情報は個別で変更できるので、効率的なコンテンツ作成ができるので非常に便利です。
4. オブジェクトの「画面固定」ができる
固定ヘッダーなど、画面固定したいコンテンツをプレビュー時にそのまま表現。 他ツールでのデザインなら「ヘッダーは固定されます」など、コメントで「仕様」をクライアントやコーダーに伝えなくてはなりませんが、XDはその必要がありません。
静止画だけで伝わりにくいイメージ伝達時に重宝するオススメの機能です。
5. ページ遷移時の「アニメーション設定」ができる
ページ遷移時のエフェクトや秒数指定など、細かい「アニメーション設定」ができ、「イメージ共有」がしやすくなっています。 近年、ページ遷移時のロゴ表示、ふわっとページを表示させるなど、様々なアニメーションが付いたサイトが多くなっています。
XDはプレビュー時に設定アニメーションの確認ができるので、イメージ共有をする時の伝達の手間も減らせます。
6. 修正箇所への「直接コメント」機能
XDはデザインに対する「コメント機能」がついています。そのため、クライアントやプロジェクトメンバーとスムーズなやりとりが可能です。フィードバックの修正箇所が箇条書きなどで送られてくることがよくありますが「指摘部分がわかりづらい・記入ミス」の問題もあります。
ところが、XDでは修正希望箇所に「直接コメント」ができるため、確認ミス・先方の記入漏れ防止、スムーズなやりとりが実現できます。
7. スマホでの「プレビューがリアルタイム」でできる
XDでは、「デバイスプレビューモード」があり、ほぼ「リアルタイム」でプロジェクトの配置や削除後のプレビューができます。Photoshopでも以前は「Adobe Preview CC」のプレビュー機能がありましたが、Photoshop CC 2018でその機能が削除されました。
XDはデフォルトでプレビュー機能があり、さらに動作が軽いため、サクサクとスマホやタブレットでの確認ができるので、使い勝手や時間効率のよさを発揮してくれます。
■WebデザイナーがAdobe XDを使う3つの『デメリット』
1. 画像レタッチやレイヤー効果ができない
XDはとても便利である一方、もちろんデメリットの部分もあります。 XDでも簡単な「ぼかし」や「シャドウ」を入れられますが、『光彩・オーバーレイ・細かなシャドウ』のようなレイヤー効果はできず、バナーや写真メインのWebサイトデザインは苦手のように思われます。
どうしても「レタッチ」や「レイヤー効果」が必要ならPhotoshopからの共有もありますが、修正の手間などを考えると『初めからPhotoshop』の方がよいでしょう。
2. テキストの詳細な調整ができない
XDでは文字を円形にする、縦文字と言ったテキスト周りの調整ができません。 そのため、テキストの調整にはPhotoshopやIllustratorで作成後、共有する方がよいでしょう。
3. 大量の画像書き出しが面倒
XDでデータを書き出す際は「選択レイヤー（グループ）を書き出す」という方法をとっており、少量なら問題ありません。しかし、大量の画像データの書き出しが面倒です。
また『PNG・SVG・PDF』の画像ファイルに対応した倍率指定は可能ですが「jpgに未対応」なので、納品ルールによってjpgに再変換しなければなりません。そのため、デザイン内容や納品ルールによって使いわけることをオススメします。
■デザイナーは覚えておきたい!! Adobe XDオススメ『プラグイン』3選
XDにはデザイン効率をグッと上げる便利な「プラグイン」が沢山あります。 今回は、デザイナーにオススメのプラグインを3つ紹介。 効率的なデザインをしたい人はぜひチェックしてみてください。
1. 『Google Sheets』
「Google Sheets」は、Googleスプレッドシートからデータ読み込み、選択オブジェクトのテキストと画像置換をオートで行ってくれるもの。デザインで地味に面倒な「原稿入れ込み」、その手間を減らすのでデザインに集中できます。
また、テキストを「改行付き」で反映、入れ込み後の調整が必要ありません。 中・大規模案件のページデザインではデータ管理が大切になるので特にオススメです。
2. 『Mimic』
「Mimic」は参考サイトのURLを入力するだけで、「カラー・フォント・画像情報」などを抽出、一覧表示してくれるプラグイン。 サイトデザイン前に競業他社の検索をしたりする時、参考箇所をいちいちメモする手間もなく作業効率もアップ。
また、画像も併せて取得できるので、ラフ案を急いで作らなくてはいけない場合、重宝するプラグインです （※そのままの流用は、著作権に障るので控えましょう、念のため）。
3. 『Ikono 』
様々なアイコンプラグインの中でも「Ikono」はアイコンの線幅を選べる優れモノ。 もちろん、線幅以外にカラーや白抜きも選べます。 Ikonoのアイコンはフォントで作成され、パスとして扱う場合は画面左下の『insert icon as path』にチェックすれば「パスデータ」でも使用できます。
■まとめ
Adobe XDは、最近のデザイナーには欠かせないツールと言っていいほど、様々な機能がついたツールです。またプラグインの使用で、さらに効率的にスピーディなデザイン作成ができます。
もちろん、便利なツールではあるものの、得意と苦手部分があるので使いどころをしっかり見極め使用しましょう。
