---
title: 【初心者向け】XDでWebデザイン！　- 便利な機能や操作方法をご紹介！
description: "実際にWebデザインやプロトタイプの作成をするときに役立つ、XDでよく使う機能や便利な機能についてご紹介します。画像での説明や動画を用いた操作手順の解説もしています。
これからXDをはじめる方、XDの使い方でお悩みの方、UI/UXデザインをはじめる方の作業効率アップにもおすすめです。ぜひご覧ください。"
---

[ブログ｜株式会社アクセサイト ](https://www.accesight.com/blog)

# [【初心者向け】XDでWebデザイン！　- 便利な機能や操作方法をご紹介！](https://www.accesight.com/blog/useful-adobe-xd-features-for-web-design)

 作成者: [アクセサイト編集担当](https://www.accesight.com/blog/author/accesight_blog)｜2023.6.20

Adobe XD（以下、XD）のツールについては、前回記事[【入門者向け】はじめてのAdobe XD 基本ツールの使い方を紹介！](https://www.accesight.com/blog/xd-tools-introduction-for-beginners)  でご紹介しました。  
そこで今回は、実際にWebデザインやプロトタイプの作成をするときに役立つ、XDでよく使う機能や便利な機能についてご紹介します。途中、動画で操作手順の解説もしていますのでぜひご覧ください。

これからXDをはじめる方、XDの使い方でお悩みの方、UI/UXデザインをはじめる方の作業効率アップにもおすすめです。

## アートボードとプレビュー機能

アートボードは、XDのホーム画面から規定サイズのアートボードを選択するか、カスタムサイズでサイズを指定して作成します。  
下のようにプルダウン（矢印）をクリックすると、さまざまなアートボードサイズが表示され、選択できます。

 

### アートボードサイズを調整する方法

アートボードを選択した状態で、プロパティ画面内の「変形」W（横）・H（縦）でサイズを調整・変更することができます。

 

### アートボードを追加する方法

アートボードを追加する方法は、以下の4つがあります。

| 4つの追加方法 ① ツールバーのアートボードアイコンをクリックし、XDに用意されているプリセットが右側に表示されるので、作成したいサイズのアートボードを選択する ② ツールバーのアートボードアイコンをクリックし、アートボード外をクリックする ③ ツールバーのアートボードアイコンをクリックし、アートボード外でドラッグする ④ アートボードを選択しコピー移動（ Alt / Opt + ドラッグ ）で複製する |
| --- |

4つの追加方法を続けて操作すると以下のようになります。

 

### ビューポート

ビューポートの設定では、プレビュー画面の高さ調整ができます。

#### スクロール　垂直（縦）方向

「ビューポートの高さ」で指定した高さの数値でプレビューが表示され、縦方向にスクロールします。

#### スクロール　なし

「なし」では、スクロールせずアートボード全体がプレビューに表示されます。  
※アートボードの高さがあるときは、プレビュー画面に細長く表示されるので注意してください。

 

### プレビュー

プレビューは、基本的に選択しているアートボードが表示され、アートボードを何も選択せずにプレビューしたときは一番左のアートボードがプレビューに表示されます。  
プレビューしたいときは、画面の右上にある「▶」をクリックしてください。

参考：Adobe デザインとプロトタイプのプレビュー  
[https://helpx.adobe.com/jp/xd/help/preview-designs-and-prototypes.html](https://helpx.adobe.com/jp/xd/help/preview-designs-and-prototypes.html)

 

### スクロール時に位置を固定

オブジェクトを選択し「スクロール時に位置を固定」にチェックを入れると、プレビューで確認したときにオブジェクトを固定表示できます。

| **POINT** | 固定させたいオブジェクトはレイヤーの順番に注意する |
| --- | --- |

固定したオブジェクトの上に、固定していないオブジェクトを配置すると、プレビューで確認したときに固定したオブジェクトの上を通りすぎるので注意してください。  
以下はヘッダーを固定させたい場合の例となります。

参考：Adobe スクロール可能なアートボードの作成  
[https://helpx.adobe.com/jp/xd/help/create-scrollable-artboards.html](https://helpx.adobe.com/jp/xd/help/create-scrollable-artboards.html)

## XDの便利な機能

ここからはリピートグリッドやスタックなど、XDでよく使う便利な機能を解説します。

### リピートグリッド

同じ要素を繰り返し複製したいときに使用します。  
グローバルメニュー、パンくずリスト、カードデザイン、ページネーションなどを作成するときに便利です。

| リピートグリッドの作成手順 1 繰り返し複製したいオブジェクトを選択し、右の「リピートグリッド」をクリック 2 緑の枠に表示されたハンドルを右へ移動し、オブジェクトをリピートする 3 複製されたオブジェクト同士の余白（ピンク部分）を調整 4 再び「リピートグリッド」をクリックし解除 |
| --- |

参考：Adobe 繰り返しオブジェクトの作成  
[https://helpx.adobe.com/jp/xd/help/create-repeating-elements.html](https://helpx.adobe.com/jp/xd/help/create-repeating-elements.html)

 

### スタック

オブジェクト同士の余白を、横方向・縦方向へ直感的に調整できる機能です。文字数やオブジェクトのサイズが変動したとしても、設定した余白は自動で保持されるので修正や変更も簡単です。  
オブジェクトを1つのフォルダにまとめ、フォルダを選択した状態で「スタック」にチェックを入れて使用します。

 

#### スタックの並び順

「スタック」を使用したオブジェクト同士は、以下のような並び順になります。  
・レイヤー上  …  上から下へ  
・プレビュー画面  …  左から右へ

参考：スタックを使用して動的なデザインを作成する  
[https://helpx.adobe.com/jp/xd/help/create-dynamic-designs-with-stacks.html](https://helpx.adobe.com/jp/xd/help/create-dynamic-designs-with-stacks.html)

 

### パディング

パディングはスタックと似ていますが、オブジェクトの内側に余白を固定したいときに使用します。ボタン、タグ、カードデザインなどの内側に余白を必要とするデザインを作るときに便利な機能です。  
内側に配置している文字数やオブジェクトのサイズが変動したとしても、設定した上下左右の余白は自動で保持されるので修正や変更も簡単です。  
上下左右均等の余白を設定したり、それぞれ異なる余白を設定することもできます。

参考：コンポーネントとグループへの固定パディングの設定  
[https://helpx.adobe.com/jp/xd/help/set-fixed-padding-for-components-groups.html](https://helpx.adobe.com/jp/xd/help/set-fixed-padding-for-components-groups.html)

 

### 整列

2つ以上のオブジェクトの位置を揃えたいときに使う機能です。  
オブジェクトを選択した状態で、以下のアイコンをクリックすると整列されます。

参考：オブジェクトの移動、分散および整列  
[https://helpx.adobe.com/jp/xd/help/move-align-distribute-objects.html](https://helpx.adobe.com/jp/xd/help/move-align-distribute-objects.html)

 

### 角丸

オブジェクトを角丸にしたいときは、アピアランスのプロパティ画面で設定する方法と直接オブジェクトを調整する方法があります。  
すべての角を同じサイズの角丸にしたり、それぞれ異なるサイズの角丸にすることもできます。

参考：描画ツールとテキストツールの操作  
[https://helpx.adobe.com/jp/xd/help/drawing-text-tools.html](https://helpx.adobe.com/jp/xd/help/drawing-text-tools.html)

 

### 反転

反転機能は変形のプロパティ画面内にあり、オブジェクトを選択した状態で反転アイコンをクリックすると、反転することができます。  
※テキスト編集中など反転できない状態のときは、反転アイコンがグレーで表示されます。

参考：オブジェクトのグループ化、ロック、複製、コピー、および反転  
[https://helpx.adobe.com/jp/xd/help/group-lock-duplicate-objects.html](https://helpx.adobe.com/jp/xd/help/group-lock-duplicate-objects.html)

 

### ぼかし

#### シャドウ（内側）

オブジェクトを選択した状態で「シャドウ（内側）」にチェックを入れると、オブジェクトの内側にシャドウが入ります。  
シャドウを使って押されているのがわかるような立体的なデザインを作成することもできます。

 

#### ドロップシャドウ

オブジェクトを選択した状態で「ドロップシャドウ」にチェックを入れると、オブジェクトの外側にシャドウが入ります。  
カードデザイン、ボタン、画像などに影の濃淡やぼかしテクニックをプラスすることで表現の幅を広げることができます。

 

#### 背景のぼかし

オブジェクトを選択し「背景のぼかし」にチェックを入れると、オブジェクトの背景にある要素をぼかすことができます。  
ぼかしの表現は、「ぼかしの量」「明るさ」「不透明度」で調整できます。  
例えばこの機能を使ってiOS製品に取り入れられている、すりガラスのようなグラスモーフィズムデザインを表現することができます。

 

#### オブジェクトのぼかし

オブジェクトを選択し「オブジェクトのぼかし」にチェックを入れると、オブジェクト全体にぼかしが入ります。  
「量」のスライダーや数値でぼかしの調整ができますが、ぼかした分サイズが大きくなるので注意してください。

参考：XDでぼかし効果をあたえる  
[https://helpx.adobe.com/jp/xd/help/background-blur.html](https://helpx.adobe.com/jp/xd/help/background-blur.html)

 

### スクロール

固定された表示エリアの中で、オブジェクトをスクロールさせることができます。

 

#### 水平方向（ 横 ）にスクロール

スクロールさせたいオブジェクトを複数選択し、横スクロールアイコンをクリックするとスライダーが作成できます。  
青枠の範囲を変えると、表示エリアが調整できます。  
また、スクロールの動作を確認したいときはプレビューで確認しましょう。

 

#### 垂直方向（ 縦 ）にスクロール

縦スクロールアイコンをクリックすると、高さを固定したエリアの中で縦方向に要素をスクロールさせることができます。手順は横スクロールと同様です。  
以下は、お知らせ部分を縦スクロールにした場合の手順です。

参考：Adobe XD でスクロールグループを作成する  
[https://helpx.adobe.com/jp/xd/help/create-scroll-groups.html](https://helpx.adobe.com/jp/xd/help/create-scroll-groups.html)

 

### クリッピングマスク

画像などを丸や矩形、シェイプなどで切り抜きたいときに使います。  
切り抜きたい形のオブジェクトの下に画像を配置し、右クリックで「クリッピングマスク」を選択してください。画像はクリッピングマスクをした後に、切り抜きの位置を調整したりぼかしを入れることもできます。  
クリッピングマスクを解除するときは、右クリックで「マスクをグループ化解除」を選択してください。

| クリッピングマスクの作成手順 1 ドラッグ＆ドロップで画像を配置、1366pxにサイズ調整、整列の「中央揃え（水平）」でアートボードの中央へ配置 2 長方形（ キーボード R ）で1366px × 350pxのオブジェクトを作成 3 画像とオブジェクトを選択、右クリックで表示されるメニューから「シェイプでマスク」を選択 4 画像をダブルクリックして画像の位置を調整 5 画像にぼかしをかけたいときは画像レイヤーを選択、「オブジェクトのぼかし」にチェック（ぼかし量：8） |
| --- |

参考：動画で使用しているショートカットキーをご紹介しています  
[https://www.accesight.com/blog/xd-tools-introduction-for-beginners](https://www.accesight.com/blog/xd-tools-introduction-for-beginners)

 

### カラー

オブジェクトを選択して塗りや線の色部分をクリックすると表示される、カラーピッカーから「べた塗り」「グラデーション」を選んでカラーを変更することができます。  
グラデーション機能には、「線形グラデーション」「円形グラデーション」「円錐グラデーション」があります。

#### カラーの保存と削除

カラーピッカー内の「 + 」をクリックすると、よく使う色などを保存することができます。  
ただし、色の保存は単色のみで、グラデーションの保存はできません。  
グラデーションを保存したいときは「アセット」に保存しましょう。

| カラーの保存と削除の手順 1 オブジェクトを選択したまま、カラーを選択 2 ＋をクリックしカラーを保存 3 削除したいカラーをドラッグしたまま外へ移動 |
| --- |

 

#### カラーコード

カラーコードや数値で色を指定したいときは、カラーピッカーにある Hex、RGB、HSBタブ から選び、数値を指定をしてください。

| **Hex** | 16進数カラーコード |
| --- | --- |
| **RGB** | 三原色　R（ 赤 ）G（ 緑 ）B（ 青 ） |
| **HSB** | 色の三属性　色相（ Hue ）彩度（ Saturation ）明度（ BrightnessまたはValue ） |

 

#### 線形グラデーション

「線形グラデーション」にするとオブジェクト上に2点のコーナーハンドルが表示されるので、それぞれのハンドルに色を設定してください。コーナーハンドルの間をクリックすると、色を追加することができます。  
グラデーションの傾きは数値で設定することができないので、ハンドルをドラッグして角度を調整してください。

 

#### 円形グラデーション

円形グラデーションは以下の手順で作成できます。

| 円形グラデーションの作成手順 1 オブジェクトを選択したままタブから「円形グラデーション」を選択 2 「外側ハンドル」を動かすと均等の大きさで拡大縮小 3 端の「ポイント」を動かすと自由変形 4 「外側ハンドル」のカラーを選択 5 カラーの分岐点をクリックで追加し、カラーを選択、「ハンドル」の位置を調整 |
| --- |

## Webデザインのパーツを作成

ここからは実際にWebデザインパーツの作成をしていきます。  
動画の手順通りにするだけで簡単に作ることができるので、ぜひ参考にしてみてください。

### ヘッダーメニューを作成

以下では「リピートグリッド」「スタック」「整列」の機能を使ってヘッダーメニューを作成しています。

| ヘッダーメニューの作成手順 1 テキスト（ キーボード T ）を1つ作成し、「リピートグリッド」でテキストをリピートする 2 要素と要素の間の余白（ピンクで表示される部分をドラッグしたまま、左右に動かしながら）調整、その後「リピートグリッド」を解除 3 解除したテキストを1つのフォルダにまとめ（  Ctrl  /  Cmd   +  G  ）、「スタック」にチェックを入れ余白を60で整える 4 ヘッダーロゴの縦中心にメニューを配置するため、ロゴを選択し整列の「上揃え」「中央揃え（垂直）」でメニューを移動・配置 5 Shift を押しながら平行移動し、位置調整 |
| --- |

 

### スライダーを作成

以下では「リピートグリッド」「整列」「反転」の機能を使ってスライダー全体のデザインを作成しています。

| スライダーの作成手順 1 繰り返し複製したいオブジェクトを選択し「リピートグリッド」でリピートする 2 オブジェクトを選択し、ぼかしを追加 3 画像を選択しドラッグ＆ドロップで各オブジェクトの画像を変更 4 楕円形（ キーボード E ）で円を作成し、「リピートグリッド」でインジケーターを作成 5 整列の「中央揃え（水平方向）」でインジケーターを中心に揃え、「リピートグリッド」を解除し、色と位置を調整 6 スライダーの左右の矢印を作成 |
| --- |

 

### お知らせを作成

以下では「スタック」「パディング」「整列」「リピート」の機能を使ってお知らせを作成しています。

| お知らせの作成手順 1 カテゴリを「整列」「パディング」で作成 2 日付とカテゴリとテキストを「スタック」で位置調整 3 レイヤー順を調整、情報要素と背景を選択し2つの要素を「中央揃え（垂直：縦方向）」にする 4 お知らせを「リピートグリッド」でリピートする 5 再び「リピートグリッド」をクリックし解除 |
| --- |

## まとめ

この記事ではXDの便利な機能について、各機能の詳細や操作方法の解説をしました。  
紹介した「リピートグリッド」「スタック」「整列」などを覚えると、作業効率が上がり応用もできるようになります。  
XDの操作で悩んでいる方、困っている方は、ぜひ活用してみてください！

<https://www.accesight.com/hs/cta/wi/redirect?encryptedPayload=AVxigLJSaf6ke7u19CWZ05Htn%2BxiTXpIf3%2Fn9s6kszlyHgKg25fksiNKMsVXbCtiHQQISm6tiXvrtOSaJ%2FY9%2BT59pJQ%2FmijMzBCHeOJyJgFk5a0FFEu%2BLSk92pWSHMifizSsXtp3rHTA2HyGNcXre3ZuO2FiB%2BaO%2BO2BOGsQgeZ5cAH7x5K%2BaZI%3D&webInteractiveContentId=160644264243&portalId=4506560>

[完全な記事を表示](https://www.accesight.com/blog/useful-adobe-xd-features-for-web-design)

```json
{
  "@context" : "http://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "アクセサイト編集担当"
  },
  "dateModified" : "2024-03-14T01:12:28.082Z",
  "datePublished" : "2023-06-20T01:54:43Z",
  "headline" : "【初心者向け】XDでWebデザイン！　- 便利な機能や操作方法をご紹介！",
  "image" : {
    "@type" : "ImageObject",
    "height" : 675,
    "url" : "https://www.accesight.com/hubfs/blog/2023/202305-yt/feat.png",
    "width" : 1200
  },
  "mainEntityOfPage" : "https://www.accesight.com/blog/useful-adobe-xd-features-for-web-design",
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "height" : 60.0,
      "url" : "https://www.accesight.com/hubfs/accesight2021/assets/images/common/logo_black_png.png",
      "width" : 188.85155
    },
    "name" : "ブログ"
  }
}
```