Adobe XDのWebデザイン作業準備

今回はWebデザインで真価を発揮するツール「Adobe XD」を使用してWebデザイン作業を行う際の準備を解説します。

起動から終了まで!XD使用の流れ

Adobe XDを起動する

まずはデスクトップの以下のアイコンのクリックや、スタートメニューから「Adobe XD」と検索して起動します。

すでにXDのデザインデータを作ってあり編集中である場合は、XDデータのアイコンをダブルクリックして起動します。

新規ファイルを作成する

起動したら新規ファイルを作成しましょう。
ウィンドウの左上にある新規ファイルボタンをクリックするか、中央の新規ドキュメントの各アイコンをクリックして新規ファイルを作ります。

ウィンドウを最大化する

新規ファイルのアートボードができます。
必要に応じてウィンドウを最大化して見やすく作業しやすくしておきましょう。

変形でアートボードのサイズを変更する

次に実際にWebサイトのデザインを制作するアートボードのサイズを変更します。
ウィンドウ右側のパネル「プロパティインスペクター」の「W(横幅)」「H(高さ)」に必要な大きさを入力します。
今回はWに「1440」Hに「3000」と入力し、横幅1440px、高さ3000pxの大きさにしておきましょう。

ビューポートの高さを変更する

アートボードが指定したサイズに変わりました。次はビューポートの高さを変更します。
プロパティインスペクターのビューポートの高さへの数値入力や、アートボードに表示される青いタブのドラッグで変更することができます。
今回は「720」に設定して、ビューポートの高さを720pxにしておきましょう。最後に右上の▶ボタンをクリックします。

プレビューを確認する

XDではプレビューという機能が備わっており、実際にブラウザを使ってデザイン確認をする必要がありません。
ビューポートの高さはページ表示開始時の高さ、つまりブラウザウィンドウの高さであり、
それ以降はスクロールすることで表示の確認をすることができます。
確認が終わったら右上の「×」ボタンでプレビューウィンドウを閉じます。

ローカルドキュメントに保存して終了する

最後に上部「ファイル > ローカルドキュメントとして保存」で保存し、
右上の「×」ボタンをクリックしてウィンドウを閉じ、XDを終了します。