AdobeXDでプロトタイプを作ろう～ヘッダー編①～

濱口まさみつ

2020年8月11日 11:12

前回はプロトタイプとは？という話とXDでアートボードを作成しました。今回からはWebコンテンツを作っていきます。まずはヘッダーメニューを作成してみましょう。

ヘッダーのベース部分を作成する

■長方形を描画する

ツールの [長方形] に持ち替えてください。

アートボードの左上からドラッグし、ヘッダーのベースを描画します。幅は1920px、高さは100pxとなるよう調整します。マウスでの調整が難しい場合はプロパティ設定で数字を入力してください。

■長方形の色を変更する

ヘッダーベースの色を変更します。先ほど作成した長方形を選択状態にし、プロパティの [塗り] をクリックします。カラーピッカーが表示されるので、「#333333」（省略して「333」でも大丈夫です）と入力します。

また、[線] はチェックを外し、オフにします。

■レイヤー名を変更する

レイヤーを作成したら、後で混乱しないようにわかりやすい名称に変えておきます。右下のレイヤーボタンをクリックし、レイヤーパネルを開きます。
[長方形１] というレイヤーをダブルクリックし、わかりやすい名称に変更しましょう。

■ヘッダーベースをロックする

ヘッダーベースは動かさないようにロックしておきます。レイヤーパネルで対象レイヤーにマウスを乗せると右側に鍵マークが表示されます。鍵マークをクリックするとロックされ、ワークスペース上のレイヤーにも鍵マークが表示されます。

レイアウトグリッドを表示する

続いてロゴやメニューを置いていくのですが、作業しやすいように先にレイアウトグリッドを表示します。

アートボード名をクリックしてアートボードを選択状態とし、プロパティ[グリッド] の [レイアウト] にチェックを入れます。
デフォルトで「縦列：12px」「段間隔：16px」「列の幅：122px」「左右のマージン：140px」が設定されていますので、今回はこのままで進めしょう。

縦列の水色はデフォルトのままだと色が濃く、作業の邪魔になるため、色を薄くしておきます。[縦列] をクリックするとカラーピッカーが表示されるので、不透明度を10%に変更します。

レイアウトグリッドの設定が完了したら、最後に [初期設定にする] をクリックします。これより、次回からアートボードを追加した時、同様のレイアウトグリッドが表示されるようになります。

ロゴを配置する

■ロゴ画像の配置

ロゴは別途用意した画像を配置します。画像ファイルをワークスペースにドラック＆ドロップすることでXDに配置できます。

この時、他のレイヤーの上でドロップすると、レイヤーが上書きされてしまうため、レイヤーの外でドロップしてください。

もしくは、先に長方形レイヤーを作成し、そこに画像ファイルをドロップしても良いです。その際、長方形レイヤーの [線] は不要なのでチェックOFFにしておきましょう。

■ロゴレイヤーの位置・サイズ調整

ロゴのレイヤーができたら位置とサイズを調整をしましょう。
横位置はレイアウトグリッドの一番左列に合わせます。ドラッグするとピタッとはまる時があるかと思います。
縦位置はヘッダーベースの中央にします。ど真ん中にくるとピンクのガイドが横に伸びるのでそこに配置します。

長方形レイヤーに画像を上書きした場合、レイヤーの幅が足りず、画像が切れてしまうことがあります。
その場合、レイヤーをダブルクリックすると元画像のサイズ変更ができるので、画像が切れないようサイズ調整してください。

メニューを作成する

■テキストレイヤーを作成する

続いてヘッダーメニューを作ります。ツールの [長方形] に持ち替えてください。

ヘッダーベース上で一度クリックします。右側にテキストプロパティが表示されるのでフォントの種類・サイズ・太さ・色を設定します。今回は下記設定で作成しましょう。

・フォント種類：源ノ角ゴシック JP（※）
・フォントサイズ：36px
・フォント太さ：Reguler
・フォント色：#FFFFFF

※源ノ角ゴシック JPはデフォルトでは装備されていないため、Adobe Fontでアクティベートしてください。

プロパティ設定ができたらテキストを入力します。

■コンポーネント化する

作成したテキストレイヤーはコンポーネントにします。コンポーネントにすることで、同じプロパティやインタラクションを持ったパーツを簡単にコピー作成できます。
また、親パーツ（マスターコンポーネント）を変更すると、子パーツ（インスタンスコンポーネント）にも反映されるので一括変更が可能となり、作業が大幅に効率化されます。