Webサイトの構成やデザインをXDで作成してみようかな？と検討中の方向けに、おすすめの機能や使い方をまとめています。
アートボードの準備
ポイント1：「表示領域の高さ」
まずはアートボードを新規作成。アートボードの大きさは簡単に伸び縮みさせることができます。
縦に伸ばしてみると、点線が現れました！この高さ＝表示領域の高さです。ファーストビューでどこまで表示されるのか、大体の目安がわかるので便利です。特に、SP版のサイトデザインや、アプリのUIデザインをする際に重宝しそうですね。
ポイント2：「グリッド」
Photoshopほど細かくガイドを引くことはできませんが、こんな感じのレイアウトグリッドを表示させることができます。
図形を描いてみよう
長方形と楕円が作成できます。作成した図形をダブルクリックすると、パスの変形ができます。
図形同士の合体や型抜きもできます。
複雑な図形や作り込みたいパーツはPhotoshopやIllustratorを使用したほうが良いですが、簡単なボタンなどはXDだけで作れますね。
とりあえず仮置きでパーツを配置しておきたい、というときに、さくっと作れて便利！
画像を配置する
作成した図形の上に、画像ファイルをドラッグ＆ドロップすると、図形が画像で塗りつぶされたような状態になります。
画像の大きさは自動で調整されます。
マスクをつくることもできます。マスクを掛けたい画像の上に図形をおいて、右クリック→「シェイプでマスク」を選択します。
画像の配置や大きさなど、任意で調整できます。
KROWLでは「Adobe XD」のワークショップをはじめ、様々なイベントを開催していますのでご興味のある方はチェックしてみてください！
