00:18

こんにちは、Deguchiです。

こんにちは、Motoyamaです。
resizefmは、MotoyamaとDeguchiが最近気になっているサービスやデザイントピックスを取り上げてのんびり話すポッドキャストです。
よろしくお願いします。
お願いします。

一番好きな映画って何ですか?
いきなり難しいこと聞きますね。
難しいですか?
あんまないんだよな。そんな…難しい。
パッと出てこないです。

パッと出てこない。
まあ、これは別に何を答えてもらっても僕は構わないんですけど、なんかこれね、この前ちょっといろいろと友達と、まあそういういろいろ会話している中で、
まあ一番好きな映画は何?っていうような話をちょっとしてたんですけど、なんかその時に、まあ、
僕もね、一番好きな映画って難しいね、みたいな。僕も似たような反応をしてた。
して、なんかいろいろこう考えてたんですけど、あれかなこれかなみたいな。
でもなんか、その時に僕のその質問をしてきた友達も、まあその質問をしてきた友達も、また別の人にこうそういう風な話を、まあちょっとした話として、

まあ振られてたわけですよね。その一番好きな映画何?みたいな。
で、その時に、私はなんかその時、まあいろいろこれかなあれかなっていっぱい答えちゃったんだけど、みたいな話をしてて、

僕正解はそっちだったなっていうのを気づいたんですよね。

どういうこと?

要は一番好きな映画なんて正直どうでもいいわけですよ。なんか何であってもいいわけですよね。
だから、その一番好きな映画何?って聞かれた時に、僕はなんかその時とかだったらとか、まあ多分いつもだったら、
えーわかんないなーとか言って、10分ぐらい考えた末に、なんかすごい、すごいこう重箱の隅をつついたような映画を出してくるんじゃないかなって思っちゃったんだよね。
その自分だったら。
はいはいはい。
でもそんなのどうでもよくて、その正直何を出すかなんて。

はいはいはい。まあ会話のネタとしてね。

もうそうそうそう、会話のネタみたいなもんだんだから、そんなことじゃなくて、これ、これかな?これかな?みたいなのをどんどん出していったほうが多分良かったんだなっていうのに気づいて。
だから、だからそれをそういうふうにやった友達は、あ、それ、その答え方が正解だったねって話になったっていう話なんだけど。

なるほど。いや確かに僕もあんま好きじゃないんですよ。その好きな本何?とか好きな音楽何?とかいきなり聞かれる。
03:01

はいはいはい。
なんか、なんかその空気読むのを求められてる感じがしてすごい、なんか試されてる感じがしてすごい嫌なんです。

あー。

なんか関係性がある中でだったら別にいいんだけど。
はいはいはい。
なんかこう、なんかあるじゃないですか。飲み会のなんか話のネタとしてこう振られるみたいな。

うーん。

うーん。

まあでもなんかそれでさ、人間性が決められちゃうことなんてないじゃないですか、大体。大体のことだ。そんなさ、好きな映画とか好きなこと。
でもそうやって聞かれると。
答えただけでさ、こいつは嫌いだなみたいになることってあんまないと思うんだよね。

ないんだけど、なんか真面目に考えちゃって、なんか試されてる、センスを試されてる感じがしてなんか嫌なんです。
まあまあまあ。だから僕もそういうふうに考えがちなんだけど、なんかそういうことじゃないから、別になんでもいいから答えたほうがよかったんだなっていうことにようやくこの年齢になって気づけたっていう。
まあそのコミュニケーションが得意な人はみんな普通にそうやるんでしょうね。
そうそうそうそう。
なんか変にいろいろ考えすぎちゃうから。

そうそうそう。だからさ、あーなんかショーシャンクの空にとかかなーとかさ、なんか、いやでもショーシャンクの空にはちょっとなんかドチョッキューすぎるかなーとかなんか、もうちょっとなんか古くて渋いやつ答えた方がいいのかなーとかさ、なんかいろいろこう考えてさ。
いやーなんか。
一個になんとか絞ろうとしちゃうんだけどさ、別にそんなのどうでもよかったっていうね。

なんか、やっぱ苦手だなーそういう質問。なんか、こう関係性がない飲み会だとすると、こうラベルがついてるじゃないですか。自分にこうなんか、デザイナーをやっているとかエンジニアやっているとか、なんかこうデザイン会社にいるとか。
なんかそのラベルとその答えた質問から、あー、やっぱそうなんだ、みたいな反応とか。え、意外に?みたいな、なんかその反応が、なんか嫌。

いや、だからでもなんか、そこでラベリングされないように、あれとこれとこれとって、なんか一個に絞らずに言っちゃった方が、むしろなんかこうね、いいんじゃないかっていうかさ、その、例えば自分が言ったこれが一番好きだっていうような映画がさ、相手に刺さらない可能性なんていっぱいあるわけじゃないですか、絶対に。
え、何その映画知らない、みたいな。でもそれよりも多分もう数出して、なんか話した方が多分いいっていうことも含めて、あー、こういうのはなんか別に、なんか本当に一番好きなやつを一個に絞り出して出すものじゃないんだなっていうのをようやく気づいたっていう。

まあね、まあ別にお前の一番なんて知らねえよってことでしょ。

まあ知らねえとは言わないけどね、まあ別にそれを知ったところで、なんか、なんかすごい大きく変わるわけでもないからね。
うーん。
なんかね。

分かってくるか、分かってくるか答えづらいですね。

そういうのがなんかね、ようやくこの年齢になって分かったね。

大人になりましたね。
06:00

大人になったなって思ったね、本当。あ、そういうことかって思ったもん。

大人になりましたね。

うーん、なんかようやく他の人と話せる気がしてきた、ちゃんと。

でもなんかその一番、それだったらなんか一番好きなっていうよりは、最近見た映画何とか、最近見た中で良かった何の方が答えやすいの?

まあまあまあ、質問としては答えやすいけどね、そういうのが。

質問としても。

まあでもね、何でもいいわけだよね。
まあだから一番って言わなきゃいいのかもしれないけどね、好きな映画何とか。

そうそうそうそう。

それだったらね、もうちょっと優しいからね。

うーん、まあそもそも映画そんな見てないからなっていうのもあるしね、なんかこう一番を決めるほどなっていう。

映画あんま見てこなかったですか?なんかこれまでの人生って言ったらあれだけど。

まあでも多分、全く見てないわけじゃないけど、その特筆してこう何か言うほど見てないみたいな感じ?

なんか映画にはまる時期とかなかったですか?

うーん、どうかな。映画にはまるか。

まあでも今だと、ネットフリックスとかアマゾンプライムとかあるから、もうなんかいっぱい見れるって感じだけど。
なんか僕は結構。

うん、あんまないかもね。

大学生とか、まあ大学卒業して社会人成り立てぐらいの時とかは、結構休日映画見るのハマってたんだよ。
映画見るって言っても映画館に行くわけじゃなくて、あの蔦屋で、なんかこれこれこれみたいなのをどんどん借りて、それを見るっていうのにめちゃくちゃハマってた時あって。
なんか昔のさ、そのアカデミー賞のやつとかあるじゃないですか、まあいっぱいそういう。
はいはいはい。
まあショーシャンクのソラニーとかも含めて。
それをこういっぱいバババって借りてきて、こう、あとたこ焼き買ってきて、たこ焼きと食べてビール飲みながら、その映画を見るっていうのが最高の僕の休日の過ごし方だったんだけど、その頃。

あんまないね。

すごい、その頃だからすごい見てた気がする。

うーん、それはじゃあ答えられるじゃないですか。

いやまあだから、だからそっからさ、一番って聞かれるとやっぱりなんか、うーんってなってたんだけど。

うーん。

ね、まあまあまあ、なんかその辺はでも、結構僕は見てた気がするんだよね。
なんか一時期、まあ今はそんなね、あれかもしれないけど。

話題になってんのを見るぐらいな話で、なんかそんな別に映画好きじゃないってことなのかな。

耳は言ってるが、ドラマ見てるのとあんま変わんないっていうか。
ああ、まあ、なんかでもドラマより僕はやっぱり映画の方が見てる気がするな、だから。
ドラマはやっぱ長い、長いじゃんなんかドラマって。
映画って長くても2時間ぐらいで終わるからさ。

いや、僕逆なんですよ。なんか映画って1本が長いじゃないですか。
09:04

ドラマって1話が短いじゃないですか。
まあ1本が長いね。
だから。

まあまあ4、50分みたいなね。

そう、なんか、なんていうか、拘束時間が長いんだって感じちゃうっていうか。
その、ドラマだと途中でやめられたりとかするから。
別に映画も途中で見るのやめればいいんだけど。

なんかでも、やっぱドラマはさ、なんか海外ドラマとかさ、やっぱたまに流行るじゃん、なんかそういうさ、24とか。
24とかもう地獄かって思ったもんね、僕なんか。
24本見なきゃいけないわけでしょ、だって、その24って。
地獄じゃねえかと思ったもんね。

あれは作業用BGMみたいなもんじゃないですか。

しかもさ、なんかそれがさ、今はシーズン5までありますとかさ、なんかそういうわけでさ。

え、なんで24本立て続けに5日間見なきゃいけないのかやって思ってさ、なんか辛いなみたいな。
もう24は別に見てなかったけど、でもなんか深夜によく流れてたじゃないですか。

ああ、流れてたね。

それでなんかよく見てましたね。見てたっていうか流れてた。

ああ、そういうのあるね。
なんか僕も積極的に見てなかったんだけど、昔そのバイト、伊東予華堂でバイトしてて、だいたい帰ってくると深夜。
まあ12時ぐらいになるわけだよね、深夜。

で、なんかその時間帯になんかね、韓国ドラマのチャングムの誓いって知ってる?
知ってる?

チャングムの誓いっていうなんか韓国ドラマがあって、それを僕は見る気なかったんだけど、

母親が見てたんだよね、なんかよくすごい。

で、その母親が見てるので、僕もなんかちょうど帰ってきて、ご飯作ってくれるやつを食べてて、
で、母親が見てるからなんとなく見てたら、すごいなんかハマり始めちゃって、帰ってきてご飯食べながらそれを見るっていうのに。
もうなんかそのうち僕がこうチャンネルを優先して、もうそろそろチャングムの誓いの時間だよみたいな感じで、
チャンネル変えて見るみたいなことになってて、なんか一時期すごいハマってた時あったけど、そういう。

分かる。
なんか高校の時とか、なんかちょっと部活とかバイトとかやって、ちょっと家遅く帰ってきて、
ちょっと遅く夜ご飯食べてる時に流れてる深夜海外ドラマをそうやって見るみたいなのあった気がする。

水曜堂でしょうもそうだったもんね、なんか大体その時間にあの深夜の再放送のやつがやってて。
もうよく見てた。

信長とかね。

あ、そう、信長とかね。

愛知県ローカルだけど。

ワッキーがその頃まだシリリトリやってた頃だよ、僕が見てたの。

そうそうそうそう。

その時間帯はなんか見てたな、よく。
その時間帯にドラマやってたら、僕も見てたね、なんか自然と。

あの時間帯の海外ドラマよく見てたな。
12:03

確かによく見てた気がするわ。

謎のプロレス番組とかね。

謎のプロレス番組?

K-1かな、K-1の番組かな、なんか愛知県の。

