UI/UXデザインの世界へようこそ。伝説的なエンジニアの視点から、Adobe XDにおける「コンポーネント」と「ステート」の真髄を伝授します。
多くのデザイナーが陥る罠は、「画面ごとにボタンを描き直す」という非効率なルーチンワークです。これが積み重なると、仕様変更のたびに地獄を見ることになります。
今日からその作業を「資産運用」に変えましょう。コンポーネントとステートをマスターすれば、あなたの手元には「いつでも引き出せる強力なUI部品のライブラリ」が構築されます。
—
1. Adobe XDの「コンポーネント」：UIのDNAを設計する
コンポーネントとは、いわば「親」となるマスターパーツです。一度定義すれば、どこで使われていても、親を修正するだけで全ての子パーツに反映されます。
最初のセットアップ：HelloWorld的なボタン作成
まずは、最も基本的な「ボタン」を作ってみましょう。
1. 矩形とテキストを作成: 角丸の四角形と、その上にテキストを配置します。
2. グループ化してコンポーネント化: 両方を選択し、`Cmd + K` (Win: `Ctrl + K`) を押します。
- これで、レイヤーパネルに「緑色のひし形アイコン」が表示されます。これが「メインコンポーネント（親）」です。
3. インスタンスの作成: このボタンをコピーして別の場所に配置してください。アイコンが「中空のひし形」になります。これが「インスタンス（子）」です。
ここが重要：
親の背景色を変えてみてください。コピーした子パーツの色も瞬時に変わるはずです。これが「単一ソースの真実（Single Source of Truth）」の考え方です。
—
2. 「ステート」機能：動的な振る舞いをデザインに宿す
UIは静止画ではありません。ユーザーが操作した時の「反応」こそがUXの本質です。ここで登場するのが「ステート（状態）」機能です。
ステートの作り方（ホバーアクションの実装）
ボタンに「マウスを乗せた時の色変化」を与えてみましょう。
1. メインコンポーネントを選択: 右側のプロパティインスペクタを見てください。
2. 「初期設定」の横の「＋」をクリック: 「ホバー状態」を選択します。
3. プロパティの変更: ホバー状態が選択された状態で、ボタンの色を少し濃くします。
4. プレビュー: 右上の「再生ボタン（デスクトッププレビュー）」を押して、ボタンにマウスを乗せてみてください。
解説：
ステートを使えば、同じコンポーネントの中に「通常時」「ホバー時」「押下時」「無効時」をすべて閉じ込めることができます。これにより、デザインデータが劇的に整理され、エンジニアへのハンドオフ（引き渡し）も圧倒的にスムーズになります。
—
3. 実践：プロフェッショナルが守るべき3つの掟
現場で震えるほど役立つ、効率化のための黄金ルールをお伝えします。
① 「アセットパネル」を常に活用せよ
作成したコンポーネントは、必ず「アセットパネル（左下のアイコン）」にドラッグ＆ドロップして登録しましょう。ここがあなたの「UI資産庫」になります。名前を整理するだけで、チーム開発の効率が200%向上します。
② 「レスポンシブサイズ変更」をオンにする
コンポーネント内の要素を選択し、右側の「レスポンシブサイズ変更」を自動（または手動）に設定してください。これにより、ボタンのテキストが長くなっても、背景が自動的に追従して伸縮します。
③ コンポーネントの「オーバーライド」を理解する
子パーツ（インスタンス）のテキストだけ変えたい場合は、そのまま変更してOKです。XDは「テキストの変化」を「オーバーライド（上書き）」として認識し、それ以外の属性（色や角丸など）は親の制御下に残します。この仕組みを理解すると、自由度と管理の両立が可能になります。
—
最後に：デザインは「エンジニアリング」である
UIデザインとは、ただ綺麗な絵を描くことではありません。「再利用可能な論理構造を構築すること」です。
今回紹介したコンポーネントとステートを使いこなせば、毎日の作業は「手作業」から「組み立て作業」に変わります。あなたがデザインにかけた時間は、すべて「次回の開発」を加速させるための投資になるのです。
まずは、今作っているプロジェクトのボタンを一つ、コンポーネント化することから始めてみてください。その瞬間、あなたのデザインは「壊れにくい、強固なシステム」へと進化します。
何か詰まったら、いつでも戻ってきてください。私たちは常に、より良いプロダクト作りの旅を応援しています。