#38「デザイントークンと関連ツール」
今回はデザインシステムにおいて1つの重要な要素であるデザイントークンとはなにか、そしてデザイントークンを運用していくのに役に立つツールについてお話ししました。
※ オフラインのため、音声ファイルを再生できません。ネットワーク状況をご確認の上、再度アクセスしてください。
- 加藤
- こんにちは！
ミツエーテックラジオは株式会社ミツエーリンクスのスタッフがWebデザイン、 WebフロントエンドなどのWeb技術に関するニュースやツールなどをシェアするためのポッドキャストです。
国内でもデザインシステムの事例や情報がそこそこ増えてきていて、その重要性も少しずつ認知されてきているのではないかと思いますが、今回はそのデザインシステムにおいて重要な要素の1つであるデザイントークンに焦点を当てて話していこうかなと思います。お相手は佐竹さんです。本日もよろしくお願いします！ - 佐竹
- よろしくお願いします！
- 加藤
- はい。では、早速ですが、デザイントークンとは何かというところから話していければと思いますが、実はW3Cには「Design Token Community Group」っていうコミュニティグループがありまして、そこでデザイントークンのフォーマットについての仕様を定義しようとしているんですけど、そこに書かれているデザイントークンの定義っていうのが「名前と値のペアであり、その名前に関連した情報」というものです。
- 佐竹
- ん～それはだいぶ抽象的ですね。
たとえば、よくサイトの最も主要な色を「プライマリーカラー」っていう名前で、まぁSass変数とかCSSカスタムプロパティで定義したりすると思うんですけど、あれも名前と値のペアになっているので1つのデザイントークンと言えますよね。 - 加藤
- うん、そうですね。まぁ色1つとっても、背景の色、文字の色、グラデーションとか、あとは色の他にもフォントサイズやフォントファミリーなどのタイポグラフィーに関する情報だったり、まぁ余白とか、アニメーションとか、あげはじめたらきりがないですけど、それ以上分割できない、粒度の小さい情報っていうのがデザイントークンとして扱われます。
- 佐竹
- ということはSassの変数とかを使っていたのって、値をハードコードしないで変数化して、その変数を参照することで揺れを減らしたりとか、あとは変数があった場合も1個直せば全体に反映されるので効率がいいとか、そういう目的で使っていたと思うんですけど、デザイントークンを定義するのも似たような目的なんですかね？
- 加藤
- いやーいい質問ですね。あのおっしゃる通り、今挙げていただいたようなことがそのままデザイントークンを定義することのメリットとも言えますね。ただ、ここからが大事なポイントで「なるほど、デザイントークンというのは変数のことか」という理解で終わらせてしまうと、まぁあんまり意味がないというか、そのー単なる変数として捉えてしまうとやっぱり開発の領域を出なくて、ただ開発に便利なもので終わってしまうんですよね。
- 佐竹
- うーん、まぁ確かに。それだと見た目についての変数を定義しているのに、デザインとの関連性があまりない感じがしますよね。Sassの変数とかだと、デザインを見ながら設定はするんですけど、プロジェクトの進行に合わせて使い回しそうな値を設定していったら、なんかめっちゃいっぱいになってるってことありません？その中に同じ値が別の変数名で定義されているのがあったりとか、もうそうなってしまうと、どれを使えばいいのか基準が曖昧で、一貫性が保てなくってカオスなんですよね。
- 加藤
- そうなんですよね。逆に、デザイナーさんがデザインファイルの中で色やフォントとかのトークンをしっかり定義してくれているっていうこともあると思うんですけど、そのデザインファイルを開発者が見て、その都度コードに反映していくっていうのも実は結構大変ですよね。
- 佐竹
- そうなんですよね…。しかもデザインの変更がある度にその変更をコードに反映していると、あれ？なんか修正してるとこずれてる！？なんてこともあったりして笑
- 加藤
- うん、ありますね。あのー情報システムにおいて「Single Source of Truth」という言葉があって、日本語で言うと「信頼できる唯一の情報源」って言われたりするんですけど、デザイントークンについて調べてると頻繁にこの言葉が出てくるんですよ。
- 佐竹
- あー今の話で言うと、Sassのファイルだったり、デザインファイルにデザイントークンの定義が散らばっている状態っていうのかな、うーん情報源が1か所にまとまっていなくて分散してしまっているっていうことですよね？
- 加藤
- その通りですね。まぁトークンがいろいろなところに分散して定義されてしまうと、やっぱりいつかこう…差異が出てしまうし、そうなった場合にどっちが正しいんだっけ？っていうことになってしまったりしますよね。そうではなくて、トークンはどこか一箇所にまとめて、そこを唯一の情報源として、デザインや開発側から参照できるようにするっていうのが大事なポイントです。
- 佐竹
- あーだからデザインシステムなんですね。
- 加藤
- その通りですね。さすが、察しがいいですね笑
デザイントークンは、デザイントークン単独で考えるんじゃなくて、デザインフェーズと開発フェーズで連携する仕組みを持つデザインシステムとセットで考えるっていうことが大事なんですよね。トークンをデザインシステムの中で管理すれば、一定の制約をもたせて一貫性を保ちやすくなりますし、トークンに変更があったときも効率よくプロダクトに反映することができます。
Material DesignっていうGoogleが作っているシステムがありますけど、そこにもDesign Tokenに関するページがあって、デザインシステムがないプロダクトではデザイントークンは効果を発揮しないかも、と書いてあったりします。 - 佐竹
- んーつまり簡単にまとめてみると、えーデザイントークンを定義すること自体にも、品質維持とか、効率化っていうメリットはありつつ、デザイントークンを導入してちゃんと運用していくなら、デザインシステムの中でデザイントークンを扱うべきっていうことですかね。
- 加藤
- そういうことです！
- 加藤
- ではデザイントークンについて分かったところで、ここからはデザイントークンをどう扱うかっていうところで、まぁ最近ちょっといくつかのツールが私の中で話題になっているので、それを紹介していきたいと思います！
- 佐竹
- おーそれは聞きたいですねー。
- 加藤
- えっとー1つ目がOpen Propsですね。これは知っている方多いかもしれないですけど、Open Propsというのは簡単に言うとCSS カスタムプロパティがあらかじめたくさん定義されているライブラリです。
- 佐竹
- Open Propsは私も聞いたことありますね。たとえばカラーコードだとGrayからOrangeまでがそれぞれ9段階の明度に分割されて定義されていたりとか、色の他にも
aspect-ratioに指定するための縦横比だったり、ビューポートとかユーザー設定なんかのメディア特性の値がカスタムプロパティとして定義されているんですよね。 - 加藤
- そうですね。CSSの値の部分はそのOpen Propsで定義されているものを使うっていうルールにすれば、まぁ値のばらつきを防いである程度一貫性を保つことができるようになります。で、Open PropsはCDNから読み込んでデフォルトで定義されている情報をまるごと使ってもいいですし、ビルドプロセスに組み込んで必要な分だけ抽出して使うっていうこともできます。
- 佐竹
- ということは、さっきの話と絡めると、信頼できる唯一の情報源として外部のライブラリを使うっていうことですよね。
これ開発に使うイメージはできるんですけど、デザインフェーズにはどう関わってくるんですかね？ - 加藤
- えっとーブラウザで使えるデザインツールでFigmaっていうツールがあるんですけど、それと連携する方法がOpen Propsの公式サイトに載ってます。で、Figma TokensっていうFigma上でデザイントークンを管理するプラグインを使うんですけど、このプラグインとOpen Propsを組み合わせると、Figmaの中にOpen Propsが定義しているカスタムプロパティをデザイントークンとして展開することができます。えーと、なのでデザインフェーズ、開発フェーズでお互いにその同じ情報を参照しておけば、整合性も保ちやすくなりますし、実際に使う値もすぐ分かるようになるので認識がズレることも少なくなるんじゃないかなーと思います。
- 佐竹
- んーそうですね。ただやっぱり情報源を外部に持たせると、意図しない変更が起こらないかがちょっと心配ですね。例えばライブラリのアップデートとかで、プロダクトの見た目が変わってしまうこともあると思うんですけど、もし使うとしたらやっぱりバージョン固定はしないとですよね。
- 加藤
- それはそうですね。その2つ目に紹介しようと思っていたのがToken CSSというツールで、これはPostCSSとか別のツールと組み合わせて使うものなんですけど、token.config.jsonっていうJSONファイルにデザイントークンを自分で定義するタイプなんですよね。で、ビルドするときにJSONファイルを読み込んで定義したデザイントークンをCSSカスタムプロパティとして使えるように変換してくれます。
- 佐竹
- なるほど。Token CSSはOpen Propsとは違って、自分たちでデザイントークンを定義するタイプなんですね。
- 加藤
- まぁ他にも違うところはいくつかあるんですけど、大きく違うのはそこですね。えっと一応使い方はサイトジェネレータであるAstroと一緒に使う場合のデモが用意されていたので、そこを見てみるとだいたい分かるかなーと思います。ちなみに、Token CSSはまだ開発中ということだったので、こちらも利用する際はちょっと注意が必要ですね。
- 佐竹
- これもさっきのFigma Tokensと組み合わせればデザインと連携できる感じですか？
- 加藤
- そこを期待して私もちょっと色々試してみたんですけど、結論から言うと若干調整が必要って感じでした。えーっとFigma Tokensには、Figmaで定義しているデザイントークンをJSON化して、えーっとGitリポジトリに直接コミットする機能が備わってるんですけど、そのFigma Tokensが出力するJSON形式とToken CSSが定義しているJSON形式が若干かみ合ってないっていう感じでしたね。
- 佐竹
- なんと。じゃあ今の段階では組み合わせる時は調整がまだ必要ってことなんですね。
- 加藤
- そうですね。まぁ冒頭で紹介したDesign Token Community Groupによる、そのフォーマットの標準化っていうのがどれだけ進むのか次第ではあるんですけど、早く導入したいのであれば、CIとかを使って変換する仕組みを入れてもいいかもしれないです。
- 加藤
- はい。ここまでデザイントークンについて、そしてデザイントークンを扱うためのツールについて簡単にお話ししてきました。今回はWeb開発におけるデザイントークンを扱うためのツールをいくつかご紹介したんですけど、まぁデザインシステムやデザイントークンはWebだけではなく、アプリ開発などでも効果を発揮するものなので、プラットフォームをまたいで、いろいろなプロダクトを開発している場合は特に、導入したほうがいいんじゃないかなーと思いました。
- 佐竹
- そうですね。デザイントークンによってプロダクト全体に一貫性を持たせることができるので、デザイナーと設計者との認識の齟齬だったり、デザインと設計の揺れが軽減されるので効率化という面でも今日紹介していただいたツールを利用して、デザインシステムを導入していきたいですね。
- 加藤
- そうですね。まぁあとはこれまで開発されてきたツールって、まぁ私たちが開発者っていうのもあるんですけど、その開発における課題を解決するツールが多かった気がしていて。ただ最近だと開発の域を超えて、デザインツールとうまく連携するためのツールっていうのも増えてきているので、まぁ開発者もデザインツールについてもっとよく知っておいてもいいのかなぁと思います。
- 加藤
- はい。最後に、ミツエーリンクスではスマートなコミュニケーションをデザインしたいUIデザイナー、UI開発者を募集しています。採用サイトではオンライン説明会やオンライン面接なども行っていますのでチェックしてみてください。
また、このPodcastはApple Podcast、Google Podcast、Amazon Music、Spotify、YouTubeで配信していますので、お好みのプラットフォームでフォローいただけると、最新のエピソードをすぐ視聴できます！こちらもぜひご活用ください。えー「#ミツエーテックラジオ」でご意見、ご感想、こんなこと話してほしいというリクエストなどもお待ちしております。
それでは今日はこの辺で！ありがとうございました！ - 佐竹
- ありがとうございました！