Adobe XDとBootstrapで作業を効率化 第1回: 中小規模のサイトに有効なデザインシステムLiteとは | アドビUX道場 #UXDojo

連載

Adobe XDとBootstrapで作業を効率化

この連載では、Adobe XD、UIキット、CSSフレームワークといったツールを使用して、Web制作の作業を効率的に行う方法をお伝えしていきます。これらのツールを連携させれば、デザインとコーディングの作業を円滑に進められるのはもちろん、運用やクライアントへの提案にも役立つことでしょう。

初回である本記事では、デザインシステムの概念を中小規模のプロジェクト向けに簡素化し、作業を効率化するアイデアとして、デザインシステムLiteをご紹介します。

デザインシステムとは何か？

デザインシステムはこのブログでも取り上げられてきた、昨今のホットなトピックの1つです。既に様々な企業がデザインシステムを採用しており、Googleは Material 、Microsoftは Fluent 、GitHubは Primer , そしてアドビは Spectrum というデザインシステムを持っています。

デザインシステムには様々な実装が存在していて、ひとつの明確な定義はありませんが、デザインガイドとスタイルガイドを含んだガイドラインと考えることができます。デザインガイドは、色やタイポグラフィやボタンの見た目など、デザインに関する規則をまとめたもの。スタイルガイドは、ヘッダーやボタンやパンくずリストなどのコーディングに関する構築例や開発に関する規則を、対応するソースコードと共にまとめたものです。

この連載では、この定義に従って説明を進めます。馴染みのデザインシステムと異なる場合は、適宜読み替えてください。

デザインシステムは、大きくデザインガイドとスタイルガイドに分けることができる

デザインシステムは、デザインと開発の2つのガイドラインを持つことが強みです。2つのガイドラインを組み合わせると、プロジェクトで使用するビジュアル言語のコミュニケーションツールとして利用できます。これはデザイナー、開発者、運用者のすべてに、メリットを生み出します。

デザインガイドの例

では、さっそくデザインガイドの実例を見てみましょう。まず紹介するのは、アドビのデザインシステム「Spectrum」のカラーパターンです。Spectrumは、基本となるカラーをいくつか決め、そのカラーのトーンを変えたものからカラーバリエーションを構成しています。また、単純にカラーパターンを用意するだけではなく、それぞれの色の持つ意味や、アクセシビリティ対応のための説明文なども提供しています。

「Spectrum」デザインシステムから抜粋したカラーパターンの一部

「Spectrum」では「Semantic Colors」として、色に意味が割り当てられている

Spectrumは、タイポグラフィに関しては、フォントファミリーそして使用する場所に応じたフォントサイズをデザインガイドラインとして定義しています。

「Spectrum」デザインシステムから抜粋したタイポグラフィの一部

デザインシステムに便利な「デザイントークン」

上で紹介したカラーパターンとタイポグラフィのデザインガイドの例をよく見ると、それぞれに「blue-500」や「font-size-1000」といった名前が付いています。これらの名前は「デザイントークン」と呼ばれます。このように、標準化されたデザイン要素に名前をつけることは、コミュニケーションにおいて役に立ちます。

青にも複数のカラーがあるが、デザイントークンによって識別できる

例えば、青には複数のカラーバリエーションがあるため、デザイナーから開発者に「ここを青にしてくれ」と指示があっても、開発者にはどの青なのか分かりません。しかしデザイントークンを使って識別できるようになっていれば「blue-400」の一言で、簡潔にどの青か伝わります。

デザイントークンは、具体性を持った名前に置き換えるのも有効です。例えば、「blue-400」というトークンを「button-primary」に置き換えれば、このトークンを利用するデザイナーや開発者に「この色はボタンの中心的な色として使う」ということがトークンだけで伝わります。

デザイントークンは、デザインと開発のガイドラインをつなぐ共通要素だと思っておけばいいでしょう。デザイントークンは、色やタイポグラフィだけではなく、影の濃さやアニメーションなど、デザインと開発の連携を必要とするあらゆるものに適用できます。適切にトークンを指定すれば、その文だけコミュニケーションを円滑に行えるようになります。

デザイントークンの指定に制限はない

小さな集まり「コンポーネント」

