1. resize.fm
  2. #185 デザインシステムの歴史..
2024-05-24 1:43:53

#185 デザインシステムの歴史と未来

近年「デザインシステム」と呼ばれるものの源流をたどりつつ、UIデザインツールやWebフロントエンド技術の変遷や昔話をしながら、デザインシステムの今後について話しました。

📝ShowNote: https://resize.fm/ep/185-history-of-design-system

おたよりお待ちしてます💁‍♀️
おたよりフォーム(Googleフォーム): https://forms.gle/hkHbCpdTfe54MSyq9

00:18
Takaya Deguchi
こんにちは、Deguchiです。
kudakurage
こんにちは、Motoyamaです。
resizefmは、MotoyamaとDeguchiが最近気になっているサービスやデザイントピックスを取り上げてのんびり話すポッドキャストです。
よろしくお願いします。
お願いします。
Takaya Deguchi
一番好きな映画って何ですか?
いきなり難しいこと聞きますね。
難しいですか?
あんまないんだよな。そんな…難しい。
パッと出てこないです。
kudakurage
パッと出てこない。
まあ、これは別に何を答えてもらっても僕は構わないんですけど、なんかこれね、この前ちょっといろいろと友達と、まあそういういろいろ会話している中で、
まあ一番好きな映画は何?っていうような話をちょっとしてたんですけど、なんかその時に、まあ、
僕もね、一番好きな映画って難しいね、みたいな。僕も似たような反応をしてた。
して、なんかいろいろこう考えてたんですけど、あれかなこれかなみたいな。
でもなんか、その時に僕のその質問をしてきた友達も、まあその質問をしてきた友達も、また別の人にこうそういう風な話を、まあちょっとした話として、
Takaya Deguchi
まあ振られてたわけですよね。その一番好きな映画何?みたいな。
で、その時に、私はなんかその時、まあいろいろこれかなあれかなっていっぱい答えちゃったんだけど、みたいな話をしてて、
kudakurage
僕正解はそっちだったなっていうのを気づいたんですよね。
Takaya Deguchi
どういうこと?
kudakurage
要は一番好きな映画なんて正直どうでもいいわけですよ。なんか何であってもいいわけですよね。
だから、その一番好きな映画何?って聞かれた時に、僕はなんかその時とかだったらとか、まあ多分いつもだったら、
えーわかんないなーとか言って、10分ぐらい考えた末に、なんかすごい、すごいこう重箱の隅をつついたような映画を出してくるんじゃないかなって思っちゃったんだよね。
その自分だったら。
はいはいはい。
でもそんなのどうでもよくて、その正直何を出すかなんて。
Takaya Deguchi
はいはいはい。まあ会話のネタとしてね。
kudakurage
もうそうそうそう、会話のネタみたいなもんだんだから、そんなことじゃなくて、これ、これかな?これかな?みたいなのをどんどん出していったほうが多分良かったんだなっていうのに気づいて。
だから、だからそれをそういうふうにやった友達は、あ、それ、その答え方が正解だったねって話になったっていう話なんだけど。
Takaya Deguchi
なるほど。いや確かに僕もあんま好きじゃないんですよ。その好きな本何?とか好きな音楽何?とかいきなり聞かれる。
03:01
Takaya Deguchi
はいはいはい。
なんか、なんかその空気読むのを求められてる感じがしてすごい、なんか試されてる感じがしてすごい嫌なんです。
kudakurage
あー。
Takaya Deguchi
なんか関係性がある中でだったら別にいいんだけど。
はいはいはい。
なんかこう、なんかあるじゃないですか。飲み会のなんか話のネタとしてこう振られるみたいな。
kudakurage
うーん。
Takaya Deguchi
うーん。
kudakurage
まあでもなんかそれでさ、人間性が決められちゃうことなんてないじゃないですか、大体。大体のことだ。そんなさ、好きな映画とか好きなこと。
でもそうやって聞かれると。
答えただけでさ、こいつは嫌いだなみたいになることってあんまないと思うんだよね。
Takaya Deguchi
ないんだけど、なんか真面目に考えちゃって、なんか試されてる、センスを試されてる感じがしてなんか嫌なんです。
まあまあまあ。だから僕もそういうふうに考えがちなんだけど、なんかそういうことじゃないから、別になんでもいいから答えたほうがよかったんだなっていうことにようやくこの年齢になって気づけたっていう。
まあそのコミュニケーションが得意な人はみんな普通にそうやるんでしょうね。
そうそうそうそう。
なんか変にいろいろ考えすぎちゃうから。
kudakurage
そうそうそう。だからさ、あーなんかショーシャンクの空にとかかなーとかさ、なんか、いやでもショーシャンクの空にはちょっとなんかドチョッキューすぎるかなーとかなんか、もうちょっとなんか古くて渋いやつ答えた方がいいのかなーとかさ、なんかいろいろこう考えてさ。
いやーなんか。
一個になんとか絞ろうとしちゃうんだけどさ、別にそんなのどうでもよかったっていうね。
Takaya Deguchi
なんか、やっぱ苦手だなーそういう質問。なんか、こう関係性がない飲み会だとすると、こうラベルがついてるじゃないですか。自分にこうなんか、デザイナーをやっているとかエンジニアやっているとか、なんかこうデザイン会社にいるとか。
なんかそのラベルとその答えた質問から、あー、やっぱそうなんだ、みたいな反応とか。え、意外に?みたいな、なんかその反応が、なんか嫌。
kudakurage
いや、だからでもなんか、そこでラベリングされないように、あれとこれとこれとって、なんか一個に絞らずに言っちゃった方が、むしろなんかこうね、いいんじゃないかっていうかさ、その、例えば自分が言ったこれが一番好きだっていうような映画がさ、相手に刺さらない可能性なんていっぱいあるわけじゃないですか、絶対に。
え、何その映画知らない、みたいな。でもそれよりも多分もう数出して、なんか話した方が多分いいっていうことも含めて、あー、こういうのはなんか別に、なんか本当に一番好きなやつを一個に絞り出して出すものじゃないんだなっていうのをようやく気づいたっていう。
Takaya Deguchi
まあね、まあ別にお前の一番なんて知らねえよってことでしょ。
kudakurage
まあ知らねえとは言わないけどね、まあ別にそれを知ったところで、なんか、なんかすごい大きく変わるわけでもないからね。
うーん。
なんかね。
Takaya Deguchi
分かってくるか、分かってくるか答えづらいですね。
kudakurage
そういうのがなんかね、ようやくこの年齢になって分かったね。
Takaya Deguchi
大人になりましたね。
06:00
kudakurage
大人になったなって思ったね、本当。あ、そういうことかって思ったもん。
Takaya Deguchi
大人になりましたね。
kudakurage
うーん、なんかようやく他の人と話せる気がしてきた、ちゃんと。
Takaya Deguchi
でもなんかその一番、それだったらなんか一番好きなっていうよりは、最近見た映画何とか、最近見た中で良かった何の方が答えやすいの?
kudakurage
まあまあまあ、質問としては答えやすいけどね、そういうのが。
Takaya Deguchi
質問としても。
kudakurage
まあでもね、何でもいいわけだよね。
まあだから一番って言わなきゃいいのかもしれないけどね、好きな映画何とか。
Takaya Deguchi
そうそうそうそう。
kudakurage
それだったらね、もうちょっと優しいからね。
Takaya Deguchi
うーん、まあそもそも映画そんな見てないからなっていうのもあるしね、なんかこう一番を決めるほどなっていう。
kudakurage
映画あんま見てこなかったですか?なんかこれまでの人生って言ったらあれだけど。
Takaya Deguchi
まあでも多分、全く見てないわけじゃないけど、その特筆してこう何か言うほど見てないみたいな感じ?
kudakurage
なんか映画にはまる時期とかなかったですか?
Takaya Deguchi
うーん、どうかな。映画にはまるか。
kudakurage
まあでも今だと、ネットフリックスとかアマゾンプライムとかあるから、もうなんかいっぱい見れるって感じだけど。
なんか僕は結構。
Takaya Deguchi
うん、あんまないかもね。
kudakurage
大学生とか、まあ大学卒業して社会人成り立てぐらいの時とかは、結構休日映画見るのハマってたんだよ。
映画見るって言っても映画館に行くわけじゃなくて、あの蔦屋で、なんかこれこれこれみたいなのをどんどん借りて、それを見るっていうのにめちゃくちゃハマってた時あって。
なんか昔のさ、そのアカデミー賞のやつとかあるじゃないですか、まあいっぱいそういう。
はいはいはい。
まあショーシャンクのソラニーとかも含めて。
それをこういっぱいバババって借りてきて、こう、あとたこ焼き買ってきて、たこ焼きと食べてビール飲みながら、その映画を見るっていうのが最高の僕の休日の過ごし方だったんだけど、その頃。
Takaya Deguchi
あんまないね。
kudakurage
すごい、その頃だからすごい見てた気がする。
Takaya Deguchi
うーん、それはじゃあ答えられるじゃないですか。
kudakurage
いやまあだから、だからそっからさ、一番って聞かれるとやっぱりなんか、うーんってなってたんだけど。
Takaya Deguchi
うーん。
kudakurage
ね、まあまあまあ、なんかその辺はでも、結構僕は見てた気がするんだよね。
なんか一時期、まあ今はそんなね、あれかもしれないけど。
Takaya Deguchi
話題になってんのを見るぐらいな話で、なんかそんな別に映画好きじゃないってことなのかな。
kudakurage
耳は言ってるが、ドラマ見てるのとあんま変わんないっていうか。
ああ、まあ、なんかでもドラマより僕はやっぱり映画の方が見てる気がするな、だから。
ドラマはやっぱ長い、長いじゃんなんかドラマって。
映画って長くても2時間ぐらいで終わるからさ。
Takaya Deguchi
いや、僕逆なんですよ。なんか映画って1本が長いじゃないですか。
09:04
Takaya Deguchi
ドラマって1話が短いじゃないですか。
まあ1本が長いね。
だから。
kudakurage
まあまあ4、50分みたいなね。
Takaya Deguchi
そう、なんか、なんていうか、拘束時間が長いんだって感じちゃうっていうか。
その、ドラマだと途中でやめられたりとかするから。
別に映画も途中で見るのやめればいいんだけど。
kudakurage
なんかでも、やっぱドラマはさ、なんか海外ドラマとかさ、やっぱたまに流行るじゃん、なんかそういうさ、24とか。
24とかもう地獄かって思ったもんね、僕なんか。
24本見なきゃいけないわけでしょ、だって、その24って。
地獄じゃねえかと思ったもんね。
Takaya Deguchi
あれは作業用BGMみたいなもんじゃないですか。
kudakurage
しかもさ、なんかそれがさ、今はシーズン5までありますとかさ、なんかそういうわけでさ。
Takaya Deguchi
え、なんで24本立て続けに5日間見なきゃいけないのかやって思ってさ、なんか辛いなみたいな。
もう24は別に見てなかったけど、でもなんか深夜によく流れてたじゃないですか。
kudakurage
ああ、流れてたね。
Takaya Deguchi
それでなんかよく見てましたね。見てたっていうか流れてた。
kudakurage
ああ、そういうのあるね。
なんか僕も積極的に見てなかったんだけど、昔そのバイト、伊東予華堂でバイトしてて、だいたい帰ってくると深夜。
まあ12時ぐらいになるわけだよね、深夜。
Takaya Deguchi
で、なんかその時間帯になんかね、韓国ドラマのチャングムの誓いって知ってる?
知ってる?
kudakurage
チャングムの誓いっていうなんか韓国ドラマがあって、それを僕は見る気なかったんだけど、
Takaya Deguchi
母親が見てたんだよね、なんかよくすごい。
kudakurage
で、その母親が見てるので、僕もなんかちょうど帰ってきて、ご飯作ってくれるやつを食べてて、
で、母親が見てるからなんとなく見てたら、すごいなんかハマり始めちゃって、帰ってきてご飯食べながらそれを見るっていうのに。
もうなんかそのうち僕がこうチャンネルを優先して、もうそろそろチャングムの誓いの時間だよみたいな感じで、
チャンネル変えて見るみたいなことになってて、なんか一時期すごいハマってた時あったけど、そういう。
Takaya Deguchi
分かる。
なんか高校の時とか、なんかちょっと部活とかバイトとかやって、ちょっと家遅く帰ってきて、
ちょっと遅く夜ご飯食べてる時に流れてる深夜海外ドラマをそうやって見るみたいなのあった気がする。
kudakurage
水曜堂でしょうもそうだったもんね、なんか大体その時間にあの深夜の再放送のやつがやってて。
もうよく見てた。
Takaya Deguchi
信長とかね。
kudakurage
あ、そう、信長とかね。
Takaya Deguchi
愛知県ローカルだけど。
kudakurage
ワッキーがその頃まだシリリトリやってた頃だよ、僕が見てたの。
Takaya Deguchi
そうそうそうそう。
kudakurage
その時間帯はなんか見てたな、よく。
その時間帯にドラマやってたら、僕も見てたね、なんか自然と。
Takaya Deguchi
あの時間帯の海外ドラマよく見てたな。
12:03
kudakurage
確かによく見てた気がするわ。
Takaya Deguchi
謎のプロレス番組とかね。
kudakurage
謎のプロレス番組?
Takaya Deguchi
K-1かな、K-1の番組かな、なんか愛知県の。
kudakurage
でもなんか、今どうなのか知らないけどでも格闘系の、格闘技系のそういうプロレスとかK-1とかの番組結構深夜にやってて。
Takaya Deguchi
よくやってましたよね。
確かにやってたね。
kudakurage
でもなんかそれで言うと深夜にさ、たまにはそんなに深夜なんかやってるってことなかったんだけど、
課題をやんなきゃいけないとか、宿題やんなきゃいけないみたいなので、すごい深夜までうだうだやってることがあって。
で、まあさ、なんか適当にテレビつけながら、別に見るわけでもないんだけどテレビつけながらこうやってると、
なんか深夜に始まる昔の、それこそすごいアカデミー賞取ったみたいな映画とかが、
たまにこうパンって流れることがあって。
あれ結構僕ね、いいなって思うんだよ。
Takaya Deguchi
自分の期待値がめちゃくちゃ低い状態で、なんかやってるなぐらいのところから始まって、だんだん身に入っていっちゃうみたいな。
kudakurage
だからあの映画はね、結構それ見て、あ、この映画めっちゃいい映画だなっていうふうに知ったの結構多かったんだよね、なんか。
深夜に不意に見る、なんかこういい映画。
Takaya Deguchi
たしかにな。なんかそういう不意に見るっていう方が多かったのかもしれないな。
kudakurage
でも映画ってさ、最近やっぱりなんかもう、なんていうの、バンセンっていうのがあるじゃん。
Takaya Deguchi
なんかそのPRっていうか、バンセンみたいな。
kudakurage
そのあれがさ、煽りがすごくてさ、バンセンが一番面白いみたいな映画とかたまにあってさ。
Takaya Deguchi
もうバンセン以上のものが出てこないみたいなやつあるから。
バンセンもちゃんと見るんですね。
kudakurage
いや僕、だから基本見ないようにしてるんですよ、もう何でもほぼほぼ。
そうですよね。
やっぱハードル上がっちゃうからその。
Takaya Deguchi
あとなんかその、映画館行く前にやるバンセンも大体なんか15分ぐらいあるじゃないですか。
だからもうそこから逆算しても15分後に映画館入るみたいなことしてるな。
kudakurage
なるほどね。
Takaya Deguchi
そうした方がポップコーンとかも空いてて買えるしとか思って。
kudakurage
だから僕が最近っていうか、映画館に見に行ってめちゃくちゃいいなって、
たぶんごく最近に思ったやつ、ごく最近ではないんだけど、
あのあれなんだっけ、カメラを止めるなっていうさ、映画あったじゃないですか。
あれ、僕全く脳知識で行ったんですよ実は。
Takaya Deguchi
僕もそうでしたよ。
kudakurage
全く、本当に全く脳知識で、友達が見たいから一緒に行こうって、
15:05
kudakurage
なんか何の映画かも知らされずに、なんかすごい見たい映画があるから一緒に行こうって言われて、
僕全く脳知識で連れてられて、見に行ってみたんですよ。
だからこう、めちゃくちゃそのハードルがめちゃくちゃ低い状態の頃から、無の状態から見たんで、すごい面白かったね。
Takaya Deguchi
とりあえず僕もなんか映画っていうより映画館が好きなんだよな、どっちかっていうと。
kudakurage
映画館は好きなの?
Takaya Deguchi
うん、映画館は好き。
だからだいたい映画見るときって、なんかTwitterとかでなんか話題になってんなみたいな感じで、
でも予備知識何にもなしに、なんか時間あるときに映画館で見に行くみたいな感じが多いですね。
kudakurage
映画館ね。
なんか映画館ってさ、やっぱちょっとまあ当たり前だけど、その席がさ、やっぱ狭苦しいじゃないですか、なんか。
まあそのなんか電車とかほどじゃないかもしんないけど。
だからたまにすごい豪華シートみたいなのあるじゃん。
はいはいはい。
とかさ、足伸ばせるシートみたいなやつとか。
あれで一回見てみたいなって思うね。
Takaya Deguchi
僕だいたいそれにしてますよ、最近。
kudakurage
あ、だいたいそれにしてんだ、あいつも。
Takaya Deguchi
映画館行くんだったら絶対課金したほうがいいと思ってるから。
kudakurage
うーん、いやなんかあれ、あそこだけだなと思ってるから、やっぱり僕は映画館に求めるの。
今んところ、あれで見たほうがたぶんいいんだろうね、だから。
いや、あれいいっすよ。
いくらなの、あれって。そんなかかんないの?倍ぐらい?
Takaya Deguchi
プラス千円ぐらいじゃなかったっけ?
kudakurage
プラス千円ぐらいなの?
Takaya Deguchi
え、たしか。はい、どうだったかな。
kudakurage
そんなめちゃかかんみたいな映画じゃないっすよ。
最近だったらたぶん映画、まあ2000円ぐらいでだいたい見れる。
2000円前後でたぶん見れると思うけど、プラス千円ぐらい。
Takaya Deguchi
まあ、さっきのあいうプレミアム席みたいなのもいろいろバリエーション出てるから、めっちゃ高いのもあると思いますけど。
ああ、はいはいはい。
なんかそれこそ新宿のあのなんだっけ、ゴジラの、なんだっけ、なんか新しくできた映画館。
うん。
あの、歌舞伎町のあったらいいの。
はい。
だけど、なんか倍ぐらい払うとプレミアムラウンジみたいなのに入れて。
へえ。
なんかその、開演1時間前からちょっとなんか優雅に楽しめて、なんかお酒飲んで。
kudakurage
へえ、そんなのあるんだ。
Takaya Deguchi
で、ふかふかのあのソファみたいな席に座って映画が見れてみたいな。
kudakurage
それでも倍ぐらいなんだね。
だからもう5000円ぐらい。
Takaya Deguchi
いや、もっとだったかな。
kudakurage
5000円ぐらい払えばいけるってこと?
Takaya Deguchi
ちょっと覚えてないけど、うん、5、6000円払ってそう。
kudakurage
まあ、5、6000円はちょっと、6000円まで行くとさすがに結構払ってるなって感じだろうけど。
Takaya Deguchi
普通の東宝シネマとかにある普通のプレミアム席、1000円、2000円の世界だったと思うけどな。
kudakurage
3000円とかでそれ見れるんだったら全然いい気がするね、なんか。
18:00
Takaya Deguchi
うん。
あとそれで言うと、一時期レイトショーに行くってね、はまってた時代はありましたね。
kudakurage
ああ、はいはいはいはいはい、レイトショーね。
Takaya Deguchi
六本木、六本木の、六本木ヒルズのあの東宝シネマって結構夜遅くまでやってるんですよね。
うんうん。
なんかあれ見、あそこでレイトショー見て始発で帰るみたいなことをしてた時代はあった。
始発で帰る?
そうそうそう、終電過ぎてもあったんですよ、確か。
kudakurage
へえ、レイトショーってそんな、え、ずっとやってるんですか?なんか夜通し。
Takaya Deguchi
いや、えっとね、一時始まりとかだったのが昔はあった。
kudakurage
一時始まりでもう2時間あって、3時間、3時ぐらいじゃないの?
Takaya Deguchi
そう、で、1時間ぐらい公園でぼーっとして、
kudakurage
ああ、そういうことね。
Takaya Deguchi
4月で帰るっていう感じ。
kudakurage
ああ、へえ。
Takaya Deguchi
うん、めっちゃガラガラだから、すごい快適ですよ。
寝ちゃいそうだけどね、さすがになんかもうそれ。
なんか気分展開になるしいいなと思って、一時期やってたな。
うーん。
ああ、プレミアボックスシートプラス1000円とからしいっすよ。
kudakurage
ああ、全然いいじゃん。
今度なんか、じゃあ行ってみようかな、プレミアのやつに。
Takaya Deguchi
うーん、絶対いいと思う、その方が。
kudakurage
うーん、そんなもんだったらちょっといいかもな、全然。
うーん。
そこだけだもん、今、僕の映画館の不満点。
Takaya Deguchi
課金ですよ、課金。
kudakurage
そこだけだから、1000円で行けんだったら全然ありだな。
Takaya Deguchi
うーん。
kudakurage
そんなね、せっかく見に行くんだし。
そうそうそう。
全然いい気がするな。
Takaya Deguchi
僕、サウナと一緒なんだよな、映画館の捉え方が。
なんか気分転換手段っていうか。
kudakurage
ああ。
Takaya Deguchi
その空間に入ってバッと切り替わるのがいいみたいな、そういう感じ。
kudakurage
ああ、なるほどね。
そうか。僕は映画館に行くのは割とあれだな。
あんまり映画館一人で行かないんですよね、僕はあんまり。
行くこともあるけど、あんまり行かない。
なるほどね。
だから、友達とだいたい行くんですよね。
Takaya Deguchi
うーん。
kudakurage
見たい映画、すごい見たいわけじゃないけど、見たい映画あるとこだったら、
なんかもう友達と行こう行こうって言ってる間に、予定が合わずに見ないこともあるんですよ、だから。
ああ、じゃあまあ配信されたら見ればいいかぐらいのさ、なんかそういう感じになっちゃうっていうか。
だからなんか割と友達と遊びに行く場所みたいな感じはあるかもしれない。
だからそういう意味では僕の中で映画館、映画館っていうのはね。
Takaya Deguchi
なるほどね。僕も完全に一人で行く場所ですね。むしろ一人で行きたい。
kudakurage
まあ一人で行くのもいいんだけどね、なんか。
僕もこの前、この前っていうかだいぶ前か。
あのスラムダンクの映画、2回目のやつを一人で見に行ったけど。
いやー良かったねー。
熱くなれたねー。
21:00
kudakurage
まあ一人で行かなくても多分熱くなってたんだろうと思うんですけど。
まあでも見たい映画はまあ普通に一人で見に行ったりとかもしてる気がするね、なんかそういう意味では。
Takaya Deguchi
うーん。
まあでも最近配信早いっすもんね。
kudakurage
普通にすぐネットフリックスとかAmazonプライムで配信されたりするから。
Takaya Deguchi
うーん。
kudakurage
本当に、いやーなんか昔の僕の最高の休日が過ごしやすくなってるっていうその。
休日にたこ焼き食べながらビール飲んで。
Takaya Deguchi
だからこそどうせ見に行くなら課金ですよ。
kudakurage
まあそれも分かる気がするね、だから。
うん。
しかもなんか僕の場合だったらね、その友達と見に行くってなったら結構僕都内に行くことが多いから。
そうっすよね。
友達を見るためだけに。
Takaya Deguchi
うーん。
kudakurage
だから移動費の方が、交通費の方がお金かかったりするんだよね、なんか。
Takaya Deguchi
確かにね。
いやじゃあさっきのプレミアムラウンジがある新宿のとこ、いいんじゃないですか。
それなんか。
あ、歌舞伎町タワーか、歌舞伎町タワーだ。
kudakurage
歌舞伎町タワーの映画館?
Takaya Deguchi
歌舞伎町タワーのプレミアム、109シネマズプレミアム新宿っていうとこ。
kudakurage
プレミアム新宿のプレミアムシート?
Takaya Deguchi
ラウンジ。
kudakurage
うん。プレミアムラウンジ。
でもなんかこれ、全席プレミアムシートってなってんじゃん。
なんかどの席もクオリティがちょっと高いみたいな。
Takaya Deguchi
あ、そうかもそうかも。
kudakurage
すごい。さらに、さらになんかあるのかな?そのプレミアムラウンジ。
あ、鑑賞前にって話か、ラウンジは。
Takaya Deguchi
あ、なんかここの109シネマズプレミアムっていう場所自体が全てプレミアムなの。
kudakurage
プレミアムなんだね。
全部こう、あの待合室でいうか、よく待ってるところとかもちょっとプレミアムな感じになってるみたいな。
Takaya Deguchi
なんか音もめちゃくちゃいいらしいですよ、ここ。
kudakurage
もっとプレミアムなシートはないのか。
Takaya Deguchi
え、でもシートだいぶプレミアムですよ、ここ。
kudakurage
だいぶシートプレミアムっぽいけどね。
Takaya Deguchi
もっとプレミアム。
kudakurage
あ、でもこれ、電動リクライニング機能付きってなってるから。
Takaya Deguchi
そうそうそうそう。
kudakurage
これなんか、こうちょっと倒れたりとか、足伸ばせたりするのかな?
Takaya Deguchi
うん。
kudakurage
それ良さそうだね。
Takaya Deguchi
だいぶプレミアムそうですよ、ここは。
kudakurage
ちょっとなんか、なんかいい時に行ってみたいな、これ。
Takaya Deguchi
あれも一番高い席で6500円だって。
kudakurage
あー、ほんとだ。
Takaya Deguchi
で、その下は4500円だって。
kudakurage
まあでも高いね、やっぱり。
普通の映画館の倍、3倍とか、倍とか。
Takaya Deguchi
でも4500円の方だったら、まあ普通3000円ぐらい?
2、3000円ですよね。
kudakurage
まあ2000円ぐらいじゃない?
24:00
Takaya Deguchi
まあちょっと良いやついったら2000円ちょいとか。
まあ、うん、そうね。
まあラウンジとかあるから、こここそ友達と行くのが良いかもしれないですね。
kudakurage
そうね。これはなんか特別な時に行ってみたいね、なんか。
ここぞ。
ここぞっていう特別な時に。
Takaya Deguchi
音が良いやつを見る時とかね。
kudakurage
うん。
Takaya Deguchi
じゃあ今日はちょっと緩めの回なんですけど。
kudakurage
うん。
Takaya Deguchi
まあ例によってちょっとデザインシステムの話なんですけど。
あのー、やってるのは。
凝ってますね。
凝ってるっていうか、まあ仕事で今ちょっとやってるから、なんかネタがめっちゃ出てくるからっていう話なんですけどね。
で、ちょっとなんか最近、まあその仕事で人前でちょっと話す機会があって。
で、その時にデザインシステムとは何かみたいな話から、まあその話すことをちょっと依頼されたんでやってたんですけど。
その時にちょっと歴史を軽く調べてたんですよ、デザインシステムの成り立ちというか。
で、なんかこれまでUIデザインの歴史とか西洋美術史とかやってたと思うから、
ちょっとその歴史シリーズ的な感じで、ゆるく話せればなと思うんですけど。
まあ歴史といってもね、そんな西洋美術とかUIデザインほど深いわけではないので、あれなんですけど。
まあただなんか、これ印象的だなみたいな、なんかエポックメイキング的な事例っていくつかあるような気がして。
まあちょっとなんかそういうのを思い出がてら話せればなと思うんですけど。
まあ下敷きとしてはデザインシステム、デジタルプロダクトのためのデザインシステム実践ガイドっていう、
なんか2018年に出た赤いデザインシステムの本があるんですけど、
まあかなり定番の本ですね。
そこをまあちょっと下敷き程度に見てはいるんですが、
あとはなんか自分の記憶ベースに話せればなと思うんですけど。
まあそもそもデザインシステムってなんだっていう話になるんですけど、
なんかなんだと思います。何があったらデザインシステムだと思います。
kudakurage
何があったら。何があったらか。
これはすごいさっきの一番のことを考えちゃったな今。
え?
Takaya Deguchi
いやさっきの一番好きな映画のことを考えちゃった。
ここ考え込んじゃダメなんだなみたいなさ。
まあまあそうね。何でもいい。何でもいい。
kudakurage
いやまあでもなんかあれじゃないの。デザインシステムって言ってるけど、
まあでも大元たどっていくとなんか割とね、
なんかこの何ていうのよくあるさ、バリューとかになっちゃうんだけど、
27:01
kudakurage
ブランド的なものになっちゃうんだよね。そこまで行くと。
なんか本当の大元のまで行っちゃうと。
まあでもね、前ちょっと話してたスマートHRの本だっけ。
あれとかはすごい実践的というか、すごく実務的でいいなと思ったよね。
Takaya Deguchi
別に深く考えずに必要なものをどんどんやっていけばいいっていうような話だったから。
kudakurage
すごいいきなり大きく考えすぎなくてもいいんじゃないのみたいな話だったから。
そういう考え方もあるから、別に何があってもデザインシステムって言えばデザインシステムになるんじゃないのっていう。
ちょっと適当な答えをしてみるけど。
Takaya Deguchi
いやまあでもそうですよ。なんかデザインシステムって、
まあUX並みにふわっとした用語だと思ってて、
何でもユーザー体験だよねみたいな話と近いなと思うんですよ。
だし、まあこの下敷きにしてる赤いデザインシステムの本でも、
kudakurage
まあ定義はないですってもう初っ端から書いてあるんですよ。
Takaya Deguchi
で、まあただなんかいろいろこれまで、
まあ仕事とかベースでデザインシステムいろいろ見てきて、
まあなんとなくなんか共通項みたいなのがある気がしてて。
で、一つがさっきもたぶんさんがちらっと言った、
デザイン原則とかデザイン言語とか、
まあバリューみたいな、なんか行動指針的なやつ。
デザインエランゲージみたいなやつが一つ目。
で、あと二つ目が、まあこれもパッと思いつくだろう、
なんかライブラリー、UIコンポーネントのライブラリーみたいなやつ。
まあ部品集みたいなやつ。
で、三つ目がなんかワークフローとか運用体制とか、
なんか組織的な話っていう、なんか大きく三つの箱があるかなと思ってて。
で、なんかその箱の中に何を入れるのかっていうのは、
まあそれはなんか各デザインシステムのスコープ次第なのかなと思ってて。
なんかそのプロダクトによりこう比重を置く場合だったら、
そのUIコンポーネントとかっていうのが主題になってくるだろうし、
よりこうブランドに、ブランディングに比重を置くんだったら、
なんかこうコーポレートアイデンティティとか、ビジュアルアイデンティティみたいな話とか、
あとロゴとか、グラフィックアセットみたいなものとかだと思うし、
あとはなんかもうちょっと組織全般に広げるんだったら、
なんかこう名刺とか、スライドテンプレートとか、
なんかそういったものが入ってくるだろうしみたいな、
まあなんか同じ部品集とかパターン集みたいな、
その1つの箱に何を入れるのかっていうのは、
そのスコープ次第でいろいろ変わってくるかなと思うんですよね。
30:01
Takaya Deguchi
だからなんかこう、なんとなくパターンであるみたいなのは、
やっぱ共通してるかなっていうのは1つあるかなと思うんですよね。
形としては全然定義が定まんないんだけど、
なんとなくなんかこう精神というか、
頻度として何が必要とされるかというと、
なんかまあこれは自分、僕の試験ですけど、
まあ1個はやっぱそのパターンであることっていうのと、
あともう1個がシングルソースオブトゥルースっていう、
なんかその信頼できる1つの情報源であるみたいなところ、
だからなんかこうデザインシステムと呼ばれるものと、
ガイドラインと呼ばれるものの違いって、
なんかそこにあるかなと思ってて、
なんかその常にアップデートされる存在であるみたいなところが、
やっぱデザインシステムに求められるところで、
だからまあ時が経てもずっと信頼できる情報源であるっていうところのマインド、
まあそれをもうエンジニアリング用語だとシングルソースオブトゥルースとか呼ぶけど、
まあそれは2つ目として、なんか求められる性質としてあるかなと。
で、あと3つ目がなんかオープンさというかオープネスというか、
なんかこうデザインシステムを組織の一部署で閉じたものっていうよりは、
まあどっちかというと指向性としてはなるべくこう全社でオープンに、
誰でも参照し得るものみたいな。
まさにスマートHRの本、小さく始めるデザインシステムみたいな、
あの本の中だと結構こうライティングガイドラインとかがあったりとか、
なんかそのUIデザイナーとかエンジニア以外の人たちもターゲットにするような話とかって、
結構触れられてたと思うんですけど、
まあなんかそのオープンさみたいなのも、
まあスコープがさっきのブランド比重なのかプロダクシー比重なのか、
まあいろいろあるにしろ、やっぱそのオープンさみたいなところってのは、
指向性としてあるのかなと思って。
kudakurage
そうだね。まあなんか使われなかったら意味がないものだからね。
Takaya Deguchi
そう。だからパターンであること。
kudakurage
対象が結構広いというかさ、やっぱり。
大体なんかその会社に関わってる人は大体使う対象になる人みたいなことになるようなものだよね、やっぱり。
Takaya Deguchi
だから結構こうブランディングをした結果出てくるブランドガイドラインみたいな、
なんかロゴの取扱説明書みたいなやつって、
なんか割とこう閉じてるというか、なんかPDFとして置いてあって、
なんかブランド管理部門が管理してるみたいなことになったりすると思うんだけど、
なんかやっぱそことの対比としてはやっぱシステムというふうに名がついてるから、
まあ常に更新されるものであり、オープンなものであり、誰もがアクセスできるもの。
で、取り扱うのはパターンであるみたいな。
なんかそのパターンであること、シングルソースオブトゥルースであること、オープニスであることって、
この3つになんか反するデザインシステムっていうのは逆にないんじゃないかなっていうふうには思ってて、
33:04
Takaya Deguchi
その形が違ってもね。
まあだから個人的にはこの3つっていうのが、
まあなんかそのデザインシステムに共通している思考性みたいなものなのかなっていうふうに思うんですよ。
まあそういうふうに整理すると、
別にデザインシステムって概念は別に新しいものでは全くないと思ってて、
まあやっぱその今言った3つの中で一番特徴的なのはパターンであることっていう話で、
でこのパターンっていうのが一個キーワード、デザインシステムの中でも一番大事なキーワードだと思ってて、
そのやっぱこの原理をたどるとパターンランゲージっていうものにたどり着くと思うんですよね。
だからまあCっていうのはデザインシステムを厳重ってそこなのかなっていうふうに思ってて、
でそのパターンランゲージっていう概念って、
まあもともとをたどると1970年代になんか建築家のクリストファー・アレック・サンダーという人がいたらしいんですよ。
でこの人が建築家なんですけどパターンランゲージ環境設計の手引きっていう1984年に本を出してて、
でこれが建築の本なので人がこう心地いいなっていうふうに感じるなんか環境っていうのがパターンがあるよねみたいなのをなんか分析してなんか253個上げたっていう本らしいんですよね。
で例えばなんかその心地いいなって感じる要素パターンとしては例えばなんか町の中に座れる階段があるとか、
なんかこう街路を見下ろすバルコニーがあるとかなんかそういうのがあるとなんか心地いいって感じるみたいななんかそういうのを整理してまとめたらしいですよね。
なんかそれをやるためにはなんかいろんな国の綺麗な街並みとか住まい、住居とかをなんかこういろいろ観察する中で決めていったらしいんですけどね。
kudakurage
なんか確かこの人建築なんだけど都市警官とかそっち系の人なんだよね確か。
Takaya Deguchi
そうですね。
kudakurage
街の話とか結構入ってきたりね、するっていう本だった気がしますね。僕もちょっと読んだ気がするけど。
Takaya Deguchi
僕は読んだことないんだけど結構面白そうだ。今読んでも面白そうだなと思って気になりますねこの本は。
kudakurage
なんか昔あの池谷さんが読んでた気がする。読んでたのかなんかいろいろパターンランゲージがあった話してた気がする。
なんかすごいあの皿の頃に。
Takaya Deguchi
多分だけどこのパターンランゲージって概念はまあここからいろんなところに輸出されるんですよね。
で確かなんかSFCにパターンランゲージ、SFCだったかな?に研究してる先生がいて、確かそことクックパッド一緒にやってたんじゃなかったかな?なんか共同研究みたいな。
なんていう話をなんか池谷さんに聞いた覚えがあるような気がする。
多分なんか料理のパターンランゲージみたいなのを作ろうとしてたのかな?詳しく知らないですけど。
36:03
Takaya Deguchi
まあみたいななんかいろんな分野に輸出される大元となったのがこのクリストファー・アレクサンダーっていう人が書いたそのパターンランゲージ環境設計の手引きっていうような本らしいんですよね。
でその輸出先の一つとしてやっぱソフトウェアのエンジニアリング業界っていうのがあって、それが90年代の話なんですけど。
パターンウィキXPっていう本があるんですけど、これも結構有名な本で。
これはなんかそのデザインパターン、ソフトウェアの業界の中でパターンランゲージというよりはどっちかというとデザインパターンと呼ばれたりするんですけど、
それについてその歴史について取り上げた本で、この本も結構面白いんですけど。
でそのソフトウェアエンジニアリングの業界に持ってきた代表的な人としてオード・カニンガムとケント・ベックっていう人がいて、
特にこのケント・ベックっていうのはアジャイルの人なんですよ。
このもともとパターンウィキXPのXPっていうのはエクストリームプログラミングって呼ばれてるやつ。
で特にこのケント・ベックっていう人が中心となってアジャイルソフトウェア開発宣言っていう、
なんか今のアジャイル開発の原理となる思想、宣言なんですけど、
個人との対話を大切にしましょうとか、契約をするよりも顧客と協調するのを大事にしましょうとか、
計画を守ることよりも変化に柔軟に対応していきましょうみたいな、
そういう宣言をまとめたんですよね、アジャイルソフトウェア宣言っていう。
それの中心となったのがこのケント・ベックっていう人で、
でなんかこのアジャイルソフトウェア宣言っていうのは、
これ全然もう完全にアジャイル開発の文脈の話なんですけど、
なんか結構さっきのオープンスターみたいなところ、デザインシステムに求められるオープンスターみたいなところとも、
なんかちょっと近しいんじゃないかなっていう気はしてて、
なんかやっぱこの辺も原理の一つとしてあるのかなっていうふうに思うんですよね。
なるほどね。
あとはなんかソフトウェアの業界の中だとゴフのデザインパターンっていうのがあって、
なんかゴフっていうのがギャングオブフォーっていう人たちで、
なんかこれも90年代後半ぐらいにオブジェクト思考言語みたいなのが結構出来上がってきた頃に、
オブジェクト思考の世界の中でなんかこう最良性の高いソフトウェアの設計パターンみたいなのがあるよねって、
整理した4人のなんか四欠みたいななんか人がギャングオブフォーって呼ばれてて、
それゴフとか言うんですけど。
でなんか僕大学ソフトウェア工学系のゼミなんですけど、
なんかそういう分野だと結構なんか臨読とかよくするようなものなんですよ。
なんかシングルトンとかアダプターとかデコレーターパターンとか、
なんかそういう名前がついてて。
39:01
Takaya Deguchi
でそれがある意味エンジニアの中だと共通言語みたいになってて、
なんかよくクラス名とかにシングルトンなんちゃらとかなんちゃらデコレーターとかついてて、
だからパターンを知ってるとこういう設計なのねっていう風に理解が早くなるみたいな、
なんかそういうやつなんですよね。
なんかこれって結構UIの世界でいうこれはタブナビゲーションとか、
なんかそういうコンポーネントの名前の付け方とかにちょっとなんか通じる部分もあるのかなみたいな。
kudakurage
そうだね。
Takaya Deguchi
もうちょっと上流の話なんですけどね。
これは上流というかあの抽象が高い話なんですけど。
kudakurage
確かに。
なんかデザインパターンとかっていう言葉は、
どっちかっていうとデザインの文脈っていうよりもオブジェクト思考の文脈でよく聞いた気がするな。
Takaya Deguchi
そうなんですよね。
kudakurage
デザインパターンって話って。
デザインっていうのは見た目っていうよりはもう設計ですよね本当にこれ。
Takaya Deguchi
設計なんですよね。
kudakurage
設計のパターンをなんかこう作っていくみたいな。
Takaya Deguchi
だから結構デザインパターンっていうのはやっぱりそのソフトウェアエンジニアリング業界での設計の話であり、
建築業界での設計の話であったっていうのが多分現流なんだろうなと。
kudakurage
そうだね。
Takaya Deguchi
思うんですよね。
だからなんかこうこの辺のこう建築で言うパターンランゲージの話とか、
あとアジャイル開発の話とか、
ゴフのデザインパターンの話とか、
この辺がかなりこう現代のデザインシステムの現流なのかなと思う。
あとプラスして別の角度の話としてはグラフィックデザイン界の話もあるかなと思ってて。
グラフィックデザインの世界だとグリッドシステムとかっていう考え方ってずっと昔からあると思うんですよね。
僕はそこについては詳しくないけど、
1950年ぐらいからこう格子状にガイドライン引いてブロックごとに文字とか図とか置いていくみたいな話。
で、グリッドシステムっていう本があると思うんですけど、
ヨゼフ・ミューラーさんが書いた1981年の本みたいですね、現状は。
日本語版もあると思うんですけど、
この人はスイスのタイポグラファーみたいで、
なんかこの辺で体系立てられたのかなと思うんですけど、
そういう格子、グリッドに配置してグラフィックデザインを行うっていうような
考え方も多分デザインシステムの原理の一つなのかなというふうには思っていて。
この流れの中でいうと、
エポックメイキング的な事例として挙げられるのが、
NASAのグラフィックスタンダードマニュアルっていうのがあるんですよね。
これが今でもPDFで見れてなかなか面白いんですけど、
これは1975年に出たNASAのためのブランドガイドラインみたいなものに近いのかな。
現代のブランディングとかやると最終的なアウトフットとして作る
ブランドガイドラインの源流みたいなものらしいんですよね。
42:02
Takaya Deguchi
中身見てみるとなかなかいろいろ本当にカバン範囲が広くて、
それこそロゴの取り扱いみたいな話、
ブランドカラーはこれですみたいな定義があったりとか、
ロゴのパターンとしてはこういうのとこういうのがありますよとか、
セーフエリアというか、
ものはこれぐらいパーティングをとってくださいみたいな話があったりとか、
あとはこのNASAのマニュアルの中でも、
さっきのグリッドシステムみたいな話があって、
基本的にこのグリッドシステムを使って
NASAの出すパンフレットとかそういうのをデザインしてくださいねっていう話があったりとか、
あとはロゴがいろんなロケットとか車とか、
NASAが作ってる乗り物にロゴが入ると思うんで、
例えばロゴを入れるときにロケットとかの色に合わせて、
白ベースだったらこのロゴを使ってくださいねとか、
黒ベースのロケットだったらこのロゴを使ってくださいねみたいな、
そういうルールみたいなものが決められてたりとか、
あとはユニフォームのNASAの宇宙飛行士が着るユニフォームにどう展開していくか展開事例みたいなものとか、
結構現代のブランドガイドラインでもよく見るなみたいな、
あとサイン計画みたいなのがあったかなとか、
そういうよく見るなみたいなものが大体網羅されてるっていうような事例で、
これは結構有名な事例らしいですね。
っていうグラフィックデザイン界の文脈もやっぱり現在のデザインシステムにかなり含まれてるなというような感じですね。
っていうのが1974年代くらいの話で、
やっぱりそこにきてもう一回ソフトウェアの話に話を戻すと、
1977年にAppleのHuman Interface Guidelinesっていうのが出てきてるんですよね。
初版が1977年らしいんですけど、
調べてて初版のHuman Interface Guidelinesって何が書いてあったんだろうなと思って、
いろいろ調べてたら、
ふえのマダムさんがまとめてるサイトが出てきて、
目次をまとめてるHRGのこれまでの目次をまとめてるサイトが出てきて、
なかなか面白いなと思ったんですけど、
てかさすがふえのさんだなと思ったんですけど、
やっぱなんかこのHuman Interface Guidelinesが特徴的だったのは、
ガイドラインっていう名前の通り、
思想とかデザイン原則みたいなのがかなり含まれているっていうような、
それをソフトウェアのUIデザインの領域に持ち込んだみたいなところがやっぱり
エポックメイキングだったのかなっていうふうに思うんですよね。
で、やっぱこの思想、
Appleの考えるデザイン原則というかデザイン言語みたいなところを語るみたいなのは、
45:01
Takaya Deguchi
現代も形変えて、
例えばVision OSのデザイン原則みたいなページがあったりとかしますけど、
なんかやっぱその原則から語っていくみたいなところが、
AppleのHRGが持ち込んだ概念なのかなっていうふうに思うんですよね。
で、ここまでがだいたい1980年代、90年代の話なんですけど、
2000年代に入ると、
こっから徐々にウェブの世界になっていくと、
2000年代半ばに出たのが、
Yahoo!のインターネットで、
これ、まとやまさん使ったことあります?
使ったことあった気がするな、なんかで。
わかんない、ちょっと覚えてないな。
使ったことあったような気がするけど。
これなんかもう現状に残ってないんですけど、
kudakurage
なんかスクショとかを見ると、
Takaya Deguchi
これYahoo!が出してた、
kudakurage
これがYahoo!のインターネットで、
Takaya Deguchi
これがYahoo!のインターネットで、
これがYahoo!のインターネットで、
なんかアコーディオンとか、
この辺りからそういうウェブ上のUIに
名前がついて定義されたみたいな感じらしいですね。
なんかおそらくこの頃になってくると、
2006年だったかな、これが。
2006年だったと思うから、
2006年だったと思うから、
2006年だったと思うから、
HTML5とかCSS3が出始め、
kudakurage
もうちょい後かな。
AJAXとかいってる時期だよね、一番。
これ今Flashじゃなくて、
もうJavaScriptとHTML5でしょみたいな、
そういう時期だった気がすんだよな。
僕もちょうどその頃すごいJavaScriptを
すごい勉強して書いたりしてたから、
結構いろいろライブラリ触ったりとかもしてた気がする。
そのUIライブラリ、Yahoo!ユーザーインターフェースライブラリも
ちょっと触った気がすんだよな、その時に。
Takaya Deguchi
そうっすよね。
確かこの頃って、
JQueryよりさらに前の
Prototype.jsみたいなのがあった時代ですよね。
kudakurage
Prototypeが一番流行ってた時期かもね。
JQueryも結構みんな使いやすいからつって、
割と手軽にみんな使えるから使ってたりした気もするね。
Takaya Deguchi
どっちが主流になるんだみたいな時代だった気がする。
確かそのYahoo!ユーザーインターフェースライブラリにも、
それらをPrototype.jsを入れ込んだ
ハコオリオンとかそういうライブラリを提供してたような
記憶がかすかにある。
kudakurage
ちょっと僕も昔過ぎてあんま覚えてないけど、
でもそういう時だったね。
Takaya Deguchi
ですよね。懐かしいなと思って。
僕もこの頃まだ学生でガリガリやり始める前だったから
あんま馴染みはなかった。
48:00
Takaya Deguchi
めっちゃ使ってたわけじゃないんだけど、
今でも覚えてるなというようなやつですけど。
この後出てきたのがTwitter Bootstrapで、
2011年ですね、これが。
これは僕的にはすごい一番印象に残ってて、
当時大学4年生とかだった気がするけど、
僕エンジニアだったから、
これ使えばデザイン自分でもできるじゃんみたいな。
そういう感じですごい覚えてるし、
この頃マッシュアップとかいう概念あったじゃないですか。
kudakurage
今でもあると思うんですけど。
Takaya Deguchi
今でもあるけど、API組み合わせて自分でサービスみんな作るみたいな。
どこもかしこもTwitter Bootstrapが使われてるみたいな。
Twitter Bootstrapの提供してるヘッダーのコンポーネントみたいな、
帯みたいなやつとか、
すごいどこ見てもあったなみたいな気がするんだけど。
kudakurage
だから僕はあんまり通ってこなかったんだよね実は、
Twitter Bootstrapって。
逆にね。
僕デザインが、グラフィック作れるから、
逆にこれ別に自分は使わなくてもいいっていうか、
CSS自分で書いたほうが早いなとか思っちゃうっていうかさ。
逆に通ってこなかったんだよね、あんまり。
Takaya Deguchi
僕逆に当時はデザイン、どっちかっていうと円が遠かったから、
これがあれば自分で一人でできるっていう、
すごい心でよかったのを覚えてますね。
だから本当使いまくってましたね、いろんなプロジェクトで。
kudakurage
そういうライブラリー系で言ったら覚えてるのが、
ちょうどその頃って、
iPhone、スマートフォンが出始めた頃なんだよね確か。
AJAXが流行り始めて、
フラッシュがもうダメなんじゃないかって言われてるのも、
そういう理由からだよね。
iPhoneがもうフラッシュをサポートしないみたいなところから。
やっぱりJSじゃないとダメなんじゃないかみたいなところがあって。
で、スマートフォン向けの、
いい感じのUIライブラリーみたいなのを頑張って提供するっていうのを、
みんなやり始めるっていうのがあって。
で、extjsとか、
後のセンチャJSとかって言われたりするのとかっていうのを、
一時期僕すごいやってた時があった気がする。
extjs書いてこうやっていくと、
割とウェブなんだけどネイティブアプリっぽい、
インターフェースのアプリケーションが作れるみたいな。
SAPが作るみたいな、そういうやつ。
Takaya Deguchi
その辺からあれか、ウェブで何とかしたい、
モバイルアプリを作ろうみたいな話が盛り上がってきたかな。
kudakurage
一時期そういう流れあったよね。
結局すぐにネイティブアプリの方がやっぱりいいじゃんってなるんだけど。
51:03
Takaya Deguchi
何だっけ、名前も完全に。
あれ、Zaimとかがアプリ作ったみたいな。
kudakurage
何だっけ、今もあるやつですよね。
でも後々もうネイティブコードを吐くみたいになっちゃった。
Takaya Deguchi
今で言うリアクトネイティブとか、
kudakurage
Flutterとかだと思うんですけど、
Takaya Deguchi
もっとウェブっぽかった。
kudakurage
ウェブっぽかったやつあったね。思い出せないけど。
Takaya Deguchi
思い出せない。何だっけ、気持ち悪いな。
何だっけ、名前を忘れるくらいいっぱいになりましたよね、あの頃って。
kudakurage
僕センチャタッチ、
センチャタッチめっちゃちょっと触ってた時あったんだよね。
EXGS、センチャJS、センチャタッチみたいな、
どんどんモバイル向けのフレームワークになるっていう時代があったんだけど。
Takaya Deguchi
フォンギャップ、フォンギャップ、フォンギャップ。
kudakurage
フォンギャップもあったね。
フォンギャップもあったね。
フォンギャップね。
Takaya Deguchi
懐かしい。
今はパッチコルドバになったのか、名前が。
もうないのかな。後に変わったのかな、名前が。
kudakurage
でもなんかスマートフォンが出てきて、
その辺が結構ガーって動き始めたっていうところあった気がする。
Takaya Deguchi
そうですね、スマホが出てきて、
kudakurage
もちろんAJAXの流れっていうのが、
元々のベースとしてAJAXがあったっていうところも結構大きいと思うけど。
Takaya Deguchi
そうですね、
AJAXがありました。
そこからCSS3、HTML5あたりが実用化されてきました。
で、Chromeとかが出てきて、
IEが徐々に下火になり始めてきました。
IEが徐々に下火になり始めてきました。
IEが徐々に下火になり始めてきました。
まだまだ当時全盛期だけど。
kudakurage
その時代ってまだIEがあって、
スマートフォンっていう夢の世界だとそれを気にしなくていいっていう、
開発者にとって夢みたいな世界が広がってたから、
開発者にとって夢みたいな世界が広がってたから、
結構それでみんな飛びついてたところがあった気がする。
Takaya Deguchi
夢が広がってきてた時代ですよね。
kudakurage
めちゃくちゃここだったらIEのこと気にしなくていいんだみたいな感じで。
Takaya Deguchi
めちゃくちゃここだったらIEのこと気にしなくていいんだみたいな感じで。
CSS3とか使うとFlexboxとかそういうのがあるんだみたいな。
テーブルレイアウトとかもういらないんだみたいな時代ですよね。
kudakurage
楽しかったなあ、だからあの時は。
そのIEの束縛から解放された感じがして楽しかったんだよね。
Takaya Deguchi
フロントエンドがもう一番変化が激しかった時代ですよね、あの頃って。
いまはでも激しいけど、いま以上に激しかったような記憶がある。
kudakurage
記憶がある 早げしかったね
Takaya Deguchi
エイジャックス流れからのそのスマートフォンモバイル向けのやつっていうところ があったのはすごくまあフラッシュがなくなったとかねそうですよね
54:09
Takaya Deguchi
でやっぱり結構激動だった気がする js もその徐々に行こう j クエリーカーみたいなのに一本化されつつ
ありでもそこで何かもうちょっと何かこう 構造的に作ろうみたいな話で何かバックボーン js とかなかそういうのが出てきたりとか
そっちはそっちでまあリアクト以前の話ですよねなんか そうだねまあみたいなのですごい変化が激しかった2010年代前半みたいな
kudakurage
記憶 この時はだからまあまだ今でいうデザインシステムってよりはもうちょっと javascript の
Takaya Deguchi
ui コンポーネントライブラリーっていうそうですよこの頃はそうそう ui ライブラリー とか css フレームワークみたいな名前の言われるのでしたよねうん
そうだねで確か僕の記憶だとこの2011年 twitter bootstrap が出た次の年2012年ぐらいに クックパッドで池田さんが皿を作ったんじゃないかなと記憶している
ちょっとそこの順序関係であんまりまあ twitter bootstrap は完全後なんだけど どれぐらいだったかっていうのはちょっと僕もあんま覚えてなんか僕当時
インターン学生でインターンしててクックパッドででなんか twitter bootstrap 的なのを社内でも作ろうみたいな気運がを何か
kudakurage
その時に見てたような記憶がなどなかって そう
たなんか僕が入社する前からそういう動きをしているって話を聞いてるから だから僕が入社したので何年だっけ
覚えてない2013じゃないですか僕とほぼ一緒ぐらいじゃねー13だか まあ同じぐらいだった気がするね
Takaya Deguchi
2013年だ2012年ぐらいからそういう動きをしているっていう話を聞いてた気がする うんそうそうそう
kudakurage
池田さんからこの頃は池田さんが一番の当事者なんだけど
Takaya Deguchi
なんかそう考えるとクックパッドめちゃくちゃ早かったんだなぁと思うんですよね 着手こういうデザインシステムっぽいものを着手するのは
kudakurage
まあなんかいろいろ条件がねあったからねその当時 えっとクックパッドにデザイナーって言われてるような人がほぼほぼいないからほぼほぼ
なんか池田さんが一人ってわけじゃないけど少ない人数でいろんなサービスがこう ちょうどねその時期っていろんなサービスを展開していこうっていう時期だったからクックパッドが
いろんなサービス展開していくんだけど全部のデザインを全部一気に見ていくっていうのが 少人数のデザインだと見るのは大変だからなんかこうそういう
なんていうのコンポーネントライブラリー的なものを用意して使ってもらえるっていう風に した方がいいんじゃないかっていう流れが多分できたんだと思うんです
Takaya Deguchi
あとはなんか クックパッドの文化としてエンジニアが企画も含めてやるみたいなのが強いと思うし
57:02
Takaya Deguchi
今でこそそういう人が増えてるけど当時って本当にまだまだやっぱ分業がすごい強い風潮
デザイナーは逆に渡されたものを綺麗にするのが仕事みたいな時代だったと思うんですけど
っていう中でエンジニアでもデザインができるようにみたいな思想が多分あったんだろうなと思うんですよね
kudakurage
やっぱりクックパッドの会社自体もすごいエンジニアリングが強いとか エンジニアリングが中心の文化だったし
生田さん自身ももちろんもともとハテナでっていうのもあったから エンジニアリング的な部分も文脈として強いかったっていうのもあって
いろいろこんな条件が相まった上でああいうものが必然的にできてたんだろうなっていう気はするけどね
Takaya Deguchi
Twitter Bootstrapも含めてこの時代は結構エンジニアでもデザインができるみたいな
みたいな文脈が結構強かったのかな エンジニアの道具みたいな印象
シリーズフレームワークだからね 強かったなと思いますね
なんかこの頃なんかこれは僕だけかもしれないけどなんかGitHubもプライマーっていうのを出してて
確かなんかそれも結構覚えてるんだよな なんかマークダウン周りのスタイリングが充実しててそのプライマーの一部のライブラリとしてね
で当時確かになんか後々僕がまあそのマークダウンのエディターとか作ってたから あの木べらの原型みたいなやつ
確かにその辺で自分のプロダクトにも取り入れるみたいなことをしたりしてましたね
っていうのがまあ2010年代前半ぐらいの激動の時代ですね
で次に2014年にGoogleのマテリアルデザインが出るんですねここで
kudakurage
おおマテリアルデザイン
Takaya Deguchi
やっぱこれもかなりこうデザインシステムの歴史の中で影響が大きい話かなと思っていて
逆にここまでってGoogleってAppleに比べるとデザインにあんまり力を入れてなかったと思うんですよね
kudakurage
でこれを出してなんかすごい本気出してきたなみたいななんかこう感じだったのを覚えている
Takaya Deguchi
でやっぱAppleのHIGとの違いっていうのはまあだいぶシステム的っていうかなんかまあやっぱコアのコンセプトとしてこのマテリアルを組み合わせるみたいな
重ね合わせてUIを作っていくみたいなコンセプトがあって
かなりシステマチックだなというだからHIGは結構思想的なんだけどどっちかというとこのマテリアルデザインはシステム的なものだなというような印象ですよね
kudakurage
でもマテリアルデザインのそのグラフィック的なものって基本なんかもう全然変わってなくて今でも
一方でまあAppleの方はどっちかというともうちょっとなんかメタ的というか思想的な部分の文脈があるからグラフィック的には結構大きく変わってるんだよね
1:00:04
kudakurage
なんか昔はスモーキーフィリズムだったりとかするんだけどなんか途中でフラットデザインになったりとかしてみたいな
だけどマテリアルデザインって昔そのまだAppleの方がなんかこう現実に沿ったようなすごいリアル思考のやってる時からなんかこうマテリアルデザインだっつって
Takaya Deguchi
もうちょっと抽象的な方に振ってなんか作っていて なんか割と先進的だなっていう印象はあってる当時から
なんかそこもAppleとGoogleのちょっとスタンスの違いっていうか なんかAppleはAppleの考える
あのものを皆さん作れるようになりましょうみたいな感じがするというか そうだね確かにだからあんまりこう
kudakurage
スタイリングについてはそんなに言及しないというか どっちかって言うとやっぱりマテリアルデザインの方がさっきの
コンポーネントライバルツイーターブルーストラップとかそっち側に近い思想的な部分はある気がするよね
なんか一定以上のどのどんなプラットフォームでも一定以上のクオリティのなんかインターフェースを提供できるようにしようみたいな
そういう思想的な部分がある気がするなんか根底に
Takaya Deguchi
なんかどっちかって言うとAppleはそのブランドガイドラインとかにちょっと ベクトルはちょっと近いなぁみたいな印象を感じて
マテリアルデザインはよりシステム的でまぁ現代のデザインシステムっぽい感じだなぁと思う
やっぱこの頃の時代背景としてはやっぱどんどんどんどんコンテキストが複雑になってきたっていうところだと思うんですよね
なんかその 確かこの頃のレスポンシブデザインっていう考え方が広まってきたんだと
確か2014年ぐらいだった気がするんですよねなんかその スマートフォン出てきて
でもなんかその確か出てきた文脈てそのスマートフォンサイズに最適化してここで 画面を作るんじゃなくてまあ1個で1個でレスポンシブに行ったほうがまあ効率的じゃない
kudakurage
みたいな話だったような気がするんだけど まあこの頃だとねもうタブレットも出てきてるしね
本当にいろんな多分画面サイズのものが出現してるからどうすんだみたいななってた時がいっぱいブレーキポイントつくのかみたいな
Takaya Deguchi
そういう時期だった気もするからね
とはいえまだAppleってまだ画面サイズでそんな多様化してなかったと思うんですよね2014年ぐらいって
ただやっぱこの頃からAndroidの方はもう花から多様だったからだからやっぱそのデバイスサイズの多様さにいかに対応するかみたいな
意識はやっぱマテリアルデザインの方が強かったんじゃないかなっていう気がしていて
でもちろんAppleもね最近のなってはまあVision OSも含めてまあそれが当たり前になってはいるんだけど
どっちかというと先駆者はマテリアルデザインだったのかなっていう気がしますよね
であとはまあこれはまあ後年の話になるけどまあ最近だとマテリアルUとかが出てきてまあそのパーソナライズっていう
まあよりコンテキストが複雑になっていくっていう文脈が入ってくるのでまあそのカラーパレットをいかにこう堅牢に作るかみたいなのはまあやっぱ今
1:03:06
Takaya Deguchi
まあ僕も最近作っててマテリアルデザインめちゃめちゃ参考にしてるけどやっぱすごいよくできてるというか長年のこう
事件が積み重なってるなぁみたいなすごく感じるところではありますよね
まあというのでかなりこうデザインシステムの歴史に影響を与えたものとしては大きかったんじゃないかなと思いますね
これが2014年でまあこの後から徐々にやっぱフロントエンドの技術もかなりこう落ち着いてきたというかリアクトビューとかなんかそのあたりにフロントエンドの技術が徐々に修練されてきて
でまあNPMとかでパッケージを入れてそれをとかなんかまあそういう下回りも結構こなれてきてるっていうか
でまあブラウザもまあChromeがどんどんChromiumベースのものがどんどん浸透してきてまあIEがどんどん下火になってきてみたいな感じ
で徐々にそうこういうコンポーネントベースのUIっていうのが作りやすくなってきたっていうのがまあやっぱ2010年代後半にかけてあって
でこの頃からまあ徐々にこう各事業会社がデザインシステムをどんどん作って公開していくみたいな流れっていうのが出てきたのかなっていうふうに思うんですよね
まあ例えばショピファイポラリスとかアトラシアのデザインシステムとか まあとB2B系だとアントデザインとかね
なんかそういうのって 出てきてまあ特には
なんかアントデザインとかそういう1企業が公開しているデザインシステムを取り入れて管理画面作ろうとかそういうのもやっぱりリアクトみたいなのが出てきたことによってよりしやすくなった
コンポーネントで扱いやすくなったっていうのはかなりこう技術の進化とともにデザインシステムに与えた変化も大きいのかなというふうに思うんですよね
kudakurage
なんか多分それまでも 存在してたんだろうと思うけどなんかそれを社外に発表していくっていう流れができたよね
なんかその こういうふうに取り組んでるんですよっていうアピールの一環なのか
まあそういうものとしてこう社外にも別社外に発表したってね別にそんな 他の人がすごい使うかって言ったら別にそんなわけでもないんだけど
でもなんかそういうふうに出していくっていう流れがなんかここ数年とかで出てきたような気がしますね
Takaya Deguchi
そうですねそうですね だからね皿も取り組みは結構早かったけどあんまこう社内的にも公開しようみたいなのってあんまなかったと思うんですよね
モチベーション的にも だからなんかその辺の歴史を知らないと結構クーパーと後からデザインしても公開してるのかなっていうふうに見えるんだけど
まあ実は結構初期からやってたっていうような話ですよね
kudakurage
まあ多分結構ね他の会社とかも社内で作って使ってたとかっていうのはいろいろあるんだろうけどねきっとだから
Takaya Deguchi
まあでもそういうやっぱリアクトとかコンポーネントベースのライブラリが出てきたことによって公開してちゃんと他の会社でも使い物になるっていう状態を作りやすくなったというのはかなり大きいのかなっていう気はしていて
1:06:04
Takaya Deguchi
あとデザインの話だとこの辺でアトミックデザインっていうのも一時期めっちゃ流行りますよね
kudakurage
ああアトミックデザインってそんな最近でしたっけ?
Takaya Deguchi
もうあんまり覚えてないけど
18年だった気がする確か
kudakurage
そんなもんか
Takaya Deguchi
なんか当時僕結構そこを熱心だったんですよね
でやっぱ課題感としてはそういうリアクトとかがまあ結構定着してきてコンポーネントベースでUIを作るっていうのが当たり前になってきたんだけど
じゃあそのコンポーネントの流度ってどう考えたらいいんだろうみたいなのがいまいちまだ分かってなかった時代
でそこにブラッドフロストさんがアトミックデザインでハトムとかモレスキューだっけ?毎回発音ができないんだけど
とかっていう概念を持ち込んできて
結局結論としては全然決定盤にはなれなかったっていうのが結論かなと思うんだけど
でもなんとなくなんかこのコンポーネント成立道筋みたいなのができてきたっていうような流れなのかなと思うんですよね
kudakurage
アトミックデザイン
いつだったかなアトミックデザインって結構なんか僕がスケッチとか使ってる時にはもうなんかアトミックデザインとかなんかやってた気がするな
Takaya Deguchi
その文脈もありますよね
UIデザインツールが進化してきてコンポーネントで扱えるようになったっていう話
kudakurage
今まではなんかイラストレーターとかPhotoshopでやってたのがスケッチっていう新しいアプリが出てきて
これ使うとコンポーネント
確かスケッチだとコンポーネントじゃなくてなんか違う名前なんだけど
コンポーネントが作れるようになって使い回しができるようになるみたいなのがあって
それをどう組み立ててじゃあコンポーネントを作っていくのが良いのかみたいなのを考える文脈とかでも
Takaya Deguchi
なんかアトミックデザインを参考にしてた部分とかっていうのがあった気がするんだよな
あったわスケッチな確かにそうか
だからやっぱ2017年6年前後ぐらいってやっぱそういうデザインツールとしても
フロントエンドの技術としてもやっぱコンポーネントで扱うみたいなのが
ようやくできるようになってきたっていう感じですかね
kudakurage
そうだね
Takaya Deguchi
なんか2018年頃になんかアベマのアベマがちょうどリリースされて
そのアベマのチームがアトミックデザインを取り入れてUI設計してるみたいな
kudakurage
あったんですよ
あった気がする僕も読んだ
Takaya Deguchi
めちゃめちゃ読んでた記憶がある
kudakurage
めっちゃ読んだ気がする
Takaya Deguchi
そうそうなんかブラッドフロストが言ってることをちゃんと実践してやってるっていう
1:09:03
Takaya Deguchi
なんか事例として結構日本の中では新しかったからすげー読んでた覚えがある
kudakurage
読んでた気がするねなんだっけな
Takaya Deguchi
その本を書いてた後藤さんともなんか一回ラウンジとかしたもん
kudakurage
そうだ後藤さんの本だ
多分堅牢で使いやすく堅牢で使いやすいUIを効率よく設計するっていう
サブタイトルのアトミックデザインじゃなかったっけ
Takaya Deguchi
あとあれかCSS的にはなんか徐々にこうCSSっていう扱いづらいものがあって
そこからVEMとかなんかそういうクラス名の付け方でCSSを堅牢にしようみたいな話が始まり
そこからCSSモジュールとかそういうのが技術的にスコーピングをちゃんとやろうみたいな話が出てくるみたいな
そういうような流れもあったからコンポーネントが実現しやすくなったっていう話もありますね
まあっていう中2016年頃のアトミックデザインっていうのは結構なんか
それがそのまま現代に直結っていうわけにはいかなかったけど結構なんか取り組みとしては
あったなというやつですよね
で多分徐々にこれぐらいから行政機関にもデザインシステムをみたいな流れが始まっていて
UKのGovernment UKっていうデザインシステムとかが結構有名だったりとか
でおそらくそれを元ネタというか参考にしてデジタル庁も
デジタル庁のデザインシステムっていうのを取り組もうとなったんじゃないかなと
まあこれ推測ですけど
kudakurage
なんだっけなんかどっかの国がさすごいそういうのは積極的にやってるとかあったじゃないですかなんだっけ
Takaya Deguchi
あーエストニアかな
kudakurage
あーそうそうエストニアだ
エストニアとかも結構すごいやってた気がするんだよな
Takaya Deguchi
確かになんか2018年頃エストニアデザインシステムっていうのは結構行政系ではなんかよく言及されてたな
あー懐かしい
確かエストニアはどっちかというとブランディング寄りのデザインシステムみたいな感じで
なんか行政としてもちゃんとブランディングをやってデザインシステム定義して
誰しもがそれをに沿った行政のシステムを見えづらとして作れるようになるみたいな
なんかこう話が出てきたような記憶がありますね
そうなんか当時あのクックパッド2018年ぐらいに僕と倉光さんと2人で
シトラスっていうなんかエプロンがどっちかエプロンじゃない皿が実装寄りというかプロダクト寄りだったから
もうちょっとそのさっきのエストニアの事例みたいななんかそのブランド寄りのところもカバーするデザインシステムが必要なんじゃないかみたいな話の中で
シトラスってやつを作ったんですよね
社外には公開しなかったけど社内でやってて
1:12:03
Takaya Deguchi
だから結構なんかそのブランディング的な領域にもデザインシステムみたいな流れもなんかその辺りから
2018 2020年前後ぐらいから出てきたのかなっていう気がしますね今思うと
kudakurage
ブランドエストニアってエストニアが公開しているデザインシステムのなんかイントロダクションのページをちょうど見てたけど
まあすごいわかりやすい図があって一番外側にこのブランドエストニアっていう
エストニアのブランドとは何かみたいなのを多分定義したものがあって
その中にデザインシステムっていうものがあってさらにその中にデジタルデザインシステムっていう
具体的なより具体的なコンポーネントがあるみたいな話だと思うけど
っていうようなこうもやっとした抽象化された図があるんだけど
Takaya Deguchi
まあ非常によくわかりやすいなっていうふうにもうねなんかそういう構造的なものっていうか
この2018か2020年代ぐらいにデザインシステムの領域がより拡張されたというか
拡張されたというかまた元に戻ったというかなんだろうなさ
初期のあのNASAの話と
まあ要はブランディング的なそのブランドガイドラインと合流したみたいな感じなのかな
どっちかっていうと
その後僕2018年に
ああそうか2017年ぐらいの時にUKに
コクバトンUKに行ってでその時なんかエストニアに
なんでだ違うわ次の年かななんか全然覚えてないけど
なんかエストニアに行く機会があって
旅行かなんかで
でなんかその時になんかブランドエストニアみたいな
なんか政府がやってるなんか公共のなんか場所みたいなのがあって
そこなんかちょっとフラッと行ったんですけど
なんかこのブランドエストニアで定義されてるの前提として作られた看板とかリーフレットとかが
なんかいっぱい置いてあったなっていう記憶があって
なんかすごい一貫してんなみたいなすごい思った覚えがあるんですけど
そういうのをちょうど得られ始めた時期ですよね
2018年前後
まあというので
徐々に最近2020年以降になってくると
行政機関がデザインシステム出すっていうのは
そんな珍しい話ではなくなってきたかなと思うし
またなんかB2Bの領域でもいろんなデザインシステムが立ち上がるっていう話で
IBMのプレックスとか
IBMのデザインシステムの中のプレックスっていう書体とかあったりしますけど
なんかそういう独自書体を作るみたいな動きとかもね
あってそれをデザインシステムの一部として提供するみたいな流れ
1:15:00
Takaya Deguchi
独自書体を作ること自体は昔からあったと思うんですけど
それをデザインシステムの一部として公開していくみたいな話とかね
あったりそういうB2Bの世界でもデザインシステムって必要だよねみたいな話が結構
当たり前になってきたのかなっていうふうに思いますね
なんかなんとなくなんかデザインシステムっていろいろ世の中にたくさんある中で
なんかなんとなく4証言で競り切るかなと思ってて
X軸になんかプロダクトかブランドかみたいな軸があって
でY軸になんか特化何かに特化してるのか何かにより汎用的なデザインシステムなのかみたいな
こう軸があるかなとでなんかその4証言でなんとなくなんか
いろんなデザインシステム整理できるかなと思ってて
なんか初期に出てくる出てるデザインシステムってどっちかというと
まあ事業会社が出しているプロダクト特化したプロダクトよりのデザインシステムですみたいなものが
多かったと思うんですけど
そっから徐々にこうコミュニケーションとかブランディングみたいな領域もカバーするようになって
それからスマートHRのデザインシステムとか
もうプロダクト以外も含めてプロダクトブランドっていう軸の中で
かなり中間というか両方カバーするっていうデザインシステムであるし
またさっきのBtoBとかになってくると
どっちかというとプロダクト1個に特化するっていうよりは
なんかより汎用的なデザインシステムっていうなってくるケースが多いかなと思ってて
なんかまあ行政系とかもそうだけど
まあより汎用性の高いデザインシステム
どっちかというとマテリアルデザインとか
そういうのにちょっと近しいというか
みたいなものもこう登場してくるみたいな
っていうなんかこうデザインシステムの適用領域がかなり広がったなっていうのが
やっぱ2020年代以降の話なのかなっていう風に思うんですよね
っていうので
まあじゃあでまあ今ここみたいな話なんですけど
じゃあまあ逆に今後未来はどうなるのかなみたいな話
まあこれはわかんないけど
なんかこう考えるこう筋みたいな
まあ何本があるかなっていう気はしていて
なんか1個はなんかアトミックデザインを提唱していた
あのブラッドフロストが最近ブログ書いてて
グローバルデザインシステムっていう記事をなんか書いてるんですよね
でまあこれはまあ要約すると
まあみんな個別にデザインシステム作りすぎじゃないみたいな話なんですよ
でなんかグローバルなデザインシステム1個あって
なんかそれをベースにして
まあ味付けを変えてここに作っていくっていうやり方ができたらいいよねみたいな
なんかまあすごい飛躍するとそういう感じ
kudakurage
まあマテリアルデザインとかそれに近いよね
割とあの結構その細かいディテールは結構カスタマイズできたりするじゃないですか
マテリアルデザインも
だから割と思想的にはすごく近い
まあプラットフォーム寄りの話だよね多分きっとこれって
1:18:02
Takaya Deguchi
そうですね
なのでそこからGoogleというプラットフォーム自治を抜いたものっていうのが
この人が言うにはグローバルデザインシステムとしてあるといいんじゃないみたいな話をしていて
でそれを支える技術としては
まあ最近ヘッドレスUIっていう
まあこれもなんかフロントエンドの変遷と
フロントエンド系のライブラリのUIライブラリの変遷としては
まあツイッターブーストラップとかCSSフレームワークが出てきて
でそこからなんかチャクラUIとか
なんかそういうリアクトとCSSのスタイリングがどっぷり
一緒になったようななんかライブラリが流行り始めて
でそこからなんかそうすると
スタイリングと構造骨格がベタでベタつきにくっついちゃってるから
ちょっとなんかやりづらいよねみたいな話が出てきて
それを分離した骨格だけを分離したヘッドレスUIっていうのが出てきて
だからまあ骨格だけはいろんなUIの骨格だけは提供して
そこに対して個々のプロダクトで側を当てましょうっていうような
発想のものがヘッドレスUIっていうやつなんですよね
で最近まあそういうまあそれが徐々に徐々に終了になってきていて
リアクトアリアとかハークUIとかそういうものがあるんですけど
だからまあそういうものを使ったら
まあそのマテリアルデザインからグーグルミア抜いた
グローバルデザインシステムっていうのが作れるんじゃないみたいなのを
このブラッドフロストさんが今ブログに書いてたりしてましたね
でも結局それって誰がメンテナンスするのっていうような話になってくるので
まあこの人が言うにはW3Cがそれを提供するのがいいんじゃないか
っていう風に言ってるんですけどね
まあっていう試行実験みたいなものが出てきていて
まあただまあ実際確かに
まあ実際僕も今デザインシステム作る仕事してるけど
全部を個別でオーダーメディで作るって必要は全然ないよな
っていうのはすごく思うところではあって
まあマテリアルデザインっていう結構共通の知見として参照できる
すごい優秀なものがあったりとかして
作り方っていうのもかなり体系立てられてきた感もあるなと思ってて
デザイントークンっていう考え方とか
それをプリミティブトークンとセマンティックトークンに分けますみたいな話とか
っていう知見がない時代は個別全然違うものって見えてたものも
裏側にはこれ共通してるんじゃないみたいなのが見えてきたっていうのが
ここ最近なのかなっていう話は感じるので
こういうような話が出てくるのは自然だなとすごい思いますね
そうだね
kudakurage
なんか実際多分先行するのはこういう
どっちかっていうとエンジニアリングというかプログラミング的なところの文脈っていうのが
絶対先行すると思うんだけど
多分一方でデザインツール的な文脈もやっぱり今は結構無視できない感じがあって
1:21:00
kudakurage
それを今頑張って先導してるのがフィグマなんだけど
多分フィグマがもしかしたら全然別のツールが出てくるって可能性もあるけど
フィグマがどういうふうに対応していくかによって
僕らがそれをじゃあどういうふうに仕事が変わっていくのかって結構大きく変わっていくっていう時代でもあるよね今は
Takaya Deguchi
そうですね
だからスケッチがコンポーネントベースでUIデザインするのを当たり前にしたように
フィグマがまた時代を変えていくっていうような感じなんでしょうね
そうだね
話してて思ったけどやっぱりこの辺はデザインツールとフロントエンドの技術と
あとはデバイスを取り巻くコンテキストの進化みたいなところっていうのが
お互いに依存してんだなみたいなのを思いますね
kudakurage
そうだね
でもなんか偶然じゃないのかな別に
偶然とリアクト的なものが生まれてきてる中でスケッチも生まれたっていうわけでもないんだろうな
きっとなんか影響し合ってじゃあインターフェースもこういうふうに作ったほうがいいよねみたいな
考えたスケッチとかそういうツールが生まれてきてるんだろうねやっぱりきっと
Takaya Deguchi
そうですね
kudakurage
多分なんか色々影響し合ってるんだろうねやっぱりそこは
Takaya Deguchi
そうですね
まあだから当然デザインツールに求められる進化っていうのはどうしてもなんかごてごての進化だと思うから
進化が早いのはやっぱりエンジニアリング良機な気がするから
それに負けずにフィグマに向きたいっていうような感じですね
kudakurage
フレーマーとかはねめちゃくちゃ先進的な時もあったもんね
Takaya Deguchi
そうねかなり攻めすぎた時代
kudakurage
あれはもうだってエンジニアリング側の方からデザインツールを作ってやろうみたいな流れだったじゃんどっちかっていうと
だからすごい先進的だったよね
Takaya Deguchi
攻めすぎてオーバーナーしちゃったみたいな感じですけどね
いやあれは面白かった
面白かったよね
そうねそのフレーマーとかが出てきた時代
Airbnbとかも結構先導してて
いろいろ先進的取り組みをしてたなっていう
なんか上々して結構大人しくなっちゃったけど
kudakurage
Airbnbも結構初期にデザインシステムとか公開したところなんだよね会社として
Takaya Deguchi
デザインチームとかがすごい
kudakurage
ブランド変えてみたいな
Takaya Deguchi
あとなんかデザイン言語みたいなのを定めましたみたいなブログもよく書いてたりとか
と思えばなんかスケッチ手でうにょうにょって書いてあるフレームを写真撮ってコードに起こしますみたいな
今にはLLMみたいなことをしてて
kudakurage
すごいことやってたよねなんかあの頃のAirbnbのチーム
Takaya Deguchi
いやだいぶそうあの頃のAirbnbかっこよかったですね
kudakurage
かっこよかったよね
今でもあのなんていうのなんだっけ思わせすぎちゃった
1:24:02
kudakurage
あのアニメーションツールとかもあるしね
Takaya Deguchi
使われてる
そこから生まれたのがロッティね
kudakurage
ロッティ系のサービスというかフレームワークみたいなの作ったから
Takaya Deguchi
確かにあの攻めた中から生まれてきて今でも定着してるのがロッティっていう面白いですね
kudakurage
結構あの頃はやっぱり早かったんだよね
デザインシステム公開したのは確かAirbnbとか
あとドロップボックスとかかな結構早かったのは
なんかどっちもなんか今そんなこうおとなしくなっちゃった感じがするけど
Takaya Deguchi
今思い出したけどAirbnb
僕当時めっちゃその辺なんかストーキング
ネットストーキングしてたからあれなんです
あの覚えてるんだけど
なんかデザインシステムの今でいうフィグマのバリアブルズみたいなやつを
使うためのツールみたいのを
なんかあるスタートアップが作ってて
それを買収して人材獲得目的で買収して
社内でもそういうフィグマのバリアブルズ的なツールをなんか作ってたんですよね
Airbnbって
kudakurage
それをなんか
Takaya Deguchi
GitHubでソースコードだけ出してて公開してて
でなんかそれビルドしたら勝手に誰でも使えるよみたいなやつで
なんかビルドして使ってみたことあるんだけど
なんかかなりフィグマのバリアブルズにちょっと近かった
kudakurage
頑張ってやってるやつがあった気がするな
Takaya Deguchi
バリアブルズ
そうかなりいろいろ頑張ってやってたなっていうのを覚えてる
まあなんかその人後々上場した後に辞めて
どっちかというとWeb3の人になってたりとかしてたんですけど
まあっていうね
何の話だっけ
ああそうそうそう
まあなんかAirbnb結構先進的な話してたし
ああそうだグローバルデザインシステムね
ブラッドフロストの
まあとか
まあだからなんか徐々になんかこう別に作ること自体は当たり前っていうか
別にそんな珍しいことではなくなってきているデザインシステム自体が
だから
まああの前も話したけど
フィグマのカンファレンススキーマとかフレームワークって
この間でやったカンファレンスでもそうだけど
徐々に運用をいかにするかみたいな話に
まあテク系の企業海外のテク系の企業集中結構多くて
でまあなんかやっぱそれも
まあ改めてデザインシステム作る仕事をしてると当たり前だなという風に思ってて
結局システムって組織の構造を表すから
だからなんかこうシステムを作るってことはやっぱり組織をどう作るかみたいな
話と表裏一体だからこそ運用の話が出てくるんだなっていう
で最近なんかそういう流れの中で一個面白いなと思ったのが
この間のフレームワークのイベントにフリーが登壇してたんですよね
1:27:00
Takaya Deguchi
フリーのデザイナーの方が登壇していて
でそこで発表してた内容がやっぱそうなるよなと思ったんですけど
なんかこうこれまでのデザインシステムって結構
アトミックデザインでいうアトムみたいな抽象度の高いパーツを提供して
でそれを組み合わせて皆さん画面を作ってくださいねっていうような思想だったんですけど
やっぱそれだとなかなか運用を考えていくと難しいところが出てくると
例えばやっぱそのボタン部品の使い方ってその使い方がやっぱそれぞれ違ってくるから
本当の意味で一貫性を担保するのがなかなか難しくなってくるとか
あとはなんかこう部品個々にアップデートが走ってくるので
ある部品はあるプロダクトのある部品は古いものが使われてるけど
あるプロダクトのある部品は最新のものが使われていて
デザインシステムって一貫性を担保するものなんだけどやっぱ一貫性が担保できなくなってくるみたいな
なんかそういう話ってやっぱ運用を考えるとやっぱリアリにある話だし
なんかCookpadでもなんかデザイン
あの皿の中の使われてるパーツを
デザイナーが個々のプロダクトでアップデートして回るみたいなことをやってたような気がして
だからなんかそこに対してフリーの人が発表してたのは
これからはアトムティールードの提供じゃなくて
それを組み合わせたそのモレスキューだっけ
パターンを提供するっていう話
kudakurage
なんか資料だとオーガニズムとかテンプレートって言ってますね
Takaya Deguchi
あそうそうオーガニズムの例か
kudakurage
より組み合わせてるやつですね
Takaya Deguchi
そうそうそうそう
だから特にやっぱfreeみたいなB2Bの領域だと
そのパターン化が比較的しやすいっていうか
パターン化イコール業務フローみたいな話になってくるから
あのあれですよね
本山さんが前話してたプロセスビジョナリーみたいな話
で業務フローをいかに分析して
それをデザインに落としていくかみたいな話になってくるから
適切に業務フローが分析できていれば
そこでこのフローとこのフローは近しいよねみたいなところが見出すことができて
そこでパターンっていうのが使えるんじゃないかっていう話
UIのアトムレベルに分解しなくてもいいんじゃないかっていうような
だからそれによってデザイナー
パーツの組み合わせをデザイナー任せにすることが少なくなるので
一貫性をより担保できるんじゃないかっていうような話なんですけどね
ざっくり言うと
っていうのがこれはなんか一個あるなと思って
確かにアトムを組み合わせて画面を作るっていうのは結構
年度が求められるというか
kudakurage
そうね
Takaya Deguchi
ひょっとしたらなんかこう
モビンとかデザイナーが見るギャラリーサイトみたいなのあるじゃないですか
そのフィードUIだったらこういうやつとか
パターン集みたいなのがあると思う
1:30:00
Takaya Deguchi
ギャラリーサイトみたいなのがあると思うんですけど
なんかそういうようなイメージで
フィードUIを作るんだったらここのパターンからまずコピペするみたいな
パターン
アトムから入るっていうよりはパターンから入るみたいな
作りのデザインシステムっていうのはもしかしたら今後増えるのかなみたいな
kudakurage
そうですね
でも多分パターン作る
用意していくのって結構多分
いろいろ頑張って作って用意しなきゃいけなくなるから
それなりにパワーリソースがあるところじゃないと難しそうですね
とかもしくはその
わかんないけどそのB2Bみたいなある程度利用制限される
利用されるところが限られているところだったら
そんなにいっぱいパターン作らなくてもいいかもしれないとか
Takaya Deguchi
そういうところはあるかもしれないね
だからB2B利用制限とかそういうところだと
テンプレートレベルのものを提供しますみたいなのが今後増えるかもなと
kudakurage
そうだね
だからアトムとかその辺を使ってデザインする人っていうのは
本当に一部の人に限られるってことだよねきっとだから
後々パターン化することを前提に作るとかっていう
思考になるのかもしれないよなんか作る人は
Takaya Deguchi
で実際なんか前
本山さんとか池田さんとも話したけど
なんかそのデザインするときにゼロから作り始めるって
あんまないと思うんですよねその事業会社の中で
その新規事業とかじゃない限り
基本なんか既存のなんかページをベースにして
UIを考え始めるみたいなことが多いと思うから
まあそういうワークフローとしてもなんか理にかなって
その方が理にかなってるなっていう気がしていて
kudakurage
そうだね
Takaya Deguchi
でこの話はデザインの文脈の話なんだけど
それをちょっとエンジニアリングに置き換えると
フロントエンドの中でも同じような流れが起きていて
それが何だかちょっと話してるけど
ShadCNっていうデザイン
これは何て言ったらいいんだろう
フロントエンドのUIライブラリみたいなものなんですよ
でこれはさっきの
またこれもゆり戻しみたいな話で
ヘッドレスなUIライブラリっていうのが出てきました
ただ多くのフロントエンドのエンジニアにとっては
ヘッドレスなUIを使って
に対してCSS側を当てて
UIを作るっていうのは結構めんどくさいっていう話の中で
だからいい感じの薄いスタイルが当たっている
プレーンなスタイルが当たっているUIライブラリが
やっぱり欲しいみたいな流れなんですよ
そこの中で出てきたのがShadCNっていうやつで
これ結構出てきたんですよって言っても
まだ今年とか去年末ぐらい
ここ1年ぐらいの話なんですけど
結構心をつかんだのか人気になってきているんですよね
1:33:02
kudakurage
でもさっきのグローバルデザインシステムとかの話に
ちょっと近いよねある意味
Takaya Deguchi
近いと思う
だからそのままでも使い始められる
だけどテーミングしようと思えばテーミングできるみたいな
そういうようなやつ
これも受けているのって
UIのパターン集みたいなのがこのShadCNの中でも提供されていて
要はAtomoよりももうちょっと
具体度が高いパターン集が提供されていて
コピーするだけでUIが作れるっていう
僕的には現代のTwitterブートストラップだなっていう風に思ってるんだけど
だからより速攻性とか
イージーな感じが求められているというか
それを現代の技術を使って
作っているっていうことだと思うんですけどね
この辺がTailwindとか最近の人気のCSSのライブラリとの相性も相まって
最近ここを
kudakurage
確かにTailwindとの相性はいいのかもしれないな
Takaya Deguchi
そうなんですよ
薄いデザインシステムというか
だからさっき言ったB2Bとか行政とか
結構大規模なものだとさっきのフリーの話みたいな
テンプレートベースのデザインシステムみたいなのが
主流になってくるかもしれないし逆に
スタートアップとかよりライトなものを求められる環境では
こういうShadCNとか使って
できあいのものをベースにしてデザインシステムを立ち上げるっていう
大ダメージで作らないっていうところの
作りが主流になってきそうだなという感じですね
さらにそこを推し進めるとしたらっていうところで何度か話しているのが
生成AIを絡んできたV0
バーセルがやっているV0というサービス
生成AIベースのやつで
これはShadCNとかを使った
UIを剥くっていうやつ
生成するっていうやつなんですけどね
kudakurage
前もちょっと話していたけど
この生成AIでデザインよっていうところをちょっと飛び越えて
生成AIでデザインシステムをっていうところに
だいぶ届いてきそうな気がしてきましたよね
感覚的に
Takaya Deguchi
これもやっぱり人が求めているのはアトムじゃなくて
パターンであるみたいなところなのかなと思っていて
パターンをフリーの場合は業務を分析して
自社の製品だから頑張ってパターンを作りますって話だけど
もうちょい汎用的で01の領域で使えるものとしたら
kudakurage
生成AIでいいじゃないかっていう話だと思うんですけどね
よく考えると生成AIでデザインを作るよりも
デザインシステムパターン化されたものを作る方が
圧倒的に得意なんじゃないかっていうのはその通りな気がするっていうかね
Takaya Deguchi
そうなんですよね だからデザインシステムの歴史を振り返ると
1:36:00
Takaya Deguchi
現状としてはやっぱりパターンであるっていう話で
じゃあそのパターンを最も扱うのは得意なのは何かって言ったら
kudakurage
LLMなんだなっていう そうそうそう
だからそれは相性いいだろうなっていう気がするよね
Takaya Deguchi
そりゃそうだなと思いましたね
kudakurage
だからそういう流れは多分ここ1,2年というか
今年ぐらいには起こりそうな気がするね やっぱり
Takaya Deguchi
そうなんですよ デザインシステム作ってるとき
結局考えてることってこのパターンは汎用性があるかとか
このパターンはどれぐらい登場するものなのかとか
命名規則は何なのかとか そういうことばっかなんですよ
kudakurage
ルールを設計とかをしてるような感じだよね 本当に
Takaya Deguchi
本当機械が得意な分野だよなと思うんですよね やってて
まあそうだね だからやっぱ
人間はより抽象度の高いブランディングみたいな話
CI, VIみたいなところの設計とかをして
でそれを生成家に加わせて
VIをベースにしたV0、バーセルのV0みたいな
生成AIのUIパターン作成ツールみたいなのが
パターンを作り
それをどう運用するか組織をどうするかみたいな
そういうような役割分担に
ここ1年ぐらいになってくるんじゃないかなっていう風に
思っているんですけどね
っていうのがなんか
直近2,3年の未来が見えそうな未来かなと思っている
感じですね
っていう話で
オチはそんなないんですけどやっぱ歴史を振り返るとやっぱ
パターンをいかに扱うかっていうところは
最初の1970年代のパターンアランゲージのところから
なんかあんま変わってないんだねやっぱりっていうのは
歴史を振り返ると思うところで
kudakurage
工学っぽいよね
再現性を求めていくみたいな感じがあるから
Takaya Deguchi
そうですね
自分的には割と得意という
得意分野というか
やってきたことが活かされる余地が大きいので
だからやる機会が多いんですけどね
でもやっぱり
突き詰めてやっぱり組織の話になってくるんだなっていうのは
ほんとここ数日思ってて
組織運営どうするかみたいな
kudakurage
結局システムというか設計を作ってもそれが
使われたり運用されなかったら何の意味もないからね
そうなんですよ
スマートHRが書いてた本っていうのはすごい良いなって思うよね
ちゃんと使われるものを作って
積み重ねていきましょうっていう話だからさ
なんかあんまりこうね
ドンって大きいフレームから考えなくても
良いんじゃないのかなっていうのに行き着くのは
Takaya Deguchi
そういう理由なんじゃないかなって思うよね
そうですね
1:39:02
Takaya Deguchi
確かにやっぱスマートHRの本はすごい良い本ですね
そう思うとか
kudakurage
っていう昔話でしたね
Takaya Deguchi
昔話でした
kudakurage
なんか久しぶりに
extjsの話とかで盛り上がってちょっと僕は面白かったな
Takaya Deguchi
本ギャップ
本ギャップ
kudakurage
いやでもあの頃ほんと
夢みたいな世界だったんだよなスマートフォンの
Takaya Deguchi
ブラウザーの世界って
kudakurage
もう一個懐かしいワード思い出したタイタニウム
タイタニウムあったね
タイタニウムの方が僕結構馴染み深いわどっちかっていうか
本ギャップよりも
Takaya Deguchi
タイタニウムの方がちょっと触ってた気がするな
なんかその二大巨頭でしたねそういえば
kudakurage
どっちが本命なのかみたいな
Takaya Deguchi
タイタニウムで作ってる人とか結構いたもんねアプリとか
あったんじゃなかったかな確かタイタニウムだったか
kudakurage
本ギャップだったか
いやでもなんかそれもちょっと僕はまた昔話になって
あれだけど
そういう流れができたのもある意味
ジョブスが決断したかわかんないけど
ジョブスがこんなのネイティブアプリみんな作らんやろ
つって一回webアプリの方に振ろうとした結果
ブラウザーが強化されてそういう流れができたのかなっていう気もしてるっていうね
結局みんなネイティブアプリの方が体験もいいし
そっちに流れていくことになっちゃったんだけど
だから全部廃れていくことになるんだけど
でもそのおかげでなんかブラウザーが結構ガーって進化していったっていう流れももしかしたらあるのかなっていう気はするっていうね
Takaya Deguchi
そうですねでもそれはありそう
ジョブスがフラッシュを殺さなかったら
kudakurage
そうそうそうそう
どうなってたかまた違う世界線が生まれてた可能性あるよね
フラッシュが生き残っている世界線で
Takaya Deguchi
それこそフラッシュ時代の終盤の方って
フレックスとかそういうのがあって
フラッシュの技術でデスクトップのアプリケーションも作りましょうみたいな話がありましたよね
kudakurage
だからそっちが生き残っている世界線あったよね
もしかしたらジョブスが殺さなかった
Takaya Deguchi
アドビが覇権を握ってる可能性はありましたよね
kudakurage
あったあった
未だにだからフラッシュ作ってアプリとか作ってる可能性があったよ世界線としては
Takaya Deguchi
確かにねみんなブラウザーIEを使っててその上でフラッシュが動いててみたいななんか世界線はあったかもね
kudakurage
なんかアドビ本とか出てる可能性あったよね
Takaya Deguchi
そうしたらフィグマも出てこなかったかもしれないね
わかんないなちょっと
当然そうするとブラウザでデザインするなんてあんま遊びなかったかもしれないし
いやーそうか
やっぱアップルの存在はデカいんだな
1:42:00
kudakurage
iPhoneの影響はかなりデカかったんじゃないかなやっぱり
モバイル端末ウェブ環境含め
Takaya Deguchi
そうですよ
いろんなところに影響を与えてる気がするね
kudakurage
いやなんかこういう昔話はずっとできちゃうな
Takaya Deguchi
そうっすね
kudakurage
こういう昔話はみんな聞きたいのかな聞きたいのかどうかわかんないけど
Takaya Deguchi
いやこのポッドキャスト聞いてる人はだいたい同じ年代じゃないですか
kudakurage
聞いてる年代をなんか統計的に見てるとだいたい同じ年代の人だから
なんか多分通ってきてる道なんだろうとは思うけどね
Takaya Deguchi
まあどれぐらいエンジニアの人が聞いてるのかっていうのはわかんないけど
でもなんかやっぱあの時代はデザインとエンジニアリングが
交互に影響を与え続けていたっていう感じなのかなと思いましたね
kudakurage
それは確実にデザインシステムの歴史としてそういうのはあるよねやっぱり
Takaya Deguchi
まあ中間点ですからねちょうど波打ち際というか
kudakurage
そういう意味では結構面白い分野ではあるので
じゃあちょっとそろそろ終わります
Takaya Deguchi
お返し話でした
kudakurage
リサイズヘムのご質問やご感想リクエストなどは
Xにポストしていただくか書ノートにあるお便りのリンクから送っていただければ
配信内で取り上げたりしますのでどうしどうしいただければと思います
リサイズヘムは毎週金曜日に配信しています
Spotify、Apple Podcast、YouTubeなどで配信していますので
よかったらチェックしてみてください
ということで今回はここまでまた次回お会いしましょう
Takaya Deguchi
さようなら
01:43:53

コメント

スクロール