ep.30 「デザインシステムにおけるフロントエンド」公開AMA in DEV DAY Venue | UIT INSIDE

2019/12/02 に公開2675 views

このエピソードについて

LINE DEVELOPER DAY 2019 スピーカーである okazou に、@potato4d, @kotarok, @myakura の三人で登壇内容についての質問・座談会を実施しました。

Guest

デザインシステムにおけるフロントエンド

LINE DEVELOPER DAY 2019 Day 2 での @okazou の発表
https://linedevday.linecorp.com/jp/2019/sessions/A2-3

https://speakerdeck.com/line_devday2019/front-end-in-design-system

LINE のデザインシステム

LINE DEVELOPER DAY 2019 Day 2 でのもう一つの発表
https://linedevday.linecorp.com/jp/2019/sessions/A2-2

https://speakerdeck.com/line_devday2019/line-design-system-making-line-product-faster-without-losing-consistency

Talk keywords

採用について

使用素材・クレジット

BGM&SE

音声書き起こし

1. オープニング 00:00

Guest 00:00
こんにちはこんにちはちえ、今週もUIT INSIDEやっていきたいと思います。え、まず、初めにこのポッドキャストについて説明させてくだ

Guest 00:08
ください。え、このポッドキャストはえ、ユーザーインターフェースとテクノロジーを愛する開発者たちが、最新のフロントエンドの動向について語るためのポッドキャストです。

Guest 00:18
毎週最新のウィル標準の動向や開発、フレームワークの変遷、またまたuiやuxに関することまで

Guest 00:25
最新のフロントエンドの状況をキャッチアップすることを目的としております。え、今回はですねえ、ラインデベロッパーで特別会ということでですね。

Guest 00:33
本日は、ラインデベロッパーデーの会場にて、スピーカーである。え、岡崎さん

Guest 00:38
とえ、今回ゲストのお2人として、え、小久保さんとやらさんえを含めて、え、私、あなたにが進行進めさせていただいて、4名で収録していこうと思います。よろしくお願いします。

Guest 00:51
それではですね、早速ですけど、まあ、ちょっと今回えやくらさんこさんはえ、外部ゲストってことでえしょえ、招待させてもらったんで、まず、2人自己紹介をお願いしてもよろしいでしょうか。

2. ゲスト紹介 00:52

Guest 01:01
はい、私gmoペパボのえ、小久保と申します。デザイングループのマネージャーというのをやって、全社的なデザインを見ております。

Guest 01:10
はい、私やクラと申します。株式会社、ピクセルクリットっていうえ、ちょっと前までジャバスクリプト、今、ジャムスタックの会社と呼んでるところで、フロントエンドエンジニアを

Guest 01:22
して、一応追います。はい、

Guest 01:25
よろしくお願いいたしま、

Guest 01:26
よろしくお願いいたします。

Guest 01:28
ではですねえ、早速本題に入っていきたいんですけど、え、今日はですね。今、ラインデベロッパーでえ、会場からえ、ちょうど今まだ開催中なんですけど、その場でえ収録してるわけですけど。

3. 岡崎のセッションについてと感想 01:30

Guest 01:38
今回ですねえ、我々フロントエンドの組織からはですね。以前もえ、ポトキャスに出演してもらってる。え、岡崎さんの方がデザインシステムについてえ、登談されたっていうところ

Guest 01:48
ですけれども、え、まず初めにですね。今回聞いてもらってる人に、え、どんなセッションの内容だったかっていうところをえ、概要についてお伝えしていただいてよろしいでしょうか。

Guest 01:57
はい、私のセッションは、

Guest 01:59
デザインシステムにおけるフロントエンドという話で、まあ、うちの場合、デザインシステムがアプリとウェという両方あるんですけど、主にウェブの方を中心に、そして、フロントエンドを中心に概要をお話しさせていただきました、

Guest 02:11
ありがとうございます。詳細はですね、ラインデベロッパーデのサイトの方にですね。どんなセッションだったかっていうのは、載っていると思うんで、え、そちらの方え、参照していただければと思

Guest 02:20
いますが。え、今回はですねえ、その内容を踏まえて、ライブゲストから見て、その発表がどうだかだったかっていうところ聞いていきたいと思うんですけど、

Guest 02:28
お2人どうでしたか。

Guest 02:30
そうですね、あの、まあ実際ぶっちゃけ。今、自分の会社でもデザインシステムの開発に取り組んでいるというか、取り組み始めたところなんですけど、はい

Guest 02:40
ま、僕、その1つ前のライン。あの、ジェイクさんのセッションも見させていただいたんですけれども、まあ、両方見るとですね。

Guest 02:47
あ、LINEさんやってってるなっていう感じですね、頑張ってるみたいや、素晴らしいなって感じですね。

Guest 02:54
なるほど、やくらさんはどうでしょうか。

Guest 02:57
そうですね、あの、LINEぐらいには、やっぱりユーザー数とか規模とか、まあ、いろんなサービスは多分展開されてるので、そういうところに

Guest 03:06
あの、やっぱりそのえ、同じバボタンにも色々あるとか、え、グレーンの種類もいっぱいあるとか、緑もいっぱいあるから、あ、それをなんとか投合していきたいっていうとかで、デザインシステムになるっていうのは、すごく

Guest 03:19
あの納得のいく話だし、それがこう問題となって、表層化していくぐらいの。やっぱ規模感になってるんだなってすごいなっていう。やっぱり、20人見たないぐらいの自宅なので、

Guest 03:30
そういうな規模にちょっと動かされましたね。はい。

Guest 03:33
ちなみに、あのクローズボタン1つとっても、はい、あんだけ種類あるのって、はい、見て

Guest 03:38
と思いました。なんか、すごいな

Guest 03:40
そう、あのままですよね。って、それ

Guest 03:44
ボタンだけ並べられたらうんってるんですけど、実際に使われてるところを想像すると、多分なんかそれぐらい増えてしまうので、気持ちはわかるなっていうのは思っていて、アイコンも多分統合したとはいえ、

Guest 03:56
多分まだいくつか。あの、多分同じようなものが並んでるのもちょっとセッションの中でみ

Guest 04:03
たのもあったんで、多分ほんとに必要な重複とそうじゃない。重複がまだあって、それを整理してる最中なのかなみたいなことになりました。

