【おすすめ】Webデザインの新ツールAdobe XDの使い方や機能

この授業は次のような方におすすめです。

この授業を最後まで受けると、Adobe XDについてのこれらの疑問が解消します。

どうぞ最後までご覧になってください。

Adobe XDとは

先生

Adobe XDというのは、Webサイトやアプリ開発をするために利用するデザインツールなんだ。

シンプルな機能性と簡単に操作することができることから、たくさんのクリエイターが使っています。

デザインやプロトタイプを作成できるのですが、最近アップデートされて、Photoshopとの連携もこれまでより簡単になったり、Sketchファイルにも扱えるようになったりしています。

先生

これからはPhotoshopに変わってAdobe XDが主力になってきそうなんだ。

Adobe XDの使い方がわかるおすすめ本

先生

まずは、Adobe XDの使い方がよくわかる本を1冊紹介するね。

豊富な作例で学ぶAdobe XD  Webデザイン入門

Adobe XDでできる5つのこと

先生

Adobe XDでは次の5つのことができるんだ。

①Adobe XDでイメージの共有

IllustratorやPhotoshopで作っていた時は、ページ全体を画像で書き出してイメージを共有していましたが、これはXDでもできます。

ページ全体のトーン&マナーが整っているかやコンテンツの順序を確認する時などに便利です。

しかし、ページ全体の画像であると、ヘッダーやCTAボタンなどといったついてくる要素や、リンクボタンにカーソルを重ねた時の動き、クックしたらどこへリンクされるかなど、Webサイトに実装した時にどう見えるかのイメージの共有が難しかったのです。

先生

Adobe XDだと、プロトタイプを作ることで、実際にどうなるかを擬似的に共有することができるんだ。

リンクを作成のボタンを押して、それから発行されたURLを、相手に送ることでブラウザ上でそのデザインを確認することができます。

先生

共有する相手がAdobeのアカウントを持っていなくても確認してみることができるんだ。

初期設定ではURLを知っている方みんなが見ることができますが、セキュリティをしたい場合はパスワード設定をすることもできます。

②コメント機能

先生

Adobe XDでは、メモやメッセージなどを使わなくても、XD上でコメントを残したり、制作チーム間で自分の考えを伝えることができるんだ。

XD上でコメントをするとメモも含めて1つのデータで管理が可能なので、メモのデータがどこに行ったかわからなくなった、といったトラブルを防ぐこともできます。

先生

さらに共有している制作チームからもコメントをすることができるから、修正などの指示も簡単に共有できるんだ。

③パスや結合機能を使ってオブジェクトが作れる

先生

そしてXDでは、Illustratorでするような複雑な形のオブジェクトを作ることもできるんだ。

デザイニャー

だったら、Illustratorを開かなくても良いから作業が楽になるし、デザインの幅も広がるんじゃないのかニャン!

先生

Webで使われることが多い矢印やアイコンもXDで作ることができるのが便利な点だよ。

④リピートグリッドで作業を効率化できる

さらに便利な機能にリピートグリットという、同じ要素をコピーして並べることができる機能があるんだ。

使い方はとても簡単で、

デザイニャー

こんな簡単な作業をするだけで、楽にコピーや整列ができるなんて素敵な機能だニャン!

先生

Adobe XDでは、感覚的に作業ができるように単純化された操作ができるので、Photoshopよりも作業時間を短くすることができるんだ。

Photoshopでしかできない3つのこと

先生

Adobe XDでできなくてPhotoshopでできることは次の3つだよ。

①写真の編集・加工

Photoshopは元々画像を編集することができるソフトなので、写真や画像を加工する時に必要な機能が揃っています。

XDでは写真の編集はできないんだけれど、Webサイトはほとんどが写真が載っているため、DXでデザイン制作をしているときに、Photoshopを開くことがかなり必要になります。

②レイヤー効果

Photoshopにはレイヤー効果という、ドロップシャドウやベベルといった目に見える効果をレイヤー上のオブジェクトに使う機能があります。

先生