でもなんか、今どうなのか知らないけどでも格闘系の、格闘技系のそういうプロレスとかK-1とかの番組結構深夜にやってて。

よくやってましたよね。
確かにやってたね。

でもなんかそれで言うと深夜にさ、たまにはそんなに深夜なんかやってるってことなかったんだけど、
課題をやんなきゃいけないとか、宿題やんなきゃいけないみたいなので、すごい深夜までうだうだやってることがあって。
で、まあさ、なんか適当にテレビつけながら、別に見るわけでもないんだけどテレビつけながらこうやってると、
なんか深夜に始まる昔の、それこそすごいアカデミー賞取ったみたいな映画とかが、
たまにこうパンって流れることがあって。
あれ結構僕ね、いいなって思うんだよ。

自分の期待値がめちゃくちゃ低い状態で、なんかやってるなぐらいのところから始まって、だんだん身に入っていっちゃうみたいな。

だからあの映画はね、結構それ見て、あ、この映画めっちゃいい映画だなっていうふうに知ったの結構多かったんだよね、なんか。
深夜に不意に見る、なんかこういい映画。

たしかにな。なんかそういう不意に見るっていう方が多かったのかもしれないな。

でも映画ってさ、最近やっぱりなんかもう、なんていうの、バンセンっていうのがあるじゃん。

なんかそのPRっていうか、バンセンみたいな。

そのあれがさ、煽りがすごくてさ、バンセンが一番面白いみたいな映画とかたまにあってさ。

もうバンセン以上のものが出てこないみたいなやつあるから。
バンセンもちゃんと見るんですね。

いや僕、だから基本見ないようにしてるんですよ、もう何でもほぼほぼ。
そうですよね。
やっぱハードル上がっちゃうからその。

あとなんかその、映画館行く前にやるバンセンも大体なんか15分ぐらいあるじゃないですか。
だからもうそこから逆算しても15分後に映画館入るみたいなことしてるな。

なるほどね。

そうした方がポップコーンとかも空いてて買えるしとか思って。

だから僕が最近っていうか、映画館に見に行ってめちゃくちゃいいなって、
たぶんごく最近に思ったやつ、ごく最近ではないんだけど、
あのあれなんだっけ、カメラを止めるなっていうさ、映画あったじゃないですか。
あれ、僕全く脳知識で行ったんですよ実は。

僕もそうでしたよ。

全く、本当に全く脳知識で、友達が見たいから一緒に行こうって、
15:05

なんか何の映画かも知らされずに、なんかすごい見たい映画があるから一緒に行こうって言われて、
僕全く脳知識で連れてられて、見に行ってみたんですよ。
だからこう、めちゃくちゃそのハードルがめちゃくちゃ低い状態の頃から、無の状態から見たんで、すごい面白かったね。

とりあえず僕もなんか映画っていうより映画館が好きなんだよな、どっちかっていうと。

映画館は好きなの?

うん、映画館は好き。
だからだいたい映画見るときって、なんかTwitterとかでなんか話題になってんなみたいな感じで、
でも予備知識何にもなしに、なんか時間あるときに映画館で見に行くみたいな感じが多いですね。

映画館ね。
なんか映画館ってさ、やっぱちょっとまあ当たり前だけど、その席がさ、やっぱ狭苦しいじゃないですか、なんか。
まあそのなんか電車とかほどじゃないかもしんないけど。
だからたまにすごい豪華シートみたいなのあるじゃん。
はいはいはい。
とかさ、足伸ばせるシートみたいなやつとか。
あれで一回見てみたいなって思うね。

僕だいたいそれにしてますよ、最近。

あ、だいたいそれにしてんだ、あいつも。

映画館行くんだったら絶対課金したほうがいいと思ってるから。

うーん、いやなんかあれ、あそこだけだなと思ってるから、やっぱり僕は映画館に求めるの。
今んところ、あれで見たほうがたぶんいいんだろうね、だから。
いや、あれいいっすよ。
いくらなの、あれって。そんなかかんないの?倍ぐらい?

プラス千円ぐらいじゃなかったっけ?

プラス千円ぐらいなの?

え、たしか。はい、どうだったかな。

そんなめちゃかかんみたいな映画じゃないっすよ。
最近だったらたぶん映画、まあ2000円ぐらいでだいたい見れる。
2000円前後でたぶん見れると思うけど、プラス千円ぐらい。

まあ、さっきのあいうプレミアム席みたいなのもいろいろバリエーション出てるから、めっちゃ高いのもあると思いますけど。
ああ、はいはいはい。
なんかそれこそ新宿のあのなんだっけ、ゴジラの、なんだっけ、なんか新しくできた映画館。
うん。
あの、歌舞伎町のあったらいいの。
はい。
だけど、なんか倍ぐらい払うとプレミアムラウンジみたいなのに入れて。
へえ。
なんかその、開演1時間前からちょっとなんか優雅に楽しめて、なんかお酒飲んで。

へえ、そんなのあるんだ。

で、ふかふかのあのソファみたいな席に座って映画が見れてみたいな。

それでも倍ぐらいなんだね。
だからもう5000円ぐらい。

いや、もっとだったかな。

5000円ぐらい払えばいけるってこと?

ちょっと覚えてないけど、うん、5、6000円払ってそう。

まあ、5、6000円はちょっと、6000円まで行くとさすがに結構払ってるなって感じだろうけど。

普通の東宝シネマとかにある普通のプレミアム席、1000円、2000円の世界だったと思うけどな。

3000円とかでそれ見れるんだったら全然いい気がするね、なんか。
18:00

うん。
あとそれで言うと、一時期レイトショーに行くってね、はまってた時代はありましたね。

ああ、はいはいはいはいはい、レイトショーね。

六本木、六本木の、六本木ヒルズのあの東宝シネマって結構夜遅くまでやってるんですよね。
うんうん。
なんかあれ見、あそこでレイトショー見て始発で帰るみたいなことをしてた時代はあった。
始発で帰る?
そうそうそう、終電過ぎてもあったんですよ、確か。

へえ、レイトショーってそんな、え、ずっとやってるんですか?なんか夜通し。

いや、えっとね、一時始まりとかだったのが昔はあった。

一時始まりでもう2時間あって、3時間、3時ぐらいじゃないの?

そう、で、1時間ぐらい公園でぼーっとして、

ああ、そういうことね。

4月で帰るっていう感じ。

ああ、へえ。

うん、めっちゃガラガラだから、すごい快適ですよ。
寝ちゃいそうだけどね、さすがになんかもうそれ。
なんか気分展開になるしいいなと思って、一時期やってたな。
うーん。
ああ、プレミアボックスシートプラス1000円とからしいっすよ。

ああ、全然いいじゃん。
今度なんか、じゃあ行ってみようかな、プレミアのやつに。

うーん、絶対いいと思う、その方が。

うーん、そんなもんだったらちょっといいかもな、全然。
うーん。
そこだけだもん、今、僕の映画館の不満点。

課金ですよ、課金。

そこだけだから、1000円で行けんだったら全然ありだな。

うーん。

そんなね、せっかく見に行くんだし。
そうそうそう。
全然いい気がするな。

僕、サウナと一緒なんだよな、映画館の捉え方が。
なんか気分転換手段っていうか。

ああ。

その空間に入ってバッと切り替わるのがいいみたいな、そういう感じ。

ああ、なるほどね。
そうか。僕は映画館に行くのは割とあれだな。
あんまり映画館一人で行かないんですよね、僕はあんまり。
行くこともあるけど、あんまり行かない。
なるほどね。
だから、友達とだいたい行くんですよね。

うーん。

見たい映画、すごい見たいわけじゃないけど、見たい映画あるとこだったら、
なんかもう友達と行こう行こうって言ってる間に、予定が合わずに見ないこともあるんですよ、だから。
ああ、じゃあまあ配信されたら見ればいいかぐらいのさ、なんかそういう感じになっちゃうっていうか。
だからなんか割と友達と遊びに行く場所みたいな感じはあるかもしれない。
だからそういう意味では僕の中で映画館、映画館っていうのはね。

なるほどね。僕も完全に一人で行く場所ですね。むしろ一人で行きたい。

まあ一人で行くのもいいんだけどね、なんか。
僕もこの前、この前っていうかだいぶ前か。
あのスラムダンクの映画、2回目のやつを一人で見に行ったけど。
いやー良かったねー。
熱くなれたねー。
21:00

まあ一人で行かなくても多分熱くなってたんだろうと思うんですけど。
まあでも見たい映画はまあ普通に一人で見に行ったりとかもしてる気がするね、なんかそういう意味では。

うーん。
まあでも最近配信早いっすもんね。

普通にすぐネットフリックスとかAmazonプライムで配信されたりするから。

うーん。

本当に、いやーなんか昔の僕の最高の休日が過ごしやすくなってるっていうその。
休日にたこ焼き食べながらビール飲んで。

だからこそどうせ見に行くなら課金ですよ。

まあそれも分かる気がするね、だから。
うん。
しかもなんか僕の場合だったらね、その友達と見に行くってなったら結構僕都内に行くことが多いから。
そうっすよね。
友達を見るためだけに。

うーん。

だから移動費の方が、交通費の方がお金かかったりするんだよね、なんか。

確かにね。
いやじゃあさっきのプレミアムラウンジがある新宿のとこ、いいんじゃないですか。
それなんか。
あ、歌舞伎町タワーか、歌舞伎町タワーだ。

歌舞伎町タワーの映画館?

歌舞伎町タワーのプレミアム、109シネマズプレミアム新宿っていうとこ。

プレミアム新宿のプレミアムシート?

ラウンジ。

うん。プレミアムラウンジ。
でもなんかこれ、全席プレミアムシートってなってんじゃん。
なんかどの席もクオリティがちょっと高いみたいな。

あ、そうかもそうかも。

すごい。さらに、さらになんかあるのかな?そのプレミアムラウンジ。
あ、鑑賞前にって話か、ラウンジは。

あ、なんかここの109シネマズプレミアムっていう場所自体が全てプレミアムなの。

プレミアムなんだね。
全部こう、あの待合室でいうか、よく待ってるところとかもちょっとプレミアムな感じになってるみたいな。

なんか音もめちゃくちゃいいらしいですよ、ここ。

もっとプレミアムなシートはないのか。

え、でもシートだいぶプレミアムですよ、ここ。

だいぶシートプレミアムっぽいけどね。

もっとプレミアム。

あ、でもこれ、電動リクライニング機能付きってなってるから。

そうそうそうそう。

これなんか、こうちょっと倒れたりとか、足伸ばせたりするのかな?

うん。

それ良さそうだね。

だいぶプレミアムそうですよ、ここは。

ちょっとなんか、なんかいい時に行ってみたいな、これ。

あれも一番高い席で6500円だって。

あー、ほんとだ。

で、その下は4500円だって。

まあでも高いね、やっぱり。
普通の映画館の倍、3倍とか、倍とか。

でも4500円の方だったら、まあ普通3000円ぐらい?
2、3000円ですよね。

まあ2000円ぐらいじゃない?
24:00

まあちょっと良いやついったら2000円ちょいとか。
まあ、うん、そうね。
まあラウンジとかあるから、こここそ友達と行くのが良いかもしれないですね。

