新米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の使い方についてご紹介しました。
複雑な機能が少ない分、だいたい見れば使い方は分かるかなと思います。
とても簡単なので、おすすめです！
