Adobe XDの簡単な使い方を初心者向けに紹介！プラグインなし

Adobe XDの簡単な使い方を初心者向けに紹介します。プラグインなしでできる内容になっています。

Adobe XDの最低限のデザイン方法！プラグインなし

Adobe XDを速く使う上で超基本のテクニックについて紹介します。

これはAdobe XD関係なく超基本なのですが、デザインを作成するときはまずPC版またはPC版かSP版のトップのみ作りましょう。

（PCかSPかは、そのサイトがどちらでよく見られるものかによる）

そうすることで修正の手間が省けます。

ここでOKもらえたら、以下のような要素は他のページでも使い回しましょう。

要素をグループ化して、崩さないようにしましょう。例えば、グループ化必須の要素として例えばあげられる要素が、「ボタンの背景」と「ボタンテキスト」です。

これは、パワーポイントなどを使ったことがある人なら分かるかもしれませんが、かなり基本なので押さえましょう。

グループを解除したいときは、同じように要素を右クリックして「グループ解除」をクリックです。

要素の位置を揃えるための線を引きましょう。

Adobe XDではPhotoshopなどでは引けるガイド線をXDでは引けないのですが、「ガイド線のもどき」であれば引くことができます。

画像の左側のボードのような縦線、右のボートのような方眼を引くことができます。

同じような要素は「繰り返し」「要素間の幅を同じ間隔で」使うためにリピートグリッドを使いましょう。

右上の赤で囲まれている矢印ボタンを押して、実際にどう見えているか確認しながらデザインしましょう。そうすることで、文字の大きさ、余白などを全体のバランスを見て適切か判断できます。

上の画像のように、実際の画面を見ることができます。

まずは、あらかじめサイト内でよく使うパーツを洗い出して、繰り返し使えるようにしておきましょう。

あらかじめよく使うパーツを洗い出したら、それらの要素を装飾して登録しましょう。

これをシンボル化と言います。10秒でできます。

最初に装飾までしたパーツを登録したら、あとは繰り返し使いまわすだけです。

表を作る場合は、エクセルで作ってそのままAdobe XDヘコピペできます。

Adobe XDは使いやすいけど、テクニックを使わないと結構時間がかかってしまいます。

新しいテクニックを身につけるのは、結構めんどくさいですが最低限レベル1を身につけるだけも、デザインにかかる時間が結構変わってくると思うので、試してみることをオススメします。