Adobe XDの最低限のデザイン方法を初心者向けに紹介します。
- プラグインなしでできる
- 10分で分かる
超初心者向けの内容になっています。
目次
Adobe XDの最低限のデザイン方法！プラグインなし
Adobe XDを速く使う上で超基本のテクニックについて紹介します。
まずはYouTubeで7分で基本を見れます。
まずトップページPC版のみデザイン
これはAdobe XD関係なく超基本なのですが、デザインを作成するときはまずPC版トップのみ作りましょう。
そうすることで修正の手間が省けます。
ここでOKもらえたら、以下のような要素は他のページでも使い回しましょう。
他のページでも使いまわす部分
- 余白
- 配色
- フォントファミリー
- フォントサイズ
- 要素の形（丸みを帯びたボタンなど）
- ボタン
要素をグループ化
要素をグループ化する意味
要素をグループ化して、崩さないようにしましょう。例えば、グループ化必須の要素として例えばあげられる要素が、「ボタンの背景」と「ボタンテキスト」です。
これは、パワーポイントなどを使ったことがある人なら分かるかもしれませんが、かなり基本なので押さえましょう。
要素をグループ化する方法
- グループ化したい要素を「Shift」キーを押しながらクリックして選択
- 右クリックして「グループ化」をクリック
グループを解除したいときは、同じように要素を右クリックして「グループ解除」をクリックです。
ガイド線もどきを引く
要素の位置を揃えるための線を引きましょう。
Adobe XDではPhotoshopなどでは引けるガイド線をXDでは引けないのですが、「ガイド線のもどき」であれば引くことができます。
画像の左側のボードのような縦線、右のボートのような方眼を引くことができます。
リピートグリッド
同じような要素は「繰り返し」「要素間の幅を同じ間隔で」使うためにリピートグリッドを使いましょう。
Adobe XDのリピートグリッドの使い方
- 要素をグループ化して選択
- 右上にある「リピートグリッドを選択」
- 要素をリピートする
- 要素間の幅を調整する
デバイスプレビューで実際の見え方を確認
右上の赤で囲まれている矢印ボタンを押して、実際にどう見えているか確認しながらデザインしましょう。そうすることで、文字の大きさ、余白などを全体のバランスを見て適切か判断できます。
上の画像のように、実際の画面を見ることができます。
あらかじめパーツを作る
まずは、あらかじめサイト内でよく使うパーツを洗い出して、繰り返し使えるようにしておきましょう。
Webデザインよく使うパーツ例
- ボタン
- タイトル
- 一覧（記事一覧など）
よく使う要素はシンボル化する
あらかじめよく使うパーツを洗い出したら、それらの要素を装飾して登録しましょう。
これをシンボル化と言います。10秒でできます。
最初に装飾までしたパーツを登録したら、あとは繰り返し使いまわすだけです。
シンボル化する方法
- よく使うパーツをグループ化して選択する
- 左にある「+」マークを押してよく使うパーツをシンボルに登録する
- シンボルをドラッグ＆ドロップして使う
表やグラフを作る場合エクセルを使う
表を作る場合は、エクセルで作ってそのままAdobe XDヘコピペしましょう。
Adobe XDの初心者向けデザインまとめ
Adobe XDは使いやすいけど、テクニックを使わないと結構時間がかかってしまいます。
新しいテクニックを身につけるのは、結構めんどくさいですが最低限レベル1を身につけるだけも、デザインにかかる時間が結構変わってくると思うので、試してみることをオススメします。
他にも上の動画を参考にしてみてください。
