新米webディレクターのmei(@mei_1123ak)です。
ワイヤーフレームやカンプデザインを作る際、IllustratorやPhotoshopで作る方も多いと思いますが、特に初心者の方におすすめなのが、adobe XD!
なんといっても操作が簡単すぎる!初めて使ったときは使いやすくてびっくりしました!
全くの初心者ですが、簡単に制作することができました!
そして無料で使えるのも嬉しいところ。
そこで今回は、adobe XDの使い方についてご紹介します。
\ こんな人におすすめ /
・adobe XDでどんなものが作れる・・?
・adobe XDの基本的な使い方が知りたい
・簡単にワイヤーフレームやカンプデザインを作れるツールを探している
Contents
adobe XDでどんなものが作れる・・?
今回私がXDで作成したものがこちら↓

サイトのイメージを完全に固めてから、HTMLやCSSのコードを書き始めることで途中で迷わずに制作することができました!
adobe XDのインストール
アカウントを作成する必要がありますが無料でインストールできます!
IllustratorやPhotoshopは有料だけどXDを無料で使えるのってすごい・・!
アートボードのサイズを選ぶ
まず、アートボードのサイズを選びます。
今回は、web1920(1920×1080)を選びましたが、どれでも大丈夫です。
後で変更することもできます。
三角のマークをクリックするとサイズを選ぶことがきます。

大きさを変更したいときは、広げたり小さくしたり、自分の好きな大きさに変更できます。
便利機能① リピートグリッドがすごい!

たとえば、こんな風に均等に写真を並べたいときは、リピートグリットを使うとものすごく早いです!
まず、基準となる図形を書いたら、右上の「リピートグリッド」をクリックするだけ!
永遠にリピートされます。
そしてリピートの間隔もいっきに変更できるところがすごい・・・!
初めて使った時は感動しました・・そしてなんだか楽しいです!
画像の挿入
先ほど書いたリピートグリッドに、画像を挿入するのもドラッグ&ドロップで一瞬でできます!
特に画像のサイズも気にしなくても、グリッドのサイズに合わせてくれるから簡単です!!
早い〜!しかも簡単!
便利機能② コンポーネントを活用!
ヘッダーやフッダーなど、全ページ共通の項目もあると思います。
そんなときはコンポーネントの出番!!
制作途中で、デザインや内容を変えたいときも、基準のデータを変更すれば、
共通箇所が一気に変更できるのでとても楽です。
- オブジェクトを選択
- コンポーネント「+」をクリック(オブジェクトの枠が緑色になったらOK)
- オブジェクトをコピー&ペースト
これだけです!
まとめ
adobe XDの使い方についてご紹介しました。
複雑な機能が少ない分、だいたい見れば使い方は分かるかなと思います。
とても簡単なので、おすすめです!