そうね。これはなんか特別な時に行ってみたいね、なんか。
ここぞ。
ここぞっていう特別な時に。

音が良いやつを見る時とかね。

うん。

じゃあ今日はちょっと緩めの回なんですけど。

うん。

まあ例によってちょっとデザインシステムの話なんですけど。
あのー、やってるのは。
凝ってますね。
凝ってるっていうか、まあ仕事で今ちょっとやってるから、なんかネタがめっちゃ出てくるからっていう話なんですけどね。
で、ちょっとなんか最近、まあその仕事で人前でちょっと話す機会があって。
で、その時にデザインシステムとは何かみたいな話から、まあその話すことをちょっと依頼されたんでやってたんですけど。
その時にちょっと歴史を軽く調べてたんですよ、デザインシステムの成り立ちというか。
で、なんかこれまでUIデザインの歴史とか西洋美術史とかやってたと思うから、
ちょっとその歴史シリーズ的な感じで、ゆるく話せればなと思うんですけど。
まあ歴史といってもね、そんな西洋美術とかUIデザインほど深いわけではないので、あれなんですけど。
まあただなんか、これ印象的だなみたいな、なんかエポックメイキング的な事例っていくつかあるような気がして。
まあちょっとなんかそういうのを思い出がてら話せればなと思うんですけど。
まあ下敷きとしてはデザインシステム、デジタルプロダクトのためのデザインシステム実践ガイドっていう、
なんか2018年に出た赤いデザインシステムの本があるんですけど、
まあかなり定番の本ですね。
そこをまあちょっと下敷き程度に見てはいるんですが、
あとはなんか自分の記憶ベースに話せればなと思うんですけど。
まあそもそもデザインシステムってなんだっていう話になるんですけど、
なんかなんだと思います。何があったらデザインシステムだと思います。

何があったら。何があったらか。
これはすごいさっきの一番のことを考えちゃったな今。
え?

いやさっきの一番好きな映画のことを考えちゃった。
ここ考え込んじゃダメなんだなみたいなさ。
まあまあそうね。何でもいい。何でもいい。

いやまあでもなんかあれじゃないの。デザインシステムって言ってるけど、
まあでも大元たどっていくとなんか割とね、
なんかこの何ていうのよくあるさ、バリューとかになっちゃうんだけど、
27:01

ブランド的なものになっちゃうんだよね。そこまで行くと。
なんか本当の大元のまで行っちゃうと。
まあでもね、前ちょっと話してたスマートHRの本だっけ。
あれとかはすごい実践的というか、すごく実務的でいいなと思ったよね。

別に深く考えずに必要なものをどんどんやっていけばいいっていうような話だったから。

すごいいきなり大きく考えすぎなくてもいいんじゃないのみたいな話だったから。
そういう考え方もあるから、別に何があってもデザインシステムって言えばデザインシステムになるんじゃないのっていう。
ちょっと適当な答えをしてみるけど。

いやまあでもそうですよ。なんかデザインシステムって、
まあUX並みにふわっとした用語だと思ってて、
何でもユーザー体験だよねみたいな話と近いなと思うんですよ。
だし、まあこの下敷きにしてる赤いデザインシステムの本でも、

まあ定義はないですってもう初っ端から書いてあるんですよ。

で、まあただなんかいろいろこれまで、
まあ仕事とかベースでデザインシステムいろいろ見てきて、
まあなんとなくなんか共通項みたいなのがある気がしてて。
で、一つがさっきもたぶんさんがちらっと言った、
デザイン原則とかデザイン言語とか、
まあバリューみたいな、なんか行動指針的なやつ。
デザインエランゲージみたいなやつが一つ目。
で、あと二つ目が、まあこれもパッと思いつくだろう、
なんかライブラリー、UIコンポーネントのライブラリーみたいなやつ。
まあ部品集みたいなやつ。
で、三つ目がなんかワークフローとか運用体制とか、
なんか組織的な話っていう、なんか大きく三つの箱があるかなと思ってて。
で、なんかその箱の中に何を入れるのかっていうのは、
まあそれはなんか各デザインシステムのスコープ次第なのかなと思ってて。
なんかそのプロダクトによりこう比重を置く場合だったら、
そのUIコンポーネントとかっていうのが主題になってくるだろうし、
よりこうブランドに、ブランディングに比重を置くんだったら、
なんかこうコーポレートアイデンティティとか、ビジュアルアイデンティティみたいな話とか、
あとロゴとか、グラフィックアセットみたいなものとかだと思うし、
あとはなんかもうちょっと組織全般に広げるんだったら、
なんかこう名刺とか、スライドテンプレートとか、
なんかそういったものが入ってくるだろうしみたいな、
まあなんか同じ部品集とかパターン集みたいな、
その1つの箱に何を入れるのかっていうのは、
そのスコープ次第でいろいろ変わってくるかなと思うんですよね。
30:01

だからなんかこう、なんとなくパターンであるみたいなのは、
やっぱ共通してるかなっていうのは1つあるかなと思うんですよね。
形としては全然定義が定まんないんだけど、
なんとなくなんかこう精神というか、
頻度として何が必要とされるかというと、
なんかまあこれは自分、僕の試験ですけど、
まあ1個はやっぱそのパターンであることっていうのと、
あともう1個がシングルソースオブトゥルースっていう、
なんかその信頼できる1つの情報源であるみたいなところ、
だからなんかこうデザインシステムと呼ばれるものと、
ガイドラインと呼ばれるものの違いって、
なんかそこにあるかなと思ってて、
なんかその常にアップデートされる存在であるみたいなところが、
やっぱデザインシステムに求められるところで、
だからまあ時が経てもずっと信頼できる情報源であるっていうところのマインド、
まあそれをもうエンジニアリング用語だとシングルソースオブトゥルースとか呼ぶけど、
まあそれは2つ目として、なんか求められる性質としてあるかなと。
で、あと3つ目がなんかオープンさというかオープネスというか、
なんかこうデザインシステムを組織の一部署で閉じたものっていうよりは、
まあどっちかというと指向性としてはなるべくこう全社でオープンに、
誰でも参照し得るものみたいな。
まさにスマートHRの本、小さく始めるデザインシステムみたいな、
あの本の中だと結構こうライティングガイドラインとかがあったりとか、
なんかそのUIデザイナーとかエンジニア以外の人たちもターゲットにするような話とかって、
結構触れられてたと思うんですけど、
まあなんかそのオープンさみたいなのも、
まあスコープがさっきのブランド比重なのかプロダクシー比重なのか、
まあいろいろあるにしろ、やっぱそのオープンさみたいなところってのは、
指向性としてあるのかなと思って。

そうだね。まあなんか使われなかったら意味がないものだからね。

そう。だからパターンであること。

対象が結構広いというかさ、やっぱり。
大体なんかその会社に関わってる人は大体使う対象になる人みたいなことになるようなものだよね、やっぱり。

だから結構こうブランディングをした結果出てくるブランドガイドラインみたいな、
なんかロゴの取扱説明書みたいなやつって、
なんか割とこう閉じてるというか、なんかPDFとして置いてあって、
なんかブランド管理部門が管理してるみたいなことになったりすると思うんだけど、
なんかやっぱそことの対比としてはやっぱシステムというふうに名がついてるから、
まあ常に更新されるものであり、オープンなものであり、誰もがアクセスできるもの。
で、取り扱うのはパターンであるみたいな。
なんかそのパターンであること、シングルソースオブトゥルースであること、オープニスであることって、
この3つになんか反するデザインシステムっていうのは逆にないんじゃないかなっていうふうには思ってて、
33:04

その形が違ってもね。
まあだから個人的にはこの3つっていうのが、
まあなんかそのデザインシステムに共通している思考性みたいなものなのかなっていうふうに思うんですよ。
まあそういうふうに整理すると、
別にデザインシステムって概念は別に新しいものでは全くないと思ってて、
まあやっぱその今言った3つの中で一番特徴的なのはパターンであることっていう話で、
でこのパターンっていうのが一個キーワード、デザインシステムの中でも一番大事なキーワードだと思ってて、
そのやっぱこの原理をたどるとパターンランゲージっていうものにたどり着くと思うんですよね。
だからまあCっていうのはデザインシステムを厳重ってそこなのかなっていうふうに思ってて、
でそのパターンランゲージっていう概念って、
まあもともとをたどると1970年代になんか建築家のクリストファー・アレック・サンダーという人がいたらしいんですよ。
でこの人が建築家なんですけどパターンランゲージ環境設計の手引きっていう1984年に本を出してて、
でこれが建築の本なので人がこう心地いいなっていうふうに感じるなんか環境っていうのがパターンがあるよねみたいなのをなんか分析してなんか253個上げたっていう本らしいんですよね。
で例えばなんかその心地いいなって感じる要素パターンとしては例えばなんか町の中に座れる階段があるとか、
なんかこう街路を見下ろすバルコニーがあるとかなんかそういうのがあるとなんか心地いいって感じるみたいななんかそういうのを整理してまとめたらしいですよね。
なんかそれをやるためにはなんかいろんな国の綺麗な街並みとか住まい、住居とかをなんかこういろいろ観察する中で決めていったらしいんですけどね。

なんか確かこの人建築なんだけど都市警官とかそっち系の人なんだよね確か。

そうですね。

街の話とか結構入ってきたりね、するっていう本だった気がしますね。僕もちょっと読んだ気がするけど。

僕は読んだことないんだけど結構面白そうだ。今読んでも面白そうだなと思って気になりますねこの本は。

なんか昔あの池谷さんが読んでた気がする。読んでたのかなんかいろいろパターンランゲージがあった話してた気がする。
なんかすごいあの皿の頃に。

多分だけどこのパターンランゲージって概念はまあここからいろんなところに輸出されるんですよね。
で確かなんかSFCにパターンランゲージ、SFCだったかな?に研究してる先生がいて、確かそことクックパッド一緒にやってたんじゃなかったかな?なんか共同研究みたいな。
なんていう話をなんか池谷さんに聞いた覚えがあるような気がする。
多分なんか料理のパターンランゲージみたいなのを作ろうとしてたのかな?詳しく知らないですけど。
36:03

