デザインやプロトタイプを作成できるAdobe XD。みなさん使っていますか？先日アップデートもされ、Photoshopとの連携がより簡単になったり、Sketchファイルも扱えるようになるなど、進化が進んでいますね。これまではWebサイトのデザインにはPhotoshopが多く使われてきましたが、これからはXDが主力となっていきそうな予感。ということでAdobe XDを使ったWebデザインの手順を紹介します！

今回作成するもの

このように簡単なホームページと問い合わせフォーム用のモーダルウィンドウの画面を作ります。プロトタイプ機能で画面推移のアニメーションも加えてみましょう！

1. 画面の作成準備

Adobe XDを立ち上げ、Web用の画面を1280×800のサイズで新規作成します。「portfolio」という名前で保存しておきましょう。.xd という拡張子がついて保存されます。

続いて配置の基準線となるグリッドラインを表示しましょう。キャンバス内のどこでもいいのでクリックをし、アートボードが選択された状態で、上部メニューの 表示→レイアウトグリッドを表示 からグリッドラインを表示します。

左下のグリッドパネルから詳細が設定できるので、今回は「段間幅」の値を30にして余裕のあるレイアウトが組めるようにしましょう。

アートボードの名前をダブルクリックし、「Home」に変更したら準備完了です！

2. ヘッダー部分の作成

長方形ツールを選択して、アートボードの左上から、高さ600pxの長方形を作成します。右側のパネルから、長方形の線のチェックを外して線を非表示にしておきます。

用意しておいた画像を長方形に向けてドラッグ。画像が長方形の形で切り抜かれます。

続いてテキストを入力していきましょう。左側のテキストツールを選択し、見出しとなる「Web Designer Mana」と入力します。

右側のパネルからテキストの装飾ができます。フォントはPhilosopherをダウンロードして利用しました。その他の設定は以下の通りです：

• フォント：Philosopher
• 文字サイズ：60
• 文字色：#FFA289

続いて文章もテキストツールで入力します。以下の設定にしました：

• フォント：游ゴシック
• 文字サイズ：20
• 揃え：中央揃え
• 文字色：#707070

こんな表示になりました。見出しと文章は画面中央に配置しておきましょう。

続いてボタンを作成します。まずは長方形ツールで幅220px、高さ60pxの長方形を作ります。右上のパネルでサイズが表示されるので、そちらを見ながらドラッグして描画してもいいですし、適当なサイズで作成後、数値を入力してサイズ指定してもOK。

その他の設定はこちら：

• 幅：220
• 高さ：60
• 角丸：5
• 背景色：#6A92CC
• 線：なし

ボタンにのせるテキストもテキストツールで作成しましょう。「お問い合わせ」と書いて先程作成した長方形の上にのせます。

設定はこちら：

• フォント：游ゴシック
• 文字サイズ：24
• 揃え：中央揃え
• 文字色：#FFFFFF

これでヘッダー部分が完成しました！

3. コンテンツ部分の作成

続いてコンテンツ部分です。アートボードの高さが足りないので、下に伸ばす必要があります。左上のアートボード名「Home」をクリックし、下部に表示される円を下にドラッグして高さを足しましょう。ここでは高さを1330pxに設定しました。

コンテンツ部分の見出しとして「Skills」と入力。装飾はヘッダー部分の見出しと同じ設定にします。このテキストを画面中央、ヘッダー画像から50px下の位置に配置しましょう。

ピクセル単位の移動はオブジェクトを選択している状態で、キーボードの上下左右キーを1回押すと1px、Shiftキーを押したまま1回押すと10px移動できます。ヘッダー画像の下と「Skills」の上をくっつけた状態でShiftキーを押したまま5回「↓」キーを押すと50px移動できますね。

オブジェクト間でどれくらい余白があるかの確認も簡単です。オブジェクトを選択した状態で、Altキーを押しながら距離を測りたいオブジェクトにカーソルを合わせると距離が表示されます。きれいに整列させるために覚えておくといいですね！

画像を入れる長方形を作成します。グリッドの4つ分の幅、高さは200pxに設定しました。

続いて長方形と同じ幅でテキストツールで文章を入力します。

• フォント：游ゴシック
• 文字サイズ：18
• 揃え：左揃え
• 文字色：#707070

