SIEのWebデザイナーが教えるAdobe XDを使ったデザインシステム　コンポーネントライブラリはか弱い

ステイホーム期間中に教育コンテンツを作りました

池原健治氏：みなさん、こんばんは。池原です。「XDで体験する！深遠なるデザインシステムの一端」というテーマでお話しします。

本編に入る前に、佐藤さんのセッションを見てちょっと思い出したんですけれども、そういえば僕も、このステイホーム期間中に1つ教育コンテンツを作っていたなと思って……。

XDの自動アニメーション機能を使ってこういうものを作っていました。こういうおもちゃみたいな飾りというかオブジェを見たことないですかね。振り子みたいのがつながっているやつ。一番端の振り子を動かして離すと、端っこの振り子が動いて動き続けるという。

調べたら「連成振り子運動」というふうに言うということを今思い出しまして。1個の場合はこうなんですけど、例えば2個動かしたら、2個分の球の運動エネルギーが伝わって2個動き続けますよとか。

こういうのもXDで作って、「あっ、そういえば教育コンテンツだったなぁ」と今思い出しました。ちなみにこれ3個動かしたらどうなるかというのを、僕もこれ実際やってみないとどうなるかわからなかったので、誰か続きを作ってください。

デザインシステムの一端をちょっとだけ体験

ということで、では本編に進んでいこうと思います。近年では、プロダクトやサービスなどの規模がだんだん大きくなってきたときに、デザインシステムを導入する事例が増えてきているんじゃないかと思います。目的としては、チーム内でのデザインの一貫性を保ちつつ効率的に制作を行なうためだったりしますかね。

このセッションでは、XDを使ったアセット管理の手法や業種をまたいだ運用方法、それから便利な機能などを紹介しながら、その深遠なるデザインシステムの一端をちょっとだけ体験してみたいと思います。

まず簡単な自己紹介から。ソニー・インタラクティブエンタテインメントという会社でWebデザイナーとして活動している池原です。PlayStationを作っている会社でお馴染みですかね。ゲームを通じて皆様に夢と希望をお届けしています。

XDのアニメーション機能の限界に挑戦してみたい

ちなみにAdobe XDはプレビュー版のときから触っています。僕の場合、過去にFlashというインタラクティブアニメーションツールを触っていた経験があって、その流れでついついXDのアニメーションの機能の限界に挑戦してみたくなることが多々あります。

例えばXDってタイムラインがないんですけれども、タイムラインがなくても、自動アニメーション機能を使うと、このようなスプラッシュムービーみたいなのも作れちゃいます。

これは初代PlayStationからPS2までのヒストリーをピクトグラムアニメーション風に作ってみたものです。最初はPS4まで作ろうと思ったんですけど、ちょっと面倒くさくなって断念しました。たまにこんなふうにXDでアニメーションを作って遊んだりしていますけれども、これをカンバスで実装してと言われたら、たぶんふざけんなと思います。

デザインシステムとは

すでにいろいろなところで説明記事や事例紹介をご覧になっている方も多いと思いますが、なんとなく理解している方はおられても、実際にデザインシステムの構築に携わったことがあるという方は、実はそんなに多くないんじゃないのかなと思います。

デザインシステムはどんなイメージかなというと、タイトルのところにちょこっと映っていましたけれども、デザインと聞くとこんなイメージが浮かぶ方はいませんかね。「レゴみたいに、パーツを組み替えてWebページを作るための仕組みなんでしょ？」というイメージ。確かに間違ってはいないんですけれども、それがすべてではありませんというところ。

レゴはもちろん誰もが知っている、子どもから大人まで扱える、クリエイティブな作品を作れるすばらしい玩具なんですけれども、こんなふうに大量のレゴブロックだけあって自由に作ってくださいと言われても、普通の人は何をどうやって作ったらいいのか迷っちゃいますよね。

そんなときは、例えば「赤と黄色と黒のブロック100個くらいを使ってスポーツカーを作ってください」というように、このぐらい具体的に条件を書かれれば、だいたい似たようなものができるんじゃないかなと思います。作品の品質を平均化するとも言いますね。