Guest 04:12
僕はなんか2つのセッション見て、まあ、すごいあ、うまいことやってるなっていう風に思ったんですけど、と同時に、やっぱりその最近。

Guest 04:21
デザインシステムっていうトピック自体がだいぶこうポピュラーなのと、

Guest 04:25
やっぱりこのなんていうんですかね。今の時代、そういった皆さん、アシャの取り組みがオープンにされていくので、そこでの誰っちも。

Guest 04:33
1周も結構ま共有されてるんですよね。っていうのを見ると、なんか割とそのなんですかね。あの

Guest 04:41
色がいっぱいだとか、あの、アイコンのボタンが黒酢ポタがいっぱいだとかっていうのも、

Guest 04:45
これはよくあるやつだなっていう感じで、どこもやっぱ同じ問題発生しちゃってんだなっていうで、そこに対して、じゃあ、どういうソリューション導入するのかっていう点についてもなんですかね。あの、

Guest 04:56
お聞きした内容とか見ると、割とこう報道の内容をうん、すごい取り組まれてるなっていうのがあって、ですね。なんか、こう

Guest 05:04
安心感あるというか、まあ、僕もそういうやり方でやろうとしてるので、やっぱそうだよねっていう感じにはなりますね。過去にもやってるし、過去にもやってるし、そうそうそう、

Guest 05:14
落ち着く先はみんなこうなんま、そうですね、

Guest 05:16
なんか、やっぱスデーションはなんかこう収束してくな

Guest 05:19
ま外から聞いてて違和感ないそう。僕はその中にもないけど、別にその話を聞くとそうなるよねっていうのは全然おかしくはないな

4. デザインシステムとして統合する悩み 05:27

Guest 05:27
あ、ただ、はい、すいません、

Guest 05:30
こういう時にやっぱれにルクの色なんですよね、これ、色こんなにあるんですよつって、やっぱこれをまとめてこんだけにしまわって、よくあるやつなんですけど、

Guest 05:39
僕、ちょっとある疑問があって、ほんとにそれ正解かなって思ってる時もあってっていうのも、色って、その

Guest 05:47
べベースの色が何で、その上に何が置かれてるかが、隣に何があるかっていうその

Guest 05:51
周囲のものの色によって、その知覚的な色で、めちゃめちゃ左右されるはずなので、カラーコードでピックアップしていっぱいあるからまとめました。で、パレットにした時に全部綺麗に見えて、こんだけあればオッケーですね。っていう

Guest 06:04
話で、ほんとに終わっていいのかなっていうのはあって、なんかそれはなんかこう

Guest 06:09
はるか、昔のなんか、色彩論の時代から、そういう色の創刊性によってこう。実際の色と見えて、色は違うよねって話は色々あった上で、グラフィックデザイナーが、そこは色々手心を加えて、色んなものを作ってきたっていう

Guest 06:23
歴史。

Guest 06:24
おなんかいっぱい今置いといて、そういうデザインシステムっていう文脈だと、カラパレットまとめてオッケーみたいな話に走ってるなってのは、ちょっと感じたりしてるんです。

Guest 06:33
ま、それって、それらのそれぞれのグラウンドを尊重してるんだっけ、みたいな話ですよね。や、

Guest 06:38
例えばですね、あの、じゃあ、LINEグリーンはいのオブジェクトになんかの隣なんかこうなんだろうな。グレーの文字がきますっていう話と

Guest 06:48
なんだろうな白い。なんか、オブジェクトの上に同じようなグレーの文字がきます。っていう

Guest 06:53
で、それがカラコード的に同じだったとしても、果たして見た時に同じ印象なのかっていうか、そういう事情で、もしかしたら、現場現場でデザイナーがちょっとした色んなバレーション作っていったのが、まあ不でみたら色ありすぎじゃんって話になったのかなとかっていうケースもあるんじゃないかなって思ってます。

Guest 07:08
ナビットのなんですかね、dxに振って今になってるなあ、なるほど、デザインシステムっていうので、そのエンジニアがいうデザインシステムだと、なんかそういうのが起こりがちだなって。統合

Guest 07:22
した結果、角なま角かどうかはまだですけど。

Guest 07:27
そう違和感が出てもおかしくないなっていうぐらいの。そのなんか、東廃後が進んでるのかなっていう気はしま。

Guest 07:36
なんか結構エンジニアらしく、気化学的な。その合理性みたいなのが、それこそ色んな見た目って気化学的にどうか、ま、そのデザインの位置とかもそうだと思

Guest 07:46
ですけど、ほんとに中央かどうか問題って、あの見え方的に中央かと気学的に中央かって全然違う問題と同じなのかなっていう気はしてるんですけど、なんか、中の事情を知ってる

Guest 07:56
側で言うとけ。管理画面とかで使われるから、これで

Guest 07:59
で共通化って問題がないっていう印象だったんですけど、岡崎さん的にその辺ってどういう感じですかね。今の

Guest 08:06
そうですね、まあ、その意図があるかどうかが結構バチで糸があってま。カラーをちゃんと使ってるんであれば、別に何色でもいい。

Guest 08:13
確かですけど、例えば、なんかあまり意図がなくて、単純にデザイナーが複数にいて、皆が違うグレーをするっていうのは、避けたいというポイントで。そうですね、あの

Guest 08:23
崎さんの前、ジェイクさんはシンです。でも、あのカラーコードだけではなくて、そこに意味を持たせるみたいな感じで、あのテキストのカラーのなんでしたっけ。

Guest 08:32
大見出し出しみたいなので、こうに行ってたみたいなのがあるので、なんかそういうので、ちゃんとバリエーションが決まってるだからかな。

Guest 08:42
あと、まあ、パレットにがないから使っちゃいけないというよりも、多分ま。あれがどこにスコープがどこかなんですけど、コンポーネントのバリエーションとしては、まあ、LINEのデザインのカラーな

Guest 08:53
使ってねって話だと思うんですけども、それ以外のところに関しては、特に制限をかけてるわけではないと思

Guest 08:59
そうですね。最後の方に多分デザイン、あのルースか、ストリックとかで、ルースの方に振ってたっていうのは、そういう意味もあ、

Guest 09:08
そうですね、そうです、

Guest 09:12
このセンターライズとか、デストビーテとか言えば、センターライズと。

