Adoeb XDでデザインを１から作ってみよう

この記事でやること

今回の記事では、Adobe XDを使用してラフスケッチの状態のデザインからデザインカンプを作成します。

デザインを作成する際のAdobe XDの基本操作を、画像を交えて説明していきます。
この記事を読まれる皆さんも、実際にAdobe XDを操作しながら作業を進めてみましょう。

教材を開く

それでは、練習に入っていきます。

まず始めに、以下のダウンロードボタンから制作していく上で必要な「デザインデータ」のダウンロードを行いましょう。

ダウンロードしたフォルダの確認

ダウンロードした「zpm-design-practice.zip」を解凍すると、
これからデザインを作成していく教材が入っております。

まずは、「zpm-design-practice.xd」を開きましょう。

「zpm-coding-practice.xd」を開くと、画像のようなデザインデータが入っています。

説明をスムーズに行うために、以下の３つのアートボードを設けています。

• トップページ_SP：今回のデザインで使用するアートボード
• スタイルガイド：デザインを作成する際の指示が書いてあります。
• テキスト原稿：デザインの文章で使うテキストが載ってます。

アセットに色を登録しておく

後で色を使うことになるので、あらかじめアセットに色を登録しておきましょう

次の章で作成するテキストの色は基本的に「#333」を用いて作成していきます。

デザインを作る準備をする

まずは、デザインを作成する準備をしていきましょう。

Adobe XDのワークスペース

Adobe XDのワークスペース（操作画面）は大きく分けて３つの項目で構成されています。

• ツールバー：Adobe XDの操作を切り替える箇所
• アートボード：デザインを作成する白い四角形
• プロパティ：作成した要素の見た目を整える箇所

上記３つを使用していくので、役割と名前を覚えておきましょう。

ガイド線を作る

デザインを作り始める前に、アートボードに「ガイド線」を表示します。
Webデザインは、ガイド線を引いてコンテンツの幅を見えるようにすると制作が捗ります。

ガイド線の作り方

今回は、左右に16pxの余白が空くようにガイド線を引きます。

作成手順

1. コンテンツの幅となる長方形（横幅：343px）を作成、アートボード上で中央に配置する
2. その長方形の左右の辺に合わせてガイド線を配置
3. 長方形を選択してdeleteキーを押す

ガイド線を引くときは上記のように長方形を作成すると素早く配置できます。

ラフスケッチを読み込む

次に今回のデザインで使用するラフスケッチを読み込んでいきます。

作成手順

1. Adobe XDとFinderを一緒の画面に開く（Windowsならエクスプローラー）
2. Adobe XDのワークスペース内にラフスケッチの画像をドラッグ&ドロップ

画像の例のようにラフスケッチが表示されていれば大丈夫です。

ワイヤーフレームを作成する

ラフスケッチが読み込めたら、ワイヤーフレームを作成していきます。

ヘッダーを作成する

まずはヘッダーを作成していきましょう。

ヘッダーの背景を作る

まずは、ヘッダーの元となる長方形を作成します。 長方形で指定するプロパティは画像の通りです。

以下の手順でヘッダーの構造を配置していきます。

作成手順

1. 長方形ツールで長方形を作成する
2. アートボードの上端に配置する

画像の中で行われたショートカットは以下の通りです。

操作のポイント

• 長方形ツールは「R」で持ち替える
• プロパティの項目は「tabキー」で項目を移動できる

ヘッダーのロゴを作る

テキストツールで「ZeroPlus」と入力します。 ヘッダーのロゴのプロパティは画像の通りです。
このロゴのテキストには行間の指定は特に必要ありません。 デフォルトの値のままで大丈夫です。

以下の手順でヘッダーのテキストを作っていきましょう。

作成手順

1. テキストツールで「ZeroPlus」と入力する
2. ガイド線の左側に合わせヘッダーの上下中央に配置する

画像の中で行われたショートカットは以下の通りです。

操作のポイント

• テキストツールから選択ツールに持ち替えるときは「ESC」を押してから「V」
• 「源ノ角ゴシック JP」は「源」と入力してEnterキーを２回押す
• テキストを選択して「B」でテキストを太字にできる

