デザインシステムは更新し続けるもの　Adobe XDでデザインシステムを体験

XDでデザインシステム構築を体験する前の準備

あらかじめメールとかでもご案内していたとおり、今回は日本語のXDのワイヤーフレームキットであるWires jpを使用します。すでにダウンロード済みの方は手元で実際に開きながら進めていけたらいいかなと思っています。

念のためWires jpのダウンロードするアドレスをこれからたぶんコメントのほうで流してもらえると思うので……こういうページですね。「Wires-jp」というダウンロードページがあるので、ここからUIキットをダウンロードしてみてください。

実際ダウンロードするとZIPファイルになっているので、それを解凍して開くと、こんな感じのXDファイルになっているのではないかなと思います。

Wires jpは、Webサイトやアプリでの使用頻度の高いパーツ群をまとめた、日本語のワイヤーフレームキットです。これだと、架空の「株式会社XD」となっていますけれども、この会社のコーポレートサイトですかね、よくあるパターンをまとめたアートボードがいくつか入っていたり、あとはこういうふうにカラーパレットとかアイコンセットだとか、タイポグラフィみたいな、さきほどの説明で言うとスタイルガイドに当たるような部分も含まれています。

単なるパーツの集合体ではなく、デザインシステムの親和性を高めるために、こういうものと、それからXDのアセット機能を使ってちょっと手を動かしていきたいと思います。

Mimicプラグインのインストール

これから、あるWebページを、このWires jpを使って手元でどこまで再現できるかなというのをやってみたいと思います。

これから進める前に、1つ便利なプラグインを入れておきたいと思います。「プラグインを見つける」で、XDの公式のプラグインのページから検索で、アルファベットで「Mimic」と入力して検索してみてください。すると1つ「Mimic」というプラグインが見つかると思いますので、これをインストールしてみましょう。

僕の場合Windowsなので、Macの方は見た目が若干違うかもしれませんが、プラグインの中から「プラグインを見つける」。Macの方は上のメニューからいけますかね。

インストールはすぐに終わるので、インストールができたらこのプラグインの欄に「Mimic」というプラグインが入っているかどうか見てみてください。大丈夫そうでしょうか。

Mimicでカラー、文字スタイル、イメージを抽出する

では画面を切り替えて、Webページを見ます。今日お題として手元で再現するページは、みなさんご存じ、PlayStationの公式ページです。ブラウザで「PlayStation」と検索したらたぶん一番上に出てくると思います。PlayStationの日本の公式サイトのトップページ、これをXDで軽く再現してみたいと思います。

まずこのURLをコピーします。そのついでにどんなページかをザッと見ておきましょうか。「だいたいどんな色が使われているかな」とか「どんなレイアウトかな」とか、さきほどのデザインシステムで言うと「デザインの概念・原則どんなものなのかな」みたいな思いを馳せながら見ていただくとよいかなと思います。角ばっているのか丸っこいのか、すっきりしているのか派手なのか。どうですかね。だいたいこんな感じでいろいろないくつかの色も使われているかと思います。

というところで、もう1回、URLをコピーしたら、XDに戻りましょう。では、先ほどインストールしていただいたMimicというプラグインを起動します。するとウィンドウが出てきて、URLを入れる入力ボックスが1個あるので、ここにさっきコピーしたPlayStationのページのURLを貼りつけます。

Mimicは、指定したページのカラーと文字スタイル、あとイメージを抽出してくれるプラグインです。「抽出」というボタンがあるのでこの「抽出」を押すと、こんな感じでフォントとそのページで使われているカラーと画像が抽出されました。出てきましたかね。大丈夫でしょうか。

ブランドカラーを探す

ではこれを材料として、Wires jpと組み合わせてどこまでさきほどのPlayStationのページが再現できるかを見ていきたいと思います。

ただもちろん、このWires jpはWebサイトによくある要素がまとまっているとはいえ、当然ですが、このままだとPlayStationのサイトにはしっくり来ないんじゃないかと思います。さきほどご説明したデザインシステム三天王であるデザイン概念・原則、それからスタイルガイド、コンポーネントライブラリ、もちろん全部違いますからね。

そこでじゃあ何をどうやっていこうかというところですが、まずは先ほど抽出した色の中から見ていきましょうか。Webページにはこれだけの色がザッと使われていたということですね。この中にはおそらくPlayStationのページのキーとなるブランドカラーに近しいものが入っています。どれだかわかりますでしょうか？

