記事内に広告を含みます

【無料版有り】ADOBE XDの便利なアートボード【ワイヤーフレーム】

Adobe xdアートボードのタイトル画像

ワイヤーフレーム学習中のカメ

ワイヤーフレームを作るのに便利なアプリある?
AdobeのXD(エックスディ)のアートボードを使うと楽だよ

学び続けるウサギ

ワイヤーフレーム学習中のカメ

そうなんだ〜

やってみる〜♪

「ワイヤーフレームを簡単に作りたい」

 

「デザインカンプを作りたい」

上記のように思われている方にオススメのAdobeCCに入っているAdobe XD(エックスディ)についての記事になります。

Adobe XDは、ワイヤーフレーム制作・デザインカンプ制作・プロトタイプの動作確認・共有 クライアントフィードバックを得ることができる便利なUI/UXのアプリです。

今回は、AdobeのXDを使ってワイヤーフレームを作る時に役立つアートボードについてご紹介していきたいと思います。

Adobe XDでアートボードを使おう

ADOBE XD アートボード1

まずは、新規ファイルをクリックしてで横1920px×縦1080pxのアートボードを出します。

画面左側のパネルのアートボードツール(A)をクリックすると右側のプロパティインスペクタに、

アートボードの種類
  • モバイル
  • タブレット
  • Web / デスクトップ
  • ソーシャルメディア
  • スマートウォッチ

などに適したサイズのアートボードを追加する欄が出てくるので必要なものを選択(クリック)することで追加できます。

ワイヤーフレーム学習中のカメ

右側の欄はプロパティインスペクタっていうんだね〜

便利なテンプレートがいっぱいでてきたよ♪

ADOBE XD アートボード2

テンプレートとしてさまざまなデバイスの大きさを選択できるのが楽で良いですね。

インスタストーリー、Twitterのヘッダー、YouTubeサムネイルサイズなどもワンクリックですぐに呼び出せます。

ADOBE XD アートボード3

必要なアートボードを選択すると、今あるアートボードの右側に新しいアートボードが追加されていきます。

ADOBE XD アートボード4

iPhone用のアートボードなども簡単に追加できます。

ADOBE XD アートボード5

アートボードが選択されている状態、もしくは左側のパネルの選択ツール(V)に持ち替えてアートボードの枠の下の丸い部分を下へドラッグするとページの長さを変えることができます。

ADOBE XD アートボード6

ドラッグするとプロパティインスペクタのhの数値が変わっています。

ADOBE XD アートボード7

それぞれのアートボードで必要な大きさに調整することが簡単にできました。

画面が見にくくなってしまった場合は、macだとcommand+0で全体のアートボードを中心にすることができます。

あとは中身を作っていくだけでワイヤーフレームの完成です。

ADOBE XDのは無料で使用できる?
一人で制作 無料
複数人で制作 有料

有料版はAdobe CCがあれば使えるのでお得なAdobe CCがオススメです。

AdobeCCについてはAdobeCCのコンプリートプランを楽しもうの記事を参考にしてみてください。

AdobeCCタイトル 【できること】AdobeCCのコンプリートプランを楽しもう【アプリ一覧】

まとめ:便利なアートボードを使おう

今回は、AdobeのXDを使ってワイヤーフレーム作りに便利なアートボードをご紹介してきました。

一人で制作する場合は、無料で使用できますし便利なAdobeのアプリですよね。

ぜひ、アドビのXDのアートボードを使って、楽々ワイヤーフレーム作りにチャレンジしてみてください。

 

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です