webディレクター

簡単すぎる!adobe XDの使い方

新米webディレクターのmei(@mei_1123ak)です。

ワイヤーフレームやカンプデザインを作る際、IllustratorやPhotoshopで作る方も多いと思いますが、特に初心者の方におすすめなのが、adobe XD!

なんといっても操作が簡単すぎる!初めて使ったときは使いやすくてびっくりしました!

全くの初心者ですが、簡単に制作することができました!

そして無料で使えるのも嬉しいところ。

そこで今回は、adobe XDの使い方についてご紹介します。

\ こんな人におすすめ /

・adobe XDでどんなものが作れる・・?
・adobe XDの基本的な使い方が知りたい
・簡単にワイヤーフレームやカンプデザインを作れるツールを探している

adobe XDでどんなものが作れる・・?

今回私がXDで作成したものがこちら↓

サイトのイメージを完全に固めてから、HTMLやCSSのコードを書き始めることで途中で迷わずに制作することができました!

adobe XDのインストール

アカウントを作成する必要がありますが無料でインストールできます!

IllustratorやPhotoshopは有料だけどXDを無料で使えるのってすごい・・!

XD インストール

アートボードのサイズを選ぶ

まず、アートボードのサイズを選びます。

今回は、web1920(1920×1080)を選びましたが、どれでも大丈夫です。
後で変更することもできます。
三角のマークをクリックするとサイズを選ぶことがきます。

大きさを変更したいときは、広げたり小さくしたり、自分の好きな大きさに変更できます。

便利機能① リピートグリッドがすごい!

たとえば、こんな風に均等に写真を並べたいときは、リピートグリットを使うとものすごく早いです!

まず、基準となる図形を書いたら、右上の「リピートグリッド」をクリックするだけ!
永遠にリピートされます。

そしてリピートの間隔もいっきに変更できるところがすごい・・・!

mei

初めて使った時は感動しました・・そしてなんだか楽しいです!

画像の挿入

先ほど書いたリピートグリッドに、画像を挿入するのもドラッグ&ドロップで一瞬でできます!


特に画像のサイズも気にしなくても、グリッドのサイズに合わせてくれるから簡単です!!

mei

早い〜!しかも簡単!

便利機能② コンポーネントを活用!

ヘッダーやフッダーなど、全ページ共通の項目もあると思います。

そんなときはコンポーネントの出番!!

制作途中で、デザインや内容を変えたいときも、基準のデータを変更すれば、
共通箇所が一気に変更できるのでとても楽です。

  1. オブジェクトを選択
  2. コンポーネント「+」をクリック(オブジェクトの枠が緑色になったらOK)
  3. オブジェクトをコピー&ペースト

これだけです!

まとめ

adobe XDの使い方についてご紹介しました。

複雑な機能が少ない分、だいたい見れば使い方は分かるかなと思います。

とても簡単なので、おすすめです!