Adobe XDでウェブデザインを加速する！[第３回] 変更もラクラク！CCライブラリ＆アセットパネルでスタイルを管理
Adobe XDでウェブデザインを加速する！
ウェブデザインには同じボタンや文字スタイルが繰り返し登場します。CSSでのスタイリングを前提とするなら、一度つくったデザインアセットをコピー＆ペーストして複数配置する方法は大変理に適っています。ですが、変更が入ったときに、何か所も同じ修正を繰り返すのはちょっと面倒ですね。そこで今回はAdobe XDのアセットパネルとCCライブラリを活用したスタイル管理の手法を紹介します。
CCライブラリでスタイルを管理する
前回は、CCライブラリを使って、PhotoshopやIllustratorのデータをXDと共有するワークフローを紹介しました。CCライブラリは、ビットマップやベクターデータのほかにも、カラーや文字スタイル、XDのコンポーネントといったさまざまな素材（アセット）を管理できます。これを利用すると、たとえば、CCライブラリにPhotoshopのスウォッチを登録して、複数のアプリ間でカラーパレットを統一するといった使い方が可能です。すなわち、CCライブラリをプロジェクトのスタイル管理に利用するという考え方です。
PhotoshopのCCライブラリパネル
PhotoshopからCCライブラリにカラーを登録するには、レイヤーを選択してCCライブラリパネルの下部にある「＋」マークをクリックします。カラー以外にも、文字スタイルやグラフィックを登録してXDと共有できます。Illustratorからも同様に、オブジェクトを選択してからCCライブラリパネルの「＋」マークをクリックすれば、カラーや文字スタイルを登録できます。
XDとIllustratorのCCライブラリパネル
CCライブラリに登録したスタイルをXDのオブジェクトに適用するには、目的のオブジェクトを選択してから、CCライブラリのカラーや文字スタイルをクリックします。この操作により、オブジェクトの塗りとテキストの文字スタイルを指定することが可能です。
ただしこの場合、スタイルを適用したいオブジェクトを一つひとつ手作業で選択しなければなりません。従って、複数配置されたデザイン要素の詳細なスタイル管理にCCライブラリを使用するのは、あまり効率的ではありません。CCライブラリは、ツール間あるいはチーム内でスタイルを共有することを目的に使用するのがよいでしょう。
アセットパネルでスタイルを管理する
XDのアセットパネルは、スタイル管理の強い味方です。カラーや文字スタイルをアセットパネル登録すると、カンバス内の同じスタイルを一括変更できるようになります。しかも、その際、変更対象を選択する必要はありません。XDのアセットは、スウォッチやIllustratorのシンボル、Photoshopのスマートオブジェクトと似た性質もありますが、よりウェブデザインやUIデザインに適した使い方ができます。
- デザインに含まれるカラー、文字スタイルを一括修正できる
- 一貫性のあるデザイン実現を支援するスタイルガイドとして利用できる
- 柔軟なスタイル管理を可能にする「コンポーネント」を扱える
- 登録されたスタイルを、開発者に渡す資料の一部として自動的に書き出せる
初期段階からアセットパネルを積極的に活用しながらデザイン作業を進めれば、カラーリング（配色）やフォントに一貫性のあるデザインを容易に、かつ効率的に実現できます。アセットパネルの表示は、Cmd+Shift+Y（Mac）/ Ctrl+Shift+Y（Win）キーを使って切り替えます。ツールバーの下から3番目のアイコンをクリックして表示することもできます。
XDのアセットパネル
アセットパネルにアセットを追加する
アセットパネルに登録できるアセットは以下の通りです。（コンポーネントは作成時に自動的に登録されます）
- カラー …べた塗り、線形グラデーション、円形グラデーションを登録できます。
- 文字スタイル …フォント・色・サイズなどの組み合わせを登録できます。
- コンポーネント … XDのコンポーネントを作成すると自動的に登録されます。
アセットを登録するには、アセットとして登録したいスタイルを持つオブジェクトを選択し、カラーあるいは文字スタイルの欄に表示される「＋」マークをクリックします。その際、複数のオブジェクトを選択すると、まとめてカラーや文字スタイルを登録できます。なお、「＋」マークが表示されるのは未登録のアセットを持つオブジェクトが選択されている時だけです。
登録したアセットは、デフォルトの名前が与えられています。これをダブルクリックして書き換えれば、トークン（識別名）を指定できます。開発者を始め、チーム内で共有するための呼称なので、分かりやすい固有の名前をつけるようにしましょう。ちなみに、CSSのプロパティに合わせて、以下のような色を登録しておくとコーディングするときに便利です。
background-color…背景色
color…文字色
a:link… 未訪問のリンク
a:visited … 訪問済みのリンク
a:hover… ホバーときのリンク
文字スタイルについては、本文（pタグ）やテキストリンクのほかに、見出しや強調したいときのスタイルを登録しておくとよいでしょう。
アセットの一括変更
前述の通り、アセットパネルの利点のひとつは、登録されているアセットを編集すると、カンバス上のすべての同じアセット（カラー、または文字スタイル）を一度に変更できることです。たとえばデザインをある程度つくりきったあとで、色を変えて欲しい！！と言われたとします。こうしたとき、その色が使われているオブジェクトを全部探すのは面倒ですし、見逃す可能性もあります。アセットパネルに、元になる色をあらかじめ登録してあれば、XDが同じ色をすべて別の色へ一括変換してくれます。
登録したカラーを変更すると、カンバス上のすべての同じカラーに反映される
上の図では、モスグリーンの色を選択し、それを黄色に変更しています。左側のアートボードの四角いオブジェクトに加え、罫線や小さな日付といった、手作業では見落とされがちな部分も変化しています。
オブジェクトのスタイルが既にアセットとして登録されているかを確認するには、オブジェクトを右クリックして「アセットの（カラー/文字スタイル）を表示」がコンテキストメニューに含まれていることを確認します。項目を選択すると、アセットパネル内の該当するアセットがハイライトされます。
「アセットのカラーを表示」を選択すると、アセットパネル内の該当するアセットがハイライトされる
反対に、アセットパネルから、カンバス上で実際にアセットが使われている場所を確認するには、アセットパネル内のアセットを選択し、右クリック→「カンバスでハイライト」を選択します。すると、カンバス上の該当するアセットがハイライト表示されます。
「カンバスでハイライト」を選択するとカンバス上の該当するアセットがハイライトされる
コンポーネントを使ってスタイルを管理
アセットパネルを使うと、カラーや文字スタイルを一括変更できるのは便利ですが、カンバス上の全オブジェクトを対象にするのではなく、特定の要素（たとえばナビゲーションボタンの背景色）だけを変えたいという場合もあるでしょう。そんな時に便利なのが「コンポーネント」です。
ボタンやアイコンをコンポーネントとして登録してから複製してデザインで使いまわした場合、親となる「メインコンポーネント」を修正すれば、すべてのメインコンポーネントのコピー（インスタンス）を一括修正できます。これはIllustratorのシンボルやPhotoshopのスマートオブジェクトと似た機能ですが、異なる点もあります。具体的な使い方を見ていきましょう。
コンポーネントの登録と削除
オブジェクトをコンポーネントに変換すると、自動的にアセットパネルに追加されます。オブジェクトをコンポーネントに変換するには、次のいずれかの操作を実行します。
- オブジェクトを右クリックし、「コンポーネントにする」を選択します。
- オブジェクトを選択し、Ctrl + K キーを押します。
- Mac の場合、オブジェクトを選択し、オブジェクト／コンポーネントにするを選択します。
- オブジェクトを選択し、アセットパネル内のコンポーネント欄の「+」をクリックします。
アセットパネルに登録されたコンポーネントを右クリックし、「削除」を選択するとコンポーネントを削除できます。その際、カンバスに配置されているすべてのコンポーネントが通常のオブジェクトに変換されます。一方、アートボード上のコンポーネントを右クリックし、「コンポーネントをグループ解除」を選択した場合は、選択されていたコンポーネントだけが解除され、アセットパネルのコンポーネントの登録は削除されません。
コンポーネントの関係と特性を理解しよう
最初に変換したコンポーネントは「メインコンポーネント」と呼ばれる特別な存在です。メインコンポーネントの複製は「インスタンス」と呼ばれます。メインコンポーネントとインスタンスはいずれも編集が可能ですが、特徴を理解した上で使い分けると効率的に作業ができます。
メインコンポーネント（親）の編集
コンポーネントを選択すると、左上にひし形のマークが表示されます。これが緑色に塗りつぶされているのがメインコンポーネントです。下の図では、左側がメインコンポーネントで、中央と右側がインスタンスです。インスタンスはそれぞれテキストが変更されています。
インスタンスのテキストが変更されている
メインコンポーネントをダブルクリックするか、インスタンス（またはアセットパネルに登録されているコンポーネント）を右クリックし「メインコンポーネントを編集」を選択するとメインコンポーネントを編集できます。
すべてのコンポーネントのコピーの色や形などを変更したいときは、メインコンポーネントを編集します。メインコンポーネントへの変更は、即座に全インスタンスに反映されます。アセットパネルのカラーと文字スタイルがグローバルスタイルの管理用だとすれば、コンポーネントは、部品ごとのローカルなスタイル管理用と言えます。
メインコンポーネントの変更がインスタンスにも即座に反映された
デザインが進むにつれて、メインコンポーネントがどこにあるのか分かりにくくなりがちです。特に規模の大きなページ制作の場合は、アセットやメインコンポーネントを並べるために専用のアートボードを用意しておくと便利です。
たとえば下の例では、見出しのメインコンポーネントが「Asset」アートボードに配置され、他のアートボードにインスタンスが複製されています。メインコンポーネントを修正するとインスタンスの見た目も同時に変わることが確認できます。
メインコンポーネント専用のアートボード
インスタンス（子）の編集
メインコンポーネントの複製がインスタンスです。コンポーネントを選択したときに左上にひし形のマークが表示されますが、これが白く塗りつぶされているのが特徴です。インスタンスは個別に修正が可能です。インスタンスの修正はメインコンポーネントの属性を上書きすることになるためオーバーライドと呼ばれます。オーバーライドされたインスタンスは、左上のひし形のマークの中に緑の丸が表示されます。
インスタンスはオーバーライドするとひし形の中に丸が表示される
インスタンスを編集しても、ほかのインスタンスやメインコンポーネントには影響が及びません。そのため、必要に応じて自由にカスタマイズすることができます。下の図では、インスタンスのテキストをダブルクリックして、見出しのテキストを変更しています。
インスタンスの編集
オーバーライドされたインスタンスには、オーバーライドされた属性を除けばメインコンポーネントへの変更が反映されます。これを応用すると、ひとつのボタンのコンポーネントからさまざまな幅の（すなわち、サイズ属性をオーバーライドした）ボタンをつくり、レスポンシブデザイン用のボタンを揃えることも可能です。
コンポーネントで状態の変化を表現する
ユーザーの支援のために、ユーザーのアクションへの反応をデザインすることがあります。たとえば、マウスがボタンの上に移動したとき（ホバーしたとき）にボタンがちょっと凹んだり、あるいは色が変わったりといった状態の変化があると、ユーザーにはそのオブジェクトが操作可能であると認識する手がかりになります。
状態の変化によりユーザーに操作が可能であることを知らせる
第1回でも触れたように、こういったインタラクションに関して、Photoshopを使ったワークフローでは、レイヤーグループを別途用意してレイヤーカンプで表現する（あるいは「いいかんじでおまかせ」）といった大雑把な指示しかできませんでした。XDでは、コンポーネントの「ステート」と呼ばれる機能を使うことで、動的な状態の変化を視覚的に表現することができます。
ホバーのステートを追加する
今回はボタンのホバーを表す状態を追加する例を紹介します。ステートを追加できるのはメインコンポーネントだけですが、メインコンポーネントに付与したステートはインスタンスにも付与されます。メインコンポーネントを選択すると、プロパティインスペクターに「コンポーネント（メイン）」が表示されます。「初期設定のステート」の右端にある「+」ボタンをクリックし、「ホバーステート」を選択します。
追加したステートは自由に編集が可能です。「ホバーステート」が選択されている（背景が濃いグレーになっている）ことと、メインコンポーネントを表すひし形マークを確認したら、アートボード上で色を編集します。これにより、ホバー状態の見た目を指定できます。
編集が完了したら「初期設定のステート」をクリックして、表示の変化を確認してみましょう。問題が無ければ、Escキーを押すか、なにもないところをダブルクリックして編集モードを抜けます。
追加したホバーステートにはインタラクションが自動的に設定されています。そのため、「デスクトッププレビュー」ウインドウを表示すれば、すぐに動きを確認できます。
ホバーステートのインタラクション
インスタンスのステートも自由にオーバーライドが可能です。ステートを持つインスタンスのテキストなどを変更する際には、初期設定のステート以外のステートの修正も忘れないようにしましょう。
XDはホバー以外にも、Photoshopでは表現することが難しい画面遷移やインタラクションを含めたデザインワークが可能です。次回は画面遷移を中心に「プロトタイプ」ビューの使い方を紹介します。