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

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

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

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

Adobe XDとは

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

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

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

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

 

Adobe XDでできる5つのこと

①Adobe XDでイメージの共有

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

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

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

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

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

②コメント機能

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

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

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

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

使い方はとても簡単で、

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

①写真の編集・加工

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

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

②レイヤー効果

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

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

③ヒストリー機能

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

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

①動作やファイルが軽い

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

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

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

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

②初心者でも使いやすい

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

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

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

③「画面固定」ができる

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Webデザインに役立つAdobe XDの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 でWebデザインをしよう！画面作成からページ推移までの手順を紹介

まとめ

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