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