MEGUMI

Adobe XDにできることとは!超便利な5つの機能をご紹介

Adobe XD

最近よく聞ききますよね~。Adobe社の最新デザインツール「Adobe XD」
実は先日、ロクナナワークショップという勉強会に参加してきて、最新情報をキャッチしてきましたー。

んで!
「XDって聞いたことはあるけど、学習コストが高そうだし、別にイラレとフォトショが使えればいいや~」
と考えているそこのWebデザイナーさん。

そんなこと言わずに使ってみましょー!イラレとフォトショが使えるなら午前中にちょこっとチュートリアルやるだけで習得できますよ。
あと、めちゃくそ鬼クソ便利で鼻血出ますよ、ほんと。(鼻血はウソ)

とは言われても、何がどう便利なのかわからん!というめっちゃ重い腰をお持ちの方。
僕がどう便利なのか5つの機能に絞ってご説明いたしましょう。
(軽く煽ってごめんなさい笑)

 

Adobe XDって?

「Adobe XD」は「Adobe Experience Design CC」の略で、Webサイトやモバイルアプリの「UI/UXデザインツール」になります。

そして、IllustratorやPhotoshopとの違いはなんといってもプロトタイプが作成できる点です!

今まではPhotoshopなどでサイト全体の画像を書き出していた方も多かったのではないでしょうか?
書き出してから確認するとサイトのイメージがつかみづらくて大変ですよね。。

ですが、XDを使えば、画面の遷移からWebページの挙動まで再現することができるんです!
(後々詳しくご説明します)

デザイナーに限らず、Webやアプリケーション開発に関わる人なら使えるようになっておくと作業効率が大幅にアップしますよ。

ちなみに、「Sketch」と呼ばれる似たようなソフトもあるのでよかったら調べてみてくださーい。

 

Adobe XDの便利な機能5選

ではでは。早速Adobe XDの機能を5つに絞ってご紹介したいと思います!
(ほんとはたくさんあるのですが、イラレやフォトショとの違いを簡単に知ってもらうため省略します。)

 

①リピートグリッド

リピートグリッド

1つ目は「リピートグリッド」機能です。
画像やテキスト、またはグループ化した要素を選択したまま、リピートグリッドボタンを押すと、端を引っ張ることで複製させることができちゃいます。

さらに、各要素は等間隔なっており、間を選択すると幅まで操作することができるんです。
今まで『alt』や『shift』ボタンを長押しして複製させていたので大変助かります。pixel単位で調整するの面倒でしたからね(⌒-⌒; )

 

②画像のドロップ配置

画像のドロップ配置

2つ目がXDの看板機能である「画像のドロップ配置」です。

長方形ツールや楕円形ツールであらかじめ画像の高さと幅を指定したボックスを作ってあげれば、そこに画像ファイルをドロップしてあげることで簡単にマスクを作成することができます。

さらに、リピートグリッド機能と組み合わせることで複製させた要素の全てに反映させることも可能です。
今回は1つの画像を全てに反映させましたが、3つの画像を選択してドロップしてあげればそれぞれの画像を順番に反映させることもできちゃいます!

 

③アセットパネル

アセットパネル カラー

3つ目が「アセットパネル」機能です。

デザイン制作では、色の数を3つか4つに限定して作ることも多いですよね。
メインカラー、サブカラー、アクセントカラーみたいに

何度も使用する色は左側のアセットパネルに登録しておくことで、クリックひとつで他の要素にも適用できます
今回はカラーを使用しましたが、文字スタイル(ヒラギノ角ゴなど)も登録することが可能です!

また、右クリックで『カンバスをハイライト』をクリックすれば、どの要素に色を使用したかを確認することができます。
これは意外と知られていない機能なのではないでしょうか、、?( –ω-)ドヤ!

 

④プロトタイプとプレビュー

プロトタイプとプレビュー

4つ目が「プロトタイプ」機能です。

XDには『デザインモード』と『プロトタイプモード』の2つがあります。
デザインモードは静的な編集を、プロトタイプモードではリンクを設定して動的にデザインを編集することができます。

ページ遷移やアニメーションがつくことで、より完成物に近い形で確認できるんです!
これこそイラレやフォトショと違うXDの醍醐味ですね

 

⑤インターネット上での共有

インターネット上での共有

最後が「インターネット上で共有」できる機能です。

画面右上の『デザインスペックを公開』ボタンを押すことでネット上のクラウドサーバーにファイルをアップロードでき、離れていてもチームメンバーやクライアントと共有できます!

また、共有する際にパスワードを設定することもできるためセキュリティの心配もありません。
また、共有画面ではコメント機能もついており、遠隔でデザインの修正点を指摘したり追加の要望をしたりできます。

詳しい機能については時間のあるときにぜひ調べてみてください!

 

まとめ

以上、イラレやフォトショにはないXDの看板機能5選でした〜

今回紹介した以外にも便利な機能はたくさんあるので、一度体験版の無料プランで試してはいかがでしょうか?
リンクを貼っておきますね〜
プランを比較する | Adobe XD

また、初めて使う人向けにXDの使い方が学べるスターターキットも公開されています。
6/19にアップデートされた新機能(四則計算など)の使い方にも対応しているみたいです!

 

ではでは、よきXDライフを〜(o´・ω・o)ノシ