Guest 09:16
そうですね、今はその決まったチームメンバーがまそこのタスクフォースに貢献している形になってるので、

Guest 09:24
センターライズとベルーストって、まあ、ある種、ベチャルチャ1番いいのかもしれないですね。

Guest 09:30
うん、そうですね、

Guest 09:31
コントロールしやすく、新しいものも見やすいっていう状態。

Guest 09:34
そうですね、まあ、まだ初期段階なので、ま本来だったらもう分散型にしたいとこではあるんですけど、今の段階でやると多分まとまらないので、

Guest 09:44
多分初期はま集中型であってま。ある程度こう。市民権を得たら、あぶさんができるとほんとは理想だなと思います。

Guest 09:51
話を聞く先としてはね、やっぱ、作る人たちが集中してないっていうのはありますよね。そうです、

Guest 09:56
スモールスタートといえばないんですけど、もま、ある程度その叩きたいというか、叩かれたを作ったりで弾けるのが大事かな。

5. LINE としての運用と得られた課題感 10:05

Guest 10:06
ちなみに、ちょっと

Guest 10:07
遡って私聞きたいんですけど、さっき、そのあの、デザインシステムの設計方法として、王道だよなって話とかがあってたと思うんですけど、なんか、これやるにあたって、多少の事例とかで参考書にしたやつかって、岡崎さんあったりしたんですか。

Guest 10:21
それが気になりますねあ、

Guest 10:22
あ、ですね、はい、まあ結構色々見てはいるんですけども。ただ、まあ、他社の事例はもちろん、そのコンセプトモデル参考にはなるんですけど、結構そのデザインシステムと言葉の定義が曖昧で。はい、

Guest 10:35
そうなんですよね、なんで共通言語として使うにもこう。まず、仲間内で意味が違う感じがあったので、まずそこの教室に幸せるのがまず第1歩かなと思いまして。

Guest 10:45
なんかね、あの、最近だと、あの赤いデザインシステムの本だとか、はい、色々まあなんてすか。先輩、デザインシステムとか色々あると思うんですけど、多分、今日見たLINEさんの

Guest 10:58
あの構造と全く同じっていうのは、多分ないんじゃないかなと思う。なんか、いろんなところのいいところをこう

Guest 11:05
それなりに持ってきて、今の状況に対して必要なものって感じで組み上げられたと思うんですけど、結構僕が今作ろうとしてるこ

Guest 11:13
だいぶ似てたので、すごい僕もなんかいろんなとこつひして、はいやろうと思ってたとかなり似てたんで、そうなんなんか

Guest 11:23
うん、よかったよかったと思って、

Guest 11:26
いやまさにおっしゃる通り、まあ、私たちもいろんなデザインを見た上で、ま。ただそれより当てはめてやる必要は特にないと思ってて、あくまでもフレームなので、まその考え方でやった方が生理がつくんであれば、その形がいいかなってことで、結構ハイブレットで入れて

Guest 11:41
そうですよね。なんか、スタイルガイドとパターンがはいりと、プリンシプルってあけ、役者じゃないです。え、えもん、全く同じ分け方、全く同じ名前で呼んでたのです。

Guest 11:50
あ、ですよね、って思いました

Guest 11:51
はい、そうですね、パタンライムにょとっても結構呼び方が違うので、なかなかこうぶれやすいとこでは、

Guest 11:59
確かに結構言葉の定義とかもしっかりやっていかないと、なんかそれが何であるかみたいなんで、1人歩きすると1番失敗しやすい

Guest 12:09
こう。むしろ、言葉の定義が1番の肝なんじゃないかと思いますね。

Guest 12:12
認識合わせみたいなのをちゃんとしとかないと、うん、秩序を作るための言葉がぶれてたら、言葉全員で軸足はぶれるんで、重要ですよね。

Guest 12:39
まあ、でもdがデザインなのが14万です。あ、そうなん、

Guest 12:41
設計であるから、なんか今dddって言われてそうだなと思ったのは、はいはい、dddってdddやろうって言ったら失敗するじゃない。

Guest 12:49
ああ、そうです、デザインシステムやろう、つってやるものではないな、

Guest 12:53
そこも一緒だなっていう気はしますね。なんか、それをやることって、全然ゴールじゃなくて、多分それのためにdddも結局言ってることして、なんかちゃんとやりましょう。みたいなことしか言ってないじゃないですか。

Guest 13:06
みたいなものなんだって、だから、bbbやろうってみんなじゃあちゃんとやろうねって言われても、まあちゃんとやろうねって終わってしまうんで、そこをちゃんと定義するっていうのは、結構大切、どの領域でも大切なんでしょうね。

Guest 13:19
デザインとかになってしまうと、そこに見た目が絡んでくるので、ちゃんとその前に話をしとかないと、変な見た目がなんか最初にぽっと出てきてしまったら、そこからこうそれに引っ張られるってこともありそうだから、は、

Guest 13:34
bbdよりも厄介かもしれないですね。デザインシステムやろうぜみたいなので、そうです。

Guest 13:38
なんか、そのdttのをデザインシステムにしろ。はい、

Guest 13:42
実はちゃんとやろうね。だよね、そうだよねっていう話はそうだよねって感じだし、でも、なんかそこがじゃあちゃんとやろうねだけになっちゃうとこううまくやれるのか、やり方としてどうなのか不安みたいなのがあるじゃないですか。

Guest 13:54
そこでも実はあの遠用できるというか、登場するのがインフォベーションはきてたかな

Guest 13:59
と思っていて、そういった部分でのあのナレッジだとか、スキルだとか、メソッドみたいなのが実はそこですごくワークするんじゃないかなとは思って、

Guest 14:09
それこそさっきの言葉の話とかでも、まあまああれはなんだっけ。dddにもありますよね。

Guest 14:17
ユニバーサルじゃないや、なんかそれっぽいやつ

Guest 14:35
それこそまあそれこそなんだ。パターンラゲって、文脈から来てるわけじゃないですか。なんか、今日すごいいい話だなと思ったのは、

Guest 14:43
あの、なんだっけ。ブートストラップベースのはい、衣をはい、作って衣っていう。あの、

Guest 14:49
なんてそうそうそう、あれをちゃんと用意しても、そのボタンのカラーリングで、そのキャンセルとオーケーどっちの色を使うかは、特に指定されてなかったから、みたいな例が出てたじゃそうです。あれ