PlayStationのブランドカラーは「PlayStation Blue」とも呼ばれる青です。この中だと、これとか、ちょっと濃淡が種類あるのでこういうものも青の仲間ですね。この青が基本のボタンとかにも使われている青です。

ちなみに、今、PlayStationのブランドカラーが青と言いましたけれども、PlayStation Blueというものが定義されたのは実はPS4に入ってからということなので、実は意外と新しいんですよね。

ちなみに、初代のPlayStationからPS2・PS3と全部持っていた方はこの中にどのぐらいおられますかね。「持っていたよ」という方はあとでコメント書いておいてください。古くからのPlayStationユーザーの方だったら、「そういえば、PlayStation初代とか2とか3とかあんまり青っていう記憶がないな」って思いますよね。PlayStation Blueは最近のことというのも今日の豆知識ですね。

キーカラーを登録する

まずブランドカラーの1つが青ということがわかりました。これをキーカラーとして設定しましょう。XDのアセットパネルはカラーと文字スタイル、そしてコンポーネントがありますが、その中のカラーを見てみましょう。これにはすでにWires jpが持っているカラーがいくつか登録されています。

この中に「Primary」という名前がついたカラーがあると思います。実はこのWires jpのPrimaryカラーも青なのであんまり差がなくて申しわけないんですけれども、このPrimaryカラーを変更していきます。あっ、その前に先ほどのPlayStation Blueのこの青を選択して、プロパティパネルからHexの数値をあらかじめコピーしておきましょう。

アセットの「カラー」の「Primary」を選択して、右クリックで「編集」を選択します。アセットパネルの「カラー」は、もちろんページの中でよく使うものをカラーピッカーとして使える機能なんですけれども、それだけではなく、あとからそのカラーを編集することで、このように、ページの中に置かれた同じ色、それらを全部まとめて変えられます。これって初期からある基本機能なんですけれどもね。

ではこのPrimaryの色を、先ほどコピーしたPlayStation Blueの青の数値を貼りつけて、Enter。これでPrimaryカラーがPlayStationのサイトと同じになりました。同じ青で若干変わったというところなので、まだあんまり差がないかなと思います。

ではついでにもう1個。抽出したカラーの中にオレンジがあります。Webページの中にオレンジも印象的なところで使われていたりするので、このオレンジも登録しておこうかなと思います。

新しく追加するときは、このオレンジを選択して、アセットパネルの「カラー」のプラスアイコンをタップします。はい、新しくこのオレンジが追加されました。

カラーを追加したとき、デフォルトではこのようにHexの値がついているだけなので、パッと見どこで使われている色なのか、何の色かわかりづらいので、名前を変えておきましょう。このオレンジを右クリックすると「名前を変更」というメニューがあります。ここではPrimaryに合わせて「Secondary」としておきましょう。Secondaryカラーです。

色やスタイルには名前を付ける

このように、ただカラーに色を登録するだけではなくて、名前をつけてやること。これはほかの文字スタイルとかも一緒なんですけれども、デザイントークンとも呼ばれる手法で、単なる数値としての連なりではなくて他人と共有できる呼び名にすることで、生産性を上げられます。

例えばこれが全部Hexの数字のままだったら、「あのグレーをちょっと濃くしよう」とか言われたときに「どのグレーよ？」みたいな話になるので、ここだと「Blue gray」とか「Light gray」とか名前がついていますね。そのほかには「Gray 400」とか「Gray 200」とか、数字と組み合わせて名前をつけるパターンなんかもあったりします。

ちなみに僕の場合は、後々自分でコーディングすることを想定して、Sassの記法とかCSSの記法に合わせて、変数名と同じものをあらかじめつけたりすることもあります。

ボタンを調整する

ここまで、まずPrimaryの色を変えて、Secondaryとしてオレンジを追加しました。では次に、ボタンをいじっていきましょう。

このWires jpにあらかじめ入っているコンポーネント群の中から、ここにボタンのパーツがあります。先ほどPrimaryのカラーを変えたのでこのPrimaryのボタンがPlayStationと同じブルーのボタンになっています。PlayStationのページではすべてのボタンの角丸がなしで、全部四角いわりとソリッドなページになっているので、このPrimaryのボタンをちょっといじっていきましょう。