まあみたいななんかいろんな分野に輸出される大元となったのがこのクリストファー・アレクサンダーっていう人が書いたそのパターンランゲージ環境設計の手引きっていうような本らしいんですよね。
でその輸出先の一つとしてやっぱソフトウェアのエンジニアリング業界っていうのがあって、それが90年代の話なんですけど。
パターンウィキXPっていう本があるんですけど、これも結構有名な本で。
これはなんかそのデザインパターン、ソフトウェアの業界の中でパターンランゲージというよりはどっちかというとデザインパターンと呼ばれたりするんですけど、
それについてその歴史について取り上げた本で、この本も結構面白いんですけど。
でそのソフトウェアエンジニアリングの業界に持ってきた代表的な人としてオード・カニンガムとケント・ベックっていう人がいて、
特にこのケント・ベックっていうのはアジャイルの人なんですよ。
このもともとパターンウィキXPのXPっていうのはエクストリームプログラミングって呼ばれてるやつ。
で特にこのケント・ベックっていう人が中心となってアジャイルソフトウェア開発宣言っていう、
なんか今のアジャイル開発の原理となる思想、宣言なんですけど、
個人との対話を大切にしましょうとか、契約をするよりも顧客と協調するのを大事にしましょうとか、
計画を守ることよりも変化に柔軟に対応していきましょうみたいな、
そういう宣言をまとめたんですよね、アジャイルソフトウェア宣言っていう。
それの中心となったのがこのケント・ベックっていう人で、
でなんかこのアジャイルソフトウェア宣言っていうのは、
これ全然もう完全にアジャイル開発の文脈の話なんですけど、
なんか結構さっきのオープンスターみたいなところ、デザインシステムに求められるオープンスターみたいなところとも、
なんかちょっと近しいんじゃないかなっていう気はしてて、
なんかやっぱこの辺も原理の一つとしてあるのかなっていうふうに思うんですよね。
なるほどね。
あとはなんかソフトウェアの業界の中だとゴフのデザインパターンっていうのがあって、
なんかゴフっていうのがギャングオブフォーっていう人たちで、
なんかこれも90年代後半ぐらいにオブジェクト思考言語みたいなのが結構出来上がってきた頃に、
オブジェクト思考の世界の中でなんかこう最良性の高いソフトウェアの設計パターンみたいなのがあるよねって、
整理した4人のなんか四欠みたいななんか人がギャングオブフォーって呼ばれてて、
それゴフとか言うんですけど。
でなんか僕大学ソフトウェア工学系のゼミなんですけど、
なんかそういう分野だと結構なんか臨読とかよくするようなものなんですよ。
なんかシングルトンとかアダプターとかデコレーターパターンとか、
なんかそういう名前がついてて。
39:01

でそれがある意味エンジニアの中だと共通言語みたいになってて、
なんかよくクラス名とかにシングルトンなんちゃらとかなんちゃらデコレーターとかついてて、
だからパターンを知ってるとこういう設計なのねっていう風に理解が早くなるみたいな、
なんかそういうやつなんですよね。
なんかこれって結構UIの世界でいうこれはタブナビゲーションとか、
なんかそういうコンポーネントの名前の付け方とかにちょっとなんか通じる部分もあるのかなみたいな。

そうだね。

もうちょっと上流の話なんですけどね。
これは上流というかあの抽象が高い話なんですけど。

確かに。
なんかデザインパターンとかっていう言葉は、
どっちかっていうとデザインの文脈っていうよりもオブジェクト思考の文脈でよく聞いた気がするな。

そうなんですよね。

デザインパターンって話って。
デザインっていうのは見た目っていうよりはもう設計ですよね本当にこれ。

設計なんですよね。

設計のパターンをなんかこう作っていくみたいな。

だから結構デザインパターンっていうのはやっぱりそのソフトウェアエンジニアリング業界での設計の話であり、
建築業界での設計の話であったっていうのが多分現流なんだろうなと。

そうだね。

思うんですよね。
だからなんかこうこの辺のこう建築で言うパターンランゲージの話とか、
あとアジャイル開発の話とか、
ゴフのデザインパターンの話とか、
この辺がかなりこう現代のデザインシステムの現流なのかなと思う。
あとプラスして別の角度の話としてはグラフィックデザイン界の話もあるかなと思ってて。
グラフィックデザインの世界だとグリッドシステムとかっていう考え方ってずっと昔からあると思うんですよね。
僕はそこについては詳しくないけど、
1950年ぐらいからこう格子状にガイドライン引いてブロックごとに文字とか図とか置いていくみたいな話。
で、グリッドシステムっていう本があると思うんですけど、
ヨゼフ・ミューラーさんが書いた1981年の本みたいですね、現状は。
日本語版もあると思うんですけど、
この人はスイスのタイポグラファーみたいで、
なんかこの辺で体系立てられたのかなと思うんですけど、
そういう格子、グリッドに配置してグラフィックデザインを行うっていうような
考え方も多分デザインシステムの原理の一つなのかなというふうには思っていて。
この流れの中でいうと、
エポックメイキング的な事例として挙げられるのが、
NASAのグラフィックスタンダードマニュアルっていうのがあるんですよね。
これが今でもPDFで見れてなかなか面白いんですけど、
これは1975年に出たNASAのためのブランドガイドラインみたいなものに近いのかな。
現代のブランディングとかやると最終的なアウトフットとして作る
ブランドガイドラインの源流みたいなものらしいんですよね。
42:02

中身見てみるとなかなかいろいろ本当にカバン範囲が広くて、
それこそロゴの取り扱いみたいな話、
ブランドカラーはこれですみたいな定義があったりとか、
ロゴのパターンとしてはこういうのとこういうのがありますよとか、
セーフエリアというか、
ものはこれぐらいパーティングをとってくださいみたいな話があったりとか、
あとはこのNASAのマニュアルの中でも、
さっきのグリッドシステムみたいな話があって、
基本的にこのグリッドシステムを使って
NASAの出すパンフレットとかそういうのをデザインしてくださいねっていう話があったりとか、
あとはロゴがいろんなロケットとか車とか、
NASAが作ってる乗り物にロゴが入ると思うんで、
例えばロゴを入れるときにロケットとかの色に合わせて、
白ベースだったらこのロゴを使ってくださいねとか、
黒ベースのロケットだったらこのロゴを使ってくださいねみたいな、
そういうルールみたいなものが決められてたりとか、
あとはユニフォームのNASAの宇宙飛行士が着るユニフォームにどう展開していくか展開事例みたいなものとか、
結構現代のブランドガイドラインでもよく見るなみたいな、
あとサイン計画みたいなのがあったかなとか、
そういうよく見るなみたいなものが大体網羅されてるっていうような事例で、
これは結構有名な事例らしいですね。
っていうグラフィックデザイン界の文脈もやっぱり現在のデザインシステムにかなり含まれてるなというような感じですね。
っていうのが1974年代くらいの話で、
やっぱりそこにきてもう一回ソフトウェアの話に話を戻すと、
1977年にAppleのHuman Interface Guidelinesっていうのが出てきてるんですよね。
初版が1977年らしいんですけど、
調べてて初版のHuman Interface Guidelinesって何が書いてあったんだろうなと思って、
いろいろ調べてたら、
ふえのマダムさんがまとめてるサイトが出てきて、
目次をまとめてるHRGのこれまでの目次をまとめてるサイトが出てきて、
なかなか面白いなと思ったんですけど、
てかさすがふえのさんだなと思ったんですけど、
やっぱなんかこのHuman Interface Guidelinesが特徴的だったのは、
ガイドラインっていう名前の通り、
思想とかデザイン原則みたいなのがかなり含まれているっていうような、
それをソフトウェアのUIデザインの領域に持ち込んだみたいなところがやっぱり
エポックメイキングだったのかなっていうふうに思うんですよね。
で、やっぱこの思想、
Appleの考えるデザイン原則というかデザイン言語みたいなところを語るみたいなのは、
45:01

現代も形変えて、
例えばVision OSのデザイン原則みたいなページがあったりとかしますけど、
なんかやっぱその原則から語っていくみたいなところが、
AppleのHRGが持ち込んだ概念なのかなっていうふうに思うんですよね。
で、ここまでがだいたい1980年代、90年代の話なんですけど、
2000年代に入ると、
こっから徐々にウェブの世界になっていくと、
2000年代半ばに出たのが、
Yahoo!のインターネットで、
これ、まとやまさん使ったことあります?
使ったことあった気がするな、なんかで。
わかんない、ちょっと覚えてないな。
使ったことあったような気がするけど。
これなんかもう現状に残ってないんですけど、

なんかスクショとかを見ると、

これYahoo!が出してた、

これがYahoo!のインターネットで、

これがYahoo!のインターネットで、
これがYahoo!のインターネットで、
なんかアコーディオンとか、
この辺りからそういうウェブ上のUIに
名前がついて定義されたみたいな感じらしいですね。
なんかおそらくこの頃になってくると、
2006年だったかな、これが。
2006年だったと思うから、
2006年だったと思うから、
2006年だったと思うから、
HTML5とかCSS3が出始め、

もうちょい後かな。
AJAXとかいってる時期だよね、一番。
これ今Flashじゃなくて、
もうJavaScriptとHTML5でしょみたいな、
そういう時期だった気がすんだよな。
僕もちょうどその頃すごいJavaScriptを
すごい勉強して書いたりしてたから、
結構いろいろライブラリ触ったりとかもしてた気がする。
そのUIライブラリ、Yahoo!ユーザーインターフェースライブラリも
ちょっと触った気がすんだよな、その時に。

そうっすよね。
確かこの頃って、
JQueryよりさらに前の
Prototype.jsみたいなのがあった時代ですよね。

Prototypeが一番流行ってた時期かもね。
JQueryも結構みんな使いやすいからつって、
割と手軽にみんな使えるから使ってたりした気もするね。

どっちが主流になるんだみたいな時代だった気がする。
確かそのYahoo!ユーザーインターフェースライブラリにも、
それらをPrototype.jsを入れ込んだ
ハコオリオンとかそういうライブラリを提供してたような
記憶がかすかにある。

ちょっと僕も昔過ぎてあんま覚えてないけど、
でもそういう時だったね。

ですよね。懐かしいなと思って。
僕もこの頃まだ学生でガリガリやり始める前だったから
あんま馴染みはなかった。
48:00

めっちゃ使ってたわけじゃないんだけど、
今でも覚えてるなというようなやつですけど。
この後出てきたのがTwitter Bootstrapで、
2011年ですね、これが。
これは僕的にはすごい一番印象に残ってて、
当時大学4年生とかだった気がするけど、
僕エンジニアだったから、
これ使えばデザイン自分でもできるじゃんみたいな。
そういう感じですごい覚えてるし、
この頃マッシュアップとかいう概念あったじゃないですか。

今でもあると思うんですけど。

今でもあるけど、API組み合わせて自分でサービスみんな作るみたいな。
どこもかしこもTwitter Bootstrapが使われてるみたいな。
Twitter Bootstrapの提供してるヘッダーのコンポーネントみたいな、
帯みたいなやつとか、
すごいどこ見てもあったなみたいな気がするんだけど。

だから僕はあんまり通ってこなかったんだよね実は、
Twitter Bootstrapって。
逆にね。
僕デザインが、グラフィック作れるから、
逆にこれ別に自分は使わなくてもいいっていうか、
CSS自分で書いたほうが早いなとか思っちゃうっていうかさ。
逆に通ってこなかったんだよね、あんまり。

僕逆に当時はデザイン、どっちかっていうと円が遠かったから、
これがあれば自分で一人でできるっていう、
すごい心でよかったのを覚えてますね。
だから本当使いまくってましたね、いろんなプロジェクトで。

そういうライブラリー系で言ったら覚えてるのが、
ちょうどその頃って、
iPhone、スマートフォンが出始めた頃なんだよね確か。
AJAXが流行り始めて、
フラッシュがもうダメなんじゃないかって言われてるのも、
そういう理由からだよね。
iPhoneがもうフラッシュをサポートしないみたいなところから。
やっぱりJSじゃないとダメなんじゃないかみたいなところがあって。
で、スマートフォン向けの、
いい感じのUIライブラリーみたいなのを頑張って提供するっていうのを、
みんなやり始めるっていうのがあって。
で、extjsとか、
後のセンチャJSとかって言われたりするのとかっていうのを、
一時期僕すごいやってた時があった気がする。
extjs書いてこうやっていくと、
割とウェブなんだけどネイティブアプリっぽい、
インターフェースのアプリケーションが作れるみたいな。
SAPが作るみたいな、そういうやつ。