こんな感じで、言語化されたルール・条件や色や形で表された材料など、そういうものを引っくるめたものがデザインシステムと呼ばれるものなんじゃないかなと思っています。

デザインシステム三天王

デザインシステムを構成する要素をもう少しまとめると、大きく3つの要素に分けられます。1つ目がデザイン概念・原則、2つ目がスタイルガイド、3つ目がコンポーネントライブラリです。これが俗に言う「デザインシステム三天王」ですね。もう1つぐらいどうにかならなかったのかなと思うんですけれども、まとめるとだいたいこの3つに集約されるんじゃないかなと思います。

デザイン概念・原則は、どういうふうに見せたいかを決める

では、順番に見ていきましょう。まず1番目、デザイン概念・原則。プロダクトやサービスが持つ重要なテーマ。それからユーザーに与えたいイメージ。そして、ブランドとしてのルール、アクセシビリティなど。

これは要するにどういうふうに見せたいか。例えばプロダクトやサービスに対して、そのコンテンツを作っている人が、自分自身がどうありたいか、それをどう見せたいかという、デザインの根幹部分に当たるものです。

それからブランドとしてのブランドカラーやブランドロゴについての定義など、いわゆるブランドガイドラインなんかも含まれているのではないかなと思います。あとは最近ですと、誰もが快適に情報を閲覧できるためのアクセシビリティ関する基本的な原則なんかもこの中に含まれるのではないかなと思います。

スタイルガイドは統一された見た目にするルール

そして2つ目、スタイルガイド。これはもちろんWeb制作に携わっている方ならよく聞く言葉なんですけれども、タイポグラフィであったりカラーパレット、アイコンセット。そして余白の取り方やアニメーション。こういう諸々です。

スタイルガイドはデザイン全体と統一された見た目にするためにルール、お作法ですね。具体的なそのコンテンツらしさ。それから個性。そういうものを感じられる要素とも言えます。

コンポーネントライブラリは汎用的なパーツ群

3つ目がコンポーネントライブラリ。ボタンであったりアイコンであったり、UIパーツ。それから実装にあたってのコードなんかも含まれる場合がありますね。コンポーネントライブラリは、先ほどのスタイルガイドのようなルールに沿ってコンテンツ内に繰り返し登場する汎用的なパーツ群です。

デザインシステムの階層構造

こうした3つの要素で成り立っているわけですが、今ご説明したところでおわかりになったかと思うんですけれども、実はこのような階層構造を持っています。

まず「デザイン概念・原則」が最も重要な要素であり、ブランド戦略と結びついて、すべてのデザインの基になっています。その概念を見た目に落とし込んだときのルールがスタイルガイドであり、そのスタイルガイドに沿って組み立てる材料としてコンポーネントライブラリ、まあレゴみたいなものですね。これらが構築されます。

もしかして今までデザインシステムと聞いてなんとなくイメージしていたレゴのようなコンポーネントライブラリが、実は末端の存在でしかないことがわかりますね。

これ少年漫画で例えると、「コンポーネントライブラリがやられたようだな……」「ククク……奴らは我ら三天王の中でも最弱……」というふうな、これよく聞くパターンじゃないかなと思っています。

ふつうの人は末端のパーツに興味がない

普通の人がWebページを見ていて、実際「この矢印アイコンの鋭角がたまらん！」とか「ハンバーガーメニューのアニメーションが絶妙！」とか、こんな感じに思う人は実はあんまりいないんじゃないかと思います。いるとしたらだいたい同業者ですね。

身も蓋もないことを言えば、末端のパーツが少々変わったところでユーザー認知度的には大差ないとも言えます。やはりどうしても記憶に残るのは、象徴的な色使いであったり、ロゴやタイポグラフィ、それからコンテンツとしてのビジュアルといったところが、ページ全体から感じられるトーンである場合が多いと思います。

しかしだからといって、じゃあコンポーネントライブラリにデザイン的な意味がないわけではなく、三天王の最強たるデザイン概念・原則、それと統一された世界観で汎用パーツを作り込むことで、デザイナーの違いによるブレをなくして、結果的にコンテンツ全体から隅々にわたってばっちり決まった違和感のないユーザー体験を提供できるというふうな重要な役割があると思っています。