XDでワイヤーフレームをつくる方法を紹介します。
今回はコーポレートサイトを想定して、一般的なトップページを作っていきます。
①アートボードを作成
①今回はPCサイズをつくるのでWebから作りたいサイズを選択します。選択肢にない場合はカスタムにサイズを入力します。
②作業画面が開きます。
②ツールの紹介
上記のワイヤーフレームを作成する際、使うツール（Windows：ショートカットキー）を紹介します。
一番上...選択(V)
上から2番目...長方形(R)
下から3番目...線(L)
一番下...テキスト(T)
③ガイドを引く
①選択ツール(V)の状態でアートボードの横にマウスを置くと、マウスポインターの形状が変わります。ガイドが引けるのはアートボードの左と上からです。
②左クリックを押しながら引きたいところまでドラッグします。Shiftを押すと10pxごと移動します。
※右クリックをするとガイドの編集ができます。方眼グリッドも縦横をそろえたいときに便利です。
④アートボードのサイズを変更
①アートボードを選択して二重丸のマークを上下に動かします。
②長さを調整します。
⑤図形を挿入
①長方形ツール(R)を選択します。
②配置したいサイズをマウスで調節しながら作成します。正方形を作りたい場合はShiftを押しながらマウスを動かします。
③画像を編集します。
・サイズの変更
編集したい画像を選択し、サイズを変更するか、サイドメニューでサイズを入力します。
・色の変更
編集したい画像を選択し、今の色をが表示されている部分をクリックすると編集できます。また、スポイトから色をとることもできます。
・角を丸くする
編集したい画像を選択し、二重丸の部分を動かすと角の丸みを調節できます。また、サイドメニューに数字を入れると丸くなります。数字が大きいほど丸みが強くなります。
一部分だけ丸くしたい場合は、二重丸のAltを押しながら動かす、または、サイドメニューにそれぞれ数字を入れます。
⑥線を引く
①線ツール(L)を選択します。
②線をひきます。線の太さはサイドメニューで編集できます。
図形と線を作成しました。
続きはこちら↓
