Webサイトの構成やデザインをXDで作成してみようかな？と検討中の方向けに、おすすめの機能や使い方をまとめています。

アートボードの準備

ポイント1：「表示領域の高さ」

まずはアートボードを新規作成。アートボードの大きさは簡単に伸び縮みさせることができます。

縦に伸ばしてみると、点線が現れました！この高さ＝表示領域の高さです。ファーストビューでどこまで表示されるのか、大体の目安がわかるので便利です。特に、SP版のサイトデザインや、アプリのUIデザインをする際に重宝しそうですね。

ポイント2：「グリッド」

Photoshopほど細かくガイドを引くことはできませんが、こんな感じのレイアウトグリッドを表示させることができます。

図形を描いてみよう

長方形と楕円が作成できます。作成した図形をダブルクリックすると、パスの変形ができます。

図形同士の合体や型抜きもできます。

複雑な図形や作り込みたいパーツはPhotoshopやIllustratorを使用したほうが良いですが、簡単なボタンなどはXDだけで作れますね。

とりあえず仮置きでパーツを配置しておきたい、というときに、さくっと作れて便利！

画像を配置する

作成した図形の上に、画像ファイルをドラッグ＆ドロップすると、図形が画像で塗りつぶされたような状態になります。

画像の大きさは自動で調整されます。

マスクをつくることもできます。マスクを掛けたい画像の上に図形をおいて、右クリック→「シェイプでマスク」を選択します。

画像の配置や大きさなど、任意で調整できます。

≫Adobe XDの使い方講座(2)に続く