デザイントークンと並ぶ重要なキーワードが「コンポーネント」です。デザインやフロントエンドにも浸透している言葉ですが、デザインシステムにおけるコンポーネントについて紹介しておきましょう。

コンポーネントは、UIに繰り返し使われる小さなパーツです。具体的には、ボタン、フォーム、テーブルなどが、コンポーネントにあたります。様々なコンポーネントをデザインと開発、すなわちデザインガイドとスタイルガイドが共有することは、画面構築のスピードアップに貢献します。

コンポーネントを組み合わせると、新しい画面を構築しやすい

コンポーネントは、利用される様々な状況を想定して汎用性を持つようにつくるべきです。ボタンであれば、色やサイズが柔軟に変更できて、アイコンが混在しても崩れないように、デザインとソースコードをそれぞれ構築することが大切です。その際、デザインはデザインガイドに、ソースコードはスタイルガイドに収め、同じコンポーネントには同じトークンを割り当てます。

デザインシステムが向いているプロジェクトと向いていないプロジェクト

アドビは多くの製品を提供しています。Photoshop、Illustrator、XDなど、様々なデザインツールがありますが、もしUIのデザインや振る舞いがバラバラだとどうなるでしょうか？統一性がないUIでは、ユーザーは混乱してしまいます。しかしSpectrumというデザインシステムを構築したことで、デザインの統一が進み、コードの動きの一貫性が担保され、ユーザーはいくつもの恩恵を得られるようになりました。

「Spectrum」のデザインシステムからの抜粋。カードがドラッグアクションを行う場合のガイドラインも記載されている

このように、クロスプラットフォームで、多くのサイトやサービスを継続的に提供するプロジェクトでは、デザインシステムは強力なツールとなり得ます。しかし、デザインシステムの構築には時間と労力がかかります。すなわち、デザインシステムには不向きなプロジェクトがあり、必ずしも採用されるべきものではありません。

デザインシステムは、プロジェクトチーム内でコミュニケーションを円滑かつ確実に行うための支援プラットフォームです。大規模だったり長期的な運用が想定されるために誰が関わることになるのか分からないプロジェクトでは、システム構築にコストをかける意味があります。

しかし、規模や期間が限定されている案件では、制作時のコミュニケーションも限定されたものになるでしょう。だとすると、コミュニケーションのサポートに大きなコストをかけるのは割に合わないはずです。ランディングページであれば、デザインシステムを構築するよりも早く、サイトの方が完成してしまうでしょう。

小さなサイトでデザインシステムを活かす方法

とはいえ、デザインの一般性の確保や開発作業の効率化というデザインシステムの特徴は、中小規模のサイトでも利用価値があります。むしろ、少人数でいろいろとこなさなければならない環境では、より必要とされる機能かもしれません。
では、デザインシステムを使用するにはどうすればいいでしょう？

コストの回避方法はシンプルです。作業量を減らしましょう。そのサイトに見合った構成のデザインシステムを構築するのです。それをデザインシステムLiteといいます。

手間をかけずに必要な分だけガイドラインを構築しようというのがデザインシステムLiteのコンセプトです。そのコンセプトを取り入れつつ、さらに手間の減らす方法があります。

新しいキーワードが2つ登場しました。「CSSフレームワーク」は、レイアウトパターンやコンポーネントを提供しているコード群です。ドキュメントも含め、スタイルガイドを構築するために最低限必要なものがほぼ提供されています。有名なCSSフレームワークに、BootstrapやZurb Foundationなどがあります。

主要なCSSフレームワークであれば、フレームワークの標準スタイルや主なコンポーネントの外観が網羅された「UIキット」を見つけることができるでしょう。標準的な要素だけが必要なプロジェクトであれば、UIキットを少しカスタマイズしてトークンを割り当てるだけでもデザインガイドとして利用できます。こうして既存のリソースを流用して2つのガイドを作成すれば、手間のかからない小規模なサイト向けのデザインシステムの出来上がりです。

もちろん簡易なガイドラインですから、ビジュアル言語のコミュニケーションすべてをカバーすることは期待できません。プロジェクトが大きくなれば、デザインシステム構築にコストをかけ、コミュニケーションのコストを下げる方が理に適っています。

次回の記事では、既存のUIキットを利用してデザインシステムLiteのデザインガイドを作成する具体的な方法に触れていきます。