00:18
Takaya Deguchi
こんにちは、Deguchiです。
kudakurage
こんにちは、Motoyamaです。
resizefmは、MotoyamaとDeguchiが最近気になっているサービスやデザイントピックスを取り上げてのんびり話すポッドキャストです。よろしくお願いします。
お願いします。お願いします。
Vision Pro、届きましたよね。届いた?
届いた。
あれ?
Takaya Deguchi
届いたんですが、
今日返品しました。
kudakurage
返品した?
Takaya Deguchi
不具合、初期不良に当たりました。
kudakurage
初期不良なんてあんの?
Takaya Deguchi
レンズフレアがめっちゃ出るっていう。
右下と左下に内部のライトが反射してフレアが出るっていう感じで。
スペシャリストと問い合わせたら、原因わかんないんで、とりあえず返品しかないっすねって言われました。
なんか、暗いところで見るとそういうの出るけどね、フレアみたいなやつは。
なんかね、厳密に言うと、部屋真っ暗にして、外から光が入らない状態にして、で例えば、Vision Proの中で暗い空間にいて、白いウェブサイトとか見るとすげ目立ったりとか。
出るね。
そうじゃなくても出てるんですけど。
kudakurage
結構多分、僕も暗いところでやった時は結構フレアっぽいっていうか、なんか反射みたいなの出てたね、よく。
Takaya Deguchi
なんか、会社でやった時はそんな気にならなかったんですけど、なんか昼間でもめっちゃ気になるなみたいな感じで。
kudakurage
あー、なんか気になると結構目に付く感じだね、あれは。
Takaya Deguchi
いや、っていうかね、なんかもう煙かかってるような感じなんですよ、目の前が。その気になるとかっていう感じじゃなくて。
kudakurage
なんかでも僕も結構出てるから、もしかしたら初期不良なのか。
Takaya Deguchi
そう、Appleの人にもなんか、仕様としてフレアはどうしても出てくるみたいなことを言われたんだけど。
いや、でもそれにしても会社と別のやつと比較した時に違うから、どうなのみたいな話をして。
っていうのと、あとなんかライトシーリング、目の周りの取り外し可能なパーツがあって、顔の形状に応じて選べるんですよね、フィッティングのサイズを。
03:11
Takaya Deguchi
なんかそれも合ってないのか、なんかめっちゃ鼻の下から光が入ってくるんですよね。
kudakurage
あれはしょうがないと思ってるけどな。
Takaya Deguchi
なんか多少はしょうがないって言われました。
kudakurage
なんか日本人の顔に合ってないと思うんだよな、基本的に。
Takaya Deguchi
なんかね、フィッティング自動でやってくれるじゃないですか。あれが結構ブレるんですよね。
なんか21Wだっけか何かと、
なんかいくつかサイズがあって、ある時は浅めのやつである時は深めのやつを提案されるみたいな。
っていうので、もう1回返品して、でもちょっと1回Apple Store行って、ちゃんとフィッティングしてもらってから買おうかなと思って。
Apple Store予約しました。仕分け。
kudakurage
じゃあ、あんまり試せてないんですか?
Takaya Deguchi
いやまあそれなりに1日ぐらいはがっつり触ってましたよ。
kudakurage
まあ言ってもそんなにやることないなとは思いましたけど。
まあね。
でも結構アプリいろいろVision Pro用のやつ入れたりとかして試してましたけどね。
Takaya Deguchi
まあ流石にやっぱり映像コンテンツはすごいですね。
kudakurage
映像コンテンツ?
Takaya Deguchi
3Dの、3D対応したApple TVから配信されてるやつとか。
kudakurage
ああ、はいはいはい。
そうね。まあ映像、エンタメ系はね、やっぱり楽しい、楽しいだろうなっていう感じがあるよね。やっぱり。
Takaya Deguchi
うん。
kudakurage
やりようがいろいろあるしね。
Takaya Deguchi
うん。
kudakurage
まあでもなんかいろいろ触ってみて、自分たちが作ってるアプリもなんかもうほとんど実機触らずに作ってたから。
最近出してるやつとかは。
はいはい。
だからそれはやっぱり改めて触ってみて、ああもうちょっとこうしたいなっていうのがいっぱい出てきて。
Takaya Deguchi
うん。
kudakurage
なんかそういうのが出てきてよかったなみたいなのがあったけどね。
なんか実際に触ってみないと感覚が分かんない部分とかね、大きさ感どんな感じなんだろうみたいなのがあんまりつかめないところが多かったから。
Takaya Deguchi
あとはやっぱ仕事もしてみてたんですけど、まあまあできるなっていう感じだけど、まあそのやっぱ画面は痛いっすよね。
特にあのシングル、シングルループだっけ?なんだっけ?シングルバンドだっけ?
まあ長時間つけるのは辛い。辛いなって思うねやっぱり。
なんかあの。
もうちょっと軽くならないとダメかな。
ビジョンプロのあのそのデフォルトの方のやつ?編み込みのあのバンド?
06:04
Takaya Deguchi
あれにその上、上のなんていうの?頭の上を通すダブルの、ダブルなんだっけ?なんていう名前だっけあれ。
kudakurage
ダブルループバンド?
Takaya Deguchi
そうそうそう。なんかダブルループバンドシングルの方のなんか合わせたようなやつが、初期の方のなんかこうビジョンプロの発表とかで出てくるんだけど、あれなくなったんだと思って。
kudakurage
ん?
Takaya Deguchi
要はシングルのそのなんていうの?ちょっと幅広のワイドめのバンドじゃないですか?シングルのデフォルトの方って。
でそれに上、上ダブルループみたいなその頭の上通すやつがついたバージョンがなんか初期の画像とかで出てくるんですよ。ビジョンプロのね。
kudakurage
うん。
Takaya Deguchi
いやなんかそれをそのまま採用してほしかったなと思って。
kudakurage
あー。あー。そうね。なんかラボだとそれ使ってた気がしたんだけど、今入ってるやつ、同梱のやつはそれじゃないのか。
Takaya Deguchi
そう同梱のやつは細いやつ2本でできるダブルループのやつか分厚いの1本でやるデフォルトのやつかみたいな。
やっぱシングルのあのダイヤルでこう締め付けを調整するのはなんかあれは便利だから、ただ上の頭の上通すバンドがないとちょっとずれてくるっていう。
なんかそこで踊りするバンドが欲しいなと思ったんですけどね。
まあでもいずれにしても長時間つけるのは結構辛い感じだった気がしたけどな。
kudakurage
結局、もうちょっとやっぱ筐体が軽くなって小さくなんないと辛いんじゃないかな結局。
デュアルループバンドか。
まあでもなんかまだまだこれからって感じだなやっぱり。
Takaya Deguchi
うん。そうっすね。
kudakurage
触ってたのを感じたのは、なんかあれだったんだよな。
WRWDCの時に発表にあったやつで、あれこういうのできるのかなとかって思ってたやつがあったんだけど、なんだっけあの、
映像を見てると床に反射して光が映るみたいな表現みたいのがあったけど、あれやっぱりできてなかったね。
できてなかったって言うとちょっと不正確なんだけど、あれなんかそのシアターモードみたいなやつに入ると、
もうARじゃなくてVRみたいな、周りが全部作られた空間になって、
それの時になんかその床に反射してる光が映るみたいな感じのところがあって、
あ、それを見てたんだなみたいな、そのWRWDCの時の映像としては。
Takaya Deguchi
そういうのありましたね、そういうでも。
09:01
kudakurage
まあ影はね、なんかウィンドウの影が落ちたりするんですけど床に。
まあだから割とまだまだ、なんかすごい想像してたものではなかったっていうところもありつつ、
まあでもそれでもね、やっぱりよくできてるなって思うところもいっぱいあっていいんですけどね。
Takaya Deguchi
割と冷静でした。なんか、ああみたいな。
kudakurage
まああとやっぱりパッスルー、パッスルーの解像度はやっぱりそこまで高くないから、
まあそれしょうがないのかな。まあ多分スペック的な問題だと思ってんだけどね、コンピューターの。
カメラとかディスプレイ自体はかなり高精細のやつが載ってるはずなんで、
多分処理、処理の問題で若干粗い感じになってるんだろうなっていうふうに思ってんだけど。
Takaya Deguchi
なんか。
kudakurage
あれもな。
Takaya Deguchi
軽く使ったときそんな気にならなかったけど、やっぱり家で使うと、まだまだ粗いなって気づきますね。
kudakurage
特にあのね、別にあの、例えばPCの画面とかiPhoneの画面とか、まあそのミラーリングみたいなして見ればきれいに見えるんだけど、
そのパッスルー越しで見ると、もう結構文字が読みづらくなるみたいなぐらい荒くなるから、
Takaya Deguchi
まあなんかそれ見るとやっぱりもうちょっときれいに見れるといいなっていうふうに思ったりとかしますね。
kudakurage
あと、ペルソナ、ペルソナはなんか結構難しい。
ペルソナがなんかさ、出口くんもなんかちょっとこの前ミーティングでペルソナで入ってたりとかしてたけどさ、
なんかこう若干ちょっと目つきが悪い感じになってたじゃないですか。
僕もどうやって撮っても目つき悪い感じになって。
あれはどう、なんで目つき悪い感じになるんだろうね。
Takaya Deguchi
あとなんかちょっと鼻高くなりません?
なんかモデルがその欧米人のモデルにされてる感じがするんですよ。
kudakurage
そうなんだよね。
多分それの影響でちょっと目つき悪い感じになっちゃってるんだろうなとかって思ったりしたけど。
Takaya Deguchi
アジア人にフィットしてないんですよ、あれ多分。
まあそういうところもね、なんかプリクラ撮ってる感じですよね、あれ。
目が引っ張られてる感じ。
確かに。
kudakurage
いやもうちょっとな。
まあでもなんか改めてこう、
Vision Proアプリを作る意欲が湧いてきたから、
ちょっといろいろ作っていきたいなっていう感じになってきたけどね。
12:04
kudakurage
まあとりあえずワンパスワードが僕は入れられたんで、
もう大丈夫だと思ってんだけど。
Takaya Deguchi
対応してましたね。
kudakurage
基本、あの辺はiPadとかのアプリのやつをそのまんま使えるようにしてるみたいな感じかな。
Takaya Deguchi
YouTube、Spotify、その辺りが欲しいな、早く。
いやコンテンツ楽しむものだからさ。
普段使ってるコンテンツ楽しむやつが対応してないから。
kudakurage
うーん、まあちょっとOSももっと良くなってほしい部分はあるし、
まあアプリケーションもまだまだ多くはないですからね、やっぱり。
もうちょっと。
まあでもこれからまた増えていくのかな。
増えていくのかな、どうなんだろうな。
みんなどれくらいやる気あるんだろうって感じはあるけど。
Takaya Deguchi
そうですね。
kudakurage
まだオキュラスとあんまり変わんない感じがするな。
デバイスとしては違うんだけど、雰囲気としてはオキュラスと同じ感じでやるから。
Takaya Deguchi
正直めちゃくちゃ使い続けるかって言われるとまだ自信がないですね、全然。
kudakurage
いやまあそれはそうだと思うよ、僕もそうだし。
いやなんかだからそのエンタメ系のアプリが欲しいっていうのも分かるけど、
でもエンタメ系のアプリがあるからといってめちゃめちゃ使い続けるわけでもないっていう気もしてるんだよね。
まあオキュラスがそうだったから。
まあメタか、メタクエストとか。
Takaya Deguchi
え、じゃあ何があったら。
kudakurage
まあだから普段の仕事とかでもうこっちじゃないとダメみたいなのがあったらもしかしたら使い続けるかもしれないけど、
まあでもそんなのなかなかないと思うからね、それも。
難しいとは思いますけどね。
Takaya Deguchi
まあそこまでいくのはもう寄り先な感じがしますね。
まあまずはエンタメじゃないですか。
第1弾は。
kudakurage
YouTube出すのかな。
YouTube出さない可能性もありそうだけど。
Takaya Deguchi
まあGoogle系はちょっと怪しいですよね。
kudakurage
でもGoogleは今Googleグラスやってないからそっち系どうするんだろうなっていうのもあるんだよな。
まあなんかうちうち向けには実はなんかまだやってるみたいな話もあるけど。
Takaya Deguchi
そうですね。
kudakurage
でもなんか一応開発はやろうとしてるみたいな噂はあるんだ。
15:05
kudakurage
ビジョンプロ向けのYouTubeなのかGoogleのなんかのアプリは。
まあだからそのうち出るんじゃないですかね。
Takaya Deguchi
出て欲しいですね。
kudakurage
なんかでも周りはどうなんですか?なんか盛り上がってる雰囲気ありますか?ビジョンプロ。
Takaya Deguchi
いや冷静な感じな気がするけど。
kudakurage
日本で。
Takaya Deguchi
みんな冷静な感じがするけど。
kudakurage
冷静っていうのは?
Takaya Deguchi
え。
kudakurage
あ、でも結構話は出てくるんだ。
Takaya Deguchi
いいよ、出てこないから。
その発表した時の盛り上がりに比べると全然なんかこう穏やかな感じがしますけど。
でも買ってる人は割と周りにいる気がするけどね。
kudakurage
あ、そうなんだ。えぇー。
Takaya Deguchi
思い当たる中で。
kudakurage
みんな買ってんだな意外と。
Takaya Deguchi
5人くらいはいますよ。結構買ってる印象ですけど。
kudakurage
あ、そうなんだ。みんな買ってんだねじゃあ。
いやまあでもね結構そんな気軽に買える値段じゃないからね。
Takaya Deguchi
そうね。
kudakurage
メタの方がまだ気軽に買える値段だなってなっちゃったよな。やっぱり。
Takaya Deguchi
まあそうですね。
kudakurage
まあもうちょっとでも僕らの会社ではもうちょっといろいろ細かいアプリを作って
開発ノウハウをためていこうと思ってるから。
Takaya Deguchi
はい。
kudakurage
多分引き続きいろいろ触っていくと思いますけど。
Takaya Deguchi
うん。
kudakurage
盛り上がるのかなと思いながら。
っていうかあとはあれだよね。やっぱ開発者向けのAPIがやっぱり結構まだ制限が多いから。
とかまあノウハウがそもそもあんまり溜まっていない部分が多いから。
うん。
まだこう手探り感がどうしても否めない感じがありますけど。
うん。
その辺がもうちょっとこうねある程度安定してきてとか。
こういろいろできる、これもこういうふうにやればできるっていうのがなんか出てくると良さそうだなと思ってますけどね。
開発者的には。
結局Windowsベースみたいなアプリケーションが多いからなやっぱり今のところは。
そうですね。
ほとんどiPadみたいな。
うん。
Takaya Deguchi
まあ早いとこVision OS2が出て。
うん。
拡大の何だっけ、局面ディスプレイみたいなやつ使いたいですね。
あーはいはいはいはい、そうですね。
kudakurage
やっぱ狭い、今のやつは。
Takaya Deguchi
うーん、まあ。
kudakurage
そう。
まあ、まあ。
そうですね。
僕比較対象が。
たぶん瀬口くんが使ってる。
Takaya Deguchi
そうそうそう。
kudakurage
そうそう。
普段からでかいディスプレイ使ってるから。
18:00
Takaya Deguchi
そうだね。
それに比べると感動があんまなくて。
kudakurage
まあその2画面3画面とか使ってたりするから、それに比べるとちょっと狭くなっちゃうから。
まああれが早くね、ミラーリングでなんかディスプレイでかくできるやつが搭載されれば。
そうね。
もうちょっと作業環境として良くなりそうな気はしたけど。
Takaya Deguchi
うん。
まあちょっと今度旅行に行くんでちょっとそこに持ってってみようかなと思ってます。
kudakurage
まあなんかちょっと前に友達に試してもらおうと思って、外に持ってっていろいろと使ったりもしてたけど。
うん。
まあなんかそれもこう日向で使うか日陰で使うかによって結構見え方がいろいろと違ったりしてて。
うん。
まあ基本やっぱりなんか部屋の中で使うっていう想定みたいな感じの印象はあったけど、
なんかやっぱり日向でちょっと使うと見づらいみたいな部分がどうしてもね、あったりとかして。
うん。
日陰ぐらいで見るのがちょうど一番コントラストが出て見やすくなるみたいな。
ただ逆に部屋の照度があまりに低いと結構パススルーでノイズが出てくる。
Takaya Deguchi
で、暗くしすぎるとフレアが出るっていう。
kudakurage
そうそう。なかなか結構周囲の環境に影響されるやつだなと。
Takaya Deguchi
うん。いや、ほんと。ほんとそういう感じしたな。なんかあれ?
フレアちょっと分かんない。
kudakurage
暗い環境はあれかもね。暗い環境はね。
まああれは結構好き。景色がバーって広がるやつ。
Takaya Deguchi
はいはいはい。
kudakurage
あれのバリエーションもうちょい増えてほしいですね。なんかカミングスーンが何個かあったけど。
そう。
Takaya Deguchi
であれダークモードっていうか、夕方の映像とかでそういう感じ。
そうですね。
だからあんまり映像の場合はね、映像の場合はね、
あの、映像の場合はね、あんまり映像の場合はね、
カミングスンが何個かあったけど
だからあれダークモードっていうか
夕方だったら夕方になってくるし
夜だったら夜になるみたいな
あれは結構いいっすねやっぱ
kudakurage
まあでもなんか
それは見やすくてすごい綺麗だし
いいんだけど
こうパッスルーがある
Vision Proのいいところが
なんか全部なくなっていく感じがするっていうかさ
そのVR基金みたいになっちゃうじゃないですか
Takaya Deguchi
結局それって
kudakurage
なんかそこはもうちょっと
だからあれだろ
僕もだから使ってて
部屋の中で使ってる時とか
まあ外でもそうだったけど
あんまり別に歩き回らないっていうかさ
動き回らない基本使い方してたんだけど
もう電源バッテリーにケーブル挿して
やったり使ってたりとかしてたから
だけどもっと自由に動き回りながら
21:01
kudakurage
使うみたいなのをもうちょっとやってもいいのかなって
最近思ってましたけどね
なるほどね
それが逆にこう
Vision Proの良さを引き出す部分が
実はあるんじゃないかみたいな
Takaya Deguchi
なるほどね
あんま確かに歩いて回らなかったな
むしろパッスルーずっとオフにしてたな
kudakurage
いやなんかでも細かい部分いっぱい
こうなってほしいなっていうのあったから
ほんとOSのアップデートを早くもっとガンガンやってほしいな
もうなんか1年に1回とかじゃなくて
もうガンガンアップデートすればいいようにって思ってるんだけども
Takaya Deguchi
やっぱなんかランチャーアプリ的なのが欲しいですね
なんかホームを毎回立ち上げなきゃいけないじゃないですか
でアプリ探したりとか
kudakurage
ドック的ななんかこうショートカット的なのが欲しい
Takaya Deguchi
ドックね
kudakurage
ドックなのか検索なのかわかんないけど
Takaya Deguchi
検索っていうかなんだスポットライト
確かに検索の概念ないのかな確かに
kudakurage
あれVision ProってSiri呼び出せたっけ
そういえばどうだっけ
なんか現状あったっけ
なんかありそうなんだけど特にそれ考えたことなかったの
ある?ありそうだけどなんか使ってる場面を見たことがない
確かにまだなんかちゃんと使える感じになってないのかな
いやあるよな
なんかもうHey Siriって言わなさすぎて
Hey Siriって言うことすら忘れていた気がする
Takaya Deguchi
そうね期待してないからなSiri
現状のSiriには
kudakurage
いやでもなんかそのWFDCの発表では新しいSiriはちょっとパワーアップしてるじゃないですか
Takaya Deguchi
新しいのには期待したいけど今のSiriには
kudakurage
期待してないからな
Takaya Deguchi
まあでもやっぱ音声入力は使えますねiPhoneに比べると全然
kudakurage
うんまああのそのなんていうのキーボード入力っていうかその別の入力が難しいから
Takaya Deguchi
キーボード入力も意外にできるけど
やっぱ日本語入力がめんどくさいなっていう
kudakurage
だってやっぱマルチタッチじゃないし
やっぱ空中をこう押す感じっていうのは難しいんじゃないですか
Takaya Deguchi
僕目でやってますけどね
kudakurage
ダイレクトタッチとはいえ
Takaya Deguchi
ダイレクトタッチじゃなくて
目でやっても意外にいけるなというのは
24:04
Takaya Deguchi
それはすごいなとは思いましたけど
kudakurage
まあでもやっぱり難しいから
結構音声で入力した方が実は楽っていうのはなんか結構多かったんだけどな
やってみて
Takaya Deguchi
なんかキーボードが手前に出てくるじゃないですか
で
kudakurage
その入力中のやつが後ろに出てくることあるじゃないですか
入力中のウィンドウとかってことですか
Takaya Deguchi
そうそうそうそう
kudakurage
はいはい
Takaya Deguchi
だから今何を入力してるのかを奥見なきゃいけない
なんか手前と奥をちょっと行き来しなきゃいけないくならないですか
なんかキーボード入力のとき
あの目で目で入力するとき
一応なんかキーボード上にもなんか入力してるテキストは出てきますけど
kudakurage
全文はもしかしたら出てこないかもしれない
いやなんか開業したりとかすごい長いと
多分全部は表示しきれないと思いますけどね多分
それがすごいやりづらいなと思った
ちょっとそんなめちゃくちゃ長いテキストを入力してないから分かんないけど
Takaya Deguchi
やってみようかなこれもちろん
逆にキーボード買いたくなりました
kudakurage
Appleの純正キーボード
純正じゃないとダメとかあるんですか
Takaya Deguchi
いや純正じゃなくてもいいんだけど
kudakurage
なんかそういう外付けキーボード買いたくなったっていう
外付け
まあそうね
まあでもやっぱり音声入力の方になっていくんじゃないですかね
Siriに寄せていくんじゃないかな
Takaya Deguchi
そうですね
AI Siriに
そういう時点でこう人柱感をすごい試されてる感じがします
まあしょうがないよね
kudakurage
しょうがないよね
Takaya Deguchi
分かっちゃいたけど
kudakurage
なんか仕事につなげたいなって思ってるから
エンタープライズAPIの方もいろいろ
だから試して
なんかアプリ作れるといいなと思ってますけどね
まあでもちょっとあれ多分ストアに並べられないから
Takaya Deguchi
本当にデモアプリみたいな感じになっちゃいそうですけど
kudakurage
そういう業務用アプリを作るとか
なんか仕事にできるといいな
できないかな
Takaya Deguchi
仕事ないかな
応募したらいいんじゃない募集したらいいんじゃないですか
kudakurage
募集は常にしてますよ
Takaya Deguchi
表明をした方がいいんじゃないですか
kudakurage
まあちょっとブログ書いたりとかねしてるんですけどね
いやもうブログ書いて途中で書いたやつがいくつかあるから早く出さないとな
27:00
Takaya Deguchi
途中まで書いたやつとか
出してください
じゃあまあちょっと
Vision Proの話はそれはそれとして
まあもう1個コンフィグがあったので
今日はちょっとその話をしようかなと思うんですけど
コンフィグ見ました?キーノートとかセッションとか
kudakurage
いや見てないですね
Takaya Deguchi
一切?
一切見てないですね
一応コンフィグのキーノートのまとめみたいなやつはちょっと見た
kudakurage
それぐらいしか見てない
Takaya Deguchi
なるほどね
ちょっと僕は仕事でちょっとすごい影響することやってたので
がっつり見てたんですけど
まあちょっとまずじゃあキーノートのおさらい的な話からいきますかね
まあ大きく言うと
一つ目のアップデートとしてはあれですね
kudakurage
UI3っていうフィグマ全体をリデザインしましたっていう話で
Takaya Deguchi
これまだ僕未だに降ってきてないんですけど
もてなさん使えてます?これ
kudakurage
いや僕は多分リクエストもしてないから全然だと思いますけど
Takaya Deguchi
リクエスト僕してんのに全然一向に降ってこなくて
試してないんだけど
試してないからまだ試さずにこの話をするんだけど
なんか全体的にこう
まあかなり大幅に作り直したみたいな感じなんですよね
でなんか一個個別のセッションがあって
How We Redesigned Figmaっていう
このUI3をどうやって作ったかみたいなセッションがあって
でそれをこう見てたら
まあ結構なんか
なんか基本的な指針としては
まずフィグジャムとフィグマと
新しく出てきたフィグマスライドの一貫性みたいなのを作りたいっていう話で
全体的な印象としては
フィグジャムを結構踏襲してるっていうのは分かりやすいかなと思うんですけど
その下にフローティングのバーが出てきたりとか
フィグジャムってなんかフローティングのバーが常に下にあったりして
そこでデザインというか
オブジェクトを置いたりとかすると思うんですけど
そのUIが踏襲されてる
というのとあとフィグマスライド新しく出てきたやつも
それをこう踏襲するようにして
で後から話すAIとかも全てそこから呼び出すみたいな
なんか何か書いたりする
書いたり何か呼び出したりするっていう
基本的なツール類は
その下のフローティングバーに集まってるっていうような設計になったっていうのと
30:00
Takaya Deguchi
あともう一個がその左右のペインがこれまで
あんまこうゆうずきかなかったじゃないですか
固定幅だったりとか
一部幅変えられたりするけど
あんまこうなんていうの
結構なんか頻繁に消したり表示したりとかしません
僕だけかなそのコマンドスラッシュで消せるじゃないですか
左右ペインっていうのをよくやるんだけど
なんかそういう左右ペインを隠しても作業できるようにするっていうのを
やりやすくするっていうような
なんかそのなんて言ったらいいのかな
これまでって出してるか隠してるか認証しかなかったんだけど
そこをもうちょいグラデーション作って
作業を集中したいときは左右のペイン消して
必要なときに必要なペインが出てくるみたいな
なんかそういうような設計に変えましたみたいな話をしてましたね
なんでなんか
あとなんかあれですね
デザインシステム向けで
コンポーネントのプロパティ周り
右のペインの今真ん中あたりぐらいに
バリアントのプロパティが出てくるじゃないですか
コンポーネントを押すと
あれがなんか結構目立つような感じの設計に変わるとか
あとコンポーネントの名前とかディスクリプションが右のペインに出てくるとか
今出てこないと思うんですけど
だからコンポーネント名って
左のレイヤーで確認するしかなかったりすると思うんですけど
それが右のペインに出てきたりとか
あとオートレイヤーと周りも結構いろいろ変わるみたいで
今で結構オートレイヤーとに関連するものが分散してるんですよね
右のペインで例えば幅とか高さとか
オートレイヤーとの場合フィルとかハグとかに設定すると思うんですけど
それが一番上にあって
その下にオートレイヤーとの操作するパネルがあって
フローの方向とかいろいろ操作すると思うんですけど
そういうのを全部一個にまとめた
オートレイヤーと用のパネルみたいのができて
そこでオートレイヤーとの自動変換とかもそこでトグルがあって
オートレイヤーとのオンオフっていうのが結構簡単に変えられるようになったりとか
またオートレイヤーとのサジェストみたいのが入るって言ってたかな
ちょっとまだ僕も試してないけどそれ
なんかこれとこれをオートレイヤーとにできますよみたいのを
33:01
Takaya Deguchi
サジェストしてくれるのかなっていうのが入ったりとか
そうしてデザインシステムを使った状態の時に
うまく機能
どっちかというとあれか
コンポーネント周りとかバリアブルズ周りが結構後乗せで
これまで追加されてきたから
前回のUIだと特にバリアブルズとかって結構目立たなかったりするんですよね
レイヤーにバリアブルにアサインとかできるんだけど
結構わかりづらかったりしたから
なんかその辺がコンポーネントとかバリアブルズの前提で
設計し直されてるっていうような感じの印象でしたね
kudakurage
なんか確か一番上あたりにそういうコンポーネントとかバリアブルズのところ
なんかゾーンというかパネルがボンって大きく表示されて
なんかそれがメインみたいな感じになってるから
割とそれ前提で設計して作れよみたいな
Takaya Deguchi
そうそう
なんかそういう印象だった気がしたけどね
特にディスクリプションが結構目立つ位置に入るんですよね
だからそのコンポーネントがどういう状態なのかみたいな
ちょっとまた後で話す
他のセッションでもディスクリプションを結構有効活用しろみたいな話をしてたりとか
っていうような感じのアップデートがUI3っていうのも一個入るっていう話でしたね
あとはデブモード周りの強化の話で
前何回か前にフレームワークバイフィグマのイベントに行ったっていう話の時に
なんかコンフィグでこうなった方がいいよねみたいなことを話してたと思うんですけど
その時にレディー4デブっていうデブモードにステータス付けられる
これが開発レディーな状態ですよっていうように
エンジニア向けに伝えるっていうステータスがあるんですけど
そのステータスが一種類しかないから使い物にならないっていう話をしたと思うんですけど
そこがアップデートされてバリエーションが増えたんですよねステータスが
レディー4デブっていう状態に加えて
コンプリートっていう実装完了状態っていうのと
あとは実装完了してからデザイン変更が入る場合があるので
チェンジズっていう状態が増えて
それがワーニング状態っていうか
コンプリートの後に何かしらの変更が入ると
チェンジズ状態に勝手に変わるんですよね
そのステータスが
で そのチェンジズ状態になったときに
36:01
Takaya Deguchi
コミットメッセージみたいなのを残せるようになったんですよ
デザイナーがどういう意図で変更を加えたのかっていうのを
エンジニアに伝えるような
そういうコミットメッセージを残す機能が新しくついて
で コミットメッセージを残すと
ワーニング状態が溶けて
Ready for Devにまた戻るっていう
だから開発準備完了状態
開発完了状態 変更が加えられた状態
で そこでコミットすると
また開発準備完了状態に戻るっていうような
その一連のフローがFigma上で表現できるようになったっていう
これがステータスのアップデートで
で エンジニア向けに
あれは何だ フォーカスビューだったかな
エンジニア向けのDevモードの延長線みたいなビューが一個新しくできて
何て言ったらいいのかな 通知を受け取るビューみたいなやつができた
Ready for Devに
各セクションごとにReady for Devとか
そのステータスが付けられるんですけど
全てがReadyが今何個あってCompletedが何個あって
Changedが入ったのが何個あるみたいなのが
受け取るインボックスみたいなのができて
基本的にエンジニアそこを見れば
そのデザインファイルの中で何が起こってて
自分が今何を実装しなきゃいけないのかっていうのが
分かるようになるっていうようなビューが新しくできたんですよね
だから結構これまでデザインシステム作ったりとかして
コンポーネントたくさんこう作ってるような中だと
結構なんかその何かしら看板
GitHubのプロジェクトなり
Jiraなり何なりそういうところで管理してたと思う
しなきゃいけなかったんですけど
Figmaでもそれなりに
その各コンポーネントの実装状況っていうのが
タスク管理できるようになったっていうのが
このアップデートですね
もうちょっと何かいろいろ
ステータスのバリエーションを増やしてほしいなとか
いろいろ思うところはあるけど
最低限使えるかなっていうような気がしましたねこれは
あとはDevModeは結構かなり強化いろいろされていて
エンジニア向けのフォーカスビューっていうのができて
これまでもコンポーネントプレイグラウンドっていう
39:04
Takaya Deguchi
コンポーネントのプロパティがどういうのが生えてるのかとか
そのバリアントのプロパティがどういうのが生えてるのかっていうのを
リアクトのストーリーブックみたいな感じで
確かめるようなビューがあったんですけど
それの延長みたいなやつで
フォーカスビューっていうのが入って
そのフォーカスビューの中で
例えばレスポンシブの幅を変えると
どういう風に
ウィンドウの幅を変えると
コンポーネントがどう変わるのかとか
そういうのがプレイグラウンドできるようになったっていうのが
入ったみたいですね
っていう中そのフォーカスビューっていうのと
さっきの各通知を受け取るインボックスみたいなやつが
一体になってて
基本的にエンジニアはそれを見て
通知を受け取って
開発のステータスの通知を受け取って
それぞれのコンポーネントにフォーカスにして
動きとかを確かめて実装に移るっていう
結構このままだとストーリーブックとか
ジラとかそういうのを組み合わせてやってたことを
Figma上で完結できるようにする
言ってもまだまだ素朴な感じだけど
そういうのを目指してるんだなっていうのが
伝わってきたアップデートで終わりましたね
なるほどね
っていうのがデブモード周りかな
あとはコードコネクトっていう
コンポーネントに対応するリアクトとかのコード
そのコードスニペットみたいな生きたコードを
Figma上に埋め込むみたいな
エンジニア向けの機能があるんですけど
それがこれまでベータ版だったのが
正式リリースされたりとか
それも結構UI3って新しいUIの中では
結構強調されて表示されるような感じになってて
Figma的にはどんどん使ってほしいんだろうな
みたいな雰囲気は感じましたね
っていうのがデブモード周りのアップデート
あと最後にFigma AIがあって
Figma AIは大きく3つカテゴリーがあって
1つがGet Started系って呼んでたけど
0から1をするときに使うみたいな感じのもので
プロンプトベースで01のUIを作るみたいな
プロンプト書いたらそれに従ったUIを作ってくれる
っていうのが1個入った
それがさっき言ったUI3って新しいUIでは
結構下に出てくるフローティングのツールバーの
42:02
Takaya Deguchi
特等席みたいなところに呼び出すボタンが置いてあって
デザイン中にいつでもそのプロンプトベースで
UIを作り始められるっていうところですね
生成後にラディウスいじったりとか色変えたりとか
簡単にできるようになってたりとか
もしかしたら内部的にバリアブル使ってるのかなとか
まだ僕振ってきてないから試せてないんですけど
そういう生成したものにちょっと手を加える
みたいな機能がついてたりとか
kudakurage
01は完全に01なんですか
Takaya Deguchi
完全に01
kudakurage
っていうのは何だろう
例えば既に作ってある画面を見て踏襲してくれるとか
そういうのはない
Takaya Deguchi
現状はない
kudakurage
じゃあ完全に01なんだ
Takaya Deguchi
完全に01
ここがやっぱポイントで
既存のアセットなり既存のデザインシステムを使った上で
プロンプトでUI作ってくれるっていうところが
本番だと思うんですよね
そこができるようになるのが
発表の中でもまだそれには見たいようだみたいなこと言ってたから
なんか学習データ貯めなきゃいけないから
ベータ版でリリースしますみたいな話だったので
おいおいできるようになるのかなと思うんですけどね
ここがやっぱ自分のデザインシステムをベースにできるみたいなことになってくると
かなり熱いかなと思ってて
前も何回か紹介したV0のバーセルのV0みたいな感じで
そのバーセルの作ってるデザインシステムをベースにして
V0の場合は作られるんですけど
そういうように各社のデザインシステムとか
各社の用意したコンポーネントライブラリをベースにして
プロンプトベースで作ってくれると
プロトタイピングとかそういう時に便利かなっていう
あとはファイルに表示しているもので空気読んで作ってくれるとかね
kudakurage
そうそうそう
デザインシステムなくても空気読んで作ってくれて
空気読んで作ったやつからデザインシステム作ってくれるぐらいの感じになってほしいですけどね
Takaya Deguchi
そうですね
AppleのApple Intelligenceが画面のコンテキスト読んで
なんかやってくれるみたいな話じゃないけど
kudakurage
なんか表示しているものをベースにしてデザイン組んでくれるみたいな
Takaya Deguchi
っていうところが目指すところであるんですけど
それの一歩手前としてまずはコンポーネントを使ってデザインしてくれるっていうところは
やってくれると使い物になってくるのかなみたいな感じでしたね
45:03
Takaya Deguchi
あとはそれが01系でまたFind系のいくつか機能が追加されて
フィグマの使いどころがあって
なんかビジュアルサーチって呼んでたけど
なんかスクショとかそういうものから
フィグマの自分のチームの中から元デザインを探すとか
あとはフィグマ上のデザインの中にあるテキストで検索するとか
あとなんか手書きで自分でアイコンを書いて
それに近しいデータを自分のフィグマのチームの中から探してくるとか
そういうイメージとイメージというか
イメージとデザインファイルみたいな感じで検索するっていう機能があるみたいですね
これ結構デザイン会社とかだと便利だなっていう
デザイン会社の場合フィグマ上にめちゃくちゃデータがあるから
なんか自分のやってることと近しいプロジェクトのデータを探すとか
すごいしやすくなりそうでこれはデザイン会社的には嬉しいなと思いましたね
あと3つ目がリファイン系で
これは分かりやすい話で背景取り除くとか写真の中のね
あとテキストデータの翻訳するとか
日本語のラベルをドイツ語に変えるとか
リストUIで一個UI組んであって
それをコピーしたときにそのリストの中身のタイトルとかを
それっぽいコンテンツに変えてくれるとか
テストデータみたいなやつじゃなくて
それっぽいデータを入れてくれるっていうような使い方とか
あとレイヤー名を吉田にリネームしてくれるっていう
使い方とかがあるみたいですね
レイヤー名を吉田に変えてくれるのが
たぶん一番なんだかんだ使うのかなと思いましたけど
どうやってやるんだろうね
どうやってやるんですかね
まだちょっと使ってないから分かんないけど
コンテキストを読んでるのかな
謎 謎技術
kudakurage
ナビゲーションバーに入ってるタイトルを見るとか
そういう簡単なことはできそうだけど
それ以上に何かできるのか
Takaya Deguchi
タイトルっぽいものからなんか引っ張ってくるのかな
どうなんすかね
48:02
Takaya Deguchi
たぶん時期に全員これが公開されると思うんで
今週来週には試せるんじゃないかなとは思いますけど
kudakurage
あとなんかプロトタイプ勝手に作ってくれるみたいなのなかったっけ
Takaya Deguchi
マウックプロトタイプっていうか
kudakurage
多分インタラクションをつなげるみたいな
Takaya Deguchi
そうそう矢印をいい感じに引いてくれるみたいなのがあるみたいですね
kudakurage
あれもなんかどうやるんだろうなって思ってたんだけど
タブナビゲーションっぽいUIだったらとかったら
まだ簡単にわかるとかさ
バックボタンだったらバックつければいいだけだから
わかりやすいけど
どこまでやってくれるんだろうみたいな
Takaya Deguchi
謎技術だなと思ってこれも
何らかアノテーションすると精度が上がるみたいなことだと思うから
例えば適切にバリアントのプロパティを生やしておくとか
そういうアシストが必要なんじゃないかなっていう気がなんとなくするけど
それはなくても使えるんだろうけど
そういうのがあるとより精度が上がるとかありそうだなっていう
なんだかんだAI万能っぽく見えるけど
やっぱ構造化してた方がAIに優しいと思うから
ちゃんとバリアントにするとかプロパティ生やすとか
そういうことはしておいた方がいいんじゃないのかなっていう気はなんとなくしますけどね
kudakurage
でもそれがめんどくさいからそれをAIにやってもらいたいんだよね
そうね
Takaya Deguchi
それはそう
一番めんどくさかったレイヤーの名前をいい感じにする
しないことが多いけど
パブリッシュするようなコンポーネントだとちゃんとレイヤーメモ
ヨシナにやってくれるのはやりたい気持ちはあるから
やってくれるのはありがたいかなとか
っていうのがAI周りの話で
あとはフィグマスライドが入ったっていう話でしたね
ハッカソンから生まれた機能だみたいな話をしてましたけど
いいなと思ったのは
Googleスライドのテーマみたいな
そういうテーマが作れたりとか
あとはキーノートのアニメーションみたいなのができたりとか
あとはスライドの中にインタラクティブなプロトタイプを埋め込めたりとか
51:05
Takaya Deguchi
あと投票機能があるみたいな話をしてましたね
スライド見てる側が投票にボタンをポチってしたりとか
あとスライダーで投票したりとか
インスタのストーリーとかの投票機能みたいなやつに近いのかなっていう
そういう双方向で
ただ聞くだけじゃなくてそういう双方向なアクションを埋めるから
埋めるのが無理ですみたいな話をしてましたけど
フィグマのスライド結構
デザイン会社だと結構プレゼン資料とか作るとき
大体フィグマで今作ってるからそういう意味では便利
助かるなと思いましたけど
kudakurage
なるほどね
便利そう
僕もよくフィグマでスライド資料作ったりするから
Takaya Deguchi
うん
kudakurage
まあやりやすそうになってんのはいいけど
別プラン入んなきゃいけないっていうのはちょっと辛い
Takaya Deguchi
そうそうそうそうなんですよ
なんか便利そうだけど
現状でもできなくはないできてるしなみたいな
現状普通のフィグマでもできてるしなみたいな思うと
そこに別立てでお金払うのかみたいな気持ちにはなりますね
kudakurage
なりますね
Takaya Deguchi
うん
kudakurage
これ
まあなんだっけ
Takaya Deguchi
あの
kudakurage
フィグマの見ろみたいなやつって
フィグジャム?
フィグジャムはまあ別に
どっちでもいいなと思ってんだけど
スライドは割と使いそうだから
普通にお金払ってる人には使い解放してほしいな
無料で無料でっていうか
込み込みにしてほしいなみたいな
感じあるけど
Takaya Deguchi
まあフィグジャムもそうだけどどっちかというと
ノンデザイナー取り込む機能なのかなっていう気がするから
まあそれはそれとして
フィグマ本体のエディター持ってる人はまあ込みで使えるとかにしてほしいな
kudakurage
そうそうそうそう
Takaya Deguchi
気持ちですよね
そうしてほしいな
でまあもちろんフィグマAIもアップセルなので
まあ結構盛り盛り使うと
まあほんとアドビー並みのお金がかかるんじゃないですかね
kudakurage
フィグマAIもアップセルなんだ
Takaya Deguchi
そうそう
年内だったかな
アップセルっていうのは?
別立ての料金
kudakurage
えーじゃあまた別でなんか払わなきゃいけないってこと?
Takaya Deguchi
みたいですよ
kudakurage
あそうなんだ
54:00
kudakurage
それはなんか意外だな
Takaya Deguchi
まあベータ版のうちは無料で使えるみたいですけど
正式版は
いやだから
kudakurage
ビジネスだったら使えるとか?
ビジネスでもさらにまた別で払わなきゃいけないとか?
Takaya Deguchi
なんか別で払わなきゃいけなそうな雰囲気でしたけどね
kudakurage
マジで結構攻めてきてるね
Takaya Deguchi
いやまだフィックスしてませんみたいな雰囲気だった方倍ですけど
確かそう
ちょっと間違ってるかもしんないけど
フィグマAI
あーそうですね
まだなんか細かいところ決まってないみたいな感じみたいですね
っていう感じで
まあ本当
フィグマAI、フィグマスライド、フィグマ本体、フィグジャム、デブモード
まあもろもろ料金
上乗せだと思うんで
どんどんすごいことになるなみたいな感じですね
全て使おうってなると
っていうのがキーノートで
印象としては結構手堅いアップデートが多いなというような感じで
AI周りもそんなに驚きはないっていうか
プロンプトベースで01のUI作るのは
まあなんかこのタイミングで入るのかとは思いましたけど
まあでもそうじてユースケースとしては
何か新しいものがあるっていうよりは
どこかの他のサービスでやってることを取り込んできたなみたいな感じですかね
はい
でまあ逆にデザインシステム周りの
僕はちょっと期待してたのはそっちだったんですけど
拡張コレクションとかねバリアブルズの
まあそういうアップデートは全くなかったですね今回は
57:00
Takaya Deguchi
でただ一個なんか
キーノートではないんですけど
なんか突然出てきたのが
シンプルデザインシステムっていうのをフィグマが公開して
でこれがまあ結構面白くて個人的には
なんか経緯がよくわかってないんですけど
多分なんかキーノートの中で
なんかAppleとかGoogleと連携して
iOSキットとかModernize Design 3のキットを
作り直しましたみたいな話をしてたんですよね
で実際なんかもう公開されてるんですけど
その新しいiOSキットとかが
iOSキットっていうかフィグマ上のiOSの
あのアセットファイルみたいなやつですね
でそれがなんかバリアブルズが使われてたりとか
まあ結構なんか新しい機能を使った形で
作り直されてるっぽいんですよ
でなんかどうやらその一環として
シンプルデザインシステムってやつをフィグマが公開したっぽくて
でこれが結構よくできてるというか
なんかこうお手本として
すごいいいなと思ってて
なんかフィグマの
フィグマのデザインシステムというよりは
なんかこう
まあホワイトレベルデザインシステムとか言うんですけど
なんかその汎用抽象度の高い
なんだろうな
自前デザインシステムの下敷きとして使うような
デザインシステム
ですね
だからフィグマ的にはこのシンプルデザインシステムを
コミュニティから
フィグマコミュニティからコピーしてきて
フォークしてきて
それをベースにして
自分のデザインシステムを作るみたいな
なんかそういったことを想定してるっぽいですね
でもシンプルと言いつつも
結構なんか
コンポーネントも割といろいろあったりとか
まあもちろん
バリアントとかそういう機能をちゃんと使ってたりとか
あとは最近出てきたタイプグラフィバリアブルズを
使ってたりとか
なんか割とまあそういう新しめの機能の盛り合わせとして
まあお手本として
リファレンス実装的に
すごい参考になるんじゃないかなというものですね
特にいいなと思ったのは
これはレスポンシブデザイン前提に
考えられてるデザインシステムで
結構なんか
レスポンシブデザインを前提にしたデザインシステムって
あんまなんか事例が少ないんですよね
特にバリアブルズとか
新しめの機能を使ってるっていうものだと
だから結構なんか
結構レスポンシブデザインを
デザインシステムに落とし込もうって考えると
じゃあ例えば
フォントのサイズとかが
スマートフォンとPCで基準が変わったりとかするのを
どうやってバリアブルズに落とし込んだらいいかとか
結構悩むんですけど
結構
お手本があって
1:00:01
Takaya Deguchi
結構自分が見ても勉強になりましたねこれは
っていうのとさらに
コードコンポーネント
実装側も用意されていて
実装側はさらに参考になるなという感じで
全てのコンポーネントの
React版の実装が入ってるんですよね
それだけじゃなくて
なんか
デザイントークンを
JSON形式でコードで管理して
でそこ
逆だ
Figmaのバリアブル上で定義しているデザイントークンを
APIで
CSSのバリアブルズに持ってくるっていうような
サンプルがあったりとか
またその逆でJSONに定義している
コード上に定義しているデザイントークンを
Figma上に持ってくみたいな
これは昔から
去年ぐらいからあるサンプルの流用だと思うんですけど
そういうのが入ってたりとか
あとはコードコネクトっていう
さっき言った最近入った
機能が
エンジニア的に見ると
ストーリーブックって結構かにばるところがあるので
ただコードコネクトって
ストーリーブックとのインテグレーションもサポートされているんですけど
それを使った例って
まだ世にあんまないので
これそれを
インテグレーションの例みたいなのも
提供されているとか
今
デザインシステムを作るんだったら
こういうのあってほしいなっていうのの
手本が全部詰め込まれている感じがして
これはすごいいいサンプルだなという感じでしたね
実装的にも
コンポーネントのリアクトの実装的にも
ゼロから作るんじゃなくて
リアクトアリアっていう
アドビのデザインシステムが使っている
ヘッドレスUIっていう
ライブラリなんです
ヘッドレスUIライブラリっていうものなんですけど
リアクトコンポーネントの
各UIの骨格だけ提供して
スタイリングは別途自分たちでやるみたいな
そういう実装のライブラリがあるんですけど
いくつか種類があって
そのうちの一つのリアクトアリアってやつを使って
Figmaも作ってるので
結構フロントエンド的にも
モダンな技術で作られていて
そういう意味でも参考になるし
これはかなりいいリファレンス実装なんじゃないかなと思って
正直キーノートより
こっちがすごい個人的には
熱いんだと思いましたね
結構今世の中の流れ的に
ホワイトレベルデザインシステムみたいなのが
結構いろいろ生まれてて
バーセルのV-ZEROが元にしている
ShadowCNってやつもそうだし
あとはChakraUIっていう
ちょっと前からある
リアクトのコンポーネントライブラリから派生した
1:03:03
Takaya Deguchi
ArcUIっていうのをベースにした
ParkUIっていう
そういうホワイトレベルなデザインシステムもあったりとか
最近ポツポツ出てたりするんですけど
その流れを組んだ
Figma流の
ホワイトレベルデザインシステムってところで
シンプルデザインシステムが出てきたので
やっぱりこの流れっていうのは
継続するんだなっていうのと
そこでFigmaとしてリファレンスディスクを出してくれたのは
すごいありがたいなというところですね
っていうので結構
デザインシステムを作っている
デザインエンジニア的な人にとっては
熱いんじゃないかなというものですね
っていうのが機能と回りの話かな
あとは個別のセッションはいろいろ
全部はまだ見れてなくて気になったやつだけ
バラバラ見てるんですけど
さっき言ったUI3をどう作ったかみたいな
How we designed Figmaっていうセッションは
結構面白かったのと
あとは何があったかな
コンテンツデザイン&AIみたいな
セッションがあって
FigmaのUXライターの人が
自分自身もAIを使いながら
FigmaのUXライティングをやってるみたいな話があって
それも結構面白かったですね
FigJamの中で使うカラーパレットの名前を
単にホワイトグリーンみたいにするんじゃなくて
もうちょっとエモいいい感じの名前にできないか
みたいなところで
使ったんだみたいな話をしてたりとか
あと個人的に面白かったのは
デザインシステムベストプラクティクスっていう
セッションがあって
これ万人が聞いて面白いかはちょっとよく分かんないんだけど
デザインシステム作る上でのベストプラクティクスを
40分に渡って話しますみたいなセッションがあって
まずデザインシステム
コンポーネントを設計する上で
何でもできちゃうスーパーコンポーネントみたいなのを
避けましょうみたいな話があって
過度な最適化を避けるっていうやつですね
あとは同じく
バリアントもほっとくと何でもできちゃう
スーパーバリアントみたいなのができるから
そのバリアントは適切な量度で分類して
分割しましょうみたいな話があったりとか
あとはとにかく
デザインシステムのユーザーにとって
1:06:02
Takaya Deguchi
コンポーネントが発見しやすい
ディスカバラビリティっていうのを大前提にして
プロパティの名前とかをつけたほうがいいみたいな
そういう実践的な細かい話があったり
同じように
バリアントのプロパティの名前は
なるべくデザイナーを導くために
アクションベースの行動ベースの名前の付け方が
いいよみたいな話があったりとか
あとはバリアブルズ周りの話で言うと
前も話したけど
コンポジットトークンっていう
タイポグラフィーとか
複数のスタイルを連ねて
一つのスタイルを作るみたいな
ものに関しては
スタイルとバリアブルズを併用して
使ってくださいねみたいな
これは前もPodcastでも話したけど
そういうテクニックの話があったりとか
またデザインシステムを
社内で広げていくにはどうしたらいいのか
みたいなそういう話があって
まずは熱心な人を社内で見つけて
その熱心な人をまずは支援することに
フォーカスするのがいいよみたいな話があったり
あとは改善していくフェーズでは
定量と定性のフィードバックをどうやって
受け取るのがいいかみたいな話があって
定性のフィードバックは
Figmaのコメントで管理するのがいいけど
その時に絵文字とか使うと
絵文字使ってカテゴライズすると
検索できて便利ですよみたいな話があったり
あとは定量のフィードバック
定量評価もしたほうがいいですねみたいな話があって
Figma上で
そういう各コンポーネントがどれくらい使われているか
っていうのを取るライブラリアナリティクスの
機能があるんですけど
最近それがAPIが公開されて
外から取れるようになったんですよね
そういうのを取って
改善活動しているみたいな記事があるみたいで
それの紹介とか
僕も全然知らなかったけど
メトリクスをどれくらいデザインシステムが
社内で使われているのかっていうのを計測する
プラグインがいくつかあるみたいで
デザインシステムレーダーとか
いくつかあるみたいなんですけど
どれくらい社内で使われているかとか
どれくらいの人数で使われているかとか
そういう広さと深さを取るといいよみたいな話をしてたんだけど
そういうようなデザインシステムが
どれくらい社内で使われているのかっていうのを
可視化しましょうみたいな話があったり
こういう話っていまいち小さい会社でデザインシステムを
1:09:00
Takaya Deguchi
作っているとピンときてなかったというか
これまでもそういうのが必要なのかなって思ってたんだけど
割と仕事で大きめの会社でデザインシステムを作っていると
確かにこういうのが必要なのかなっていうのが
実践ベースでチップスが利けて
このセッションは結構面白かったですね
Takaya Deguchi
あとは
ティーネイジエンジニアリングの人のセッションとかも
面白かったですね
なんかティーネイジエンジニアリングの創業者と
マフィグマの創業者の対談みたいなセッションだったんですけど
なんか結構
ティーネイジってスウェーデンの会社ですけど
なんか結構こう
サノさんぽかったですね
クックパッドの
基本的にデザインは全て俺がやってるみたいな感じで
なんかこう
俺の10代の頃の経験に基づいて
そこからインスピレーションを得て
各楽器というかプロダクトをデザインしてるんだ
みたいな話があって
だからティーネイジエンジニアリングなんだなみたいな
やっぱなんか結構日本のシンセサイザーとか
そういうのにインスパイアされてたみたいな話をしてたんで
それでなんか
最近出たやつ
なんか日本語のフォントが書いてあるねみたいな話
日本語が書いてある
kudakurage
サンプラーって書いてある
Takaya Deguchi
そうそうそうそう
まあそういうのはやっぱりそういうところから
日本に結構影響を受けてるみたいな
ところがあるみたいですね
なんか結構
対談形式のセッションなんで
なかなか紹介しづらいところはありますけど
結構ナッシングとコラボしたときの話とか
あとなんかこう
とにかくデザインに個性が大事だみたいな話をしてましたね
個性が大事だから
デザインする人がどういう人なのかっていうのが
すごい大事だみたいな話をしてたりとか
とか
あと同じような話で
ブラウザーカンパニー
ARKの会社の人のセッションもあって
それも結構似たような話で
1:12:02
Takaya Deguchi
指紋を残すっていう
リビングフィンガープリントが大事だっていう風な
デザインをする上でっていう話をしてて
ARKにメンバーシップカード
みたいな機能があって
ユーザーARKのアカウントを作るときに
アカウント名を入れると
会員証みたいなのが作られる
オンボーニングの一環で機能があるんですけど
それがどういう流れでできたのか
どういう思想でできたのかみたいな話があったりとか
あとは
AI系の機能
世の中の流れに合わせてAI系の機能を入れたんだけど
そういうAIみたいな機能を
ただ入れるんじゃなくて
それをいかに
テクノロジーの外から見たときに
庭に植えている花からインスパイアされて
それをベースにして
AI機能をデザインしたみたいな話をしてたんだけど
いかにして個性を作るのかみたいなところの話
っていうのが結構されてて
そうですね
個性がない無菌状態のデザインは
NOを言うようにしてるんだ
私たちの会社はみたいなことを言ってたけど
そういう掃除で個性をいかに残すのか
みたいな話をしてましたね
ちょっと話すだけだと
不運って感じだと思いますけど
その辺のセッションは面白かったですね
そんな感じかな
さっきも言ったけど
堅実なアップデートが中心だったかなというところと
デザインシステムを作る
というかコンポーネントを作っていったりとか
そういう社内にアセットをどんどん貯めていくと
割とAIでそれがブーストされるみたいな
そういう方向性のアップデートが多いかな
みたいなところは思いましたね
そういうのを作っておくと
AIと相性が良くなる
FigmaのAI機能と相性が良くなるのかなみたいな
だからこそそこでアプセルで課金して
1:15:01
Takaya Deguchi
より売上を上げていきたいみたいな
そういう意図は見え隠れした発表でしたね
全体的に
そんなところですね
kudakurage
Figmaの作ったデザインシステムを
今見てたんですけど
アイコンも一応コンポーネントが
バーッと作ってあるんですよね
Takaya Deguchi
このアイコンの作り方は
kudakurage
こういう感じでやるんだと思って見てたんですけど
具体的にどういうものかっていうと
サイズ別に6サイズくらい作ってあるのかな
1個の
例えば矢印のアイコンがあったとして
その矢印のアイコンを6サイズくらい
一番小さいやつだと16x16
一番小さいやつだと16x16
一番小さいやつだと16x16
大きいのだと48x48
みたいなやつで
それぞれ作っていて
しかもなんかそれが
アイコンのスタイル自体がラインベースなので
全部ボーダーというか
ラインのストロークか
ストロークの太さを変えるような作り方を
していてこういう風に
Figmaは作るんだと思って
見ていたんですけどね
何が言いたいかっていうと
ストロークベースにするとスケールしにくくなるから
いつも僕はそうしてなかったんですけど
何て言うんだろう
例えば
120x120で使いたい場合って
今この中にはないので
一番大きいので48x48だから
それをでかくするんですよね
120x120に無理やり引き伸ばすんですよね
そうするとストロークで設計してあると
ストロークの太さは太くならないので
細く見えちゃったりするわけですよね
通常の他のアイコンの感じよりも
通常の他のアイコンの感じよりも
なので僕は基本的にストローク
オリジナルはストロークで作るんだけど
完全にパスとして変換するみたいな
ことをして作っていたことが多かったんですけど
Figmaはそうはしていなくて
各6サイズくらい作って
全部ストロークの太さを微妙に変えて
作ってるみたいな作り方をしていて
そういう作り方するんだっていうのを
面白いなって思って見てましたね
Takaya Deguchi
なるほどね
個人的に面白かったのは
レスポンシブ回りのさっきの話で
バリアブルズを見ると
タイポグラフィの
1:18:04
Takaya Deguchi
バリアブルズの使い方って
結構いまいち定まってなくて
コレクションを分けたほうがいいのかとかって
あんまり指針がないんですよ
コレクションを分けることによって何が違うかっていうと
バリアブルズのモードがコレクションごとに決まってくるので
コレクションを1つにしてしまうと
全ての変数にモードが入る
みたいなところがあるので
適切なルートでコレクションを分けなきゃいけないですけど
Figmaの場合タイポグラフィを2つのコレクションに分けていて
フォントのサイズとかって
レスポンシブデザインの場合
基準のサイズが変わってくるので
例えば書く
テキストスタイルのボディとか
ヘディングとかタイトルとか
そういうのを作ると思うんですけど
それぞれフォントサイズが決まっていて
ただそれがスマートフォンとPCで
サイズが変わってきたりすると思うんですよ
その辺はFigma的にどうしてるのかなと思ったんですけど
Figma的には
サイズベースっていうバリアブルがあって
ルートフォントサイズっていうバリアブルがあって
ルートのCSS的にはボディに設定するような
フォントサイズだけは
各デバイス幅によってフォントサイズを変えるんだけど
各コンポーネントから参照されている
タイトルとかヘディングとかの
フォントサイズは
全てのデバイス幅で一定になってて
これでいいんだっていう風なのは
ちょっと思ったりしたんですけどね
ルートはデバイス幅によって変わるのに
各コンポーネント内で使われている
テキストサイズの幅は変わらないみたいな感じの
使い方になってて
kudakurage
でも僕も結構そういう風に
設計してることが多いかも
ボタンの中のテキストサイズとか
ラベルのサイズとかってことですよね
コンポーネントの話っていうのは
Takaya Deguchi
ボタンもそうだし
ダイアログとかそういうのの中の文章とかもそうですね
kudakurage
割と共通してる気がしますね
なんかタイトル
それこそ字のところに入ってる
そのページのタイトルとか
そういうものはスマートフォンとかデバイスによって
大きさ変えるっていうのはよく
スマートフォンの方が明らかに表示領域が狭いので
ちょっと小さくしてあげないと
すごいことになっちゃうとかあるんで
するけどボタンは割と
あれじゃないですか大きいラージサイズとか
1:21:01
kudakurage
ミディアムとかスモールとかっていうのがあるので
もうそれで十分割と
使い回せるのでスマートフォンでもPCでも
だから割とそのまんま
使ってることの方が多いかな
Takaya Deguchi
うん
このコンポーネントのFigmaの
シンプルデザインシステムの場合は
ラベルとかフォームのラベルとか
全てが共通になっちゃう作りになってるんで
うん
これはこれでいいのかなと思ったところではありますけどね
kudakurage
うーん
でも言っても
大体PCでもスマートフォンでも
普通の本当サイズのサイズって
16から13ピクセルの間ぐらい
じゃないですか大体
だから割とその辺のラインに合ってれば
そんなに違和感はないかなと思って
僕も大体いつもそれぐらいで設計してる
気がしますね
もちろんね
場合によっては変えた方がいいとかっていうのもあるのかな
あんまり僕はそういうことやったことない気がする
今まで
大きくするとか小さくするとか
Takaya Deguchi
コンポーネントの流度によると思うんですけどね
うん
コンポーネントの流度が大きいと
なんていうか
ほぼほぼページ全てが
コンポーネントみたいになってくると思うんで
例えばカードUIとか
はいはいはい
買いたくならないのかなとか思うんですけどね
kudakurage
だから
きっとあれなんだと思う
そういう場合も確かにあり得そうなんですけど
例えば割と
デスクトップ画面結構大きい画面で見ることを
前提としたカードっていうのを設計しておくと
多分スマートフォンでそのまま表示すると
ちょっとデカすぎちゃうみたいなことが起き
起きえそうじゃないですかそういうのって
僕は多分結構今までやってるデザインっていうのが
スマートフォンが
そもそも前提としてあるっていうのが
頭の中にあって
それを他のデバイスにも展開していくっていう
発想で作ってることが多かったから割と
だからあんまりそういうことをしなかったのかもしれないですね
なんか
小さい画面をまず前提として作っていて
それを大きい画面にどう展開していくかっていう風に
考え方で作ると割と統一された
もので作ってることが多い気がする
それがベストかどうかっていうのはちょっと分からないけどね
Takaya Deguchi
はいはい
あとはなんかテキスト
1:24:02
Takaya Deguchi
コンポーネントが置いてあったりとかね
なんか
フィグマ上だとテキストスタイルで基本的には
運用するじゃないですか
だけど実装的にはテキストコンポーネントみたいなのを
作りたいことはあるんですよね
あるある
っていうのを考えてフィグマもなんか実装向けにあくまで
用意してありますみたいなことがなんか注釈として書いてあるんですけど
やっぱフィグマでもこういうことやるんだなっていうのは
ちょっと思ったりとか
kudakurage
テキストコンポーネントってどこ見るとある
Takaya Deguchi
テキストっていうところページ
kudakurage
テキストページの
結構下の方のページにあるやつか
ほんとだ
Takaya Deguchi
結構なんか注釈がいろいろ書いてあって
kudakurage
それ読んでると面白いですね
今後ちょっとこれちゃんと見てみようかな
結構参考になりそうな部分が多そうですね
どういう設計にするのか
なんかちょっと僕参考になったというか
こういうふうに考えるのかと思ったのは
ボタンってまあ
よく作るコンポーネントじゃないですかボタンって基本的な
コンポーネントだから
ボタンを作る時に
ボタンのサイズって
デバイスによって
結構変えたりすることがあって
というのはPCだと普通に
なんだろうこの
そのボタンのラベルに合ったサイズに
する
だけどスマートフォンだとちょっと横断的な
画面いっぱい横幅いっぱいに伸ばしたいみたいな
ことをするんだけど
でもそれを同じコンポーネントで
使い回しで実現しようと思うと
ちょっとコンポーネントを置いてそれを
フィルにしてカスタマイズするみたいなことを
するんですよね
そういうふうに上書きしたくない気持ちもある
Takaya Deguchi
わけですよそれって
kudakurage
上書きすると
せっかくコンポーネントして使ってるのに
プロパティを上書きしちゃうと
いろいろと使い勝手が悪くなるので
したくない気持ちもあるわけですよね
そういうのをどういうふうに表現してるのかなって思ったら
Figmaのデザインシステムでは
ボタングループっていうさらにラッピングするコンポーネントを
Takaya Deguchi
作っていて
kudakurage
そこ上ではオーバーライドしてるんですけど
ラッピングすることによってうまく抽象化している
っていうようなやり方をしていて
スタックっていうボタングループの
1:27:02
kudakurage
コンポーネントを作ってるんですけど
スタックっていうやつは
上下に重ねていくような
ボタングループですよね
横幅いっぱいにして
2個なのか3個なのか並べていくっていうような
Takaya Deguchi
そういう抽象化をしているっていう
どっちが使い勝手いいのかな
この抽象化で全てがカバーできるなら
これでいいんだろうけど
kudakurage
うーん
でもFigmaって確か
こういうのって
例えばスタックっていうボタングループ作ったとして
そこに2個しかボタンが含められてなかったら
Takaya Deguchi
3個にするって確かできないよね
kudakurage
そこがめっちゃ不満なんですよ
そういうのを見通して
見た目上2個しかないけどいっぱい実は入れてあるみたいな
そういうコンポーネント作ったりするんだけど
Takaya Deguchi
スロットってやつね
kudakurage
そこをやれるようにしてほしいよね
そうなんですよ
Takaya Deguchi
AIよりそこをやってほしいんだけどなっていう
kudakurage
なんかね
それこそボタンの数を
自由に増やせるようにするみたいな
Takaya Deguchi
変数を入れられるようにしてもらえるとか
それがないからやっぱ
リストUIとか作りづらいんですよね
リストアイテムは作れるけどリスト全体の
子供がどんどん増えてくるようなやつは作りづらくて
kudakurage
そういうコンポーネントとして作るのはやりづらいよね
Takaya Deguchi
うん
結構実装から考えると結構なんかその
実装的には逆にリストアイテムだけを
コンポーネント化するってあんまない気がして
リストとしてURLとして
コンポーネントにすることがあるから
そこがちょっとちぐはぐになっちゃうんですよね
kudakurage
とか
そこはもうちょっとやりやすくしてもいいような気がするよね
Takaya Deguchi
確かに
プロパティとしてチリのレンみたいなの設定できて
子供にどのコンポーネントを持たせるのかみたいな
プロパティが生やされるといいんですけどね
そこまでじゃなくても
kudakurage
ボタンの数を単純に増やせるみたいな
ボタンの数を3つとか4つとか
2の数に指定できるみたいな
変数というかそういうものが指定できる
のがあるだけでも全然違いそう
このボタングループっていうコンポーネントは
全部ボタンが2個しかない前提で
作られてるんで
3つ必要になった時には使えないっていう
Takaya Deguchi
ちょっと使いづらいんだよね
結局このボタングループだけでまかなえない気がするんだよね
だから
1:30:00
kudakurage
多分僕のいつものテクスチャでやるんだとしたら
多分このボタングループの中のコンポーネントは
ボタンを5個ぐらいとりあえず突っ込んでおいて
3つぐらい非表示にしておくみたいな
多分そういうことするんだろうと思うんだけど
なんか個人的にはサイズぐらいだったら
Takaya Deguchi
オーバーライドでいいんじゃないって思うけど
kudakurage
わかるけどできるだけオーバーライドしたくないっていう
気持ちはあるよね
気持ちはあります
Takaya Deguchi
後々めんどくさくなったりするんですよ
kudakurage
コンポーネントを編集したのに反映されないみたいになったりとか
あとなんかカラー回りも割と素朴な感じですね
Takaya Deguchi
なんか
ボタンとかだとオーバーベースの色があって
オーバーの色も欲しくてみたいなのあるじゃないですか
はいはい
なんかマテリアルデザインとかだと
ステイトレイヤーみたいな半透明の色を定義して
ベースとなる色に重ねていったりとか
そういうのがあるじゃないですか
色を定義してベースとなる色に重ね合わせて
オーバーの色を作るみたいなことをして
色の数を減らそうみたいなことをしてますけど
このフィグマのファイルを見ると
それぞれのブランドカラーなりワーニングカラー
デンジャーカラーみたいなそれぞれに対して
オーバーのカラーを流してるんで
結構カラーの色の数多いなみたいな
kudakurage
なんか割と素朴にやってんだなと思いましたね
Takaya Deguchi
なんか確かに
kudakurage
普通にやってる感じがしますね
なんか普通にっていうか
愚直にやってる感じになってますね
特に
マテリアルカラーっぽい
マテリアルデザインのカラーっぽい設計にもしてないし
普通に余分なものを作んなかったのかな
Takaya Deguchi
なるべくシンプルにやろうとしたのかなという
個人的にはこのコンポーネントの
このバリアンスをいい感じに並べる
ツールチップみたいなのついてるじゃないですか
プロパティ名を可視化する
これ結構めんどくさいんだよね
めんどくさいね
こういうのをやってほしいね
kudakurage
やってほしいっていうか
これがシステム的に出てほしい
Takaya Deguchi
そうそう
1:33:02
Takaya Deguchi
パーツ埋めてる
自分でラベルをポチポチ配置しなくていいようにしてほしい
表みたいのがあってそこに埋めていくみたいな感じにしたい
kudakurage
できそうだしねそれぐらいのことは
今ってバリアンス増やしていくと
なんかもう自由にレイアウト
自由にっていうか自由にレイアウトされて
バーって置かれていくじゃないですか
Takaya Deguchi
僕だから結構オートレイアウトに変換したりするんですよね
してますよ
ガチャガチャしちゃうから
kudakurage
してますよ
Takaya Deguchi
それぐらいいい感じにしてほしいですよね正直
正直なんかこう
このフィギュアのファイルも自分でプロパティ名前とか出してるけど
これなんか自動で出るようにしてほしいなっていう
kudakurage
そうそう
Takaya Deguchi
非常に細かい話だと思うんだけど
結構めんどくさいんですよこれやるの
変更入ったら並べ直さなきゃいけなかったりするし
kudakurage
だからそういうめんどくささを解消しようっていうのが
デブモードだったと僕は思うんですよ
なんていうのちょっとしたこの長さを
なんかデザイナーは昔は全部書いてたわけですよ
この長さはいくつで
この長さは何ピクセルですみたいなのを
Takaya Deguchi
頑張って書いてたのをなくそうってしたのがデブモードだったわけじゃないですか
kudakurage
これもそれなんじゃないかなって気はしてるんですけどね
確かにね
Takaya Deguchi
コンポーネントに対するアノテーションみたいな
ものがあるといいのにな
kudakurage
アノテーション的にはあるけど
フィグマをわざわざヘルパーっていうコンポーネント群を作って
それをコンポーネントを作ったやつの周りに置いてるっていう
Takaya Deguchi
これ面白いね横にスロットってやつがあって
スワップミーっていうコンポーネント作ってる
これだから多分さっきモテも探してたやつですよ
フィグマも泥臭いことやってるな
kudakurage
まだまだ結構
AIとかもいいと思うけど
細かい部分でね
Takaya Deguchi
痒いところがいっぱいあるみたいな状態ではあるねやっぱり
コンポーネント
kudakurage
なんかあんまり最近進化してない気がするから
1:36:10
kudakurage
インターフェース変える前に
Takaya Deguchi
そっちをもうちょっとやってほしいなって思ってるけどね
今回の大工事が終わったから
そっちにも出てくるんじゃないですかね
デザインのセッション聞いたけど結構すごい大変そうな
大工事でしたみたいな話をしてたから
kudakurage
だいぶそっちに労力されてるんじゃないかな
いろいろ他のサービスも含めて考えてるだろうから
大変だろうとは思うけど
なんか使う側からしたら
そんなに影響なさそうな僕は気がしているし
逆にちょっとインターフェースが変わるのうざいなって思っちゃう
Takaya Deguchi
まあねリニューアルだからね
kudakurage
そうそうそう
っていうマイナスのことの方が多い
短期的にはマイナスのことが多いプロジェクトで
プロジェクトをやってる人からすると
Takaya Deguchi
つらいつらい楽しいけどつらいやつですよね
まあちょっとまだ降ってきてないんで
ちょっとまだわかんないな触ってみないと
kudakurage
ちなみにあれ
AppleとかこのFigmaのデザインシステムもそうですけど
あれってなんか標準っていうか
なんか普通にアセットにデフォルトで入るみたいな感じなんですかね
なんかそういうふうに見えたんだけど
そうみたいですね
ですよね
今までだったら多分
自分のローカルというか
どこに持ってきて
これライブラリとして使いますよみたいな感じでやって使ってたんだけど
多分そういうことしなくても
デフォルトのアセットとして用意されてて
Takaya Deguchi
呼び出せるようにしてあるみたいなことですよねきっと多分
でもなんかファイル自体も見えますよ
呼び出しもできるし
これまでと同様にファイルベースで
kudakurage
どこから持ってくるみたいなのもできるみたいですけど
でも毎回最新のやつ探して
ローカルに持ってきてやってみたいなことやってたからさ
そういうのめんどくさいなと思ってたから
普通にデフォルトでアセットに入ってて
そっからポイポイ持ってこれるっていう風になってた方が
いいなと思ってたから
たまに偽物とかもあるじゃないですか
偽物って言うとちょっとあれだけど
他の人が勝手に作ったやつとかもあるから
Takaya Deguchi
今マテリアデザインキットのバリアブルズ見てるけど
こっちはすごいね重厚感ある
1:39:01
Takaya Deguchi
勉強になりますねなかなかこれは
kudakurage
はいじゃあ今後のフィグマのアップデートに期待をして
そうですね
終わりますか
Takaya Deguchi
はい
kudakurage
被災是非へのご質問やご感想リクエストなどは
Xにポストしていただくか
リクエストノートにあるお便りのリンクから送っていただければ
配信内で取り上げたりしますので
どしどしいただければと思います
被災是非は毎週金曜日に配信しています
Spotify Apple Podcast YouTubeなどで配信していますので
よかったらチェックしてみてください
ということで今回はここまで
また次回お会いしましょう
さよなら
Takaya Deguchi
さよなら
