Adobe XDとBootstrapで作業を効率化第2回: UIキットをデザインシステムLiteのデザインガイドに落とし込む

Adobe XDとBootstrapで作業を効率化

前回の記事では、デザインシステムを構成する2つのガイドライン、そして2つのキーワード、最後に「デザインシステムLite」のコンセプトを紹介しました。
本記事は、デザインシステムLiteの具体的なサンプルを紹介しつつ、最初の構築ステップとして、UIキットをデザインガイドに落とし込む手順を紹介します。

デザインシステムLiteに必要な要素

デザインシステムLiteは、制作するサイトに見合った規模のシステムとして構築するのがポイントです。そのためには、デザインに本当に必要な要素だけを扱うようにします。

今年12月に開催されたAdobe Max Japan 2019のサイトは、デザインシステムLiteのコンセプトを取り入れて制作されています。このサイトは、CSSフレームワークのBootstrapを使用することを前提にデザインされました。ですが、Bootstrapを使用するからといって、フレームワークの機能の全てを網羅するガイドラインを作成する必要はありません。デザインシステムLiteは、本当に必要な要素のみを扱えばいいのです。

どのプロジェクトにも必要な要素は「カラーパレット」「タイポグラフィ」「ボタン」です。この3つの要素だけ抑えておけば、全てのサイトで応用が効く基本のガイドラインができます。そして、デザインで3回以上使用するデザイン要素があれば、それらも共通化してガイドラインに組み込みます。

Adobe Max Japan 2019のWebサイト

デザインガイドの例

具体的な例として、Adobe Max Japan 2019のサイトのために作成されたデザインガイドを紹介しましょう。このデザインガイドにも、もちろん基本の3要素は定義されています。

最低限必要な3つの要素

まず、カラーパレットは「Primary」「Success」といったBootstrapのカラーパレットのデザイントークンを踏まえてつくられています。グレースケールのカラーパターンも同様です。セッションのカテゴリーを表すためのカラーはこのサイト固有の要件であるため、独自に用意したカラーパレットが追加されています。

Bootstrapのカラーパレットの定義に揃えてつくられている

次は、タイポグラフィです。これはこのサイト専用に新規に用意されたガイドラインです。デスクトップ用とモバイル用それぞれに見出しや段落のタグに応じたフォントサイズと行間の設定が数値で記載されています。

タイポグラフィはデスクトップ、モバイルのサイズを指定している

最後に、ボタンのデザインガイドです。カラーパレットの場合と同様に、Bootstrapのボタンの仕様がベースになっています。Bootstrapのボタンはホバーやフォーカス時に背景色が暗くなるデザインですが、このガイドでは透過度が変わるようになっています。他にも、ボタンの角を丸くするなど手が加えられています。

ボタンの基本構成はBootstrapに揃えて、ホバーなどは独自に設定している

その他の要素

今回作成されたデザインガイドには、グリッドもBootstrapのグリッドを元にしたものが定義されています。グリッドに沿ったレイアウトであれば、HTMLやCSSで構築する際のスピード向上が期待できます。

Bootstrapのグリッド合わせて配置されている

その他にも、フォームやロゴなど、Adobe Max Japan 2019のサイトのデザインガイドには全部で8つの項目が記載されています。アドビのSpectrumなどと比べるとかなり限定的で心もとなく見えるかもしれませんが、これだけでも十分にデザインガイドとして機能します。

カラーパレット
タイポグラフィ
ボタン
フォーム
ロゴ
ヘッダー・フッター
ブロック（グリッド/間隔）
アイコン

デザインシステムLiteのデザインガイドをつくるメリット

本当に必要な要素だけのデザインガイドが持つメリットを改めてここで確認しておきましょう。まずはサイト制作に関連するメリットです。

カラーパターンやコンポーネントが俯瞰しやすくなります。そのためデザインの見直しも効率的に行えます。
開発側はページデザインを眺めてコンポーネントの重要度を見定める必要がなくなります。デザインガイドには重要なものしか掲載されていないためです。
見通しの良いガイドラインを共有することで、「ここのパーツが足りない」などの開発側からの要望への対応が容易になります。

また、クライアントとのコミュニケーションにも役立ちます。

中間成果物としてクライアントに提出する資料になります。デザインに疎い方にも説明しやすい資料として使えます。
「ここを目立たせたいから赤にしてくれ」といった思い付きの指示に対し、カラーパレットやコンポーネントを見せることで、そのサイトに適切な「目立たせる方法」を提案できます。

例えば、2つの色を引き立てあう配色に補色があります。赤と緑や青と黄色などがその組み合わせの例です。このような配色をデザインシステムLiteのカラーパレットに用意しておけば、「目立たせたい」という要望に対して論理的に提案することが可能です。

デザインガイドをAdobe XDで作成する

それでは、具体的にデザインシステムLiteのデザインガイドを作成する手順を紹介しましょう。

メジャーなフレームワークであるBootstrapには多くの「UIキット」が存在します。UIキットは、ボタンやフォームといったUIがまとまったデザイン集です。既存のUIキットを利用することで、必要な手間を省いてデザインガイドを効率的に作成することができます。

Adobe XDを使うと、Photoshop、Illustrator、Sketchといった別アプリケーションのファイルを読み込めるため、入手可能なUIキットの殆どの利用することが可能です。今回はIllustratorで作成されたBootstrapのUIキットを使用する手順を紹介します。XDの「ローカルコンピューターから開く」メニューからaiファイルを選択すると、ダウンロードしたUIキットをXDのドキュメントとして編集できるようになります。

