00:06
はい、2月14日火曜日ですね。四国、浅草区で10分回りました。
本日はチョコレート販売会社の、思惑通りバレンタインというイベントが発生してますね。
はい。もらえる人もらえない人もいろいろいると思いますけど、そんな感じですね。
はい、おはようございます。ひめみんのkeethことくわはらです。
はい、では本日も朝活を始めていきたいと思います。
本日はですね、今日は7人を行っているので、ざっとJSばっかり見ていたので、
今度はデザインシステムとか、CSS周りの方とかの記事を探してて、見つかったので、これを今日読んでいこうと思います。
今日はですね、ちょっと多分抽象的な記事になると思いますけど、「What is a Design System?」と。
はい、デザインシステム何ですか?っていうところ。
6 Different Types of Design Systems なので、6種類のデザインシステムを比較してみる、みたいなところの記事だと思います。
一応、本記事の冒頭にはですね、YouTubeで、この記事の出品者の方ですかね、が語られている動画もあるんですけど、
もちろん英語だったので、今回は翻訳しながら読んでいきたいと思います。
はい、では早速いきたいと思います。
タツヤ長谷川さんですね。おはようございます。ご参加ありがとうございます。
今日もダラダラととりあえず読んでいこうかなと思います。
では行きましょう。
デザインシステムは何か。
あなたはおそらくデザインシステムについての話をたくさん聞いてきたことでしょう。そしてそれを定義するのに苦労しているでしょう。
世の中にはたくさんの素晴らしいデザインシステムの本があります。
それらの著者がデザインシステムについてどのように語っているのかというのをまずは見ていきましょう。
まず一人目の方はですけど、アラ・コルマントワさんという方ですね。
語られたデザインシステムの定義からですけど、デジタル製品の目的を果たすために守備一貫して組織された、
接続されたパターンとか共有されたプラクティスの集合体だというのがまずこの人の定義です。
それぞれの方の著書のリンクと名前も載ってますね。この人はそのデザインシステムという書籍の名前だそうです。
続いてレイング・ザ・ファウンデーションという書籍を執筆されたアンドリュー・コールドマンという方ですね。
コールド・ウェルですね。
この方はデザインシステムというのはデジタル製品に秩序と一貫性をもたらします。
ブランドを保護しユーザーエクスペリエンスを向上させ、製品の設計と構築のスピードと効率を高めるのに役立つのです。
というようなことをおっしゃられています。
最後3つ目ですね。
3人目の方はデザインシステムハンドブックという書籍を書かれておりましたが、
書者はマルコ・スワレスという方ですね。
明確な基準によって導かれた再利用可能なコンポーネントの集合体であり、
それらを組み合わせることによっていくつものアプリケーションを構築することができるというふうにおっしゃっています。
結構皆さん似たり寄ったりな定義になる感じがしますね。
これに関してデザインシステムに関する他の業界の専門家のコメントをちょっと紹介したいと思います。
03:00
他の専門家の方々でもちゃんとデザインシステムの書籍を書かれていると。
1人目はデザインシステムズという書籍を書かれた方で、ジェレミー・ティースという方ですね。
部品は木だと、設計システムは森です。みたいなことを語られている方がいらっしゃるとか。
続いてはデザインシステムズ for user interfaces。
UIにためのデザインシステムだというふうに定義した書籍を書かれている人もいます。
ブラッド・フロストさんという方ですね。
あなたの組織がどのようにデジタルインターフェースを設計し構築するかについての公式な物語です。
というのがデザインシステムの定義だというふうにおっしゃっている方もいらっしゃる。
次の方はトラスト・ビトミンチームズという書籍を書かれた方ですね。
なるほどね。チーム間での信頼関係という書籍を書かれたヘイリー・ヒューズという方がおっしゃっているのは、
組織全体で管理されるあらゆる決定のセットというのがデザインシステムだと。
意思決定だと思うというふうにおっしゃってますね。それはそれでいい話ですけど。
最後、ディファイニング・デザインシステムズという書籍を書かれたネイサン・カーティスという方ですね。
こちらの方は、個人・チーム・コミュニティによって視覚的なスタイル・コンポーネントその他の懸念事項が文書化され、
コードやデザインツールとして公開され、採用する製品がより効果的でまとまりのあるものになるようにするためのライブラリだというふうに定義されています。
いろんな定義を見ていったんですけど、ここからデザイン&システムズという章ですね。デザインとシステムという章に入ります。
世の中にはデザインシステムの定義がたくさんあります。それはなぜか。それはデザインという言葉の定義と、システムという言葉の定義が実はどちらも非常に幅広いものだからだと思います。
私が好きなデザインの定義というのは、ジャレド・スプールによるものだとそうですね。
ジャレド・スプールさんはどういうことを言っているかというと、デザイン is the rendering of intents ですね。デザインとは糸を表現することだというふうに言っている。
また、私の好きなシステムの定義の方は、ドメラ・メドゥーズという方が定義したシステムの定義だそうですけど、こちらの定義はですね。
人・細胞・分身など、時間の経過とともに独自の行動パターンを生み出すように相互接続された物事の集合体というのがシステムの定義だと。
なかなか良さそうですね。確かにね。これ聞いて違和感はあんまなかったですね。
ちゃんと時間の経過というところも含めているというのが定義にあるのが僕としてはすごくいいなと思いましたね。
この2つを組み合わせると、繰り返される行動を生み出す意図的に繋がった一連のものみたいな意味になりますねと。
これはほとんど何にでも当たりはまりますねと。
こうなると別にデザインシステムとかいうよりも、人間の生活そのものみたいなところはある気はしますけどね。
そういう言葉の定義を経て、6種類のデザインシステムの本題の話に入りましょうと。
06:04
デザインシステムの仕事をする中で、デザインシステムとして表現できるものが6種類あることにまず気づきましたと。
ここから6種類一個一個語っていきますが、まず1つ目ですね。
1つ目はデザインシステムとしてのブランドアイデンティティもしくはビジュアルランゲージっていうところですね。
ブランドアイデンティティやデザイン、ビジュアルランゲージっていうのは一般に人々がデザインシステムとして知っているものの中で最も古く最も一般的なバージョンであります。
これは洞窟画のような早い時期から存在している。
デザイン言語とは、ブランドや特定のユーザーインターフェースのデザインを構成する様々な視覚的要素のすべてを指しますと。
なんか抽象的ですね。
色、タイプグラフィー、スペーシング、レイアウトなど様々な視覚的要素が組み合わせてブランドを認識することができるんですよというふうには申し上げますね。
これが一般的なバージョンでかつ最も古いものだということを見ると僕らがよく見るやつかなと思いますね。
続いて2つ目の種類ですけど、2種類目は結構名前としてはシンプルですね。
ツールとはデザインシステムですね。
デザインシステムとしてのツールだというふうに言っている。
ツールというのは私たちが目にするデザインシステムの最も一般的な例です。
UIキットはその恒例になります。
FigmaとかSketchのようなソフトウェアアプリケーションについて話すとき、私たちはこれらをよく目にします。
このようなビジュアルコンポーネントのライブラリを持っていれば、他のインターフェースにドラッグ&ドロップしてそれらのインターフェースを一度に簡単にデザインすることができるんですよと。
デザインシステム4Figmaなどのウェブサイトでは、さまざまなチームが使用しオープンソース化したUIキットのギャラリーというのが表示され、
これらのライブラリがシンボルや再組み立て可能なコンポーネントでどのように接続されているかを感じることができます。
デザインシステム4Figmaというサイトがあるんですね。
もしなんか流用できるようなコンポーネントがあるなら、それを見ながらちょっと流用したいですね。
自分で1から作らなくてよくなるならそれは楽ですからね。
コンポーネントライブラリはまたツールとしてのデザインシステムの優れた例になります。
デザインプログラムにUIキットがあるようにコンポーネントライブラリはそれに相当するコードなんですよと。
デザインツールのアートボードにコンポーネントをドラッグ&ドロップできるのと同じようにコンポーネントライブラリを使えば、
他の場所にある他のコードを参照するためのコードの省略機法を使うこともできます。
コンポーネントライブラリというのはリアクト、アンギュラ、ビューなどのフレームワークでよく使用されており、
より小さなコードセット、APIとかを使用してより大きなコードセットを体系的に参照することもできます。
ここでわざわざリアクトとかアンギュラ、ビューというフレームワークの名前が出たので、
そういうデザインシステムとかUIキットのところからソースコードがちゃんと吐き出されるということを示唆してますね。
どこまで使用できるコードかわからないですけど、実際Figmaでもそういうプラグインがありましたね。
リアクトのコンポーネントのソースコードを吐き出すみたいなプラグインを作られている方もいらっしゃって。
実際僕も見たら見たんですけど、僕が見たのが2年前くらいだった気がしますよね。
もうそんな時間経ってるのか。
だいぶコードの質が悪かったので、そのまま使うことはできないんですけど、
09:03
でも少なくとも品質とか一旦土替えして、早く作ってリリースするという観点でいけば、
Figmaのデザインだけでコードを全部吐き出して、上手いことガチャンとやれば少なくとも静的ページとしてはデプロイできるなって感じましたので、
これ結構近未来の話だなって思ってましたね。
改めて見るとどんだけ進化したか気になりますけどね。
余談ですけど、ツールとしてのデザインシステムというところでした。
これは本当にいい話だと思いますね。デザインシステムだけの話に留まらないというのは。
続いて3つ目ですね。
3つ目は、プロダクトアズデザインシステムなので、デザインシステムとしての製品だというふうに言っていますね。
デザインシステムとしての製品というのは、大きな組織がより効率的に、より一貫性を持って、
そしてより安心して規模を拡大するために利用できるデザインシステムについて語るときですね。
私が最も好んで取り上げるのがこのタイプですよ。
これは私は好むデザインシステムの定義です。
なのでデザインシステムの定義を、また改めて別の人のやつを持ってきてますけども。
あとこちら誰が語られたかは書いてないですね。
デジタル製品を一貫して、効率よく楽しく作るために組織が必要とする最小限のコンポーネントとガイドラインを含む、
接続とかパッケージ管理だったりバージョン管理されたソフトウェアの製品のことを、
プロダクツアーズデザインシステムというふうにこの人は定義されているそうですね。
今私たちが参考にしている人気のデザインシステムの多くはこの種のデザインシステムですと。
マテリアルデザインとかライトニングデザインシステムとか、ショピファイのポラリズなど、そんなものですね。
この種のデザインシステムを製品として成立させているのは、日々集単位で構築することに集中する専門チームがあることです。
バックログもありますし、そして良い製品と同じように維持できるように予算も削かれていますという話でしたね。
いやー予算もちゃんと削かれているというのは本当にいい話だと思いますね。
でもMUIとかいわゆるCSSフレームワークみたいな言われ方をするようなものですね。
この辺がそれはもう一つのプロダクトだというふうに言っているんですね。
なるほどでした。
これはこれで全世界使われているのは本当そうだと思いますので。
ステートオブCSS2020もちょっとこの先の浅かすぎを見たいと思いますね。
スタートアップはどのように働き、製品を作っているかを考えてみましょう。
通常の専門のチームがあります。
プロダクトマネージャーがいます。
彼らはアックログを用い取り組まなければならないことを待っています。
そしてユーザーや顧客に対して非常に頻繁に製品をリリースします。
顧客はその製品がどのように成長する必要があるか、
どの機能が有効であるか有効でないかなどのフィードバックを与えてくれます。
組織における製品としての優れたデザインシステムはこれに倣うものです。
製品としてのデザインシステムは組織のニーズに合わせて有機的に成長する必要があるんですよというものですね。
ここまでくるともうプロダクトまでいっているので、デザインシステムでとどまらない話ですね。
これはもう僕らの本当に動き方というか仕事的な話まで発展するような感じがしますね。
4つ目に行きたいと思いますね。
12:01
4つ目はプロセスアザデザインシステムと言ってますね。
デザインシステムとしてのプロセスの話までくるそうですね。
企業の設計システムはデザインシステムですね。
というものはデジタル製品を構築する特定の方法と言えます。
それは全てのステップのアウトラインとなりえます。
これは組織がより一貫性を保つために非常に効果的な方法です。
全員が同じプロセスで作業していれば、
全員が独自の作業をしている場合よりもより一貫したアウトプットが得られるでしょう。
それはそうだよね。
だからこそデザインシステムの世界ではガバナンスが大きなトピックとなるのです。
やっぱりデザインシステムがガバナンスの領域までくるんですね。
ガバナンスというのは誰がいつ何をするかというのを規定するものです。
つまりプロセスやワークフローというのは
デザインシステムが組織の中でどのように生きていくべきかについて
本当に大きな部分を占めているのです。
例えばデザインやコードのコンポーネントがなくても
私たちはこうやって仕事をしているんですというだけで
組織にとって実に効果的なデザインシステムになり得るのです。
ここまでくるとデザインシステムを最終的にどう具現化するのかは気になりますね。
何が生まれてくるんですかねアウトプットとして。
アウトラインという風に言っているのでそこまでいくと。
まあでもいいですね。
組織的にちゃんとデザインシステムのチームが専属でいるというのはかなり面白いですね。
デザインシステムというと結局さっきの言った1,2,3くらいまでのところがやっぱり最も多いと思っていて
結局作るプロダクトとかアプリケーションとかのUIキットに近いものを
やっぱり皆様イメージしてますけど
このおっしゃっている方はこの記事ですね。
弊社の方はちゃんとデザインシステムは
単なるUIキットとかそういう具現化するためだけのものではなくて
組織的なところとか仕事的な観点でも利用できるよということをおっしゃってますね。
それ専属のチームがあるっていうのは個人的にはちょっと新しくて
すごい話だと思いますね。
問題は会社として、つまりどういうことをコミットしていくのかっていう
なかなかミッションを定義するのが難しそうな気がしましたけどね。
最後6個目ですね。
6つ目はデザインシステムアザプラクティスだという風に言ってます。
ラストですね。
デザインシステムの最後のタイプというのはプラクティスとしてのデザインシステムになります。
これはおそらく組織におけるデザインシステムの最も成熟した段階になりますと。
プラクティスとはある活動や技能を習得したり維持したりするために
繰り返し行うことになります。
その練習とは、練習プラクティスとは
同じコンポーネントやパターンを繰り返し使用することかもしれませんし
特定のプロセスを取り入れることでも良いと思います。
外部機関のようなデザインシステムとの相互作業を取り入れることもできますよと。
組織内でデザインシステムが発言する様々な方法を取り入れることもできます。
基本的には同じことを何度も何度も繰り返すことで
組織がより効率的になり、時間の経過ともに組織がより一貫性を保つようになりますと。
デザインシステムが組織で実践されるようになると
よりよくスケールするように進化をしていきますというところでした。
途中途中で出てきた一貫性というところと
同じ目線とか同じコミュニケーションというか
文脈でちゃんとお話ができるよというこの2つが
組織にインストールできるというのがやっぱり魅力なんでしょうねという気はしましたね。
15:04
以上6個述べてきたんですけど、このまま記事はもう少し続きます。
デザインシステムの標準的な定義が必要なのかというのは次の話ですけど
業界として標準化できるデザインシステムの定義がないことは問題なのでしょうかと。
それは確かにそうですね。
会社の中では定義できたとしても
業界として標準化したデザインシステムみたいな定義がないというのは
果たして問題なんでしょうかというと
特に私は標準的な定義がないことが素晴らしいことだというふうにおっしゃっています。
問題ないとはいえ時に問題になることももちろんあります。
一般的にチームで仕事をする場合
全員が取り組んでいる物事について合意し
実際に共有された定義とか合意を持ちたいと思うものです。
そりゃそうだよね。
そうでないとチームメンバーと一緒に仕事をするとき
本当にややかしいことになります。
僕らもそうですね。
プロジェクトを始めるときはやっぱりまず共通言語というのは作りますね。
辞書的なものですね。
それは社内もそうだしお客さんもそうですね。
ドメインが変わったりすると
僕らが思っていた言葉って全然違ったりすることがよくあるのでね。
とかクライアントさんの社内だけで通じている
共通言語とかあったりするので
そういうのを先に聞いておきたいのはやっぱりありますよね。
優れた設計システムやデザインシステムの約束の一つというのは
他の方法では手に入らないような
共通の合意をチーム間で作り出すことです。
デザイナーとエンジニアがあるコンポーネントを
それぞれのワークフローで異なる名前で呼ぶことを想像してみてください。
コンポーネントって言うけど文脈によって
フロントエンジニアだったら
いわゆるUIの塊みたいなところがありますけど
インフラエンジニアだったら
インフラの一つのネットワーク構成の中の
一つの要素だったりするんですよね。
だから本当に文脈によって話全然変わったりしますからね。
優れたデザインシステムでは
そのような場合でも一つの定義で一致させることができます。
ですからデザインシステムにはたまたまな種類がありますけど
設計チームだったりエンジニアリングチーム
製品チームに対して
デザインシステムで作業するときは
このバージョンについて話しているという風に伝えると効果的です。
前置きが大事ですよね。
それは上記のどのバージョンでも構いませんが
チームが一つまたはワンセット
またはそれらの組み合わせを選ぶことが重要で
共通の目標に向かって作業しているときに
お互いが何を話しているのかというのが分かるようにします。
そういう意味で柔軟性を保つために
明確な定義を業界レベルで作ることは避けているというか
作らないことの方がいいという風にこの人はおっしゃってるんですね。
なるほどでした。
ではでは、これでラストですね。
次、ディファイニングデザインシステムインクルーシブリですね。
デザインシステムを包括的に定義してみましょう。
デザインシステムの標準的な定義を一つ持たないことで
どのチームもデザインシステムの旅の途中であることを
より包括的に理解することができるようになります。
2022年に開催されたデザインシステムのカンファレンス
クラリティっていうカンファレンスがあるんです。
デザインシステムのカンファレンスがあるんですね。
世界には。
いやすごいな。
ちょっと僕が不勉強で大変申し訳ないです。
こんなのがあったんですね。
次、アミーフープですね。
あなたがすでに持っているデザインシステムを認識するという
18:01
素晴らしいリマインダーを私たちに教えてくれました。
デザインシステムには公式非公式を問わず
あらゆる形や大きさがあります。
エイミーはアミーじゃなくてエイミーなんですね。
公演の一部をこの知恵で占めくりました。
とある一言を語られてますけど
we have to engage with our exciting unofficial design system
to cultivate one that serves us betterですね。
私たちは既存の非公式なデザインシステムと関わりながら
より良いものを育てていかなければならないんですよ
っていう風に締めくくったそうですね。
いやとてもいい言葉ですねこれは。
私たちは既存の非公式なデザインシステムと関わりながら
より良いものを育てていかなければならない。
公式がないからっていうのがさっきの定義でありましたね。
UIキットがあればそれでOK。
より大規模で成熟したデザインシステムに向けて
努力することができます。
もしあなたが成熟した完全なデザインシステムを
実践しているのであればそれもOKですと。
おそらくまだやるべきことはたくさんあるはずですよ
っていうのも付け加えてますね。
デザインシステムっていうのは決して完成されたものではなく
組織が存在する限り取り組み続けるものなんですよと。
完璧を目指すことはできないが
完璧を追求することは良い旅である
というような一般的な考え方を思い出します。
多くの物事において目的地ではなく
旅路っていうのがやっぱり必要なんです。
マテリアルデザインチームっていうのは
そのデザインシステムに何年も取り組んできており
今もなお取り組むべきことがたくさんあるんだと言ってます。
あれほど完成度が高いのに
まだ取り組むべきことがたくさんあるんですね。
またライトニングデザインシステムチームっていうのは
何年もそれに取り組んできており
今もなお取り組むべきことがたくさんあるんです。
それは悪いことではない。
いろんなCSSフレームワークのチームは
完成度がすごく高いんだとしても
まだまだやることがたくさんあるってことは
ずっとおっしゃられてるわけですね。
全てのデジタル製品は改善できる。
どのような種類の設計やデザインシステムであっても
デザインシステムを改善することも可能になります。
このビデオで世の中に存在する様々な種類を
よりよく理解し
あなたの組織でデザインシステムを
より成熟されるために
どのように行動し進歩すれば
どのような同僚と
そしてどの同僚のために
より良い仕事ができるようになるか
というのをご理解いただけると幸いです。
という言葉で
お礼は締めくられておりました。
以上ですね。
ちょっと長かったですけど。
いかがだったでしょうか。
抽象的な記事だったので
僕も今自面でしか見てないんですけど
ちゃんとYouTubeの動画見ながら
YouTubeだと絶対画像とか出てくるはずなので
その辺見ながら理解したいと思いますけど
デザインシステムっていうのを
単なるデザインのUIキットを作るためだけのもの
ここに留まらないという話がすごく良かったですね。
ここまでビジネスに関わるお話だと思ってなかったので
すごく刺激的かつ参考になりましたので
これは今後も活かしていきたいなと思います。
では今日も朝方こちらで以上にしたいと思います。
今日はですね
改めて達也和田さんとケンジさんですね
ご参加いただきありがとうございました。
さっき冒頭でも述べました。
冒頭じゃないですね。
途中で述べましたけど
21:00
次回はState of CSSですね。
僕実はState of CSS全然見たことがなかったんですけど
今年改めて見ていきたいなと思いましたので
また明日から何回にわたるんですかね
5、6回にわたるかもしれないですけど
State of CSS 2022を読んでいきたいと思いますので
興味があれば参加してみてください。
では火曜日ですね。
今日も一日頑張っていけたらなと思います。
では終了したいと思います。お疲れ様でした。