細かい操作ですが、これらのショートカットキーを使いながら作業すると効率的です。

次は、ハンバーガーメニューを作成していきましょう。

ハンバーガーメニューを作る

ハンバーガーメニューの長方形のプロパティは画像の通りです。
長方形の線の指定は必要ないので、チェックを外しておきましょう。

次に、以下の手順でハンバーガーメニューを作っていきます。

作成手順

1. 長方形ツールで長方形を作成する
2. スポイトで長方形の塗りをテキスト同じ色に変更
3. コピペして複製し「8px」間隔で配置する
4. 範囲選択してグループ化する
5. ヘッダーの中心に配置する（右のガイド線に合わせる）

画像の中で行われたショートカットは以下の通りです。
長方形はデフォルトの状態だと「線」がついたままになっているので外しましょう。

操作のポイント

• スポイトは「I」で起動し、適用したい色をクリックする
• 1px動かしたいときは「矢印キー」（Shiftを押しながらで10pxずつ動く）
• 要素をまとめたいときは「グループ化」をする

ショートカット：グループ化Windows：Ctrl G
Mac：Command G

「Group」の「G」と覚えておくと覚えやすいです。

ショートカット：グループ化解除Windows；Ctrl Shift G
Mac：Command Shift G

Adobe XDでは要素がバラバラの状態だと配置がしにくいので「グループ化」を使用してまとめると作業がしやすいです。

キービジュアルを作成する

ヘッダーを作り終わったら、次にキービジュアルを作成していきます。

背景画像を作る

キービジュアルの背景画像の長方形のプロパティは画像の通りです。

ここでも長方形の線は必要ないので、チェックを外しておきます。

作成手順

1. 長方形ツールで長方形を作成する
2. 長方形をアートボード上端に配置する
3. 長方形をレイヤーの最背面に配置する

操作のポイント

• 長方形は背景画像になるので、レイヤーの最背面に配置する

Adobe XDでは、新たに作成した要素はレイヤーの一番手前に配置されます。
今回の長方形は背景画像なので、重なり順を最背面にしました。

ここで一旦、画像の中で行われたレイヤーの操作について詳しく触れていきましょう。

レイヤーの操作

レイヤーとは要素の重なり順のことです。
レイヤーパネルから要素の重なり順の操作や名前の変更ができます。

レイヤーパネルの要素の一覧で上にいるほど手前の要素になり、下にいるほど奥側の要素となります。
背景画像の長方形がレイヤーパネルの一番下に配置されていれば大丈夫です。

ショートカット：最背面に移動Windows：Ctrl Shift {
Mac：Command Shift {

ショートカット：最前面に移動Windows；Ctrl Shift }
Mac：Command Shift }

補足説明の都合上、要素の名前をレイヤーパネルでつけています。
今回の操作では、レイヤーの名前の変更はしないで大丈夫です。
Adobe XDの操作に慣れることに集中しましょう。

キャッチコピーとサブコピーを作る

次は、キービジュアルのキャッチコピーとサブコピーを作っていきます。
それぞれのテキストのプロパティは上記のようになります。

作成手順

1. テキストツールでキャッチコピーを作成する
2. テキストツールでサブコピーを作成する
3. 間の余白が16pxになるように配置する
4. キャッチコピーとサブコピーをグループ化する

テキストの内容は、「テキスト原稿」のアートボードからコピーしてきましょう。
（原稿がある状態ならば、テキストは手打ちせずにコピペで入力すると誤字脱字のチェックが楽になります。）

行間の値の指定

Adobe XDのプロパティの入力欄では、値の計算ができます。
行間を入力するときは「フォントサイズ * line-heightの値」と入力しましょう。

スタイルガイドの指定より、line-heightの値は「1.8」なので、 「14 * 1.8 = 25.2」という指定になります。

次は、キービジュアルのキャッチコピーとサブコピーのグループを背景画像の上に配置します

キャッチコピーを上下中央配置する

作成手順

