この記事ではAdobe XDのコンポーネント機能について紹介していきます。
Adobe XDのおすすめできる便利機能１つなので、ぜひ今回の記事で使い方をマスターしていきましょう。
この記事は「Adobe XDのアセット機能の使い方を学ぼう」の続きの記事となります。
まだこちらの記事を読んでいない方は、合わせてご覧いただけると幸いです。
目次
コンポーネント機能を学ぼう
それでは早速、コンポーネント機能について学んでいきましょう。
コンポーネント機能とは
コンポーネント機能とは、デザインで繰り返し使用するパーツを呼び出せる機能です。
コンポーネント（component）は、構成要素・部品・成分などの意味を持つ英単語です。
Webサイトのコンポーネント
- ヘッダー
- フッター
- ボタン
- その他サイト内で使い回すパーツ
上記の項目に該当する要素は、コンポーネントとして管理します。
コンポーネント機能の特徴
それでは次に、コンポーネント機能の特徴について紹介していきます。
この章で、コンポーネント機能に対するイメージを膨らませていきましょう。
保存したコンポーネントを呼び出せる
コンポーネント機能は、保存したコンポーネントを呼び出すことができます。
コンポーネントを呼び出す例
アセットパネルからコンポーネントをドラッグ&ドロップしてあげましょう。
画像の例のように、繰り返しWebサイト内で使用される構造はコンポーネントから呼び出します。
一括で編集できる
次は、「一括で編集できる」特徴について紹介します。
この特徴は、コンポーネント機能の１番大事な部分なので、絶対に覚えてください。
一括で編集する例
画像の例のように、コンポーネント化された要素を編集すると、 そのほかのコンポーネントにも編集が反映されていることが確認できるかと思います。
このようにコンポーネント化された要素は、一括で編集することが可能になるのです。
コンポーネントの考え方
次に、コンポーネントが一括で編集される仕組みについて考えていきましょう。
このコンポーネントの考え方の理解をしておくことで、デザイン制作の効率が格段に上昇します。
メインコンポーネントとインスタンス
まずはコンポーネントの基本的な形を覚えておきましょう。
コンポーネントには大きく分けて２種類のものがあります。
この２種類のコンポーネントについて必ず覚えるようにしましょう。
- メインコンポーネント：コンポーネントの元になっている構造（本体）
- インスタンス：メインコンポーネントの複製
上記２つのコンポーネントを簡単に説明すると以上になります。
メインコンポーネントを編集する
メインコンポーネントを編集すると、対応するインスタンスに編集が内容が反映されます。
先ほど例にあった一括編集は、メインコンポーネントを編集していたのです。
インスタンスを編集する
反対に、インスタンスを編集すると、個別に編集した内容が反映されます。
コンポーネントの中で特別に１つだけ修正をしたい場合は、こちらのインスタンスの編集を行います。
ここまでのまとめ
ここまでの話をまとめると以下のようになります。
- メインコンポーネントを編集すると、一括で編集できる
- インスタンスを編集すると、個別にそのまま編集できる
一旦、上記のイメージを持っていただければ大丈夫です。
コンポーネントの役割
ここで、コンポーネントを何故、使用するのかについて考えてみましょう。
大事なこととして、繰り返し使用する要素をコンポーネント化しておくことで、 同じ要素を１つ１つ編集する必要がなくなります。
例えば、100ページあるサイトのヘッダーを修正するには、100回の修正が必要になります。
（１ページに１つヘッダーがあるため。）
しかし、ヘッダーをコンポーネント化しておくことで、１回の編集で修正が完了します。
つまり、コンポーネントは、デザインの修正を一括で行うために必要なのです。
この記事を読んだ皆さんは、デザインを制作する際に繰り返し使用する構造は必ずコンポーネント化しておきましょう。
コンポーネント機能の使い方
ここまでで、コンポーネント機能がとても大切なことだと伝わっていれば幸いです。 最後に、Adobe XDでのコンポーネント機能の使い方について紹介していきます。
メインコンポーネントをまとめるアートボードを作成する
まずは、コンポーネントをまとめるアートボードを作成します。
アートボード名はわかりやすいように「コンポーネント」としておきましょう。
コンポーネントになる要素を作成する
次にコンポーネントになる要素を作成します。
作成が完了したら、いよいよコンポーネント化に移ります。
コンポーネント化して保存する
次に、コンポーネント化したい要素を選択してアセットパネルに登録します。
アセットパネルのコンポーネントの欄の「+」をクリックすることで保存ができます。
ここで保存された要素はメインコンポーネントとなるので、 行方不明にならないように、先ほど作成したコンポーネントをまとめるアートボードに置いておきましょう。
ショートカット要素を選択後、以下のショートカットでも保存ができます。
Windows：Ctrl K
Mac：Command K
保存したコンポーネントを呼び出す
保存が完了したら、コンポーネントを呼び出します。
アセットパネルからコンポーネントをドラッグ＆ドロップしましょう。
ここでアセットパネルから呼び出されたコンポーネントはインスタンスとなります。
デザイン上に配置するコンポーネントは基本的にインスタンスになります。
以上がAdobe XDでのコンポーネント機能の使い方になります。
アセットパネルでコンポーネントを右クリックすると「ハイライト表示」もできるので、 どこでコンポーネントの要素が使われているか確認も楽です。
コンポーネントを活用しよう
Webサイトのデザインを制作は「修正」との戦いです。
デザインは完成に至るまでに何度も微修正が重ねられます。
繰り返し使用する要素を小まめにコンポーネント化しておくことで、 後々起きてしまう大掛かりな修正を簡単に済ますことができます。
- ヘッダー
- フッター
- ボタン
- その他サイト内で使い回すパーツ
上記の構造を作成したら、必ずコンポーネント化しておくようにしましょう。
