XDの基本操作・アートボード
Adobe XDとは・他ツールとの比較
Adobe XDはWebサイト・モバイルアプリのUIデザインとプロトタイプ作成に特化したツール。Adobe Creative Cloudに含まれており、Photoshop・Illustratorとの連携が強みです。
| ツール | 価格 | 共同編集 | 主な特徴 |
|---|---|---|---|
| Adobe XD | CC契約に含む | あり（制限あり） | Adobe連携が強力・プロトタイプが高速 |
| Figma | 無料〜（チームは有料） | リアルタイム | ブラウザベース・業界標準になりつつある |
| Sketch | 有料（Mac専用） | プラグイン経由 | Mac専用・プラグインが豊富 |
XDはAdobeアプリとの連携が最大の強み
Photoshopで編集した画像をXDに直接貼り付けたり、Illustratorのベクター素材をそのまま使ったりできる。Adobe CCを使っているチームに特に相性が良い。
画面構成
ツールバー（左）
選択・図形・テキスト・ペン・ズームなどの描画ツール
レイヤーパネル（左下）
オブジェクトの階層構造。グループ・コンポーネントの管理に使う
キャンバス（中央）
デザインを実際に描くメインエリア。アートボードはここに配置される
プロパティパネル（右）
選択中のオブジェクトのサイズ・位置・カラー・影などを編集する
| 操作 | ショートカット |
|---|---|
| ズームイン | Cmd + / Ctrl + |
| 全体表示 | Cmd 0 / Ctrl 0 |
| 100%表示 | Cmd 1 / Ctrl 1 |
アートボードの作成
アートボードはデザインを描くキャンバスの「枠」。デバイスのサイズに合わせて作成し、1ファイルに複数並べてページ遷移を表現できます。
| デバイス | 推奨サイズ | 用途 |
|---|---|---|
| iPhone 14 Pro | 393 × 852 px | スマートフォンUI |
| iPad Air | 820 × 1180 px | タブレットUI |
| Web 1440 | 1440 × 900 px | Webサイト（PC） |
基本図形・テキスト・整列
| ツール | ショートカット | コツ |
|---|---|---|
| 長方形 | R | Shiftを押しながらドラッグで正方形 |
| 楕円 | E | Shiftを押しながらドラッグで正円 |
| テキスト | T | クリックでポイント、ドラッグでエリアテキスト |
整列はアートボードを基準にするか確認する
複数オブジェクトを選択して整列する際、「アートボードを基準」と「選択範囲を基準」がある。画面中央に配置したい場合はアートボード基準を選択すること。
- XDはAdobe CC連携が強みのUIデザインツール。Figmaと比較して選択する
- 画面は「ツールバー・レイヤー・キャンバス・プロパティ」の4エリアで構成
- アートボードはデバイスプリセットまたはカスタムサイズで作成する
- 1ファイルに複数アートボードを並べて画面遷移を表現できる
- 8pxグリッドを設定してWebデザインの基準に揃えた設計を行う
ワイヤーフレームの作成
ワイヤーフレームの目的
ワイヤーフレーム（WF）とは、色や画像を使わずグレーのボックスとテキストのみでページの情報構造を表した設計図です。デザインの前にコンテンツの優先順位と配置を確定させることが目的。
認識のズレを防ぐ
口頭説明だけでは曖昧なレイアウトをWFで共有し、早期に合意を取る
修正コストの削減
デザイン後の大幅レイアウト変更を防ぐ。WF段階での修正は数分で完了
情報の優先順位整理
要素の大きさ・配置が情報の重要度を表す。コンテンツ設計に集中できる
XDでのWF作成のコツ
WFはグレースケールのみで作成する。#888・#CCC・#EEEの3色だけで十分。カラーを使い始めると「デザイン」の議論になってしまう。
コンポーネント（マスターとインスタンス）
コンポーネントは再利用可能なUIパーツ。マスターを変更するとすべてのインスタンスに変更が反映され、インスタンスではテキスト・色などをオーバーライドで個別変更できます。
| ステップ | 操作 |
|---|---|
| ① UIパーツを作成 | ボタンやカードをグループ化して作成 |
| ② コンポーネント化 | 右クリック → コンポーネントを作成（または Cmd+K） |
| ③ 配置 | アセットパネルからドラッグしてインスタンスを配置 |
| ④ オーバーライド | インスタンスのテキストや色を個別に変更 |
リピートグリッド
1つのUIパーツを縦・横に瞬時に複製する機能。カードリスト・ギャラリー・テーブルを効率よく量産できます。
| ステップ | 操作 |
|---|---|
| ① 元のパーツを選択 | カードや行などのUIパーツを選択する |
| ② リピートグリッドに変換 | 右パネルの「リピートグリッド」ボタンをクリック |
| ③ サイズ調整 | 緑のハンドルをドラッグして列・行数を増減 |
| ④ データ一括置換 | 画像ファイルをドラッグ＆ドロップで一括置換 |
スタイルの管理
| スタイル名の例 | フォントサイズ | ウェイト |
|---|---|---|
| 見出し H1 | 32px | 900（Black） |
| 見出し H2 | 24px | 700（Bold） |
| 本文 Regular | 15px | 400（Regular） |
| キャプション | 12px | 400（Regular） |
スタイルは最初から登録する習慣をつける
デザインが進んでからスタイルを後付けすると、ばらつきが多く修正コストが高くなる。プロジェクト開始時にカラーパレットと文字スタイルを先に設計・登録することを習慣にしよう。
- WFはグレースケールのみで作成し、コンテンツの構造設計に集中する
- コンポーネントはマスターを変更するとインスタンス全体に反映される
- リピートグリッドでカード・リスト・テーブルを瞬時に量産できる
- カラースタイルと文字スタイルはプロジェクト開始時に先に登録する
UIデザイン・ビジュアル仕上げ
カラーシステムの設計
| カラーロール | 役割 | 使用場所の例 |
|---|---|---|
| プライマリ | ブランドの主要色。最も多く使う | ナビ背景・ボタン・アクティブ状態 |
| セカンダリ | プライマリを補完する色 | バッジ・タグ・補足情報 |
| ニュートラル | テキスト・背景・ボーダーに使うグレー系 | 本文・背景・区切り線 |
ニュートラルカラーは50〜900の9段階で設計するのが一般的（Tailwind CSSの命名規則が参考になる）。
| トーン | カラーコード例 | 主な用途 |
|---|---|---|
| 50 | #F9FAFB | ページ背景 |
| 400 | #9CA3AF | プレースホルダー・補足テキスト |
| 700 | #374151 | 本文テキスト |
| 900 | #111827 | 見出し・高コントラストテキスト |
タイポグラフィスケール
| 名称 | サイズ | 行間 | 用途 |
|---|---|---|---|
| Display | 48px | 1.1 | ヒーロータイトル |
| H1 | 36px | 1.2 | ページ見出し |
| H2 | 28px | 1.3 | セクション見出し |
| Body | 15px | 1.8 | 本文 |
| Caption | 12px | 1.6 | キャプション・注釈 |
行間は小さいほど狭く、大きいほど広い
見出しは行間を狭く（1.1〜1.3）、本文は広く（1.7〜1.9）設定するのが読みやすいデザインの基本。日本語は英語より行間を少し広めにとるとよい。
シャドウ・ぼかし・グラデーション
| エフェクト | 設定場所 | 使い方のポイント |
|---|---|---|
| ドロップシャドウ | プロパティパネル下部 | カード・モーダルに使用。ぼかしを大きくすると柔らかい印象 |
| 背景のぼかし | プロパティパネル下部 | グラスモーフィズム表現 |
| 線形グラデーション | 塗りの種類を変更 | ヒーロー背景・CTAボタン |
エフェクトの多用はデザインを重くする
シャドウやぼかしは過剰に使うと視認性が下がる。シャドウはカードなど「浮いている要素」のみに限定し、同じページ内で2〜3種類以内に抑えること。
- カラーシステムはプライマリ・セカンダリ・ニュートラルの3ロールで設計する
- ニュートラルカラーは50〜900の段階で用意し用途を決める
- 行間は見出しを狭く（1.1〜1.3）、本文を広く（1.7〜1.9）設定する
- シャドウ・ぼかし・グラデーションは「浮いている要素」のみに限定して使う
プロトタイプ・共有・書き出し
プロトタイプモード
プロトタイプモードはアートボード間の画面遷移を設定するモードです。クリッカブルなモックアップを作成してユーザーテストに活用できます。
| ステップ | 操作 |
|---|---|
| ① プロトタイプモードに切替 | 上部の「プロトタイプ」タブをクリック |
| ② 要素を選択 | ボタンやリンクなどの要素をクリック |
| ③ 矢印をドラッグ | 要素の右側の矢印を遷移先アートボードへドラッグ |
| ④ 遷移設定 | トリガー・アニメーション・イージングを設定 |
| ⑤ プレビュー | Cmd+Enter（Mac）でプレビューモードを起動 |
プロトタイプはユーザーテストに活用する
クリッカブルなプロトタイプをユーザーに操作させることで、「このボタンの意味がわからない」「次にどこをタップすればいいかわからない」といった問題をコーディング前に発見できる。
アニメーション・オーバーレイ
| トランジション | 動き | 向いている場面 |
|---|---|---|
| スライド | 画面が左右・上下にスライド | ページ遷移・ステップナビゲーション |
| プッシュ | 新画面が押し出すように移動 | モバイルの画面遷移 |
| ディゾルブ | フェードイン・フェードアウト | モーダル・ダイアログ表示 |
| なし（即時） | アニメーションなしで即切替 | タブ切り替え・高速レスポンス |
開発者向け共有・アセット書き出し
サイズ・位置
要素をクリックすると幅・高さ・X/Y座標が表示される
カラーコード
塗り・ボーダーのカラーコードをHEX・RGB・HLSで確認できる
フォント情報
フォント名・サイズ・行間・文字間・ウェイトが一覧表示される
| フォーマット | 用途 | 特徴 |
|---|---|---|
| SVG | アイコン・ロゴ・図形 | ベクター・どんな解像度でも綺麗 |
| PNG | UI素材・透過が必要な画像 | ロスレス圧縮・透過対応 |
| JPG | 写真・背景画像 | ファイルサイズが小さい |
書き出しマーク設定で素材を一括管理
書き出したい要素に「書き出しマーク」を設定すると、「ファイル → 書き出し → バッチ書き出し」で全マーク済み素材を一括書き出しできる。Retina対応のため1x・2xの両サイズを書き出すことを忘れずに。
- プロトタイプモードで要素からアートボードへ矢印を引いて画面遷移を設定する
- トランジションはスライド・プッシュ・ディゾルブ・即時の4種類を使い分ける
- 開発者向け共有でコーダーがブラウザ上でスペックとCSSを確認できる
- アイコン・ロゴはSVG、UI素材はPNG、写真はJPGで書き出す
- Retina対応のため1x・2xの両サイズを書き出す