YU-Create-Lab for Web Creator Webクリエイター・Webデザイナー向けの優クリ-Lab

2019.10.16

【Adobe XD活用】Webデザイナー必見!Adobe XD使用のポイント ~後編~

【Adobe XD活用】Webデザイナー必見!Adobe XD使用のポイント ~後編~

「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は、最近のデザイナーには欠かせないツールと言っていいほど、様々な機能がついたツールです。またプラグインの使用で、さらに効率的にスピーディなデザイン作成ができます。
もちろん、便利なツールではあるものの、得意と苦手部分があるので使いどころをしっかり見極め使用しましょう。 

 

Recommend この記事を読んだ人はこんな記事も読んでいます

【現役Webディレクターの本音シリーズ:最終回】稼げるWebライターになるには?有名になるのが先か、ライターをしながら有名になる方が得か

2018.06.01

【現役Webディレクターの本音シリーズ:最終回】稼げるWebライターになるには?有名になるのが先か、ライターをしながら有名になる方が得か

■なぜ「Webライターの単価は安い」と言われるのか例えばWebライター募集のクラウドソーシングマッチングサイトを覗くと、文字単価計算で「5000字以上」「一文字0,1円~」なんていう募集もザラです。また、実際に多くのWebメディアに寄...

【扶養内で働く】インタビュー編No.2~扶養内で働いている女性デザイナーたちに聞きました

2016.10.12

【扶養内で働く】インタビュー編No.2~扶養内で働いている女性デザイナーたちに聞きました

■今の働き方を選んだ理由―扶養内で働いている理由はなんでしょう?Bさん:夫は正社員なので、子育てや家事のほとんどを私が担当しています。また、子どもがまだ5歳で手がかかるので、両立するのに無理のない範囲で働こうと思い、仕事は週3回だけ働...

Webクリエイターインタビュー 第4回:座談会~雇用形態でどう違う?~

2016.09.29

Webクリエイターインタビュー 第4回:座談会~雇用形態でどう違う?~

【参加者】Aさん 35歳 男性 エンジニア・プロジェクトマネージャー 大学卒業後、IT関連会社に就職。3年後に転職し現在に至る。正社員。Bさん 30歳 女性 Webプロデューサー 大学卒業後、IT関連会社に就職。2年後に退職し、派遣社...

Webクリエイターインタビュー 第3回:フリーランスディレクターはママさん

2016.09.15

Webクリエイターインタビュー 第3回:フリーランスディレクターはママさん

――1日のお仕事のスケジュールを教えてください。打ち合わせなどで外出する日もありますが、それは全体の10%ほど。作業のほとんどを在宅で行っています。上の娘2人は幼稚園とその延長保育、一番下の娘は家で見ながら、打ち合わせの時だけ母や一時...

Webクリエイターインタビュー 第2回:なぜ派遣という働き方を選んだのか?

2016.09.08

Webクリエイターインタビュー 第2回:なぜ派遣という働き方を選んだのか?

――学生時代からクリエイターを目指していらっしゃったんですか?もともとは、編集者志望でした。大学卒業後に求人雑誌を作っている出版社に就職して、2年ほど求人広告の製作に携わりました。その間に出版全体を見ることができて、広告制作のデザイン...

【扶養内で働く】インタビュー編~扶養内で働いている女性デザイナーたちに聞きました

2016.09.06

【扶養内で働く】インタビュー編~扶養内で働いている女性デザイナーたちに聞きました

■今の働き方を選んだ理由―どのようにして今の働き方になりましたか?Aさん:もとはSEでした。昼も夜もないような生活で、結婚を機に退社してしまいました。夫の転勤にともない、どこに引っ越しても仕事ができて、より自分の関心のあるデザインを仕...