1. 左側のガイド線に合わせて、灰色の長方形の上下中央に配置
2. テキストのグループの色を「#FFF」に変更する

操作のポイント

• 背景画像の色でテキストが見えにくいときは、文字の色を「#FFF」にして見やすくします。

ここまででキービジュアルの構造の作成が終わりました。

Adobe XDを扱うコツのセクションを作成する

次にAdobe XDを扱うコツのセクションを作成していきます。

セクションタイトルとサブタイトルを作成する

セクションのタイトルのテキストたちのスタイルは上記の画像の通りです。
こちらもテキストでも行間の指定は必要ないので、値はデフォルトのままでOKです。

作成が済んだら、グループを配置していきましょう。
左右中央寄せはガイドを頼りにして、キービジュアルとの距離は「矢印キー」で合わせていきましょう。

作成手順

1. テキストツールでセクションタイトルを作成する。
2. テキストツールでサブタイトルを作成する。
3. 間の余白が8pxになるように配置する
4. セクションタイトルとサブタイトルをグループ化する
5. 左右中央寄せし、キービジュアルの長方形から80pxの余白をあけて配置する

Adobe XDを扱うコツの項目を作成する

次はAdobe XDを扱うコツの項目を作成していきます。

まずは、項目の大元となる構造と、画像を入れる長方形を作成します。

長方形のプロパティは上記の画像の通りです。 次に、項目の見出しと文章を作成していきます。

項目の見出しと文章のプロパティは上記の通りです。

この項目の箇所のテキストはエリア内テキストで作成し、横幅を持たせてあげましょう。
また、文章の箇所にはきちんと「行間」をつけてあげましょう。

テキストが作成できたら、次は配置を行います。

作成手順

1. 項目の要素たちを範囲選択する
2. 水平方向に中央整列を行う
3. 画像の長方形は上端に合わせて配置する
4. 画像と見出しと文章の余白を24pxにする
5. まとめて選択し、グループ化する

操作のポイント

• 整列のショートカットを使用する

要素を整列するときはショートカットを使います。
１つ１つ要素を合わせる必要がないので楽です。

整列のショートカットはいくつかありますが、以下の２つはよく使用します。

ショートカット：水平方向に整列Windows；Shift C
Mac：Control Shift C

「Center」の「C」と覚えておくと覚えやすいです。

ショートカット：垂直方向に整列Windows；Shift M
Mac：Control Shift M

こちらは、「Middle」の「M」と覚えておくと覚えやすいです。

アートボードに配置する

先ほど作成したセクションタイトルと40pxの余白があくように配置しましょう。

これでAdobe XDを扱うコツの項目が完成しました。
あとは、この項目を複製していきましょう。

リピートグリッドで要素を複製する

次は、Adobe XDを扱うコツの項目を複製していきます。

リピートグリッドで６つに増やす

Adobe XDを扱うコツの項目の構造は６つありますが、全てが同じ構造です。
なので、項目を選択後、リピートグリッド（R）で要素を複製しましょう。

複製後、テキストの内容は別途記述します。

作成手順

1. Adobe XDを扱うコツの項目を選択する
2. ６つになるように複製する
3. 複製後、間の余白を40pxに統一する
4. 余白の統一後、リピートグリッドのグループの高さを2606pxにする

操作のポイント

• リピートグリッドは高さを手作業で調節することが難しい

リピートグリッドのハンドルを手作業で操作する際に、最後は1~2pxずれてしまいます。
調節が絶妙に難しいので、高さの数値を指定して綺麗に収まるように調節しましょう。

「項目の高さ + 間の余白の合計」で計算するので、「401 * 6 + 40 * 5 = 2606」になります。

各項目の見出しと文章を入力する

リピートグリッドでの複製が完了したら「テキスト原稿」の内容からテキストを入力しましょう。

リピートグリッドは解除せずにそのまま作業を進めましょう。

フッターを作成する

次にフッターの作成を行なっていきます。

フッターの背景を作る

まずは、フッターの元となる長方形を作成します。
長方形で指定するプロパティは画像の通りです。