その辺からあれか、ウェブで何とかしたい、
モバイルアプリを作ろうみたいな話が盛り上がってきたかな。

一時期そういう流れあったよね。
結局すぐにネイティブアプリの方がやっぱりいいじゃんってなるんだけど。
51:03

何だっけ、名前も完全に。
あれ、Zaimとかがアプリ作ったみたいな。

何だっけ、今もあるやつですよね。
でも後々もうネイティブコードを吐くみたいになっちゃった。

今で言うリアクトネイティブとか、

Flutterとかだと思うんですけど、

もっとウェブっぽかった。

ウェブっぽかったやつあったね。思い出せないけど。

思い出せない。何だっけ、気持ち悪いな。
何だっけ、名前を忘れるくらいいっぱいになりましたよね、あの頃って。

僕センチャタッチ、
センチャタッチめっちゃちょっと触ってた時あったんだよね。
EXGS、センチャJS、センチャタッチみたいな、
どんどんモバイル向けのフレームワークになるっていう時代があったんだけど。

フォンギャップ、フォンギャップ、フォンギャップ。

フォンギャップもあったね。
フォンギャップもあったね。
フォンギャップね。

懐かしい。
今はパッチコルドバになったのか、名前が。
もうないのかな。後に変わったのかな、名前が。

でもなんかスマートフォンが出てきて、
その辺が結構ガーって動き始めたっていうところあった気がする。

そうですね、スマホが出てきて、

もちろんAJAXの流れっていうのが、
元々のベースとしてAJAXがあったっていうところも結構大きいと思うけど。

そうですね、
AJAXがありました。
そこからCSS3、HTML5あたりが実用化されてきました。
で、Chromeとかが出てきて、
IEが徐々に下火になり始めてきました。
IEが徐々に下火になり始めてきました。
IEが徐々に下火になり始めてきました。
まだまだ当時全盛期だけど。

その時代ってまだIEがあって、
スマートフォンっていう夢の世界だとそれを気にしなくていいっていう、
開発者にとって夢みたいな世界が広がってたから、
開発者にとって夢みたいな世界が広がってたから、
結構それでみんな飛びついてたところがあった気がする。

夢が広がってきてた時代ですよね。

めちゃくちゃここだったらIEのこと気にしなくていいんだみたいな感じで。

めちゃくちゃここだったらIEのこと気にしなくていいんだみたいな感じで。
CSS3とか使うとFlexboxとかそういうのがあるんだみたいな。
テーブルレイアウトとかもういらないんだみたいな時代ですよね。

楽しかったなあ、だからあの時は。
そのIEの束縛から解放された感じがして楽しかったんだよね。

フロントエンドがもう一番変化が激しかった時代ですよね、あの頃って。
いまはでも激しいけど、いま以上に激しかったような記憶がある。

記憶がある 早げしかったね

エイジャックス流れからのそのスマートフォンモバイル向けのやつっていうところ があったのはすごくまあフラッシュがなくなったとかねそうですよね
54:09

でやっぱり結構激動だった気がする js もその徐々に行こう j クエリーカーみたいなのに一本化されつつ
ありでもそこで何かもうちょっと何かこう 構造的に作ろうみたいな話で何かバックボーン js とかなかそういうのが出てきたりとか
そっちはそっちでまあリアクト以前の話ですよねなんか そうだねまあみたいなのですごい変化が激しかった2010年代前半みたいな

記憶 この時はだからまあまだ今でいうデザインシステムってよりはもうちょっと javascript の

ui コンポーネントライブラリーっていうそうですよこの頃はそうそう ui ライブラリー とか css フレームワークみたいな名前の言われるのでしたよねうん
そうだねで確か僕の記憶だとこの2011年 twitter bootstrap が出た次の年2012年ぐらいに クックパッドで池田さんが皿を作ったんじゃないかなと記憶している
ちょっとそこの順序関係であんまりまあ twitter bootstrap は完全後なんだけど どれぐらいだったかっていうのはちょっと僕もあんま覚えてなんか僕当時
インターン学生でインターンしててクックパッドででなんか twitter bootstrap 的なのを社内でも作ろうみたいな気運がを何か

その時に見てたような記憶がなどなかって そう
たなんか僕が入社する前からそういう動きをしているって話を聞いてるから だから僕が入社したので何年だっけ
覚えてない2013じゃないですか僕とほぼ一緒ぐらいじゃねー13だか まあ同じぐらいだった気がするね

2013年だ2012年ぐらいからそういう動きをしているっていう話を聞いてた気がする うんそうそうそう

池田さんからこの頃は池田さんが一番の当事者なんだけど

なんかそう考えるとクックパッドめちゃくちゃ早かったんだなぁと思うんですよね 着手こういうデザインシステムっぽいものを着手するのは

まあなんかいろいろ条件がねあったからねその当時 えっとクックパッドにデザイナーって言われてるような人がほぼほぼいないからほぼほぼ
なんか池田さんが一人ってわけじゃないけど少ない人数でいろんなサービスがこう ちょうどねその時期っていろんなサービスを展開していこうっていう時期だったからクックパッドが
いろんなサービス展開していくんだけど全部のデザインを全部一気に見ていくっていうのが 少人数のデザインだと見るのは大変だからなんかこうそういう
なんていうのコンポーネントライブラリー的なものを用意して使ってもらえるっていう風に した方がいいんじゃないかっていう流れが多分できたんだと思うんです

あとはなんか クックパッドの文化としてエンジニアが企画も含めてやるみたいなのが強いと思うし
57:02

今でこそそういう人が増えてるけど当時って本当にまだまだやっぱ分業がすごい強い風潮
デザイナーは逆に渡されたものを綺麗にするのが仕事みたいな時代だったと思うんですけど
っていう中でエンジニアでもデザインができるようにみたいな思想が多分あったんだろうなと思うんですよね

やっぱりクックパッドの会社自体もすごいエンジニアリングが強いとか エンジニアリングが中心の文化だったし
生田さん自身ももちろんもともとハテナでっていうのもあったから エンジニアリング的な部分も文脈として強いかったっていうのもあって
いろいろこんな条件が相まった上でああいうものが必然的にできてたんだろうなっていう気はするけどね

Twitter Bootstrapも含めてこの時代は結構エンジニアでもデザインができるみたいな
みたいな文脈が結構強かったのかな エンジニアの道具みたいな印象
シリーズフレームワークだからね 強かったなと思いますね
なんかこの頃なんかこれは僕だけかもしれないけどなんかGitHubもプライマーっていうのを出してて
確かなんかそれも結構覚えてるんだよな なんかマークダウン周りのスタイリングが充実しててそのプライマーの一部のライブラリとしてね
で当時確かになんか後々僕がまあそのマークダウンのエディターとか作ってたから あの木べらの原型みたいなやつ
確かにその辺で自分のプロダクトにも取り入れるみたいなことをしたりしてましたね
っていうのがまあ2010年代前半ぐらいの激動の時代ですね
で次に2014年にGoogleのマテリアルデザインが出るんですねここで

おおマテリアルデザイン

やっぱこれもかなりこうデザインシステムの歴史の中で影響が大きい話かなと思っていて
逆にここまでってGoogleってAppleに比べるとデザインにあんまり力を入れてなかったと思うんですよね

でこれを出してなんかすごい本気出してきたなみたいななんかこう感じだったのを覚えている

でやっぱAppleのHIGとの違いっていうのはまあだいぶシステム的っていうかなんかまあやっぱコアのコンセプトとしてこのマテリアルを組み合わせるみたいな
重ね合わせてUIを作っていくみたいなコンセプトがあって
かなりシステマチックだなというだからHIGは結構思想的なんだけどどっちかというとこのマテリアルデザインはシステム的なものだなというような印象ですよね

でもマテリアルデザインのそのグラフィック的なものって基本なんかもう全然変わってなくて今でも
一方でまあAppleの方はどっちかというともうちょっとなんかメタ的というか思想的な部分の文脈があるからグラフィック的には結構大きく変わってるんだよね
1:00:04

なんか昔はスモーキーフィリズムだったりとかするんだけどなんか途中でフラットデザインになったりとかしてみたいな
だけどマテリアルデザインって昔そのまだAppleの方がなんかこう現実に沿ったようなすごいリアル思考のやってる時からなんかこうマテリアルデザインだっつって

もうちょっと抽象的な方に振ってなんか作っていて なんか割と先進的だなっていう印象はあってる当時から
なんかそこもAppleとGoogleのちょっとスタンスの違いっていうか なんかAppleはAppleの考える
あのものを皆さん作れるようになりましょうみたいな感じがするというか そうだね確かにだからあんまりこう

スタイリングについてはそんなに言及しないというか どっちかって言うとやっぱりマテリアルデザインの方がさっきの
コンポーネントライバルツイーターブルーストラップとかそっち側に近い思想的な部分はある気がするよね
なんか一定以上のどのどんなプラットフォームでも一定以上のクオリティのなんかインターフェースを提供できるようにしようみたいな
そういう思想的な部分がある気がするなんか根底に

なんかどっちかって言うとAppleはそのブランドガイドラインとかにちょっと ベクトルはちょっと近いなぁみたいな印象を感じて
マテリアルデザインはよりシステム的でまぁ現代のデザインシステムっぽい感じだなぁと思う
やっぱこの頃の時代背景としてはやっぱどんどんどんどんコンテキストが複雑になってきたっていうところだと思うんですよね
なんかその 確かこの頃のレスポンシブデザインっていう考え方が広まってきたんだと
確か2014年ぐらいだった気がするんですよねなんかその スマートフォン出てきて
でもなんかその確か出てきた文脈てそのスマートフォンサイズに最適化してここで 画面を作るんじゃなくてまあ1個で1個でレスポンシブに行ったほうがまあ効率的じゃない

みたいな話だったような気がするんだけど まあこの頃だとねもうタブレットも出てきてるしね
本当にいろんな多分画面サイズのものが出現してるからどうすんだみたいななってた時がいっぱいブレーキポイントつくのかみたいな

そういう時期だった気もするからね
とはいえまだAppleってまだ画面サイズでそんな多様化してなかったと思うんですよね2014年ぐらいって
ただやっぱこの頃からAndroidの方はもう花から多様だったからだからやっぱそのデバイスサイズの多様さにいかに対応するかみたいな
意識はやっぱマテリアルデザインの方が強かったんじゃないかなっていう気がしていて
でもちろんAppleもね最近のなってはまあVision OSも含めてまあそれが当たり前になってはいるんだけど
どっちかというと先駆者はマテリアルデザインだったのかなっていう気がしますよね
であとはまあこれはまあ後年の話になるけどまあ最近だとマテリアルUとかが出てきてまあそのパーソナライズっていう
まあよりコンテキストが複雑になっていくっていう文脈が入ってくるのでまあそのカラーパレットをいかにこう堅牢に作るかみたいなのはまあやっぱ今
1:03:06