ところがXDではレイヤー効果が使えないんだ。

グラデーションやシャドウなどのレイヤー効果と同じ役割をする機能はありますが、ベベルやエンボスやシャドウ（内側）などの機能はXDにはありません。

先生

でも最近では、フラットデザインのサイトが流行っているので、あまり問題ないような気はするんだけどね。

③ヒストリー機能

ヒストリー機能とは、データを開いたところから行った作業を1つずつ遡ることができる便利な機能なのですが、これもDXにはありません。

先生

ただ、クラウドドキュメントに保存してあれば、保存ごとに遡ることが可能なので、前回保存したところまで戻る分にはXDの方が便利かもしれないね。

WebデザインでAdobe XDを使うのが良い8個の理由

先生

WebデザインをするときにAdobe XDを使うのが良い理由は次の8個だよ。

①動作やファイルが軽い

Adobe XDを使う方が良い一番の理由は、とにかく動作やファイルが軽いからです。

PhotoshopやIllustratorだとデータが重くて起動時間が長くかかることもあり、ストレスに感じることも多いでしょう。

Adobe XDは、1500枚というアートボードを作っても60fpsで動くようで、どんなに画像やページがたくさんあっても、快適に作業することができます。

長時間操作していても重くなることがなく、フリーズしたり画面が落ちたりする心配もあまりないので、デザインに集中できます。

②初心者でも使いやすい

Adobe XDは、画面や操作がシンプルなので、初心者でも使いやすいです。

シンプルでありながら、Webデザインをするのに必要な機能はしっかり備わっていて、誰でも直感的に操作することができます。

その上、XDは会社の新人教育などでも比較的少ない投資で行うことができるので、Photoshopから乗り換えようと検討している方や、これからWebデザインを始めたい人にとっても良いツールでしょう。

③「画面固定」ができる

先生

Adobe XDでは、固定ヘッダーなど、画面を固定したいコンテンツをプレビュー時にそのまま表現できるんだ。

他のツールでは、コメントで「ヘッダーは固定されます」と、クライアントやコーダーに伝えないといけません。

静止画だけでは伝わりにくいことを伝えるのに重宝するAdobe XDのおすすめの機能です。

④「アニメーション設定」ができる

先生

Adobe XDでは、ページ遷移するときのエフェクトや秒数指定などの細かいアニメーション設定をすることが可能で、イメージ共有がしやすいんだ。

最近では、ページ遷移する時にロゴを表示させたり、ページをフワッと表示させたりすることもできるなど、色々なアニメーション設定ができるWebサイトが多くなってきています。

XDは、プレビューする時に、こういったアニメーション設定ができるので、イメージ共有をするときの手間を減らすことができます。

⑤スマホへのプレビューがリアルタイムでできる

先生

Adobe XDでは、「デバイスプレビューモード」という機能があって、プロジェクトの配置や削除後のプレビューが、ほぼリアルタイムでできるんだ。

以前はPhotoshopにもAdobe Preview CCという機能がありましたが、Photoshop CC 2018からはその機能が削除されました。

Adobe XDにはデフォルトでプレビューできる機能があって、さらに動作が軽いので、スマホやタブレットでの確認がサクサクとできるので、使いやすいし、時間効率も良いです。

PC向けのWebサイトのプレビューは製作中のPCでも表示することができます。

スマホ向けのプレビューもPC画面で表示することができますが、実際の雰囲気により近いプレビューを出すためには、スマホ用のXDアプリを利用することで、スマホ上でどうなっているのかをリアルタイムでプレビューすることができます。

⑥デザインをすぐに試せる

Adobe XDは、人間の思考と同じ速度でデザインを実現することが可能です。

打ち合わせ中などにでたアイデアをその場でデザインとしてすぐに試すことができます。

⑦「スタック機能」でオブジェクト内のマージンをまとめて編集できる

先生

Adobe XDでは、グループ内のオブジェクト間の余白を一括で編集することができるんだ。

オブジェクトを入れ替えたり追加したりしても同じ余白を保つという便利な機能を持っています。

