このプログラミングを学んでも理想のフリーランスエンジニア生活はできない

Adobe XDデザインの高速化テクニック【10分初心者向け】プラグインなし

Adobe XDで高速でデザインする方法をまとめました。

Adobe XDでデザインをしてみると「使いやすいけど、意外とデザインするのに時間かかる」と思う人は多いと思います。

デザインは、余白、位置、要素の大きさなど、細かい調整が重要になってくるので、細かな調整をしているうちに結構時間がかかってしまいます

今回は、Adobe XDで高速でデザインする方法をまとめました。10分で分かる、初心者向けの基本的な内容になっています。

Adobe XDデザインの高速化テクニック【レベル0】

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

まずトップページPC版のみデザイン

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

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

他のページでも使いまわす部分

  • 余白
  • 配色
  • フォントファミリー
  • フォントサイズ
  • 要素の形(丸みを帯びたボタンなど)
  • ボタン

Adobe XDで要素をグループ化して崩さない

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

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

要素をグループ化する方法

  1. グループ化したい要素を「Shift」キーを押しながらクリックして選択
  2. 右クリックして「グループ化」をクリック

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

 

Adobe XDでガイド線もどきを引く

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

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

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

 

 

Adobe XDで高速でデザインする方法【レベル1】

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

Adobe XDのリピートグリッドで要素をリピート

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

リピートグリッドの方法

  1. 要素をグループ化して選択
  2. 右上にある「リピートグリッドを選択」
  3. 要素をリピートする
  4. 要素間の幅を調整する

Adobe XDのデバイスプレビューで実際の見え方を確認

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

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

Adobe XDで高速でデザインする方法【レベル2】

Adobe XDで、あらかじめパーツを作る

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

ウェブデザインよく使うパーツ

  • ボタン
  • タイトル
  • 一覧(記事一覧など)

など

Adobe XDでよく使う要素はシンボル化する

あらかじめよく使うパーツを洗い出したら、それらの要素を装飾して登録しましょう。これをシンボル化と言います。10秒でできます。

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

シンボル化する方法

  1. よく使うパーツをグループ化して選択する
  2. 左にある「+」マークを押してよく使うパーツをシンボルに登録する
  3. シンボルをドラッグ&ドロップして使う

Adobe XDで表やグラフを作る場合エクセルを使う

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

 

Adobe XDデザインの高速化テクニックまとめ

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

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

 

ウェブ制作で単価UPする方法は情報設計がオススメ。5分で分かります。

ウェブ制作の情報設計で単価を上げる方法【5分】