まあ僕も最近作っててマテリアルデザインめちゃめちゃ参考にしてるけどやっぱすごいよくできてるというか長年のこう
事件が積み重なってるなぁみたいなすごく感じるところではありますよね
まあというのでかなりこうデザインシステムの歴史に影響を与えたものとしては大きかったんじゃないかなと思いますね
これが2014年でまあこの後から徐々にやっぱフロントエンドの技術もかなりこう落ち着いてきたというかリアクトビューとかなんかそのあたりにフロントエンドの技術が徐々に修練されてきて
でまあNPMとかでパッケージを入れてそれをとかなんかまあそういう下回りも結構こなれてきてるっていうか
でまあブラウザもまあChromeがどんどんChromiumベースのものがどんどん浸透してきてまあIEがどんどん下火になってきてみたいな感じ
で徐々にそうこういうコンポーネントベースのUIっていうのが作りやすくなってきたっていうのがまあやっぱ2010年代後半にかけてあって
でこの頃からまあ徐々にこう各事業会社がデザインシステムをどんどん作って公開していくみたいな流れっていうのが出てきたのかなっていうふうに思うんですよね
まあ例えばショピファイポラリスとかアトラシアのデザインシステムとか まあとB2B系だとアントデザインとかね
なんかそういうのって 出てきてまあ特には
なんかアントデザインとかそういう1企業が公開しているデザインシステムを取り入れて管理画面作ろうとかそういうのもやっぱりリアクトみたいなのが出てきたことによってよりしやすくなった
コンポーネントで扱いやすくなったっていうのはかなりこう技術の進化とともにデザインシステムに与えた変化も大きいのかなというふうに思うんですよね

なんか多分それまでも 存在してたんだろうと思うけどなんかそれを社外に発表していくっていう流れができたよね
なんかその こういうふうに取り組んでるんですよっていうアピールの一環なのか
まあそういうものとしてこう社外にも別社外に発表したってね別にそんな 他の人がすごい使うかって言ったら別にそんなわけでもないんだけど
でもなんかそういうふうに出していくっていう流れがなんかここ数年とかで出てきたような気がしますね

そうですねそうですね だからね皿も取り組みは結構早かったけどあんまこう社内的にも公開しようみたいなのってあんまなかったと思うんですよね
モチベーション的にも だからなんかその辺の歴史を知らないと結構クーパーと後からデザインしても公開してるのかなっていうふうに見えるんだけど
まあ実は結構初期からやってたっていうような話ですよね

まあ多分結構ね他の会社とかも社内で作って使ってたとかっていうのはいろいろあるんだろうけどねきっとだから

まあでもそういうやっぱリアクトとかコンポーネントベースのライブラリが出てきたことによって公開してちゃんと他の会社でも使い物になるっていう状態を作りやすくなったというのはかなり大きいのかなっていう気はしていて
1:06:04

あとデザインの話だとこの辺でアトミックデザインっていうのも一時期めっちゃ流行りますよね

ああアトミックデザインってそんな最近でしたっけ?

もうあんまり覚えてないけど
18年だった気がする確か

そんなもんか

なんか当時僕結構そこを熱心だったんですよね
でやっぱ課題感としてはそういうリアクトとかがまあ結構定着してきてコンポーネントベースでUIを作るっていうのが当たり前になってきたんだけど
じゃあそのコンポーネントの流度ってどう考えたらいいんだろうみたいなのがいまいちまだ分かってなかった時代
でそこにブラッドフロストさんがアトミックデザインでハトムとかモレスキューだっけ?毎回発音ができないんだけど
とかっていう概念を持ち込んできて
結局結論としては全然決定盤にはなれなかったっていうのが結論かなと思うんだけど
でもなんとなくなんかこのコンポーネント成立道筋みたいなのができてきたっていうような流れなのかなと思うんですよね

アトミックデザイン
いつだったかなアトミックデザインって結構なんか僕がスケッチとか使ってる時にはもうなんかアトミックデザインとかなんかやってた気がするな

その文脈もありますよね
UIデザインツールが進化してきてコンポーネントで扱えるようになったっていう話

今まではなんかイラストレーターとかPhotoshopでやってたのがスケッチっていう新しいアプリが出てきて
これ使うとコンポーネント
確かスケッチだとコンポーネントじゃなくてなんか違う名前なんだけど
コンポーネントが作れるようになって使い回しができるようになるみたいなのがあって
それをどう組み立ててじゃあコンポーネントを作っていくのが良いのかみたいなのを考える文脈とかでも

なんかアトミックデザインを参考にしてた部分とかっていうのがあった気がするんだよな
あったわスケッチな確かにそうか
だからやっぱ2017年6年前後ぐらいってやっぱそういうデザインツールとしても
フロントエンドの技術としてもやっぱコンポーネントで扱うみたいなのが
ようやくできるようになってきたっていう感じですかね

そうだね

なんか2018年頃になんかアベマのアベマがちょうどリリースされて
そのアベマのチームがアトミックデザインを取り入れてUI設計してるみたいな

あったんですよ
あった気がする僕も読んだ

めちゃめちゃ読んでた記憶がある

めっちゃ読んだ気がする

そうそうなんかブラッドフロストが言ってることをちゃんと実践してやってるっていう
1:09:03

なんか事例として結構日本の中では新しかったからすげー読んでた覚えがある

読んでた気がするねなんだっけな

その本を書いてた後藤さんともなんか一回ラウンジとかしたもん

そうだ後藤さんの本だ
多分堅牢で使いやすく堅牢で使いやすいUIを効率よく設計するっていう
サブタイトルのアトミックデザインじゃなかったっけ

あとあれかCSS的にはなんか徐々にこうCSSっていう扱いづらいものがあって
そこからVEMとかなんかそういうクラス名の付け方でCSSを堅牢にしようみたいな話が始まり
そこからCSSモジュールとかそういうのが技術的にスコーピングをちゃんとやろうみたいな話が出てくるみたいな
そういうような流れもあったからコンポーネントが実現しやすくなったっていう話もありますね
まあっていう中2016年頃のアトミックデザインっていうのは結構なんか
それがそのまま現代に直結っていうわけにはいかなかったけど結構なんか取り組みとしては
あったなというやつですよね
で多分徐々にこれぐらいから行政機関にもデザインシステムをみたいな流れが始まっていて
UKのGovernment UKっていうデザインシステムとかが結構有名だったりとか
でおそらくそれを元ネタというか参考にしてデジタル庁も
デジタル庁のデザインシステムっていうのを取り組もうとなったんじゃないかなと
まあこれ推測ですけど

なんだっけなんかどっかの国がさすごいそういうのは積極的にやってるとかあったじゃないですかなんだっけ

あーエストニアかな

あーそうそうエストニアだ
エストニアとかも結構すごいやってた気がするんだよな

確かになんか2018年頃エストニアデザインシステムっていうのは結構行政系ではなんかよく言及されてたな
あー懐かしい
確かエストニアはどっちかというとブランディング寄りのデザインシステムみたいな感じで
なんか行政としてもちゃんとブランディングをやってデザインシステム定義して
誰しもがそれをに沿った行政のシステムを見えづらとして作れるようになるみたいな
なんかこう話が出てきたような記憶がありますね
そうなんか当時あのクックパッド2018年ぐらいに僕と倉光さんと2人で
シトラスっていうなんかエプロンがどっちかエプロンじゃない皿が実装寄りというかプロダクト寄りだったから
もうちょっとそのさっきのエストニアの事例みたいななんかそのブランド寄りのところもカバーするデザインシステムが必要なんじゃないかみたいな話の中で
シトラスってやつを作ったんですよね
社外には公開しなかったけど社内でやってて
1:12:03

だから結構なんかそのブランディング的な領域にもデザインシステムみたいな流れもなんかその辺りから
2018 2020年前後ぐらいから出てきたのかなっていう気がしますね今思うと

ブランドエストニアってエストニアが公開しているデザインシステムのなんかイントロダクションのページをちょうど見てたけど
まあすごいわかりやすい図があって一番外側にこのブランドエストニアっていう
エストニアのブランドとは何かみたいなのを多分定義したものがあって
その中にデザインシステムっていうものがあってさらにその中にデジタルデザインシステムっていう
具体的なより具体的なコンポーネントがあるみたいな話だと思うけど
っていうようなこうもやっとした抽象化された図があるんだけど

まあ非常によくわかりやすいなっていうふうにもうねなんかそういう構造的なものっていうか
この2018か2020年代ぐらいにデザインシステムの領域がより拡張されたというか
拡張されたというかまた元に戻ったというかなんだろうなさ
初期のあのNASAの話と
まあ要はブランディング的なそのブランドガイドラインと合流したみたいな感じなのかな
どっちかっていうと
その後僕2018年に
ああそうか2017年ぐらいの時にUKに
コクバトンUKに行ってでその時なんかエストニアに
なんでだ違うわ次の年かななんか全然覚えてないけど
なんかエストニアに行く機会があって
旅行かなんかで
でなんかその時になんかブランドエストニアみたいな
なんか政府がやってるなんか公共のなんか場所みたいなのがあって
そこなんかちょっとフラッと行ったんですけど
なんかこのブランドエストニアで定義されてるの前提として作られた看板とかリーフレットとかが
なんかいっぱい置いてあったなっていう記憶があって
なんかすごい一貫してんなみたいなすごい思った覚えがあるんですけど
そういうのをちょうど得られ始めた時期ですよね
2018年前後
まあというので
徐々に最近2020年以降になってくると
行政機関がデザインシステム出すっていうのは
そんな珍しい話ではなくなってきたかなと思うし
またなんかB2Bの領域でもいろんなデザインシステムが立ち上がるっていう話で
IBMのプレックスとか
IBMのデザインシステムの中のプレックスっていう書体とかあったりしますけど
なんかそういう独自書体を作るみたいな動きとかもね
あってそれをデザインシステムの一部として提供するみたいな流れ
1:15:00

独自書体を作ること自体は昔からあったと思うんですけど
それをデザインシステムの一部として公開していくみたいな話とかね
あったりそういうB2Bの世界でもデザインシステムって必要だよねみたいな話が結構
当たり前になってきたのかなっていうふうに思いますね
なんかなんとなくなんかデザインシステムっていろいろ世の中にたくさんある中で
なんかなんとなく4証言で競り切るかなと思ってて
X軸になんかプロダクトかブランドかみたいな軸があって
でY軸になんか特化何かに特化してるのか何かにより汎用的なデザインシステムなのかみたいな
こう軸があるかなとでなんかその4証言でなんとなくなんか
いろんなデザインシステム整理できるかなと思ってて
なんか初期に出てくる出てるデザインシステムってどっちかというと
まあ事業会社が出しているプロダクト特化したプロダクトよりのデザインシステムですみたいなものが
多かったと思うんですけど
そっから徐々にこうコミュニケーションとかブランディングみたいな領域もカバーするようになって
それからスマートHRのデザインシステムとか
もうプロダクト以外も含めてプロダクトブランドっていう軸の中で
かなり中間というか両方カバーするっていうデザインシステムであるし
またさっきのBtoBとかになってくると
どっちかというとプロダクト1個に特化するっていうよりは
なんかより汎用的なデザインシステムっていうなってくるケースが多いかなと思ってて
なんかまあ行政系とかもそうだけど
まあより汎用性の高いデザインシステム
どっちかというとマテリアルデザインとか
そういうのにちょっと近しいというか
みたいなものもこう登場してくるみたいな
っていうなんかこうデザインシステムの適用領域がかなり広がったなっていうのが
やっぱ2020年代以降の話なのかなっていう風に思うんですよね
っていうので
まあじゃあでまあ今ここみたいな話なんですけど
じゃあまあ逆に今後未来はどうなるのかなみたいな話
まあこれはわかんないけど
なんかこう考えるこう筋みたいな
まあ何本があるかなっていう気はしていて
なんか1個はなんかアトミックデザインを提唱していた
あのブラッドフロストが最近ブログ書いてて
グローバルデザインシステムっていう記事をなんか書いてるんですよね
でまあこれはまあ要約すると
まあみんな個別にデザインシステム作りすぎじゃないみたいな話なんですよ
でなんかグローバルなデザインシステム1個あって
なんかそれをベースにして
まあ味付けを変えてここに作っていくっていうやり方ができたらいいよねみたいな
なんかまあすごい飛躍するとそういう感じ