これはマスターコンポーネントになっているので、このままダブルクリックして、この背景となっている角丸の青、この丸ポチを動かして角丸を四角にしちゃいましょう。これだけでちょっとPlayStationのボタンっぽくなった。

もう1つ。ついでにSecondaryも修正しちゃいましょう。Secondaryもマスターコンポーネントになっているので、この背景の角丸をまず四角にします。

それからこれ、プロパティパネルを見ると塗りがなくて線だけになっているので、逆に線のチェックを外して塗りにして、先ほど登録したSecondaryカラーのオレンジを選択。これでオレンジのボタンになりましたね。ついでに文字色をWhite、白に変えておきましょう。これでSecondaryのボタンできました。その下のHoverとかPress用のものは、今はちょっと置いておこうと思います。

アイコンセットを調整する

あとはもう1ついじっておきましょうか。このアイコンセットには、いくつかアイコンがあります。もちろんPlayStationで使われているアイコンとはぜんぜん違うんですけれども、せめて色だけ合わせておこうかなと思います。

どの色が使われているかというと、こんなふうにカラーパレットがアートボードにまとめられています。このように、アセットに登録してあるカラーだけじゃなくて、アートボードにカラーパレットとしてこの色がどういう数値でどこに使われているかまとめておくと、あとでわかりやすいのでわりとオススメです。

これを見ると「中間のブルーグレー」というのが「主にアイコンの塗りに使用します」と書いてありますね。つまり、アイコンはこの「ブルーグレー」になっていると。実際のPlayStationのサイトではアイコンはだいたい黒なので、これを「Black」に変えておきましょう。

カラーパレットでアセットのカラーで見ると、この「Blue gray」があるので、これを編集して「000（#000000）」、真っ黒に変えておきましょう。ん、これじゃないな。すみません。「Mid gray」か。これですね。失礼。アセットの中の「Mid gray」、これを編集して「000（#000000）」とすると……はい、変わりましたね。ここもBlackになりました。ついでに名前も「Black」に変えておきましょう。これでさっきのアイコンも全部黒になりましたね。とりあえずこれだけ。色とボタンをいじりました。

トップページを作る

あとは実際にコンテンツを流し込んでみたいと思います。Wires jpの中には、日本のサイトによくあるコンポーネントの集まりとしてランディングページのトップ画面みたいなものとかカードコンポーネントとかがいくつか含まれています。この中からさっきのPlayStationのトップページ、確認できる人はもう1回いつでも見ていただいてけっこうですが、にありそうなページを選んでみましょうか。このランディングイメージがなんとなくいけそうな気がする。

じゃあ今度はここにさっき抽出した画像を使いましょう。ちょっと画像の場所を移動しますね。近づけます。抽出した画像のアートボードを近づけて……。はい、この中で、トップページのなんとなくメインビジュアルっぽい画像がこの中にあるのかなと思います。例えばこの『The Last of Us Part 2』とか。もうちょっとで発売ですね。これをコピーしました。

あとはこれを流し込んでいきたいんですけれども、XDで矩形オブジェクトとかに画像を放り込むときのやり方はいくつか種類があって、フォルダから直接放り込んだり、あとはブラウザとか、あとはPhotoshopのレイヤーからとか、いろいろなものから放り込めます。

そのやり方の1つが、アピアランスをペースト。ここの四角、これを選択して、右クリックして「アピアランスをペースト」というのをすると、今コピーした『The Last of Us Part 2 』のメインビジュアルっぽい画像をマスクオブジェクトみたいに貼りつけられます。

この「アピアランスをペースト」は、もともとは塗りとか線とかの属性・情報を貼りつけるものなんですけれども、画像に対してアピアランスをペーストした場合は、こんなふうに画像として貼りつけられます。

その上に乗っかっているテキストを適当に下に動かして、文字を見やすいように白にしておきましょう。なんとなくPlayStationのトップページに見えなくもないような感じになってきました。

ボタンを調整する

『The Last of Us Part 2』、「詳しく見る」。オレンジボタンが今「製作実績」とかになっているので、せっかくなのでこれを「購入」としておきましょう。

PlayStationのページでは、Primary、PlayStation Blueを使ったボタンがリンクとして機能していて、オレンジのボタンは購入などのコンバージョンに結びつくところに使用されています。なのでこのスタイルガイドで「購入」。それからPlayStation上のルールに沿ったレイアウトにしてみました。

他のページも作る