ボタン用の長方形を作成します。装飾は以下の設定です。長方形の上には白のテキストを18pxの大きさでのせましょう。これでコンテンツのブロックが完成です。

• 幅：140
• 高さ：40
• 角丸：5
• 背景色：#6A92CC
• 線：なし

このブロックを右にもう2つ表示したいので、XD名物「リピートグリッド」を使ってみましょう！画像用の長方形、文章、ボタンを選択し、右上にある「リピートグリッド」ボタンをクリックします。すると枠線が緑色に変わり、右と下に白い長丸が表示されます。

枠線の右側をドラッグし、レイアウトグリッドの右端までドラッグします。要素間の余白はレイアウトグリッドに合うよう、ドラッグして30px分に広げます。

用意しておいた3つの画像をまとめて長方形にドラッグ。それぞれに配置されます！

あとはテキストを書き換えてコンテンツ部分完成です！

4. フッター部分の作成

ここまできたらあと一息です！フッター部分には背景色を #322950 に設定した長方形を描画します。

以下の設定でテキストを入力します：

• フォント：游ゴシック
• 文字サイズ：16
• 揃え：中央揃え
• 文字色：#A5A0B6

これでホームのデザインが完成です！

5. お問い合わせフォーム（モーダルウィンドウ）の作成

ヘッダー部分の「お問い合わせ」ボタンをクリックすると、モーダルウィンドウで問い合わせフォームを表示します。まずはアートボード名「Home」をクリックし、⌘D（Windowsは Ctrl + D）でHomeを複製します。複製したアートボードは「Contact」というアートボード名に変更しましょう。

「Contact」の方を編集していきます。長方形ツールで画面いっぱいに黒い長方形を描画します。不透明度を60%にしてコンテンツがうっすら見える状態にしましょう。

ベースとなるボックスを作成します。長方形ツールで画面中央からグリッドライン6つ分、縦430pxのボックスを作成。

• 高さ：430
• 角丸：10
• 背景色：#FFFFFF
• 線：なし

テキストツールで「お名前 メール メッセージ」と改行して入力。以下の設定で装飾した後、先程作成したボックスの上から48px、左から40pxの位置に配置します。

• フォント：游ゴシック
• 文字サイズ：18
• 揃え：右揃え
• 行間：74
• 文字色：#707070

長方形ツールで幅300px、高さ45pxの長方形を作成し、テキストの右側24px、ボックスの上から35pxのところに配置。長方形の装飾は以下の設定です：

• 幅：300
• 高さ：45
• 角丸：5
• 背景色：#FFFFFF
• 線：#CCCCCC
• 線の太さ：3

Altキーを押しながら長方形を下にドラッグし、全部でボックスを3つにします。それぞれのボックスの間隔は30pxに。

3つ目のボックスの高さは130pxに設定します。

メッセージボックスの下30pxの位置にボタン用の長方形を作成します。

• 幅：180
• 高さ：50
• 角丸：5
• 背景色：#6A92CC
• 線：なし

「送信」という白い文字を24pxの大きさで作成。長方形の上に重ねたら問い合わせフォームの完成！

6. 画面推移の設定

2つのアートボードが完成したので、Homeのヘッダー部分にあるボタンをクリックしたらContactの画面に移動する設定をしましょう。画面左上の「プロトタイプ」タブをクリックします。

「お問い合わせ」ボタンを選択し、ボタンの右側に出てくる矢印アイコンを「Contact」アートボードまでドラッグします。その時出てくるウィンドウでアニメーションの設定が可能。今回はデフォルトの効果「ディゾルブ」、イージングを「イーズアウト」にしました。

「Contact」アートボード全体を選択し、アートボードの右側に出てくる矢印アイコンを、今度は「Home」に向けてドラッグします。

完成！

ついに完成です！画面右上の再生アイコンをクリックして、どのように表示されるか確認しましょう。

実際のWebサイトのようにスクロールやクリックして画面推移ができるようになっています！こちらのデモ画面で試してみてください！

今回は全部で2つのアートボードを作成しましたが、実際に業務で使うとなると他の画面も作っていくことになります。それぞれのページにリンクさせて、本当にWebサイトとして稼働しているようなプロトタイプが作成できますね。

今後はデザインの中で使用する画像はPhotoshop、それ以外の画面全体の作成はXDと、使い分けていくことになりそう。これからもXDの進化に注目です！