まあマテリアルデザインとかそれに近いよね
割とあの結構その細かいディテールは結構カスタマイズできたりするじゃないですか
マテリアルデザインも
だから割と思想的にはすごく近い
まあプラットフォーム寄りの話だよね多分きっとこれって
1:18:02

そうですね
なのでそこからGoogleというプラットフォーム自治を抜いたものっていうのが
この人が言うにはグローバルデザインシステムとしてあるといいんじゃないみたいな話をしていて
でそれを支える技術としては
まあ最近ヘッドレスUIっていう
まあこれもなんかフロントエンドの変遷と
フロントエンド系のライブラリのUIライブラリの変遷としては
まあツイッターブーストラップとかCSSフレームワークが出てきて
でそこからなんかチャクラUIとか
なんかそういうリアクトとCSSのスタイリングがどっぷり
一緒になったようななんかライブラリが流行り始めて
でそこからなんかそうすると
スタイリングと構造骨格がベタでベタつきにくっついちゃってるから
ちょっとなんかやりづらいよねみたいな話が出てきて
それを分離した骨格だけを分離したヘッドレスUIっていうのが出てきて
だからまあ骨格だけはいろんなUIの骨格だけは提供して
そこに対して個々のプロダクトで側を当てましょうっていうような
発想のものがヘッドレスUIっていうやつなんですよね
で最近まあそういうまあそれが徐々に徐々に終了になってきていて
リアクトアリアとかハークUIとかそういうものがあるんですけど
だからまあそういうものを使ったら
まあそのマテリアルデザインからグーグルミア抜いた
グローバルデザインシステムっていうのが作れるんじゃないみたいなのを
このブラッドフロストさんが今ブログに書いてたりしてましたね
でも結局それって誰がメンテナンスするのっていうような話になってくるので
まあこの人が言うにはW3Cがそれを提供するのがいいんじゃないか
っていう風に言ってるんですけどね
まあっていう試行実験みたいなものが出てきていて
まあただまあ実際確かに
まあ実際僕も今デザインシステム作る仕事してるけど
全部を個別でオーダーメディで作るって必要は全然ないよな
っていうのはすごく思うところではあって
まあマテリアルデザインっていう結構共通の知見として参照できる
すごい優秀なものがあったりとかして
作り方っていうのもかなり体系立てられてきた感もあるなと思ってて
デザイントークンっていう考え方とか
それをプリミティブトークンとセマンティックトークンに分けますみたいな話とか
っていう知見がない時代は個別全然違うものって見えてたものも
裏側にはこれ共通してるんじゃないみたいなのが見えてきたっていうのが
ここ最近なのかなっていう話は感じるので
こういうような話が出てくるのは自然だなとすごい思いますね
そうだね

なんか実際多分先行するのはこういう
どっちかっていうとエンジニアリングというかプログラミング的なところの文脈っていうのが
絶対先行すると思うんだけど
多分一方でデザインツール的な文脈もやっぱり今は結構無視できない感じがあって
1:21:00

それを今頑張って先導してるのがフィグマなんだけど
多分フィグマがもしかしたら全然別のツールが出てくるって可能性もあるけど
フィグマがどういうふうに対応していくかによって
僕らがそれをじゃあどういうふうに仕事が変わっていくのかって結構大きく変わっていくっていう時代でもあるよね今は

そうですね
だからスケッチがコンポーネントベースでUIデザインするのを当たり前にしたように
フィグマがまた時代を変えていくっていうような感じなんでしょうね
そうだね
話してて思ったけどやっぱりこの辺はデザインツールとフロントエンドの技術と
あとはデバイスを取り巻くコンテキストの進化みたいなところっていうのが
お互いに依存してんだなみたいなのを思いますね

そうだね
でもなんか偶然じゃないのかな別に
偶然とリアクト的なものが生まれてきてる中でスケッチも生まれたっていうわけでもないんだろうな
きっとなんか影響し合ってじゃあインターフェースもこういうふうに作ったほうがいいよねみたいな
考えたスケッチとかそういうツールが生まれてきてるんだろうねやっぱりきっと

そうですね

多分なんか色々影響し合ってるんだろうねやっぱりそこは

そうですね
まあだから当然デザインツールに求められる進化っていうのはどうしてもなんかごてごての進化だと思うから
進化が早いのはやっぱりエンジニアリング良機な気がするから
それに負けずにフィグマに向きたいっていうような感じですね

フレーマーとかはねめちゃくちゃ先進的な時もあったもんね

そうねかなり攻めすぎた時代

あれはもうだってエンジニアリング側の方からデザインツールを作ってやろうみたいな流れだったじゃんどっちかっていうと
だからすごい先進的だったよね

攻めすぎてオーバーナーしちゃったみたいな感じですけどね
いやあれは面白かった
面白かったよね
そうねそのフレーマーとかが出てきた時代
Airbnbとかも結構先導してて
いろいろ先進的取り組みをしてたなっていう
なんか上々して結構大人しくなっちゃったけど

Airbnbも結構初期にデザインシステムとか公開したところなんだよね会社として

デザインチームとかがすごい

ブランド変えてみたいな

あとなんかデザイン言語みたいなのを定めましたみたいなブログもよく書いてたりとか
と思えばなんかスケッチ手でうにょうにょって書いてあるフレームを写真撮ってコードに起こしますみたいな
今にはLLMみたいなことをしてて

すごいことやってたよねなんかあの頃のAirbnbのチーム

いやだいぶそうあの頃のAirbnbかっこよかったですね

かっこよかったよね
今でもあのなんていうのなんだっけ思わせすぎちゃった
1:24:02

あのアニメーションツールとかもあるしね

使われてる
そこから生まれたのがロッティね

ロッティ系のサービスというかフレームワークみたいなの作ったから

確かにあの攻めた中から生まれてきて今でも定着してるのがロッティっていう面白いですね

結構あの頃はやっぱり早かったんだよね
デザインシステム公開したのは確かAirbnbとか
あとドロップボックスとかかな結構早かったのは
なんかどっちもなんか今そんなこうおとなしくなっちゃった感じがするけど

今思い出したけどAirbnb
僕当時めっちゃその辺なんかストーキング
ネットストーキングしてたからあれなんです
あの覚えてるんだけど
なんかデザインシステムの今でいうフィグマのバリアブルズみたいなやつを
使うためのツールみたいのを
なんかあるスタートアップが作ってて
それを買収して人材獲得目的で買収して
社内でもそういうフィグマのバリアブルズ的なツールをなんか作ってたんですよね
Airbnbって

それをなんか

GitHubでソースコードだけ出してて公開してて
でなんかそれビルドしたら勝手に誰でも使えるよみたいなやつで
なんかビルドして使ってみたことあるんだけど
なんかかなりフィグマのバリアブルズにちょっと近かった

頑張ってやってるやつがあった気がするな

バリアブルズ
そうかなりいろいろ頑張ってやってたなっていうのを覚えてる
まあなんかその人後々上場した後に辞めて
どっちかというとWeb3の人になってたりとかしてたんですけど
まあっていうね
何の話だっけ
ああそうそうそう
まあなんかAirbnb結構先進的な話してたし
ああそうだグローバルデザインシステムね
ブラッドフロストの
まあとか
まあだからなんか徐々になんかこう別に作ること自体は当たり前っていうか
別にそんな珍しいことではなくなってきているデザインシステム自体が
だから
まああの前も話したけど
フィグマのカンファレンススキーマとかフレームワークって
この間でやったカンファレンスでもそうだけど
徐々に運用をいかにするかみたいな話に
まあテク系の企業海外のテク系の企業集中結構多くて
でまあなんかやっぱそれも
まあ改めてデザインシステム作る仕事をしてると当たり前だなという風に思ってて
結局システムって組織の構造を表すから
だからなんかこうシステムを作るってことはやっぱり組織をどう作るかみたいな
話と表裏一体だからこそ運用の話が出てくるんだなっていう
で最近なんかそういう流れの中で一個面白いなと思ったのが
この間のフレームワークのイベントにフリーが登壇してたんですよね
1:27:00

フリーのデザイナーの方が登壇していて
でそこで発表してた内容がやっぱそうなるよなと思ったんですけど
なんかこうこれまでのデザインシステムって結構
アトミックデザインでいうアトムみたいな抽象度の高いパーツを提供して
でそれを組み合わせて皆さん画面を作ってくださいねっていうような思想だったんですけど
やっぱそれだとなかなか運用を考えていくと難しいところが出てくると
例えばやっぱそのボタン部品の使い方ってその使い方がやっぱそれぞれ違ってくるから
本当の意味で一貫性を担保するのがなかなか難しくなってくるとか
あとはなんかこう部品個々にアップデートが走ってくるので
ある部品はあるプロダクトのある部品は古いものが使われてるけど
あるプロダクトのある部品は最新のものが使われていて
デザインシステムって一貫性を担保するものなんだけどやっぱ一貫性が担保できなくなってくるみたいな
なんかそういう話ってやっぱ運用を考えるとやっぱリアリにある話だし
なんかCookpadでもなんかデザイン
あの皿の中の使われてるパーツを
デザイナーが個々のプロダクトでアップデートして回るみたいなことをやってたような気がして
だからなんかそこに対してフリーの人が発表してたのは
これからはアトムティールードの提供じゃなくて
それを組み合わせたそのモレスキューだっけ
パターンを提供するっていう話

なんか資料だとオーガニズムとかテンプレートって言ってますね

あそうそうオーガニズムの例か

より組み合わせてるやつですね

そうそうそうそう
だから特にやっぱfreeみたいなB2Bの領域だと
そのパターン化が比較的しやすいっていうか
パターン化イコール業務フローみたいな話になってくるから
あのあれですよね
本山さんが前話してたプロセスビジョナリーみたいな話
で業務フローをいかに分析して
それをデザインに落としていくかみたいな話になってくるから
適切に業務フローが分析できていれば
そこでこのフローとこのフローは近しいよねみたいなところが見出すことができて
そこでパターンっていうのが使えるんじゃないかっていう話
UIのアトムレベルに分解しなくてもいいんじゃないかっていうような
だからそれによってデザイナー
パーツの組み合わせをデザイナー任せにすることが少なくなるので
一貫性をより担保できるんじゃないかっていうような話なんですけどね
ざっくり言うと
っていうのがこれはなんか一個あるなと思って
確かにアトムを組み合わせて画面を作るっていうのは結構
年度が求められるというか

そうね