Guest 15:03
とか、それなんだよねって言われて、なんかこう一時期すごい。ベストストラップが流行った時に、はい、

Guest 15:09
なんか、ブートストラップのサイトは綺麗だし、それでできてるサンプルも綺麗なんだけど、よし、じゃあ、ブートストラップで作ろうって思うと、なんかそんなにかっこよくないみたいなのができちゃうもんだみたいのがすごい

Guest 15:20
あったと思ってて、え、それ、まさにあれだよなと思って。

Guest 15:23
そうですね。なんか、そのセレクトショップじゃないんですけど、アイテムそのものはいいんだけど、組み合わせるとダサくなっちゃうとが結構あって、コーディネートっていうか、こうした方がいいみたいな。ガイドがないと、やっぱりコンポーネントだけだと辛いなっていうのは、

Guest 15:37
パターンライブルに対して、スタイルガイドもちゃんとそうでするってことですよ。はい、そこです、すごいだから、その構造はあ、そうですよね。ってすごく思いました。

Guest 15:46
元々はまあ、その僕はデザインシステムはほんとに必要だとは思ってなかった。あ、

Guest 15:50
そうなんですかえ、

Guest 15:51
そのパターンラベラルだけでも行けるかなと思ってたんですけど、実際やってみると、やっぱり周りは必要だという方が多くてま。それで、今回まデザインシステムに統合しようて、

Guest 16:04
で、その時はあのなんでしたっけ。ldsでしたか。LINEデザインシステムというのは、

Guest 16:10
全然並行して動いていて、あの、そうですし、知らなかったご存知ないの。

Guest 16:16
あのま、お恥ずかしいというか。まあ、LINEは結構ブランチが多くて、はいはい、国もまたぐので、結構みんなが同じことをやろうとしてるんです。

Guest 16:25
で、まあ要はデザインシステムが複数作られようとしてたっていうのが、まあ半年ぐらい前

Guest 16:31
なので、単純に作るだけではなくて、作ってますよ。っていうのも、結構共有してかなければいけなくて、そうしないと、多分みんな不便を感じてデザインして作り始めてしまうって

Guest 16:41
いや、すごいうちの会社のこと言われてるよう、

Guest 16:44
結構うち事業部制で複数の事業部複数のプロダクトってのがあって、しかも結構独自のブランドを持ってるので、全然別で始めちゃってる。始めちゃってたってのがあって、

Guest 17:01
そうなんですよね、なんでちょっと。実際それぞれのところでは、バラバラに動き始めちゃったっていうのはあるんですよ。それを1回今統合しようとしてるっていう

Guest 17:09
感じでね。なるほどですね、結構同じような状況で。

Guest 17:13
そうですね。ま、うちの方がカオスだと思いますけど、

Guest 17:18
うちの場合ちょっと。まあ、その多元多言語というか、その英語圏だったりするんで、しかも、国マタグとまたちょっと文化が違ったりで、

Guest 17:27
そのデザインシステム。以前、このランゲージの方が共通化されてなくて、そこはまあ、僕は結構大変だったなと

Guest 17:36
あ、喋る言葉です。実際に、その

Guest 17:39
ロジェクト内のコミュニケーションの

Guest 17:41
確かに、LINEの日本はまあ、LINEはま、基本的には日本語が公用語なんですけど、まただ、福岡とか京都になって、僕も今度英語が国でになって、

Guest 17:51
今回のプロジェクトだと、韓国が日本とか台湾に絡んでるんで、

Guest 17:56
英語になって、そうなってくると、僕が発言が多分、3分の1が5分の1ぐらいに下になって、なかなか伝えられないっていうジレンマがあります。

Guest 18:06
さっき、あのお話の中でミーティングの時に、はい10何人集まって、日本人1人っていう

Guest 18:11
そうですね、あれはつんだなと思いまし。

Guest 18:15
いや、なんか最初ね、正直ね、こうスライド見てすげえ、英語ばっかり使ってかっこつけてんなとか思ったんですけど、途中であの話聞いて、あ、

Guest 18:23
理解って英語公用語なんだなってなんなんですか。そのいやいやいやいや、お前も英語ばっかりやんけみたいな顔してますけど、

Guest 18:32
ばっかり立ったやんけ、現在はわかんない、現在もかもしれな。

Guest 18:35
心入れ替えました。日本、日本語、日本語は日本語使ってます。あの、

Guest 18:40
心を入れ替えました。

Guest 18:44
はい、そうで

Guest 18:44
そうには聞こえない。あ、そうか、そういうコミュニケーションってなると、やっぱり話を合わせる

Guest 18:53
前の段階で、ちょっとつまりはやっぱりそうですよね。多分、多分さんだけではなくて、多分メンバー全員が入れる状態になるのかな。

Guest 19:03
そうですね、ま、プラス職種も違えば国も違うし、みたいな感じで、かつやってる対象範囲もま、

Guest 19:10
最初ldsアプリやってて、ちはまあ、jトップのウェブをやってたので、

Guest 19:15
結構その愛れない部分というか、ほんとにこうし、仕事できるのかなってのがあったんですけど、

Guest 19:21
ま、ただ色々こう探っていくと。まあ、目的は基本は同じで、ただ、やってる手段とかタイミングが違っただけだったので、まであれば進行しちゃった方がいいっていう形ですね。

Guest 19:33
さっき、あの、あのプロジェクト内のコミュニケーションの言語の話も出ましたけど、はい、実際、LINEのプロダクトだと、マルチリンガラゼーションみたいな考慮してだけだわけですよね。

Guest 19:42
そうですね、結構多言語対応が前提になまサービスもよるんですけど、ま、その日なんすかね。結構有名なものだと、8言語でスタートとかになるんで、

Guest 19:52
それはまた色々つみがあって、ボタンのテキストをま8言語やると、なんかインドネシアがはみ出ちゃった2行になっちゃうみたいな

Guest 20:02
長さとか、そういうとこはどうしてるんだろうなってそうです。

Guest 20:06
そこもまあ、シシを調整することもあれば、はい、敵そそのもの、もうちょっと切り替えな。

Guest 20:12
最近だと、まあ、あえてアイコンにしてこう。はい、はましい、ランデージしてる

