![[レポート]工数膨大なデザインシステムを気軽に使えるようになるには？のお話 #Adobe MAX Japan](https://devio2023-media.developers.io/wp-content/uploads/2019/12/b28d982785e67c50cf83d26b318a7131.jpg)
[レポート]工数膨大なデザインシステムを気軽に使えるようになるには？のお話 #Adobe MAX Japan
Adobe MAX japan 2019のウェブサイトを制作した「まぼろし」。
12/3に開催された「Adobe MAX Japan」では沢山のクリエイティビティが刺激されるセッションが行われました。
今回自分が受講したセッションのうち印象的なものをまとめました。
セッションレポート③
16:50 - 17:40
手間をかけずにコーディングを効率化するデザインシステムの活用法｜Adobe XDのコンポーネント機能とBootstrapの連携
登壇者：久保 知己さん（まぼろし）
セッション情報URL：https://maxjapan.adobe.com/sessions/4
……
今回Adobe MAX 2019 Japan のウェブサイト制作を担当された久保さんのセッションです。
XDを使ったデザインシステムの作り方と、Bootstrapを使用した、効率的な実装方法が紹介されました。
デザインシステムの基本
- Androidでおなじみマテリアルデザイン
- GitHubのプライマーデザインシステム
- Adobeのアドビデザインシステム スペクトラム
多くの企業がデザインシステムを採用している。なぜ採用しているのか
メリット
運用者すべての人が恩恵を受けられる。
デザインシステムの概要として、大きく二つに分けられる。
- デザインガイド：ガイドライン、カラー、ロゴ、アイコンなど…
- スタイルガイド：レイアウト、ヘッダーフッター、ボタン、フォームなど…
実際に見てみる
アドビのガイドラインを見てみると、色だけでなく、アイコンの角丸の大きさも決まっている。
デザイントークンとは
デザイントークンとは「名称」。
「青にしてくれ」とデザイナーから開発者に言ったとする。しかしいろいろな青がある。
ちょっとずつ青が違う。したがって、名前をつけて上げる必要がある。
抽象的な名前じゃなくてもOK。デザイントークンは色の名前だけじゃない。フォントサイズなども名前をつけていこう。
いろいろ設定してあげることでそれぞれのデザイナー同士、運用者同士などのコミニュケーションがはかどるね。
スタイルガイド
ボタン。HTMLとCSSで動く形になっている。このコードを貼り付けるだけで動くようになっている。
このような小さなパーツをコンポーネントという。
便利そうだから取り入れてみようかな…？と思ってみるが
デザインシステムには向き不向きがある。
| 向いている ? | 向いていない ? |
|
|
では、小さなサイトで使うにはどうすればいいのだろう？
作業量を減らす。
手間を掛けないデザインシステムを使う。「デザインシステムライト」という考え方。
CSSフレームワークを利用する。これはシステム的に管理されている。
少しの労力で大きな変化ができる。
デザインシステムLiteとは
デザインシステムLiteとは、本当に必要な要素だけ作るデザインシステムのこと。
- カラー
- タイポグラフィ
- ボタン
最低これさえあればなんとかなる。
実際の事例① Adobe MAX japan ウェブサイト
カラー
タイポグラフィ。
どんなフォントファミリーを使うか、インポートで「どんなCSS、ウェブフォントを読み込むか」を指定する。
ボタン。
Bootstrapをもとに構築。このまま置き換えてできるように構築した。
グリッド
Bootstrapのグリットを流用した。
以上。
デザインシステムLiteで作成した要素は８つだけ。
デザインシステムLiteのメリット
「ここを目立たせたいから赤にしてくれ」と言われた時…。唐突に言われた場合は、
「デザインシステムではこうしているのでこうしましょう」と提案する
デザインシステムLiteを生かしたツールの使い方
UIキットを使用する。（XDのファイルだけじゃなくていい）
とにかくUIが詰まったファイルを作る。
コンポーネントの作成、ステート機能を抽出してデザイントークンをつけよう。
コードを書き換えるだけで青だったCSSがピンクに
実際に扱ったコード。
ポイントはBootstrap。オリジナルをコピーして使っている。灰色のところはBootstrapを読んでいないところ
なぜ灰色にしているのかと言うと、Bootstrapはそのままだと非常に大きいので、使う機能を選んでいる。
キーとなるのはvariables：デザイントークンがここにかかれている。ブルーをPrimaryに変数を代入してつかっている。
生成されたボタン
しかし、このままでは現状上がっているサイトのようなボタンには合わない。
デフォルトではホバーで暗くなる。
これを不透明度によって変化させたい！
Mixnins/_bottom.cssの「darken」さえ直せば、不透明度を変えられる。
実際に半透明になったボタン。
実際の事例② TOYOTA カーシェアサービス ウェブサイト
ページの雰囲気はこんなかんじ。
デザインシステムLiteとBootstrapで構築した。
カラーの例。
キーとなる色である赤とグレースケールをキーとした。クライアントに提出するため、文章で説明している。
ボタンは不透明度をかえたりはしていない。「darken」という変更色をそのまま流用した。ボタンサイズはBootstrapに対応した
実際の構築について
bootstrapを読み込んでいる。先ほどと違うのはデザイントークンにあたるファイルを最初に読んでいること。
デザイントークンを最初に設定すると、それにあわせてCSSを書き換えてくれるという機能がある。
本体の中身を変更せずに書き換える。Bootstrapのコアはいじっていない。
そのため、Bootstrapのバージョンがあがったとき、置き換えるだけでバージョンアップできるという利点がある。
ボタンのサイズはBootstrapそのままではない。ここだけCSSを書き換えた。
デスクトップ、モバイルの機能（レスポンシブ）はBootstrapにない。そのためCSSでつくる必要がある。
変数。つまり、何の要素が大きさになるのかを指定してあげる。H1H2…を指定していく。defaultは初期状態のフォントサイズ。mdはブレイクポイントの値。
まとめ
巨大なプロジェクトでなければ、小さなサイトや納期に追われているならばデザインシステムLiteがおすすめ。
- ０から作成しなくていい。CSSフレームワークコンポーネントを使おう
- デザインと開発が連携しやすいようにしよう
- 少ない労力で大きな変化になるようにしよう
セッションを終えて
デザインシステム。きっちり決まったルールときっちりきまったUI…憧れます。
でもその膨大な工数、もう見るだけで大変。自分にはとても作れそうにないな…というメンタルブロックを破ってくれるようなセッションでした。
最悪３つでいいよ、というハードルの下げ方がさすがでした。
プロダクトの制作物に十分な時間が確保できないときも、実装や運用、そしてクライアントのコミュニケーションを考えればルールがあったほうがスムーズに進むでしょう。
まずはLiteに。気軽に作って試す、を実践してみたいです。
セッションレポートはこちら
Keynoteからセッションを拝見していたのですが
今回は３つについてレポートをまとめました。
よければ御覧ください。
……
ユーザーの心を掴む！気持ちいいインタラクションがつくりだすインターフェースデザイン
登壇者：奥田透也さん
……
Adobe XDがプロジェクトメンバーを繋ぐ！導入事例から学ぶ、チームビルディングとデザインシステム活用の試み
登壇者：江辺 和彰さん（コンセント）
……
![[レポート]様変わりしていくクリエイティブ世界に適応するため今こそXD！のお話 #Adobe MAX Japan](https://devio2023-media.developers.io/wp-content/uploads/2019/12/5cce28273cc50f7d20ced4baf04c5cb6.jpg)
![[レポート]インタラクションはシステムとユーザーの壁を超えるというお話 #Adobe MAX Japan](https://devio2023-media.developers.io/wp-content/uploads/2019/12/53cbf2b654bc7c2eefd4f776e0257ea4.jpg)
![[レポート]5300人が集まるクリエティブのお祭りに行ったお話 #Adobe MAX Japan](https://devio2023-media.developers.io/wp-content/uploads/2019/12/98053c4875bc50f20510d37cb5b977f0.jpg)