ひょっとしたらなんかこう
モビンとかデザイナーが見るギャラリーサイトみたいなのあるじゃないですか
そのフィードUIだったらこういうやつとか
パターン集みたいなのがあると思う
1:30:00

ギャラリーサイトみたいなのがあると思うんですけど
なんかそういうようなイメージで
フィードUIを作るんだったらここのパターンからまずコピペするみたいな
パターン
アトムから入るっていうよりはパターンから入るみたいな
作りのデザインシステムっていうのはもしかしたら今後増えるのかなみたいな

そうですね
でも多分パターン作る
用意していくのって結構多分
いろいろ頑張って作って用意しなきゃいけなくなるから
それなりにパワーリソースがあるところじゃないと難しそうですね
とかもしくはその
わかんないけどそのB2Bみたいなある程度利用制限される
利用されるところが限られているところだったら
そんなにいっぱいパターン作らなくてもいいかもしれないとか

そういうところはあるかもしれないね
だからB2B利用制限とかそういうところだと
テンプレートレベルのものを提供しますみたいなのが今後増えるかもなと

そうだね
だからアトムとかその辺を使ってデザインする人っていうのは
本当に一部の人に限られるってことだよねきっとだから
後々パターン化することを前提に作るとかっていう
思考になるのかもしれないよなんか作る人は

で実際なんか前
本山さんとか池田さんとも話したけど
なんかそのデザインするときにゼロから作り始めるって
あんまないと思うんですよねその事業会社の中で
その新規事業とかじゃない限り
基本なんか既存のなんかページをベースにして
UIを考え始めるみたいなことが多いと思うから
まあそういうワークフローとしてもなんか理にかなって
その方が理にかなってるなっていう気がしていて

そうだね

でこの話はデザインの文脈の話なんだけど
それをちょっとエンジニアリングに置き換えると
フロントエンドの中でも同じような流れが起きていて
それが何だかちょっと話してるけど
ShadCNっていうデザイン
これは何て言ったらいいんだろう
フロントエンドのUIライブラリみたいなものなんですよ
でこれはさっきの
またこれもゆり戻しみたいな話で
ヘッドレスなUIライブラリっていうのが出てきました
ただ多くのフロントエンドのエンジニアにとっては
ヘッドレスなUIを使って
に対してCSS側を当てて
UIを作るっていうのは結構めんどくさいっていう話の中で
だからいい感じの薄いスタイルが当たっている
プレーンなスタイルが当たっているUIライブラリが
やっぱり欲しいみたいな流れなんですよ
そこの中で出てきたのがShadCNっていうやつで
これ結構出てきたんですよって言っても
まだ今年とか去年末ぐらい
ここ1年ぐらいの話なんですけど
結構心をつかんだのか人気になってきているんですよね
1:33:02

でもさっきのグローバルデザインシステムとかの話に
ちょっと近いよねある意味

近いと思う
だからそのままでも使い始められる
だけどテーミングしようと思えばテーミングできるみたいな
そういうようなやつ
これも受けているのって
UIのパターン集みたいなのがこのShadCNの中でも提供されていて
要はAtomoよりももうちょっと
具体度が高いパターン集が提供されていて
コピーするだけでUIが作れるっていう
僕的には現代のTwitterブートストラップだなっていう風に思ってるんだけど
だからより速攻性とか
イージーな感じが求められているというか
それを現代の技術を使って
作っているっていうことだと思うんですけどね
この辺がTailwindとか最近の人気のCSSのライブラリとの相性も相まって
最近ここを

確かにTailwindとの相性はいいのかもしれないな

そうなんですよ
薄いデザインシステムというか
だからさっき言ったB2Bとか行政とか
結構大規模なものだとさっきのフリーの話みたいな
テンプレートベースのデザインシステムみたいなのが
主流になってくるかもしれないし逆に
スタートアップとかよりライトなものを求められる環境では
こういうShadCNとか使って
できあいのものをベースにしてデザインシステムを立ち上げるっていう
大ダメージで作らないっていうところの
作りが主流になってきそうだなという感じですね
さらにそこを推し進めるとしたらっていうところで何度か話しているのが
生成AIを絡んできたV0
バーセルがやっているV0というサービス
生成AIベースのやつで
これはShadCNとかを使った
UIを剥くっていうやつ
生成するっていうやつなんですけどね

前もちょっと話していたけど
この生成AIでデザインよっていうところをちょっと飛び越えて
生成AIでデザインシステムをっていうところに
だいぶ届いてきそうな気がしてきましたよね
感覚的に

これもやっぱり人が求めているのはアトムじゃなくて
パターンであるみたいなところなのかなと思っていて
パターンをフリーの場合は業務を分析して
自社の製品だから頑張ってパターンを作りますって話だけど
もうちょい汎用的で01の領域で使えるものとしたら

生成AIでいいじゃないかっていう話だと思うんですけどね
よく考えると生成AIでデザインを作るよりも
デザインシステムパターン化されたものを作る方が
圧倒的に得意なんじゃないかっていうのはその通りな気がするっていうかね

そうなんですよね だからデザインシステムの歴史を振り返ると
1:36:00

現状としてはやっぱりパターンであるっていう話で
じゃあそのパターンを最も扱うのは得意なのは何かって言ったら

LLMなんだなっていう そうそうそう
だからそれは相性いいだろうなっていう気がするよね

そりゃそうだなと思いましたね

だからそういう流れは多分ここ1,2年というか
今年ぐらいには起こりそうな気がするね やっぱり

そうなんですよ デザインシステム作ってるとき
結局考えてることってこのパターンは汎用性があるかとか
このパターンはどれぐらい登場するものなのかとか
命名規則は何なのかとか そういうことばっかなんですよ

ルールを設計とかをしてるような感じだよね 本当に

本当機械が得意な分野だよなと思うんですよね やってて
まあそうだね だからやっぱ
人間はより抽象度の高いブランディングみたいな話
CI, VIみたいなところの設計とかをして
でそれを生成家に加わせて
VIをベースにしたV0、バーセルのV0みたいな
生成AIのUIパターン作成ツールみたいなのが
パターンを作り
それをどう運用するか組織をどうするかみたいな
そういうような役割分担に
ここ1年ぐらいになってくるんじゃないかなっていう風に
思っているんですけどね
っていうのがなんか
直近2,3年の未来が見えそうな未来かなと思っている
感じですね
っていう話で
オチはそんなないんですけどやっぱ歴史を振り返るとやっぱ
パターンをいかに扱うかっていうところは
最初の1970年代のパターンアランゲージのところから
なんかあんま変わってないんだねやっぱりっていうのは
歴史を振り返ると思うところで

工学っぽいよね
再現性を求めていくみたいな感じがあるから

そうですね
自分的には割と得意という
得意分野というか
やってきたことが活かされる余地が大きいので
だからやる機会が多いんですけどね
でもやっぱり
突き詰めてやっぱり組織の話になってくるんだなっていうのは
ほんとここ数日思ってて
組織運営どうするかみたいな

結局システムというか設計を作ってもそれが
使われたり運用されなかったら何の意味もないからね
そうなんですよ
スマートHRが書いてた本っていうのはすごい良いなって思うよね
ちゃんと使われるものを作って
積み重ねていきましょうっていう話だからさ
なんかあんまりこうね
ドンって大きいフレームから考えなくても
良いんじゃないのかなっていうのに行き着くのは

そういう理由なんじゃないかなって思うよね
そうですね
1:39:02

確かにやっぱスマートHRの本はすごい良い本ですね
そう思うとか

っていう昔話でしたね

昔話でした

なんか久しぶりに
extjsの話とかで盛り上がってちょっと僕は面白かったな

本ギャップ
本ギャップ

いやでもあの頃ほんと
夢みたいな世界だったんだよなスマートフォンの

ブラウザーの世界って

もう一個懐かしいワード思い出したタイタニウム
タイタニウムあったね
タイタニウムの方が僕結構馴染み深いわどっちかっていうか
本ギャップよりも

タイタニウムの方がちょっと触ってた気がするな
なんかその二大巨頭でしたねそういえば

どっちが本命なのかみたいな

タイタニウムで作ってる人とか結構いたもんねアプリとか
あったんじゃなかったかな確かタイタニウムだったか

本ギャップだったか
いやでもなんかそれもちょっと僕はまた昔話になって
あれだけど
そういう流れができたのもある意味
ジョブスが決断したかわかんないけど
ジョブスがこんなのネイティブアプリみんな作らんやろ
つって一回webアプリの方に振ろうとした結果
ブラウザーが強化されてそういう流れができたのかなっていう気もしてるっていうね
結局みんなネイティブアプリの方が体験もいいし
そっちに流れていくことになっちゃったんだけど
だから全部廃れていくことになるんだけど
でもそのおかげでなんかブラウザーが結構ガーって進化していったっていう流れももしかしたらあるのかなっていう気はするっていうね

そうですねでもそれはありそう
ジョブスがフラッシュを殺さなかったら

そうそうそうそう
どうなってたかまた違う世界線が生まれてた可能性あるよね
フラッシュが生き残っている世界線で

それこそフラッシュ時代の終盤の方って
フレックスとかそういうのがあって
フラッシュの技術でデスクトップのアプリケーションも作りましょうみたいな話がありましたよね

だからそっちが生き残っている世界線あったよね
もしかしたらジョブスが殺さなかった

アドビが覇権を握ってる可能性はありましたよね

あったあった
未だにだからフラッシュ作ってアプリとか作ってる可能性があったよ世界線としては

確かにねみんなブラウザーIEを使っててその上でフラッシュが動いててみたいななんか世界線はあったかもね

なんかアドビ本とか出てる可能性あったよね

そうしたらフィグマも出てこなかったかもしれないね
わかんないなちょっと
当然そうするとブラウザでデザインするなんてあんま遊びなかったかもしれないし
いやーそうか
やっぱアップルの存在はデカいんだな
1:42:00

iPhoneの影響はかなりデカかったんじゃないかなやっぱり
モバイル端末ウェブ環境含め

そうですよ
いろんなところに影響を与えてる気がするね

いやなんかこういう昔話はずっとできちゃうな

そうっすね

こういう昔話はみんな聞きたいのかな聞きたいのかどうかわかんないけど

いやこのポッドキャスト聞いてる人はだいたい同じ年代じゃないですか

聞いてる年代をなんか統計的に見てるとだいたい同じ年代の人だから
なんか多分通ってきてる道なんだろうとは思うけどね

まあどれぐらいエンジニアの人が聞いてるのかっていうのはわかんないけど
でもなんかやっぱあの時代はデザインとエンジニアリングが
交互に影響を与え続けていたっていう感じなのかなと思いましたね

それは確実にデザインシステムの歴史としてそういうのはあるよねやっぱり

まあ中間点ですからねちょうど波打ち際というか

そういう意味では結構面白い分野ではあるので
じゃあちょっとそろそろ終わります

お返し話でした

リサイズヘムのご質問やご感想リクエストなどは
Xにポストしていただくか書ノートにあるお便りのリンクから送っていただければ
配信内で取り上げたりしますのでどうしどうしいただければと思います
リサイズヘムは毎週金曜日に配信しています
Spotify、Apple Podcast、YouTubeなどで配信していますので
よかったらチェックしてみてください
ということで今回はここまでまた次回お会いしましょう

さようなら