Guest 20:18
言語に頼らないっていう。そう

Guest 20:19
ですね、1番楽ではないです

Guest 20:22
ね、入れすぎるとちょっと辛いそうね

Guest 20:27
で言うと、やっぱりアイコンの捉え方も、きっと多分文化の違いって出てくるような気がしますよね。

6. Adobe のデザインシステムに学ぶ 20:35

Guest 20:35
なんか、その辺この間面白かったのは、アドビーが公開したスペクトラムというデザインシステムましたが、結構その他言語家の話が載ってて、こうままとハドリだからね。

Guest 20:48
そのなんか、ラベルの話も乗ってて、結構その役立ちティップスがあるんで、英語をベースにして、あの、こういうとこに気を付けなさいとか。はいはい、この言語だと平均

Guest 20:58
なんか、こういうところに使うラベルは1点。ほにゃバイになりがち。そういうのが結構あって、これはデザインシステムというより、ただの役立ちチップス

Guest 21:06
ありがたかったです。

Guest 21:08
公開してくれるそうなんです、そうなの、そうそう、まあまあそのアドビが確実に踏んでるだろう。そう、

Guest 21:17
もう人が困ったところ、わかってると楽です

Guest 21:20
ね、ありがたい話ですよ、

Guest 21:22
しかも、アドビぐらいのプレイヤーがやってるってことはっていうのはもちろんありますね。

Guest 21:27
あ、でも、なんかすごく

Guest 21:29
プロダクトの性質というか、当たり前ですけど、内容がアトびらしいっていう感じがすごい随所にありました。た

Guest 21:37
ば、どういうのがあったんです。

Guest 21:38
例えばですね、あの、結構まマテラルデザインとか、そのは

Guest 21:44
火星のやつとかはャドウをな使うというか、結構多用するじゃないですか。そうそう、そうそう、エレベーションみたいな。

Guest 21:50
アドビのスペクトラムは、速攻への依存度が極端に少なくて、ええ

Guest 21:55
エレベーションレベルが1しかないんですよで、影も1しかないんですよね。で、影を使っていいシチュエーションもかなり限定されていて、あのツールチップとか、なんかすごくテンポラリーのポップアップとか、そういうところだけで、

Guest 22:09
あとは全部フラットでま言ったら、ほんとにその1レベルの中に全部収めて、2次元本と2次元的なんですよね。で、でも言われると

Guest 22:18
言われるっていうか、考えてみるとなるほどで。アドリーの製品って、デスクトップuiでかつ、すごいコンプレックスuiが多いですよ。最近

Guest 22:25
茶そ、そうそう、パネル

Guest 22:27
そこでいちいち影つけてたら、うん、影情報は多すぎな。

Guest 22:31
やったすぎ

Guest 22:35
てなっちゃうのを考えると、

Guest 22:38
確かにネポト作とかでも、まあ、小っちゃいボタンいっぱいあるんで。そうですね、そんなとこにかたまあ、あっちもこっちもやってられんかなる。あごい。なんか、合理性があるというか、アドビのちゃんと事情に合わせたデザインって、こういうとこにやっぱ出てくるな

Guest 22:51
ま、これはあれですね。さっき言ったあの、ここで話してたみたいに、そのデザインシステム、

Guest 22:58
その必ず同じものを適用できるわけじゃないから、そのバックグラウンドによって、結構育ち方が違うみたいな。

Guest 23:04
そうですね、そうです、

Guest 23:05
それもちょっと影響ありそうだなっていう感じはしますね。

Guest 23:08
もう1個思ったのは、なんかそのデスクトップとはモバイルでうん。オブジェクトのサイズは、あはあの指定がちょっと違っていて、

Guest 23:17
要は。でも、さっきのあのlilサの話でも、その出てたあのブレイクポイントでこう分け。はい、

Guest 23:30
そうそうそうそうそうそう

Guest 23:31
ままデルデザインもそうだし、そのアドビのスペクトルもそうなんですけど、あのモバイル向けの方がボタンが大きいんですよ。デスクトップ向けの方がボタンが小さい、やっぱスそうそうそう、マウスカーソルの方がちっちゃくて、ポインティング。

Guest 23:44
やっぱり思ったより広くしょうがないと、タップミスする

Guest 23:47
モバイルの方が指で触るからでかくしとかなきゃいけないし、マスコソル触るんだったら、ちっちゃくていいって、

Guest 23:53
そこになんか、タッチ対応のラップトップとか入ってくると、

Guest 23:56
だから、ほんとは変える。変えなくていいと思っていて、どっちでも大きく作るっていうのは。まあ、アトリはさすがにちょっと細かいんですけど、

Guest 24:05
デスクトップとかになると、どうしてもなんかでかすぎるとか、あるいは小さくすると、スカスカに最近のやつだと、例えば、そのモバイルファーストみたいな。はいはい、やり方だと、

Guest 24:16
あの画面内に収める要素がモバイルのものを前提になってしまって、それを引き延ばすから。なんか、スカスカス。はいはい、それに収めようとして、ちょっとでかくしないと収まりが悪いみたいなところででかくなって、

Guest 24:30
どっちかって言うと、ボタンでかくするのって、そのモバイル体験でのユーザーがミスらないみたいな話はずが、なんかどっちかって言うと、そのあれですよね。で、スポンシブの釣りつ合わせででかくなってるのみたいなありますよね。そうかもしれない、

Guest 24:44
まあ、仕方ないなって思うと、ピッチの法則ってありますよね。

Guest 24:49
でかい方が押しやすいっていう人も負担もない、

Guest 24:51
あの近いほどいいそうそうそうそう、

7. LINE らしさと良さとは 24:55

Guest 24:55
ちなみにちょっと今アドビの話とかになっちゃったんですけど、なんか、

Guest 24:59
岡崎さん今の今の話、結構そのアドビらしさとかって、今話で上がってたと思うんですけど、なんかその作ってる中で、これはうちの会社ららしさがしさ出てるなって思ったってあります。

Guest 25:10
どうなんですね、まなければ作るみたいな感じ。

Guest 25:15
あの、僕1つ思ってすごいいいなと思ったのは、あのアイコンをカスタムで作って、あのプロダクト共通で、まあ、デザインシステムの一部として使ってるって