⑧アイコンを使ったデザインができる

Adobe XDではアイコンなどの作成ができるので、Illustratorを開いておく必要はありません。

形や色を変えたい時も、周りのデザインに雰囲気を合わせながらできるので、アイコンに対する違和感をなくすこともできます。

WebデザインでAdobe XDを使う3つのデメリット

先生

逆にWebデザインでAdobe XDを使うデメリットは次の3つだよ。

①画像レタッチやレイヤー効果が使えない

先生

Adobe XDでは、ぼかしやシャドウを入れることはできますが光彩やオーバーレイ、細かなシャドウのようなレイヤー効果はできな胃から、バナーやしゃしんがメインのWebサイトデザインは苦手なんだ。

レタッチやレイヤー効果が必要であれば、Photoshopから共有する方法ありますが、修正にかかる手間と時間を考えたら、初めからPhotoshopを使った方が速いでしょう。

②テキストの詳細の調節ができない

Adobe XDでデータを書き出すときは、「選択レイヤーを書き出す」という方法をとっているので、少量であれば問題はありません。

しかし、大量に画像データを書き出すときは少々面倒です。

また、「PNG・SVG・PDF」の画像ファイルに対応している倍率指定をすることはできますが、「jpg」には対応していないので、納品ルールによってjpgに再変換しないと行けなくなります。

なので、デザイン内容や納品ルールによって使い分けることが必要です。

Webデザインに役立つAdobe XDの5つのおすすめプラグイン

先生

Adobe XDには、作業効率を上げるのに便利なプラグインがたくさんあるんだ。

デザイニャー

XDについている標準機能だけでも十分便利なんだけど、さらに便利なプラグインがあるんだニャン。

先生

ここでは、Webデザイナーにおすすめなプラグインを5つ紹介するよ。

①Google Sheets

Googleスプレットシートからデータを読み込んで、選択オブジェクトのテキストと画像置換を自動的に行ってくれるプラグインです。

デザインするときにちょっと面倒な原稿入れ込みの手間を減らしてデザインに集中できます。

テキストを改行付きで反映することもできて、入れ込み後の調整をする必要がありません。

②Mimic

参考サイトのURLを入力することで、「カラー」「フォント」「画像情報」などを抽出して一覧表示してくれるプラグインです。

Webサイトのデザイン前に競業他社の検索をする時に、参考にする部分をメモする手間が省けて作業効率もアップします。

画像も一緒に取得できますので、ラフ案を急いで作る必要がある場合に便利なプラグインです。

ただ、そのまま流用するのは、著作権のこともありますので、控えましょう。

③Ikono

Ikonoは、アイコンプラグインの中でも、アイコンの線幅を選ぶことができる便利なプラグインです。

線幅以外にも色や白抜きも選ぶことができます。

Ikonoのアイコンはフォントで作成されていて、パスとして扱う場合は、画面左下の「insert icon as parh」にチェックを入れることで、パスデータとして利用できます。

④Resize Artboard to fit Content

アートボードのサイズをオブジェクトに合わせてくれます。

アートボードを縦に伸ばしすぎても、「Control ＋ F」でぴったり合わせてくれます。

⑤Sprit Rows

改行区切りのテキストを、１行ずつに部会してくれるプラグインです。

ワイヤーフレームなどの原稿をXDに流し込んでからレイアウト変更をするときに便利です。

Adobe XDの実践についてのおすすめ記事

先生

Adobe XD の実践について詳しく書かれた記事を見つけたから、ここでご紹介しておくね。

>>Adobe XD でWebデザインをしよう！画面作成からページ推移までの手順を紹介

まとめ

先生

この授業では次の32個のことについてお話ししてきたよ。

デザイニャー

Adobe XDというのがとても便利なツールだということがよくわかったニャン。

先生

そうだね。これからWebデザインをする時には、Adobe XDを使えるようになると、クライアントや制作チームとイメージの共有もよりスムーズになるから覚えておきたいね。

私たちは頑張るあなたを応援しています。