使用したAiファイル Bootstrap 4 GUI – Vector File on Behance

上の画像は、IllustratorのUIキットを読み込んだXDの画面のキャプチャーです。デザインが崩れることなく表示されています。この状態からコンポーネントを作成し、ステートを定義して、カラーパレットの抽出とデザイントークンの設定を行います。

ボタンコンポーネントを作成する

まずはXDのコンポーネント機能を利用して、デザイン要素のコンポーネントを作成していきます。繰り返し使われる要素をコンポーネントにしておくと、まとめて修正することができるためデザイン作業が効率的になります。また、デザインガイドのコンポーネントを修正したら、それを他のドキュメントに同期することが可能であるため、変更管理も容易です。XDのコンポーネントは、デザインシステム構築にAdobe XDを使用する大きな理由のひとつと言えるでしょう。

カンバス上の要素をコンポーネント化するには、要素を選択してから右クリックして、「コンポーネントにする」を選択します。もしくは、ショートカットキーを使うこともできます。Windowsは[control + K]、Macは[command + K]です。

早速ボタンをコンポーネント化してみましょう。背景になる図形と文字を選択してから、コンポーネント化の操作を行います。

ボタンの背景と文字を選択して、コンポーネント化する

ボタンをコンポーネントに変換する際、文字の書式が中央揃えになっていなければ、中央揃えにしておくと、後で文字数が変わった時に文字の位置を修正する必要がなくなります。

文字揃えの違いによるボタンの文字数を変えた場合の変化

コンポーネント化すると、画面左側にあるアセットパネルのコンポーネント欄に追加されます。アセットパネルが表示されていない場合は、画面左端の下から3番目のアイコンをクリックします。

この操作により作成されたオリジナルのコンポーネントは、マスターコンポーネントと呼ばれます。アセットパネルからマスターコンポーネントをドラッグして、アートボード上にコンポーネントの複製を配置できます。複製されたコンポーネントはインスタンスと呼ばれます。アートボード上のコンポーネントをコピーしてインスタンスを配置することもできます。デザインを行う際には、インスタンスを利用して画面を構築していきます。

コンポーネントをドラッグして画面に配置できる

ボタンのラベルや横幅など、インスタンスに固有の属性を変更する場合は、そのままインスタンスを修正します。一方、全てのインスタンスの属性を変えたい、例えば背景色を青から赤に変更したいといった場合には、マスターコンポーネントを修正します。

マスターコンポーネントを修正するには、インスタンスを右クリックして「マスターコンポーネントを編集」をクリックしましょう。マスターコンポーネントが編集可能な状態で表示されます。

コンポーネントをまとめて編集したい場合は、マスターコンポーネントを修正する

ボタンコンポーネントにステートを追加する

ボタンには、マウスオーバーや非アクティブなどの様々な状態があります。これを扱うのに便利な機能がステートです。同じコンポーネントの中に、複数のステートを追加して、それぞれに異なる外観を設定することができます。

ステートを利用するには、コンポーネントを選択してから、画面右側のプロパティインスペクタの「コンポーネント」の欄を操作します。ステートが追加されていないコンポーネントであれば「初期設定のステート」だけが表示されているでしょう。

では、実際にステートをひとつ追加してみましょう。ここではホバーステート（マウスオーバーの状態）を追加することにします。まず、「初期設定のステート」の右にある十字ボタンを押します。すると「新規ステート」と「ホバーステート」を選択するドロップダウンメニューが表示されます。ホバーステートを追加すると、マウスオーバーのインタラクションも一緒に追加されます。

プロパティインスペクタのからステートを追加できる

追加したホバーステートが選択されていることを確認してから、コンポーネントをダブルクリックして編集（ホバー状態の外観に変更）します。この状態で行われる変更は、ホバーステートだけに有効で、他のステートには影響しません。一方、初期設定のステートへの変更は、他のステートにも反映されます。ステートを使用する場合は、どのステートで作業しているのか確認するのを忘れないようにしましょう。

ステートによって状態の変化を画面上で再現しやすくなる

とはいえ、コンポーネントがステートを持っているかは、一目見ただけでは判断できません。デザインガイドを作成する際は、ステートを持ったコンポーネントにはステート一覧を用意するようにしましょう。また、コンポーネントに「コンポーネント名: state」などの名前を付けておくのも有効です。

コンポーネントに名前を付け、ステートがあることを伝える

コンポーネントからカラーパレットを作成する

XDには、シェイプの塗りや線の色、テキストのフォントスタイルを抽出して、アセットとして登録できる機能があります。これを利用するとカラーパレットや文字スタイル一覧を簡単に作成できます。

それでは、ボタンに使われている色を登録してみましょう。登録したい色が使われているボタンを全て選択したら、右クリックしてコンテキストメニューを表示します。「アセットにカラーを追加」という項目をクリックすると、左のアセットパネルに選択されたボタンに使われている色が展開されます。

ボタンから色の抽出を行う

この手順で追加された色の名前には、16進数のカラーコードが指定されています。この名前をチーム内で識別しやすくするために、前回の記事で出てきたデザイントークンに置き換えます。デザイントークンのルールを決める際は、デザイナーだけで決めるのではなく、デザイナーと開発者が一緒になって、双方が扱いやすい名前を考えるようにしましょう。

今回のデザインガイドではBootstrapの使用を前提としていることから、各色のベースとなったボタンに合わせて、青は「Primary」緑は「Success」といった具合に名前を付けてあります。このようにデザイン側とコード側の名称を揃えることで、実装を行う際に迷うことがなくなります。