Guest 25:24
ハイクいいなって思って、あの、正直言って早速これは真似しようと思って。はい、車内スラックに

Guest 25:32
あきました、ありがとうございますはい

Guest 25:35
はい、大根です

Guest 25:36
でな、何がいいって思ったかって言うと、最近アイコンとはちょっと別ですけど、そのコーポレート書体とかを作るっていう会社とかあるじゃないですか。メルカリとかコンタメル、カリアドビンもなんか自分のコト作。

Guest 25:49
なんか、そういう所体で自分たちのカラー出せるってめちゃめちゃ強いし、可能性高いし、はい、超嬉しい。アセットなんですけど、

Guest 25:57
開発にめちゃめちゃ金かかるから、なかなかできないっていうのはあるじゃないですか。なんだけど、そうそうそうそうそうそう

Guest 26:05
なんだけど、あ、でもあ、アイコンっていうか、ああいうインターフェースの中で使われるピプログラムも、あの文字とま似た存在なので。ええ、そこで、オリジナリティーとか、一貫性が

Guest 26:15
あると、なんかそのそこをね。あの、いわ、よくあるアイコンだけで済まさずに、そこに自分たちの提出を入れることで。はい、なんか、独自書体を作るのと、同じような効果があるんじゃないか。

Guest 26:29
コスパよくらしさを出すみたいなそうです

Guest 26:35
なんか、その他で言うとありますか。

Guest 26:37
そうですね、まあちょ大根は結構いい仕組みなんですけど、ただ作るのがまあまあ大変ですね。まあ、でもも

Guest 26:46
組み合わせとか

Guest 26:47
は、あれを作った経験のある人がめっちゃ少ない

Guest 26:56
ね。あのえ、あな、ちょっと技術的な話になって、svgをソースに色々こう。あのツールを使って、自動的にアイコンポンとつはいたりとか、あとは、hkのソースを作ったりとか。はい、

Guest 27:20
その真ん中にあった大根マネージャーでした。はい、あれとかもすごい羨ましいというか、なんか組織力を

Guest 27:29
出してるなって感じで、

Guest 27:31
こういうそのデザインをマジするためのシステムやツールを社内で開発して、それを使えるっていう環境にあるのはすごくいいなって思いました。あ、

Guest 27:40
まだその計画中でま、実際にこれから開発。あ、そうなんですね、ですけど、もまちょっと私がUIT業、フロントエンドスタンザーライゼーションチームということで、

Guest 27:51
ま、そのデベロッパーがこう働きやすいようなツールとか環境を提供するって、

Guest 27:56
それは社内外のデベロッパ、

Guest 27:58
LINELINEですね。主にLINEのまあ、デベロッパー向けになってて、なんでそういうデプロイの仕組みだとかはいったものも、まあ、社内で自制してて、でまそのライコンのマネージャーの一部みたいな話、

Guest 28:14
結構その

Guest 28:15
なんですかね。社内でのユーザーも多様なので、はい、そのエミルベースが欲しいって人もいれば、はい、リアクション使ってるから、リアクションてそうでね。はい。なので、それに合わせて結構いろんな形で展開をしているかです。

Guest 28:28
で、それで言うと、フレームワークごとにやるのが厳しかったから、リアクトを作ろう。最初ビがあって、こ

Guest 28:37
冬がありはこのリアクトを作ろうと思ったけど、あの永遠に終わらないなと思って、ベトコンポーネントに行ったっていうのも、あの

Guest 28:46
あ、なんだろう。あるあるあるあるまではいかないのかもしれないですけど、レブコンポーネントを採用し用してるとか。はい、あの、作ってる企業

Guest 28:56
とか、salesforceとか確かないっていうのを作ってると思うんですけど、あの、そういうところでま同じような考えから来てるんだな。

Guest 29:06
思いましたね。そうですね、ほんとにもうコロモエレメント着手する寸前だったんですけど、ま、ウェブコンポに詳しいメンバーがいてですね。はいはい、もうなんかウェブコンポーネントでいいんじゃないかって、

Guest 29:16
はいはいでいけるんじゃないか。そうですね、

Guest 29:18
あんまり有識者がいなかったんで、ま、実際、色々検証してみたら、あ、いけそうだなってわかったんで、切り替えたって感じですね。あの、

Guest 29:26
このポッドキャスト。あの、そこまで毎回聞いてるわけじゃないですけど、最初の方に多分ラブコンポーネントの話かなんかされ

Guest 29:32
あしてましてます。2回目でしてますね、あ、あの方がガンガンやってる方です。

Guest 29:45
もう作られてるので、

Guest 29:48
今開発中です。

Guest 29:50
あの、やっぱり普通のスでウェブコンポンのAPIを作ろうとすると、特にカスタムエレメンツだと思うんですけど、しんどいはいがあると思えよ。そういうのは、やっぱりリットエレメントとか使ってるかはい、

Guest 30:02
まさにネットエレメントを使って、はい作ろうとしてます。なるほど、

Guest 30:07
cssとかはあの、普通にかす。カスタムプロパティとかを使っているんですか、それともサスですかね、

Guest 30:17
ですね、元となるのはシエス

Guest 30:22
結構大変じゃないですか。

Guest 30:23
そうですね、ま、ただまだ開発途中というのもあって、まだそれほどの体はないですけど、まあ、もしかしたら切り替えていくかもしれないです。

Guest 30:34
弊社もこのポーネントっていうよりは、もうちょっとなんだろう。アトミックデザインのリードで言うと、なんか、ボーガニズムぐらいは、画面の例えば、なんか名前を入力する

Guest 30:47
とか。あ、そういうラベルとヒールドがついたものみたいなセットでオネット作ろうみたいなことをちょっと実験してて

Guest 30:55
やってるんですけど、そのあと、そのcssファイルとかをその単発のパッケージとして、切り出した時に、歌が多くなってしまったりとか、

Guest 31:04
してて、そういう管理をどうしようかな。ファイルの管理であったりとか、コードの管理とかはどうしようかな。みたいなことを思ってたりとかするんですけど、バンドルみたいなのって

Guest 31:14
ごめんなさい。caでさでした。あささでまま、ブトストラップベースだとま、コンポネント単位ですか。されてるので、ま、コンポーネントごとにリセットのファイルを置いてま、それをリポートするような形。

Guest 31:27
結構それだとなんて言うんです。