あとは、例えば同じく抽出した画像の中から……このPS4の画像がありますね。このPS4の画像を同じくコピーして、さっき画像を突っ込んだその下の今度は2分割のほう、こっちの画像エリアのほうを同じく選択して「アピアランスをペースト」。ちょっと画角が合っていないようなので調整して、若干動かすと……なんかそれっぽいみたいな。

カードコンポーネント集でページを作る

あとは「似ているアートボードはないかな？」というところで、これをずらして、隣にあるこのカードコンポーネント集みたいなの、これを使いましょうか。このへんも同じく抽出した画像から適当にゲームの画像をコピーして、あとは同じように貼りつけていきます。

このやり方は非常に簡単で誰でもできるものです。ある程度テンプレートのようにXDでできあがっているものだったら、デザイナー以外の方、ディレクターさんとかプランナーさんとかふだんあまりデザインしないよという方も、この手法でなら、ポイポイとコンテンツとしての画像や色とかを調整するだけでちょっとリッチなワイヤーフレームぐらいなものが簡単にできるんじゃないかなと思います。はい、ちょっと貼りつけてみました。

実際にはカードコンポーネントの背景色はないので、ここのバックの座布団は取っちゃいましょう。ついでにあとは、もうちょっとだけ。このPrimaryの青いボタンをコピーして貼り付けます。このカードコンポーネントはリピートグリッドになっているので1個選択して、「詳しく見る」のボタンをカードコンポーネントに貼りつけます。まあ、こんな感じかなと。

遠目で見ると、そっくりなものができた

こんな感じでザッとなんとなくこれとこれとこれ。遠目で見ると「わりとPlayStationっぽい」みたいなところまでできてきたんじゃないでしょうか。

もちろん細かいところというか、だいたいスタイルガイドとしてはもちろん本物のPlayStationのページとはまだまだズレているのでぜんぜん違うんですけれども。よく見ると株式会社XDみたいな感じですね。

もちろん実際のページとはまだまだぜんぜん違うんですけれども、そのコンテンツが持つデザインの概念や原則、そしてスタイルガイドといった、さきほどのデザインシステムの含まれる要素を意識したコンポーネント構築が少し体験できたんじゃないかなと思います。

今日はもうほとんどXDの基本機能みたいなところしか使っていないので、わりと簡単にお手軽にできる。だけれどもデザインシステムをちょっと体験する手法として「こういうこともできるよ」というのをご紹介しました。

概念や原則を意識しながら自分の好きなWebページで試してみよう

その時もただマネしていくんじゃなくて、「そのページがどういう概念や原則で成り立っているのか？」「キーとなるカラーは何なのか？」とか、「スタイルガイドとしてどういう構造が繰り返し使われているのか？」とか、そういうところに思いを馳せながら練習がてら試してみるといいんじゃないかなと思います。

ツールが変わってもデザインの考え方は変わらない

デザインシステムを体験してみたところで、本日のまとめです。

まず、コンポーネントライブラリはか弱い。「か弱いってどういうことだよ？」って思うんですけれども、デザインシステム三天皇の最弱とも言うべきコンポーネントライブラリは、いきなり細かいパーツを作り込んでもそれのみでは生きられない、か弱い存在です。必ずデザイン概念、それから原則であったりスタイルガイド、上位概念でもあるそれらとセットで考えましょうというところですね。なので、コンポーネントライブラリだけ先走って考えてもあまり意味はないよというところですね。

そしてもう1個。デザインシステムは更新し続けるもの。もちろん今軽く作ったものなんですけれども、作ったら終わりというわけではなくて、コンポーネントを含むデザインシステムは一度作ればおしまいというものではなく、「せっかく作ったのに使いこなせるのは一部の人だけ」みたいなのだと、そのうち忘れ去られてしまいます。なので、しっかりとチーム内で共有して必要に応じて更新し続けることで、はじめて運用できるんじゃないかなと思います。

これは最後になるんですけれども、今日お話ししたことって、実は別にXDじゃなくてもよかったりするんですよね。

ツールが変わっても考え方は変わらない。デザインシステムの更新とか運用の概念、どういうもので構成されているのか、そういうのを知っていれば本来なら別にXDにこだわる必要もなく、自分やチームに合った無理のないツール、それから運用方法でしていくのが一番大事なんじゃないかなとも思います。

というところで、今日のセッションはおしまいとなります。ご清聴ありがとうございました。