次はフッターのテキストです。 フッターのテキストのプロパティは上記の通りです。

以下の手順でフッターの構造を配置していきます。

作成手順

1. 長方形ツールで長方形を作成する
2. テキストツールでテキストを作成する
3. 長方形とテキストで上下左右中央配置する
4. 長方形とテキストをグループ化する
5. Adobe XDを扱うコツの項目と80pxの余白を配置する

フッターの配置が終わったらアートボードの高さの調節を行なっていきます。

アートボードの大きさを調節する

 プラグインの「Resize Artboard to Fit Content」を使用してアートボードの高さを自動調節します。

プラグインのインストールの仕方に関しては、以下の記事で解説しています。
まだ「Resize Artboard to Fit Content」を入れていない方は、以下の記事を参考にしてインストールを進めてください。

最強UIツールAdobe XDのインストール方法と使い方を解説 | ZeroPlus Media

Resize Artboard to Fit Contentの設定

Webデザイン用のアートボードを調節する際は、設定をする必要があります。

プラグインパネルにある「Resize Artboard to Fit Content」の「設定」から、
「現在のアートボード幅を維持する」にチェックを入れて「Save」を押しましょう。

設定が完了したら、アートボードの大きさを調節していきます。

作成手順

1. アートボードを選択する
2. プラグインパネルを開く
3. 「アートボードにコンテンツを合わせる」をクリックする

手作業でアートボードの高さを調節するのは至難の業です。数pxずれてしまいます。
このプラグインを使えば、簡単に素早くアートボードの高さを調節できます。

✔️操作のポイント

• アートボードを選択するときは「アートボードの名前」を選択する

ショートカット：プラグインパネルを開くWindows；Ctrl Shift P
Mac：Command Shift P

「Plugin」の「P」と覚えておくと覚えやすいです。

ここまで完了したら、ワイヤーフレームは完成です。 次は、デザインカンプを作成しましょう。

デザインカンプを作成する

ワイヤーフレームを作成したら、デザインカンプを作成していきます。

キービジュアルを作成する

まずはキービジュアルから作成していきましょう。

キービジュアルの画像を挿入する

まずは画像を挿入していきます。

作成手順

1. 背景画像の長方形に「img_kv_sm.jpeg」を挿入する
2. ヘッダーの長方形の「塗り」と「線」のチェックを外す

次に、背景画像の明るさを下げるためにフィルターをかけていきます。

キービジュアルの画像にフィルターをかける

画像を覆うように長方形を作成します。
塗りはあらかじめアセットに登録しておいた「#01296A」を適用し、不透明度を「30%」に下げましょう。

背景画像の上になるようにフィルターを配置する

作成手順

1. フィルター用の長方形を配置する
2. フィルターの長方形をレイヤーの最背面に移動する
3. フィルターの長方形を最背面の１つ上に配置する

操作のポイント

• 長方形は背景画像の上にフィルターを配置する

背景の長方形は最背面に配置されているので、その上にフィルターの長方形が配置されるようにしましょう。 レイヤーの最背面から１つ上に配置してあげましょう。

ショートカット：１つ前面に移動Windows：Ctrl } Mac：Command }

ショートカット：１つ背面に移動Windows；Ctrl { Mac：Command {

Adobe XDを扱うコツの項目の画像を挿入する

リピートグリッドにまとめて画像を挿入する

リピートグリッド内に画像を挿入していきましょう。

挿入したい画像をまとめて選択し、長方形内にドラッグ&ドロップしましょう。

完成

ここまでの作業お疲れ様でした。
以上で今回のデザインは完成です。

基本的な操作を押さえよう

ここまででAdobe XDの基本的な操作を説明してきました。
かなりボリュームのある内容だったかと思いますが、Adobe XDの基本的な操作は確認できました。

• 操作のポイントの箇所
• 紹介されたショートカットキー

中でも、この記事で説明された上記の項目は覚えておくようにしましょう。
デザインを簡単で効率的に作成するために必要な知識になります。

\ 学んだことをSNSでシェアしよう /

facebook

X

LINE

ハテブ

Pocket

URL
copy

コピー