Guest 31:30
結構な負荷が負荷というか、読み込みの負荷とかはいいが出てしまうような気がするんですけれど、

Guest 31:38
どうなんだろうなと思って。あの、社内のやつだったらまだ結構あるかもしれないですけど、あの岐阜でしたっけはい、岐阜あの

Guest 31:46
2かな。それもなんか採用するみたいなことしてたんで、そうなんかそうなると、なんか下からポップアップするんで、結構

Guest 31:55
シンプルなボタンだけど、背景つくまで時間かかるみたいなのあったら、ちょっと辛いなと

Guest 32:01
なるほどですね。先に言われた、負っていうのは、どの

Guest 32:04
あ、ネットワークにしてとか。はい、

Guest 32:07
フレは全部読みたくないみたいなそう、

Guest 32:09
まあまあジス使ってたの方がでかいとかなっちゃうかもしれないですけどね。

Guest 32:13
なるほどですね、

Guest 32:15
そういうのを、まあ、アンドルとかパイプラインとかでなんとかすればいいのかな。なんか、僕もよくは、どうしていけばいいのかなって。ネットを撤回してくるので、

Guest 32:32
で、ちょっとだけ違うと、そのためだけに重複したcssが、それぞれのコメントファイルに細切れに入ってしまう

Guest 32:41
可能性、そういう風に作ることもできるじゃないですか、なるほど、じゃあ、cssを普通に昔のように1つのファイルとめてってなると、それはそれでコンポーネントを単位の管理がしにくいなとは思

Guest 32:53
ねですね。そうですね、まこりないとあくまでもその分子原子レベルで、はいはい、エyがどう組み合わせ

Guest 33:01
エクかっていうよりそうですか。はい、

Guest 33:03
このlu自体はいや、持ってなくて、全部コロマエレメントのコンポーネントを組み合わせるっていう考えるので、

Guest 33:10
そこはまだ次のステップなんですけど、確かにそういうなんか有機体レベルとかのはいて、ちょっとどうやってやっていくのかなって、これからの課題ですね。

8. デザインシステムはどう利用されると良いのか 33:20

Guest 33:26
僕は毎年元年、元年ってそろそろ来年、元年じゃない。はい、マジで元じゃないかなと思ってるんですけど、

Guest 33:35
ま、ちょっとずつ整い始めてきてるし、それこそあの採用事例。はい、今回のライさんだったりとか、セ

Guest 33:42
だったりとかっていうのも増えてきてはいるので、そういうところもあるので、実際に使ってみて、結構規模の大きいものを作ってるけど。

Guest 33:52
っていうのが、もう話していただけたら、すごい嬉しいなって思います。

Guest 33:57
社内ツールとか、今でも子供は使われる

Guest 34:02
ですよね。そうですね、今はそのまあ子供って元々は管理画面向けに作ったはいま手術するキットでまその社内でも車内でも

Guest 34:12
はい、ただまあ、結構車内ツールではよくこれも使われてますね。

Guest 34:17
社会とかになると、やっぱりアイレブンみたいなことが出てくるんじゃない。社内でも出てくるかもしれないですけど、

Guest 34:23
そうですね、サービスによっては、まあそこを切ってしまったりとか、

Guest 34:26
はいすると、問題が出てくるってそうですよね。

Guest 34:34
なんか、コンポーネント

Guest 34:35
ベースの開発と、なんか、スタイルのマネージメント。うん、どうするか問題ありますよね。なんか、そういうコンパネットの中に全部スタイル。

Guest 34:45
うん、まだから、スタイルもあのコンポレート単位で、もしかすればいいじゃん。っていう話と、そうす

Guest 34:50
ていうのが、なんか、デベロッパの人って、結構そっち側で言いがちな感じだと思うんですけど、

Guest 34:56
なんかそれって、あのしばらく前のは戻るとなんかこう。あの、ブートストラップのパーツタイで使ったけど、なんかかならなかったもんだと

Guest 35:06
きつくんじゃないかなって不安はある。

Guest 35:08
あの、デザインって、僕は僕の言い方だと、デザインは具ではなく、間であるっていう言い方

Guest 35:14
わかります。わかります、

Guest 35:15
その目に見えるオブジェクトではなくてま、それはもちろん大事なんだけど、そのオブジェクト同士の関係がどう規定される

Guest 35:21
構成されるかっていうことの方に本質があると思ってるので、はい、その観点から行くと、あのオブジェクトのスタイルを全部オブジェクトにパッケージ化してしまって、バラバラに扱うっていうのは、話はそもそもそうなり、切っちゃった時点で

Guest 35:36
デザインどこ行ったって感じで、僕には

Guest 35:40
全体の関係性とか、その一貫性とか、あの全体を滑るルールみたいなものがあって、初めて意味のあるデザインとして成り立つと思うので、

Guest 35:48
なんかこうま概念としてはもちろんそうなってるんでしょうけども、概念がそうでもあるにもかかわらず、なんかその実装が分散してしまうってのは、なんか

Guest 35:57
先々大丈夫なのかなって、不安をすごくいいちゃうんですよね。

Guest 36:01
そのなん、僕があんまり読み込んでないだけかもしれないですけど、その地のデザイン、システム、色々言われてるものとかって、まこネントとかあるいは影とかアニメーションみたいな。やっぱ、細かいところの単位が

Guest 36:15
で、画面で画面であったりとか、その画面遷移であったりとか。もうちょい。それが最終的にユーザーにうんが操作するとか見るとか。

Guest 36:26
そういうところのフォローって結構あのま。もちろん、その

Guest 36:31
作るプロダクト、しかも、1画面とか、そこに入る情報によって変わるんでしょうけど、あの、

Guest 36:37
でもお隣になってるな感じがやっぱするんですよね。で、厳ができないからそう去るだろうけど、そういうところで詰まることが増えそうだな。

Guest 36:47
そこ定義してしまうと、なんか結構デザインシステムとかって、ちゃんとコモリティ化するためのものなはずが、

Guest 36:54
皆、画一的に逆に同じになってしまって、テンプレート的なサンプルまで用意してしまうと、それをただはめるだけになってしまうとか。なんか、そのバイアフレームと同じカプしか組まない人と同じで、

Guest 37:04
その1個ワイヤーフレームが用意されると、みんなそれを当てはめてしまうみたいなのもあるから、やらないっていう人もやらないっていうのも多いんじゃないかな、とは、

Guest 37:13
本を書く人とか、デザインシステムを作る人が、

Guest 37:16
ああ、そっち側でその1個定義してしまうと、ユーザー側がどうしてもそれに完全になってしまうというか、なんか、開発の設計の方もそうだと思うんですけど、なんか、コモディティ化させるために作っていくものだと思っていて、なんかそれってなんでしょ。

Guest 37:29
あの、全員が全員全員が全員常にコンセンサスを取れていたら、ま、それって

Guest 37:34
あの、現実的にはないですけど、問題がないじゃないですか。ただ、数千人で数千人同じ意識持ってたらそれは問題ないはず

Guest 37:40
なんですけど、そんなことは現実的にないんで、そこの意識を合わせるために存在していて、まそこの

Guest 37:46
まただそこの意思期間ってそれこそ別に開発の人は常にデザインシステムのこと考えてるわけじゃないですし。っていうところをうまくコモディティ化させるための

Guest 37:55
概念が、デザインシステムはり、そういったdddみたいなコンテキストなのかなと

Guest 37:58
それで言うと、デザンシステムのユーザーは誰なのか問題って、デザインシステムのユーザーが直接デベロッパーであ

Guest 38:09
るような場合はいもあると思うんですけど、まだから、デザインシステムという

Guest 38:13
もののこうを構成している各パートを誰が使うかなんですけど、さっき言ったその個別の粒度の高いパーツではなくて、うん、もうちょっとこう組み合わさった。はい、コンパウンドのものとかは

Guest 38:25
があんま乗ってないよね。誰が作るの問題っていうのは、え、そこむまさにデザイナーがやるべき仕事なのであって、そこはデザインシステムのユーザーとして、

Guest 38:36
デザイナーが設定されていて、はい、そのデザイナーがスタイルガイドを理解し、パターンライバーに呼び解き、ふむふむ。じゃあ、これをこういう風に構成することによって、ここに与えられた要件を満たすようなアウトプット

Guest 38:48
作るのだねっていうことをやった上で、うん、それが実装に落とされるっていうのが、まあ正しいデザインシステム使われただな。

Guest 38:57
はい、デザインシステム用のuあまいまま。今回の場合、あのuiの話ですけど、ui

Guest 39:02
デザイナーがいたとしてま、そこと実際のあれですよね。まあ、アプリケーションというか、ま、それぞれのの事業に即したuiデザイナーがいて、こっからの相互フィードバックでよよりより高めていきながら、最終的に触るのはエンジニアだけど、

Guest 39:17
あ、作るのはエンジアになるんで。そうだけど、もう間にいる事業部ののデザイナーさんと、デザインシステムのデザイナーさんの連携が1番重要みたいな。

Guest 39:25
そうですね、なんか、その要はつまり、デザインシステムと呼ばれるようなものを、ガツっと1個作ったら、誰でもすごいものが作れるか、そんなことはないですね。

Guest 39:34
なんか、使う側もそれぞれの使いどころのエキスパートじゃないか。それはどどっちみち無理ですよね。って話ですよね、そこがもしかしたら、なんかデザインシステムが今

Guest 39:44
なんだろうな。幻想を持って見られているところの1つなのかもしれないです。

Guest 39:48
もしかに、そうかもしんないですね、なんかあれですもんね、要はなんでしょう結構、デザインシステムって言いながらなんでしょう、エレメントリストじゃないいますてはい

Guest 39:58
で、エレメントのリストエレメントのリストを綺麗ないにするのって、別にエンジニアはそこの能力持ってるわけじゃなくて、正直お多くの。

Guest 40:05
これが具ではなく、バン。そうなん

Guest 40:06
なんで、そこそこだとで、

Guest 40:10
それこそもう話戻りますけど、そのウースラップ使ったからといって、きれになる問題じゃないな。ないですけど、結局そこがなんでしょう。デザインシステムやりました、事例でも、やっとするところなのかな、みたいな。

Guest 40:22
そうですね、まあ、その話をしだすと無限にうん、無限に口が悪いのが出てきてしまうので、やめます。

Guest 40:30
ま、結構いい時間になってきますね、ますか、なんか、岡崎さんの方から最高ありますか。

Guest 40:38
そうですね、あの、多分デザインシステムとか、今作ることが若干目的としてると思うんですけど、ま、どちらかというと、作って、運用する側の方が結構大変だなって言われてるので、できれば早めに。こう作って、そっからちょっと走らせたいなっていうのがあります。

Guest 40:52
あと、どうやってその使ってる人の声を拾っていくのかとか。あと、社内候補的なことも結構必要なので、

Guest 40:59
結構作ったけど、やっぱり知らないってのが多いケースなので、まあ、そこをどう広めていくのが課題ではありますね。

Guest 41:07
規模が大きいと、そういうところは出てくるんですね、そうなんです、

Guest 41:11
その辺がこれからって感じです。

Guest 41:13
そうですね、なんて作って、まあ、プロモーションもして、運用もしなきゃいけないなっていう感じ。

Guest 41:18
大変ですね、はい、

Guest 41:20
あ、ありがとうございました、ありがとうございますえ、ということでですね。今回はえ、LINEデベロッパーデー特別会というところでえ、ライデベロッパーデー会場からですねえ、岡崎さんのセッションについて、え、小久保さんやさんとともにえ、

9. クロージング 41:22

Guest 41:32
話していきました。え、そもそものですね、コモとかこのビーとかえの話ってなんだやって方はですね

Guest 41:38
ポッドキャストの第1回でも紹介しておりますので、そちらを聞いていただければと思います。

Guest 41:44
でえ、またですね。このコッドキャストについてのご意見や、ご感想もお待ちしております。え、twitterなどでえ、ハッシュタグシャープUIT、アンダースコアインサイド、

Guest 41:52
シャープ、えーUIT、アンダースコアインサイドを見てつぶやいていただけますとえ、運営スタッフの方でえ確認させていただきますので、え、どしどしツイートしていただければと思います。

Guest 42:02
ということでですね。今回は岡崎さん、えばさん、やくらさん、えのえ、3名とともにえ、デザインシステムの話についてやっていきました。ありがとうございました、ありがと

Guest 42:10
失礼しました