最近の運動状況と痩せ方

こんにちは、Deguchiです。

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

お願いしまーす。
最近、運動してます?

最近、運動あんまできてない気がしますね。

僕も全くやらなくなっちまったんで。
でも、痩せたんですよ。
1月から半年で6キロぐらい痩せて、しかもここ2、3ヶ月で一気に。
てか、社会復帰してから一気に痩せたんですよ。
で、やっぱナッシュに変えたんですよ。
食事変えた。
8割ぐらいナッシュ食べてるんですけど、夕飯。
昼は普通に食べてるんですけどね。
で、それしたら一気に痩せてきて、やっぱ食だったんだなっていう。

食変えるのは結構でかいよね。
ちなみにナッシュってさ、主食的なものついてないことが多いじゃないですか。
おかずだけみたいな。
それだけ食べてるみたいな。

僕はそれだけですね。

じゃあ結構炭水化物を抜いてるみたいな、夜はみたいな。

そうですね。
かつ、外出ない時は昼もあんま食べてなかったりするから。
ナッシュと、ちょっと足りなかったらなんか刺身か何か追加するみたいな。

はいはい。

感じで、多分基本炭水化物あんま取ってないと思うんですけどね。
昨日、久々にウーバー頼もうと思って、ウーバー頼んだんですけど。
めっちゃ眠くなって食べた後。

そうだよね。炭水化物抜くとそれあるよね、やっぱり。

これかと思いましたね。

僕も結構出口君にナッシュの足聞いてたから、ちょっと1回試しに頼んでみようと思って。
最近僕もちょっと試しに食べてるんですよ、ナッシュを。
そうなんですね。
でも全然それと関係なく単純に僕最近食欲がなくなってきてて。
暑いからとかっていうのがあると思うんだけど。
単純にナッシュも食べなくなってきちゃってる。

どうすごしてるんですか?

どうすごしてるんですかね?
なんか、えなどりで生きてるのかもしれないですね、もしかしたら。

やばいでしょ。極端だよね、ほんと。

でもたまに僕の玄米炊いてるから、たまに玄米炊いてるのを食べてるぐらいかな。
でもなんかあんまりほんと最近食べなくなっちゃって。

僕もちょっと食へのモチベーションが今落ちてて、ナッシュばっか食べてるって感じで。

どんどん痩せてくから、どこまでいくんだろうっていう感じ。
僕もなんか若干最近は体重落ち気味ですね。
ナッシュを食べての体重維持

やっぱ糖質なんですね。

でもあんま健康的な痩せ方じゃないような気持ちしてるんですよね。

僕もそれは知ってるっていうか。
面白いぐらい痩せるけど、大丈夫かこれみたいな。

本当はね、たぶんちゃんと体重を上げてとか、運動してのほうが。

筋肉つけたほうがいいんだけど。
まあ両方やったほうがいいと思うんだけどね。

そうなんだよね。

昨日ウーバーを久々に食べたら、眠不足じゃないはずなのに食べた後2時間ぐらい寝ちゃった。

いやそうなんだよね。
でも玄米はいいよ。
玄米も食べ過ぎたら同じだけど、なんか普通の白米とかに比べたら全然違う。
眠くなりやすさが。

なるほどね。

白米食べるともう一瞬で眠くなるもん。
なんかもううわって気を失うみたいになるもん。

昨日カレー食べたんですけど、やばかったカレーは。

本当なんかドラッグみたいな感じがするよ。

だからそれに慣れちゃうと、玄米とかに慣れちゃうと。
っていう、今んとこ痩せたから良かったかなみたいな。

いやでも本当玄米おすすめですよ。
ちょっと炊飯するのに時間かかるから、
僕は大体多めに炊いて、なんか小分けにしてとかして、温め直して食べるみたいなことしたりするけど。
玄米ね。
全然違う。
そんな健康のためっていう意識よりも、なんか眠たくならないようにみたいな。
そういう感じがあるよね。

僕最近カツオのたたきばっか食べてたな。

なんで?

好きなんですよ。

あ、まぁまぁ美味しいけどね。

なんかふるさと納税で冷凍カツオのたたき2キロみたいなやつ。

2キロ!?

頼んで、家にひたすらあったから、無しとそればっか食べてましたね。

2キロって?

そしたら痩せてた。

カツオもね、結構タンパク質豊富みたいなもんだからね。
カツオのたたきも好きだけどな。

そればっか買ってるな。
あれで、ふるさと納税で。

カツオのたたきばっか買ってんの?

ふるさと納税、最近もう選ぶのめんどくさくなってきて。

まぁわかるけどね。

でもまぁ一定額はやりたいじゃないですか。
って考えると、もう同じものばっか頼んでますね。

僕なんかそういえばあれだわ、結構前に頼んでて、
もうそろそろ食べないとまずいなと思ってた、
なんかすごい霜降りの和牛みたいなやつがあったんで、
ちょっとそろそろ食べないとだなと思って、
それをなんか、毎食じゃないけど、気が向いた時にこう切り分けて、
なんかこうステーキ丼みたいにするようにこう焼いて、
やって食べたりしてましたけどね。

豪勢ですね。

なんかでも、何なんだろうね、
やっぱりこのだんだんそういう脂っこいもの別に食べたいと思わなくなってくるよね。

またおじさんの話するな。

やっぱりあのさっぱりしたものがいいなって思うよね。

またおじさんになった話するな、老眼の話とか。

いや本当に。
まぁ美味しいんだけどね、美味しいなと思うけど、

まぁね。

たくさん食べたいと思わないよね、なんか。

それはそうですね。

だから、昔だったらさ、こってりし、それもこってりしたタレみたいなのつけてさ、
なんか食べてたりするかもしれないけど、

最近はなんかそのタレをさっぱりさせるみたいな。
ポン酢とか。
そうそうそうそう。
まぁわかりますよ。

それでなんかバランス取るみたいな、なんか。
そういう感じだもんね。

さっぱりしたものばっか食べてるな。

でもなんかもう、それもなんかもう最近は普段ふるさと納税で、
そういうのももういいかなみたいになってくるよね。

いやそうなんですよね。
まぁ野菜でいいかなみたいな。

そうね。
たまにだから、ふるさと納税で僕あの牡蠣。

あぁ牡蠣ね。

頼んでるけど、
なんか場合によってさ、その牡蠣がいつ届くかわかんないみたいな時があって、
なんか急に送りつけてくるみたいな。

いやいやいや。
なんか。
準備できじゃない発想みたいな。

そうそうそう。
あ、送りましたみたいな感じで、なんか。
そうさ、1週間前どころじゃないよね、もう。
うん。
3日前ぐらいにさ、なんか送りましたみたいな来てさ。
えーみたいな。
どうしようみたいな。

冷凍庫が。

そう。
まぁ冷凍もできるかもないか。

冷凍でないか。

そうそうそう。
でもそんなでも置いとけないからさ。
うん。
食べないとだけどさ、それなりの量あるからどうしようみたいな。

牡蠣は困るね。

困ったね。
だからその時も急遽友達呼んで、ちょっと牡蠣食べようつって。

うん。

食べたりしてたけど。

牡蠣は困るね。

なんかせめてそこをスケジューリングできるようにしてほしいなって思うね。

うん。
ナッシュはその辺のスケジューリングしやすいのがいいなと。
焼きそばとオムライスの試食

あー。

給食とかね。

あれ一応なんか、選べるけど1週間に1回とか2週間に1回みたいな。
で、毎週届くみたいな感じだったっけ。
うん。

まぁその届く頻度も2週に1回とか。

うん。

できますね。
うん。
これは2週に1回10食ぐらいにしてたかな。

でも結構色々種類あるじゃないですか、確かナッシュって。

うん。

結構食べました?

そうですね。毎回ちょっとちょいちょい変えてるかな。

何がおすすめ感ありました?
あー、僕なんかね、牛肉とマコモダケのオイスターソース好き。

はいはいはいはい。

美味しい、あれは。
あれ僕も良さそうだからチョイスしてまだ食べてない。
あれ美味しかった。
えー。

てかまずハンバーグがそれ以外かっていう選択肢になるんですよね。
ハンバーグめっちゃ選択肢いっぱいあるから。

ハンバーグは割となんか定番みたいな感じだよね。

まぁハンバーグはどれも安定して美味しいけど、でもやっぱそればっかになっちゃうから。

そうだね。

だからそれ以外のカテゴリーの中でいかに美味しいのを探すかってことやってるかな。
うんうん。
マコモダケのやつは美味しかったな。

確かにあれはね良さそうだなって僕も思ったんだよね。

うん。

なんかあれ行きました?
なんかさ、まあ試食系のやつ。
なんか焼きそばとかさ、カレーライスみたいな。

いやーそっちは行ってない。
そっちは行ってないんだ。

まあまあ別にそれ目的じゃないからね。
そうそうそう。
僕も頼んでないんだけどまだ1回も。

うん。
オムライスはちょっと気になってたけど。

おーオムライス。

あれライスじゃなかったけど確か。

あーそうなんだ。

ソウロフレークみたいなやつらしいです。

あー。
ほんとだ。
大豆を原料にしたソイミートみたいな。

うんうん。

そういうやつか。
へー。
じゃあなんかこれは普通になんか試しても良さそうだね確かに。

そうそうそう。ちょっと気になってた。
どうしても鶏肉に偏っちゃうっていうね問題があるんだよね。

なんで?

いやなんか多分鶏肉が定番系が多いのかな。
なんかなんかほっとくと定番がデフォルトで選ばれるみたいなやつで、期間限定のやつが抜けちゃった後。
あーはいはいはい。
自動で選ばれるみたいなのがあるんですけど。

気づくと鶏ばっかりになってるみたいなのがありますね。

牛肉系は結構好きかもな。
いろんなバリエーションがあるし。

肉豆腐とか。

あー。
ヨダレ鶏とかどうなんですか?
食べたことないな。

ちょっと鶏肉系になっちゃうけど。

うーん。

鶏はちょっとやっぱ味付けが似ている感じがするかな。

唐揚げ系が結構あったりとか。
まああとトマトかけたやつとか。

あー。
まあね。
まあそうだよな。

まあそうなるよねって感じ。
ちょっとカロリー欲しいなって時はチキン南蛮食べてるかな。

おー。

いや多分そんなことないんだろうけど、なんか気分的に。

チキン南蛮?
あーそうか。
まあなんかタルタルソース的なものがかかってるから。

そうそうそう。

カロリー高そうかなみたいな感じだよね。

でもそれでも440なんで。
まあ多分。
まあナッシュの中では高い方かなって。

あー。
タルタルソースも工夫はしてあるんだろうねきっと。
うん。

している感じはしますね。

あーでもまあ確かにナッシュの中では高い方なのかカロリー的に。

うん。

なんか変わったやつ頼んだっけ?
割と安定なやつをとりあえず頼んだ。

まあね。最初はわかんないですよね。

うん。

僕の中は一番ハマコモだけかな。
オイスターソース。
あー。

いや僕もねこれ絶対おいしいだろうなと思ってチョイスしたもんな。

でもこれ限定品らしいから無くなっちゃうかもんだけど。

あー本当だね。
まあ中華とかはね結構やりやすそうな気もするよね。
なんか。
味っていうか香りとかでごまかせそうな感じするじゃん。

香りといろいろ。
そうですね。

だから。
まあでも中華もなんか似たような感じになっちゃうのかな。
どれも。

うーん。
きのこのね歯ごたえが良かったです。

あーそうか。

食べてる感ある。

その辺も確かにね。
うん。
冷凍するっていうのも考えていろいろ難しいところもあるんだろうな。
なんかいろいろこれも良さそうとかって思ったりするけど。

うーん。

そうね。
実際にやってみたらなんかね水っぽくなっちゃう。

でも基本あんま気にならないですよね。
冷凍だなーみたいな。

うーん。
そうだね。
まあ副菜系はちょっとねあれだけどね。
なかなか難しいのかなって思うとこ。
あーそうね。
でも主菜は全然そんな普通に美味しく食べれるみたいな感じですよね。

確かに副菜はちょっとねもそもそしたりとか。
うーん。
あとチンの仕方によってはちょっと硬くなっちゃったりとか。
あー。
でも地味になんかあのーなんだあの副菜のなんかあのーすげー細かい粒みたいな。

すげー細かい粒って何?

あのーなんか中東料理にあるようななんかこう。

あーなんだっけ。
ふむすみたいな。

あーそうそうそうそう。

そんなやつあった?ふむすみたいな。

えーよく入ってますよ。
あれが何なのか分かってないんだけど。

なんかマッシュポテトみたいなやつじゃないの?

あれマッシュポテトなのか。

うん。違うのかな。

ふむすかと思ってた。

分かんないけど。
なんかマッシュポテトかなーと思って僕は食べてたような気がしたけど。

うーんあれ狙ってあーなのか。
冷凍した結果解凍した結果あーなってしまうのか分かんなかったんだけど。
でも意外に好きなんだよなあれ。

そら豆のポテトサラダとか?
あと何だろうな。
でも玉ねぎ入りポテトサラダとか。
ポテトサラダ系なんだよね多分きっと。

なるほど。やっぱあれ難しいんだろうな。
嫌いじゃないんだけど。

どうしてもね冷凍して戻すと水っぽくなっちゃうとか。

ふむすかなーと思って食べてた。
っていうナッシュね今んとこおすすめですね。
まあ冷凍の冷凍庫問題はあるけどね。

冷凍庫問題あるでしょ。

うちは一般の家庭とはちょっと違うんで。

はい。

サイズがでかいの使ってるから。

いやうちも結構でかい冷蔵庫だけど最近もう冷凍庫がナッシュとアフリリ。

アフリリね。
あーそれ確かに聞いて僕も買おうと思ってたんだそういえば。

アフリリはね時々未だに頼んでるけど美味しいもんね。

やっぱナッシュだけだとたまにそういうの食べたくなる。
チートデイ的に。

そうそうそうそう。
だから僕もそんな頻度たくさん食べるわけじゃないけど頼むとき結構多めに頼んじゃったりするから。
なんか8000円以上頼むと送料が無料になるとかなんかそういうのがあったりするし。

はいはいはい。

だからそれでなんかもう今冷凍庫がいっぱいですね。
そのナッシュとアフリリで。

現代は冷凍庫大きい方が。
逆に冷蔵全然使ってないですもんね。

そうだね確かにね。
野菜室とかいらないのかもね。

いやいらないですよね。
特に一人暮らしは。

まあそうかもね。

ちょっと告知していいですか。

はい。なんですか。

明日ちょうど配信日の明日7月8日なんですけど。
リンダを下北沢のボーナストラックっていうところがあるんですけど。
そこで飲めますっていう。

ん?

ポップアップカフェというか。
なんか曲がりでカレー屋さんをやってる方からお声掛けをしてもらって。
はいはいはい。
その方がリンダと合わせるのにちょうど良いスパイスカレーっていうのを作ってくれて。

なるほどね。

その下北沢のボーナストラックっていうところのポップアップ用のキッチンみたいなとこがあって。
そこでカレーとリンダを提供するっていうのを1日限定でやってます。
時間は11時半から16時半までと結構短めなんですけど。
もし近くにいる方がいたら来てください。

最近あの再開発されたあたりなんかな。

そうそうそうそう。

線路があったとことかを。
結構綺麗になったとこだよね。

そうそうそうそう。
で、いろんなお店が集まってて結構なんていうのかな、こだわったお店というか。
が多いところなんで、行くだけでも楽しいと思いますね。

下北沢はね、スパイスカレー多いからね。
ここも楽しいだろうし、他のお店も結構人気店とかも多かったりね。
そうですね。
でもだから結構美味しいお店なのかもね。

ちょっと僕は知らないけど、今回出店される方っていうのをやってるので。
明日ですけど、ぜひ。

下北もなんかもう遠くなっちゃったから行かなくなっちゃったからな。
うん。

あーそうか、前近かったのか。

そうそう、前はたまにね、友達の渡辺さんと下北でランチするとかしたりしてたけど。
まあでも確かにスパイスつながりで、なんかそういういろいろ合わせるっていうのはありそうですね。

今後も。
あと今回なんか、4月に出たフィーチャードプロジェクトっていうイベントをきっかけに声かけてもらったんですけど。
まあそういういろいろ声かかるのは嬉しいなって。
どんどんイベントこういうの出ていけたらいいなっていうのをいろいろ今話してますね、チームで。

うん。じゃあ本題に入りますか。

はい。
コンフィグ2023のアップデート

本題なんですが、コンフィグ2023っていうFigmaのイベントが結構前だよね、あれでも意外と。
いつだっけ?6月の22とか23とかかな。

そんな前でしたっけ?

なんだかんだ時間が経つのは早いですね、やっぱり。

僕まだ全然セッション見れてないな。

いや結構ね、セッション見たんですよ。
6、7割ぐらい見たかな。
でまあいろいろ見たんだけど、でまあその話をしようかなと思ったんですけど。
まあいろいろ見た結果、僕にこう刺さるというかね、面白いなって思ったのは、結構ね今回はFigmaの人たちの話の方が僕面白いなって思ったというか。
なんかその辺の方がなんかこう刺さるものがあって、ちょっとその辺を中心に話していこうかなと思うんですけど。

うん。

まあだから結局またその今回のアップデートの周りの話がほとんどなんですけど。
はいはい。
でもなんか結構僕もいろいろだから、仕事とかも含めて新しく追加された機能とかっていうのも早速いろいろ試したりとか仕事に取り入れたりとかしてやってるんですけど。
うん。
でぐちくんはその辺触ったりしてるんですか、ちなみに。あんまりやってないのかな、最近はそういうFigma触るとか。

いや、仕事ではFigma結構触ってますけど。
うん。
でも新しいのを早速取り入れてみたいのはまだないかな、機械的に。

ああはいはい。

デブモードはちょいちょい触ってるぐらいかな。

ああ、どうなんですか。デブモードは僕そこまでめちゃくちゃ触れてるかっていうと、実践的にはないんだよね。

いや、僕もそんなにですけど。

うん。

っていうか、なんていうの、今回のデブモードの目玉って新機能を使ったデザイン前提でデブモードを使った上で効果があるっていう感じじゃないですか。

ああ、まあまあそうだね。

だからそんなにかな、まだ。

確かにね。あれなんか結構道のりが遠い感じするよね。

そうそうそうそう。

なんかちゃんと使いこなすためにっていう意味では。
まあそれはあるんだよね。
だから僕もなんかこの前さ、いろいろこのFigmaのアップデートの話の中でさ、
まあなんかいろいろこうできるようになったけど、使いこなしていくの大変そうだよねみたいな話とかしてたと思うけど、
まあでもなんかいろいろ話、Figmaの人の話を聞いてるとやっぱりそういう声もあるよねっていう話もしつつ、
なんかやっぱりその辺はちょっとずつやればいいよみたいなことはよく言ってたような気がしますけどね。

はいはいはい。

まあでもなんか今回のアップデート、まあ今回だけに限らずだと思うけど、
割とFigmaの人たちはどういうことを意識してそのFigmaのツール、デザインツールを開発してるのかっていうのがなんとなくだいぶ見えてきたかなっていうか感じがしていて、
もちろんそのデブモードみたいな感じで、単純にデザイナーのツールじゃなくて、デザインを中心としてデザイナーとか開発者エンジニアとか、
それ以外のもしかしたらサポートの人とかカスタマーサポートの人とか、マネージャーの人とかっていうのをどうつないでいくかっていう部分に力入れてるっていうのももちろんそうだと思うんですけど、
やっぱりなんか今回のアップデートで特になんか全体的にそうだなと思ったのは、
ちょっとした手間とか何回も行ってることをいかに簡略化していくかというか、やりやすくしていくかみたいなことに集中してアップデートしてってるような気はしてるなと思ったというかね。
ある程度だからデザインツールとしての機能はだいぶ揃ってきてはいるんだけど、その中でもそれを頑張って使いこなしてた、
そのなんかハック的に使ってたっていうわけじゃないけど、コピーしまくってちょっとずつ変えていくみたいな感じでやっていたものをもうちょっと簡単にスマートにできるようにしていくとかっていうのも含めて、
なんかそういうよくさ、コンポーネントとかも元々そうだったわけじゃないですか、やっぱり。
昔はコンポーネントっていう仕組みがない時代みたいなのもあって、普通にオブジェクト的なUIオブジェクトみたいなの作って、それを単純にコピペして、
変更が必要になったら全部変えなきゃいけないみたいなさ、そういう時代もあったわけだけど、そういうのもおかしいよねみたいな。
ところからコンポーネント的なものをデザインツールの中に入れて、コピペ何度もやってることを簡略化するみたいなものを取り入れたわけだけど、
それをさらに強化するじゃないけど、他にもそういう場所があるんじゃないかみたいな。
例えばコンポーネントに関してもそうなんじゃないかみたいな、ボタンコンポーネントを同じような似たようなボタンコンポーネントをいっぱい作ってるみたいなさ。
それをもうちょっとまとめるというか、簡単にスマートにすることができるんじゃないかみたいなのとかっていうのを考えていった結果のアップデートが今回の発表につながってるような気がしますね。
だからそのデブモードも単純にもうちょっとした手間みたいなのを簡略化するみたいなところじゃないですか、やっぱり。
デザインツールの開発と連携

エンジニアがデザインのインスペクター的なもの、データを見るのをできるだけ簡単に見やすくしようとか、
もしくはVSコード上でフィグマを見れるようにすることで、そのVSコードとフィグマを行ったり来たりしなくてもいいようにするとか、
何回も行ってることをできるだけ簡略化するみたいな。変数とかもそうだと思うんだよね、バリアブルズとかも。
バリアブルズの話もあったんですけど、セッション的には。バリアブルズって今回なんかまだ4つしかサポートしてなくて、データ形式を。
カラー、色と、あとナンバー、数字とストリングスと、あとなんだっけ、あれあとなんだっけ、
ブールか、ブーリアンかっていう4つの型しか提供してないんですけど、今後まだまだその辺足りてない部分が色々あって、
なんかそれも提供していくって言っちゃうかな。でも多分データの型じゃなくて、どこに使えるかみたいなのを拡張していくっていう話があったかな。
イメージとかも、多分イメージは型なのかもしれないけど、イメージも扱えるようにするとか、あとタイポグラフィー周り。
今回ストリングスあるけどタイポグラフィーはまだサポートされてなくて、結構そこを早めに欲しいなって僕もちょっと思う。

タイポグラフィーがサポートされてないってどういうことですか。

タイポグラフィーの型なのかわかんないけど、今タイポグラフィー、だからテキストのスタイルだよね。
テキストのスタイルを定義することはできるんだけど、それを変数として扱うことはできないんですよ。
これができるようになると何がいいのかっていうと、
例えばこのバリアブルズのセッションの中でも一部使い方の方法として紹介されてたので、
ボタンの種類を変数で表現するみたいな、
例えばボタンの大きさ、スモールとかミディアムとかラージーみたいなボタンを色々コンポーネントを増やして作っていくんじゃなくて、
それをモードで切り分けて作っていくとか例えば。
そうすると例えば角丸の値だとかマージンの値みたいなものもそれぞれ変数に移っていって、
バリアブルズの使い方と設計

モードを切り替えるだけでボタンの大きさが変わるみたいなことできるよねみたいな証拠あったんだけど、
でもそれテキストのサイズとか例えばラベルサイズ、フォントサイズとかっていうのは今回含まれてないからそこまで表現できなくて、
多分それをちゃんとやろうと思ったらタイポグラフィー的な部分をサポートするっていうのが今後早めに必要になるんじゃないかなっていうのもあって、
多分そろそろに追加するんじゃないかなとは思ってるけどその辺も。
あとなんかシャドウとかレイアウトグリッドとかっていうのもV2でサポート予定みたいな話はしてたかな。

なるほど。

だから割とその辺、バリアブルズは多分今後も多分早々にアップデートかかって拡張していくんじゃないかなっていう気はしてますね。

なるほどな。ほんと。肩をつけるみたいな感じになるんだ。

うん。ほんとそんな感じになりそうな気はしますね。

まあそれができたら高度化を出力するっていうのもやりやすいですからね、きっと。

でなんかそのバリアブルズの使い方は、だからさっきのボタンの種類とかもあったけど、あとまあダークモードライトモードっていうのもあったけど、
他にも紹介されてた例としては、なんかモバイルとデスクトップ用のコンポーネントを一つにするみたいなのもあったかな。
まあ例えばヘッダーとかさ、その幅に応じてとかっていうのもあるかもしれないけど、
まあモバイル用デスクトップ用ってどうしても多分どっかで切り替えが必要になるじゃないですか。
なんかそのモバイル用だったらハンバーガーメニュー出すとかさ、まあそういうのがあると思うから、
その辺はまあブーリアン使って、まあこうモードを切り替えて、一つのコンポーネントで表現するみたいな。

それってなんか実際どこまでそれやったほうがいいんですかね。

いや僕もね、その辺結構迷うところなんじゃないかなと思いますよ、やっぱり。
なんかあんまりこうその、なんていうの、完全体みたいなさコンポーネントを頑張って作りすぎても、
なんかいろいろこうさ、それをいじるのがまた大変だとかさ、なんか一見なんかよくわかんないものみたいになって、
初めての人が見た時によくわかんないとか、いろいろ問題はそれはそれでありそうですよね。

そういうような究極レスポンシブデザインをやろうとしたら、
今ってまあそのだいたいPCとSP版を2つ作るみたいな感じじゃないですか、フレームを上げて。
それをまあ1個にできる。
まあきっと1個にすると中間レイアウトがどうなるかっていうのがわかりやすくなるから、
それはそれでいいんだろうけど、なかなかデザイン上そこまで考えてやるのは大変だよねと思うし。
まあでも実装の時はどうせ中間レイアウトどうするかって考えなきゃいけないから、

デザイナーがそれやってくれるのはまあ楽ではあるなみたいな。
あとなんかその辺できるんだったら、
この幅に応じて切り替えられる、
Boolean変更できるようなやつを追加しないのかなとかちょっと思った感じだったけどね。

ブレークポイント的な?

そうそうそうそう。
今多分なかった気がするんだよね、なんかその辺は。

じゃあ今どうやるってことなんですか、その同じコンポーネントでSPとPCやったとしたら。

まあ単純にモードを切り替えなきゃいけないですよね。

ああなるほどね。

そうそうそう。

01でこのセクションの時はこのセクション1にしたいな。

そうそうそうそう。
だから。

確かにね、ブレークポイント欲しくなりますね。

その辺、なんか今後追加されるのかなとかちょっと思ったりして見てましたけどね。

なんか型になってたらなんかenum、プログラミングでいうenumみたいなそのなんていうのかな。
値が3つある型みたいな、なんかBooleanだと01じゃないですか。
うん。
例えばそれが3つ値があるみたいなのってできたりするんですかね。

3つある、まあできなくはないかな。
多分そのデータさっきの4つの中でいったら多分stringsとかを使うんだけど。

なるほどね。
うん。
なるほどね。
まあちょっと無理やり感があるわけですね。

そうだね。
でもなんかコンポーネントが、まあちょっとこれまた複雑な話になってきちゃうんだけど。
うん。
そのコンポーネント作る時に、なんか前の機能で、なんか同じコンポーネントだけどプロパティによってこうさ切り替わるみたいなのってあったじゃない。
あったんですけど。

はいはい。

そのプロパティ名をなんかその変数にして。

ああなるほど。

みたいななんか結構ね複雑なことやってる。
なるほど。
あのデモファイルみたいなのあるじゃないですか、Configの。
うん。
そのプロパ、そのプロトタイプスのそのデモファイルで、なんかそういう感じのこと。
なんか結構僕もだから最初これどうやってやってんだろうみたいなのを解読してたんだけど。
うん。
全然わかんなくて、なんかこのボタンを押すとなんかここが切り替わりますみたいなのがあって。
ただなんかよくある、まあクリックしたらセットバリアブルズっていうなんかアクション。
はいはい。
そのオンクリックセットバリアブルズみたいななんかことができるやつでやってなくて。

うん。

単純にchange toみたいなやつでそのプロパティ、いやステータスを変える。
まあプロパティの値を変えるっていうことをやってるだけなんだけど。
ダークモード・ライトモードの設計

うん。
なんかそれがなんか他のところの変数に影響を与えてるみたいなのがなんかよくわかんない状況になってて。
これどうやってやってんだみたいなのをなんか1時間ぐらいこう考えて探してて。

探してて。

プログラミングして。
ようやくなんかそれがあ、これそういうことかっていうのがよくわかったっていうのがあって。
なんかねそれはね結構一見するとわかんなかったね。

うん。

なんかどうやって、まあ具体的に多分説明してもわかんないと思うけど。
どうやってやってたかっていうと。

うんうん。

なんかそのコンポーネントのプロパティの値を変数名にしてて。
で、そのプロパティを変えるっていうのをアクションにしてたんだよね。
なんかこのボタンを押したらプロパティをこれにするみたいな。
なるほど。
なんかアクションにしてて。
だからそうするとその変数に入ってる値が変わるからその変数を他のところでも参照しててみたいなことしてて。

メタプログラミングみたいだな。

なんかねここまで行くとさすがに難しいなと思ったよね。
さすがにちょっと。

うん。

そのまだ単純にこうコードが書かれてる方がわかりやすいというかさ。
うん。
読めばわかるからまだ。
なんかフィグマの場合そういう感覚的にできるからいいっていう部分もあるけど。
逆になんかそのどこに何が書かれてるかが分からずらいっていうかさ。
その関係性みたいなのが読み解きづらいっていうのがなんかちょっと難しいなと思いましたね。

デザインファイルでも可読性が求められる時代になるのか。

なんかねちょっとさすがにあれはちょっとわかりづらいなと思ったかな。
すごいなんか逆にハック的な感じだなと思ってもう。

まあそういう型のパターンが増えることによってその辺がハックをしなくて済むようになるっていうのがまあ今後の方向性なんですかね。

なんかねもうちょっとわかりやすくしてほしいなっていうとこあるよね。
単純にこう使いやすいっていうだけじゃなくて。
うん。
どう、まあなんか一覧性じゃない?一覧っていうわけじゃないんだけどね。
なんだろうねこういうの。
うん。
可読性、可読性でもないんだよな難しい。
なんか読み解きづらいんだよな。

まあそのプログラミングでいうそのレイダブルにするというか。

うん。
そこが難しいなあと思いましたね。

うん。

まあでもこのセッションでさっき言ってたそのいろいろすごいこともやろうと思えばできるんだけどいっぺんにまあ頑張ってやろうとしなくてもいいよみたいなのができたね。
そのエンジニアリングとかコードを書くときも同じだと思うけど何回も同じことしてるなと思ったらまあちょっとまとめていくっていうような感じの設計方針。
まあコンポーネントの設計とかも同じだと思うけど。
小さく始めるデザインシステムの時も話したけど、まあなんかできるところからちょっとずつやっていけばいいよっていうようなことは言ってたような気がしたけどね。
まあでもとはいえなんか基礎設計的な部分って最初のうちの方にやっておいた方が楽っていうのもあるんだけどね。

そうっすよね。

そこ難しいよね。なんかそこのやりすぎちゃってもあれだけどみたいな。でもやっておかないと後々またちょっと逆に大変みたいな。

まあそこはなんでもそうっすね。プログラミングもそうだけど。勘どころがない。
ここの設計は外しちゃいけないけどここはまあ後からやっとけば大丈夫みたいな。

ちょっと難しいなと思ったね。だから僕も最近ちょっとバリアブルズ使ってやってるけど、まあこれやったらちょっとやりすぎかなぐらいの感じで。
だから基本的なもうカラーシステム。普通の色設計とダークモードライクモードの設計と、
あとはまあカドマルとマージンとかの変数設定ぐらいかなーとか思ったりしてるけどね。

確かに。

まあ最低限ですよね。

でも結構その辺もデザイナーが例えば考えてくれて、それがコンポーネントして落とし込まれてると、結構これを基準にエンジニア側でもリアクトのコンポーネントに起こせばいいんだなっていうのが分かりやすいのはありそうだね。
これまでって結構デザインファイルを見て、ここはパターンができてるからここコンポーネントで切ろうみたいなのをエンジニアで考えたりするけど。
モードの切り替えとバリエーション増加

そうだね。なんかだから改めて僕もマテリアルデザインの色の設計とかっていうのをちょっと見直したりとかしてましたね。それもあって。
なんかやっぱりそのダークモードとライトモード両方同時に考えないといけないし、
微妙にダークモードとライトモードでどうしようっていう部分が発生したりとかしてたんで、そこをマテリアルデザインだったらどう考えてるのかなとか見直したりとかして、ちょっと考えたりしてましたね。

ちなみにそれは新しいプロジェクトで使おうとしてるんですか?それとも既存プロジェクトを変えたんですか?

既存プロジェクトでもエイヤーでやろうとしてますね。本当は新しいプロジェクトでやれる方がスッキリするんだけど、
いやもうとはいえなんか最近今やってる既存のプロジェクトもなんかもうライトモードとダークモードをやらなきゃいけないけどこれダークモードないですとか言われたりとか、
いろいろこうダークモード作ったけど、他との整合性みたいなのを考えるとだんだん実装もぐちゃぐちゃになってきますみたいな。
いろいろ問題がちょっと起き始めちゃってたから、いやもうイエイエでやるかみたいな。

なるほどね。

ここはもうちょっと時間とってやらせてもらいますみたいな。

まあでもダークモードっていうのはわかりやすいユースケースですよね。

そうだね。
あの機能の。
まあそれもあってちょっと最近は考えて進めてますね。
まあでもなんか僕は改めてこういうの好きなんだなと思いました。
まあ好きそうだ。
こういう設計が。

好きそうっていうか本山さんみたいなタイプが今一番フィットするんじゃないですか。

こういう設計考えてる時一番楽しい気がしてきますね。

こう実装的な思考もある程度するデザイナーっていうのが。
逆にそれが苦手なタイプのデザイナーだとなかなかこう使いこなすの難しい気がする。

なんかモードも結構こう掛け合わせることができるんですよ。
なんていうかさっき言ったように基本の色を変数指定して、
それを他のところでまた変数を内に変数で参照指定みたいなとかやっていくと。
でその例えばライトモードダークモードっていう色分けを作った変数名のやつがあったとして、
それをさらになんかこうなんていうのボタンの種類によってみたいなところで別のモードで展開していくとなると、
もうどんどん掛け算的にバリエーションを増やされるわけですよ。

なるほどね。
Figmaの新機能バリアブルズ

だからすごいやろうと思えばめちゃくちゃ作り込んでやっていくことできるんだけど、
多分そうなるとカオスになっていくから、
まあ多分そこが抑え気味にしなきゃいけないポイントだなとか思いながら、
ちょっとやっぱりボタンの種類を変数で表現みたいなのはちょっとあれかなとか思ったり、

そこはやりすぎかなみたいな。

その辺の塩梅が難しいところはあるかもしれないけど、
まあでも基本的な部分に使っていくのは全然便利らしい機能だなと思いますね。
で結構そのまあ今のはバリアブルズの話だったけど、
プロトタイピング系のセッション、なんかね3つぐらい確かあったかなプロトタイピングのセッション。
まあプラグインとかも含めて。

それはFigmaの人の?

あ、そう。そうそうFigmaの人のやつ。
プロトタイピング2つぐらいかな。
まあなんかでもそれも見て面白かったんだけど、
なんか全然そのままキーノートとかではあんまり言われてなかった部分について触れられている部分もあって、
まあもちろんあのねメインの部分についての紹介とかっていうのもあったんだけど、
で今回やっぱりさっき言ったようにちょっとした手間とか何でも行っていることを簡略化するみたいなところを結構意識している感じはあって、
例えばプロトタイプを作るときに変数使えるとか数式使えることでアートボードの数減らせるとかそういうのはあるんだけど、
プロトタイプやろうと思ったらこの右側のサイドバーのタブがあって、デザインタブとプロトタイプタブがあって、
あれを切り替えないとダメなわけですよ、現状のFigmaのツールって。
まあだから選択してプロトタイプやろうと思ったときにプロトタイプタブに切り替えて、でこうやるとか押してそこに行ってみたいなのをやってたんだけど、
どうしてもやっぱりその切り替え大変だよねみたいなやっぱりそこも。
で今はまだそれ2つに分かれてるんだけど、後々はそれ1つにしたいって言ってるらしくて。
そのデザインとプロトタイプっていうのを。今タブで分かれてるけど。
できるだけだからそこの切り替え自体も何度もやってて手間だからシームレスにしたいみたいな。
今後の計画ではそういう風にしようとしてるみたいな話はしてたかな。
その辺はちょっと考え方が見える部分で面白いなっていうのと、
その右のサイドバーに行くのもだるいよねみたいなこと言ってて。
プロトタイプで繋げると線みたいなのができるじゃないですか。この画面からこの画面に行くみたいな線が。
そこを押して押すとポップアップでインタラクションの部分のやつが出てきて、
編集できるようにもしたみたいなこと言ってて。
だから今までだったら多分それ選択して右サイドバーに行って色々いじるみたいな感じだったけど、
プロトタイプ周りの改善

キャンバス内で割と色々いじることができるようになったみたいな。
結構割と細かいんだけど、そういうちょっとした手間を省いていくみたいなのをやってるみたいですね。
でもそういうのを見てて、今回のプロタイプ、かなり複雑なことができるようにしたっていう側面もあるんだけど、
そういう試行錯誤的なものを今までビジュアル的なボタンの色だとか画面のレイアウトだとか、
その辺の試行錯誤をしやすくするみたいなのをやってたんだけど、
そのインタラクション的なプロタイプの部分もハードルを低くして、
できるだけ試行錯誤を増やしていってもらいたいんだろうなっていうような感じの意図が感じられましたね、そこに。

確かにそれはそうして欲しいなっていうのは感じるな、なんていうか。
今そんなにプロタイプめっちゃ使われてる感じしなくないですか?

なんか軽くプレビュー見るために作るみたいな、そういう感じのところもあるかもしれないですけど。

特にまず自分だというより使わないんですよね。ある程度作るときのイメージができるから。
人に伝わるためのデザイン騙しないから。
逆にエンジニアとして何かプロジェクト入ってるときも、そんなに使ってるプロジェクトないなっていうのを思う。
一方でもうちょっと使って意図を伝えてくれるとやりやすいなって思うこともあるんですよ。

なんかでも、それって結構人に伝えるためのプロトタイプじゃないですか。
多分それよりももっとハードルヒットしたいんだろうなと思ってて。

自分が試行錯誤するための。

そうそうそうそう。例えばなんかポップアップをどう出すかとかっていうのも含めて、
普通に考えたら上下の方からヒュッて出てくればいいでしょみたいな風に思うかもしれないけど、
多分そこの自体の試行錯誤ももっとやっていってもらいたいんだろうなっていうような。

確かに。アニメーションとかね、そのイージングがどうとか、デュレーションがどうとか、
そういうところをやりながら、今でもできるけど、それがよりやりやすくなるのはいいかもしれないですね。

そうそうそう。だからそんな意図を感じたね。
だからさっきのデザインタブとプロトタイプタブを一緒にしていきたいみたいなところも多分そういうところだと思うんだよね。
その色をいじるぐらいの感覚でプロトタイプもいじって色々試行錯誤してもらいたいみたいな。
多分そういう感覚なんだろうなと思ってますね。
割とその辺がだから印象的だったかな。
本当にちょっとした手間とか何回もやってることをどう簡略化させていくかみたいなことにすごい集中してるというかね。
それ以外で何か面白いなと思ったら、これもFigmaの人の話なんだけど、
よくこういうイベントに出てるVP of Productの桑本さんのセッションが確か一番最後にあって、
その話は何の話かっていうと、プロダクトの優先順位をどうつけるかっていう話なんだけど。
なんかでもね、これ結構面白かったというか、これも前多分出口君と話したんだけど確か。
同じようなことを。
結構桑本さん、結構全体を見る立場だからさ、やっぱりいろんなユーザーからの要望はやっぱりあるわけですよ。
で、お前なんでこれ先に作った、実装したんだみたいなことを色々言われるみたいなさ。
だからその辺のどう考えて作ってるのかとか、優先順位考えてるのかとかっていう話をしてたんだけど、
やっぱり単純にデザインツール、Figmaデザインツールですけど、
それに対して要望に応じて機能追加していったら多分どんどんプロダクトの複雑性が増していってしまうので、
そうしないようにどう考えてるのかみたいな。
で、やっぱりちょっと一歩引いて考えるみたいなさ。
その一つのイシューに対してとか。
で、多分その表面的な問題なんだよね。
多分その上がってくるイシューみたいなものっていうのは。
これをデザイントークン扱えるようにしろ、コミュニケーションとか。
もうちょっと変数扱えるようにしろとか。
プロットタイピングもうちょっとやりやすくしろとか。
でもそれをもうちょっと本質的な問題とかね。
一歩引いて考え、捉え直すことによって、
よりシンプルに解決できる方法がないかっていう風なのを結構よく考えてますみたいなことを話していて。
で、多分できるだけ一つの解決方法でいくつかのやつが解決できた方が、
もちろんインターフェースとしてはシンプルになるし、
単純にそれシンプルになるっていうだけじゃなくて、学習コストも下がると思うんだよね。
同じようなことでこれも解決できる、これも解決できるってなれば、
人の一つを覚えればできるようになるわけだから。
だから学習しやすくして、さらにシンプルに保つっていうのをどう考えてるのかっていう話を結構してて。
その一つにバリアブルズっていう今回出た機能の例を話してたんだけど、
一方でデザイントークンを扱えるようにしてほしいっていう話があって、
一方でもうちょっとプロトタイプの複雑になっている問題をどうにかしてほしいっていう2つの問題があったんだけど、
デザイントークンの方はどっちかっていうと定数が欲しかったんだよね。
変える必要性はないから。
動的に可変である必要性はほぼほぼないから。
でもプロトタイプの方はどっちかっていうと変数が欲しかった。
データベース的な変数が欲しかったんだよ。
動的に変わる必要性があるから。
だから結構一時期それで対立じゃないけど、どっちにするかみたいな話があったらしいんですけど、
そこを一歩引いて考えたときに、じゃあ両方いっぺんに解決できる方法として、今回バリアブルズっていうものを考えたっていうのを話していて、
そういう感じで、表層的に対応しないでできるだけ一歩引いてね、複数の問題を解決できる方法っていうのを考えてるから、
いろいろ優先順位っていうのは目に見えない部分でいろいろ動いてる部分があるんだっていうような話をしていたかな。
デザインタブとプロトタイプタブの統合

いや、美しいですよね、この解決策。
難しさももちろんあるとは思うけど、確かにその言ってる通りだなって思うし、
2つの問題をそれぞれに解決してたらもっと複雑になってただろうし。

うん、そうそうそうそう。

なんかいい塩梅な、いい落とし所でいいなって思う。

この辺は非常に面白かったというか、普通にためになる話をしてたなっていう。

フィギュアはこの規模ではまだそういう思想を感じるからいいですよね。

そうだね。

そこはやっぱり川本さんがいるからなんだろうけど。

やっぱりツールというかできることの量にしては、一見するとインターフェースはシンプルなもんね。
でもやっぱりやろうとすると、ちゃんとそれぞれの場所により細かい設定だとか、
プロパティみたいなのが追加できるようになってて、

作り込めるようになってるみたいな。
今、Takramだと全員デザイナーだから、
Figma上で全部の、僕が入るようなデジタル系のプロジェクトだと、
ほぼ全てFigmaで作業を完結するんですよ。
なんならクライアントもFigmaに呼んで、
例えば今のあるプロジェクトだと、結構アイデア出しのフェーズのプロジェクトがあるんですけど、
それとかクライアントも一緒にアイデアを出したりしてるんですよね、Figma上で。
クライアントは当然デザイナーじゃないし、
なんならパソコンもそんなすごい、IT職じゃない人とかもいたりして、
そんなすごい長けてるわけじゃないけど、
でもやっぱ普通に招待して、普通にエディト券を渡したら普通に使えるわけなんですよね。
それはやっぱFigmaすごいなって思いますね、そういう。
やっぱそういう感じの思想で作られてるから、
オープンにみんなで一緒に何かについて考えようみたいなのもやりやすいから、
関係作りにもFigmaが役立ってるなって思うし、
そう思えばさっきみたいな複雑なこともできるっていう、
ノーションとかもそうだけど、そのグラデーションが上手いよなって思う。

そうだね、プロトタイプ周りはまだ何か課題がありそうな気はしてるけどね、
さっき話したみたいに、何かちょっと一見どうなってるのか見えづらいみたいなのも、
何かまだあるような気がしたんで、
その辺がもうちょっと見やすくなるといいなとは思うけど。

超浅い部分と超ディープな部分は結構いろいろもう何か十分な感じがするから、
そのグラデーションという真ん中のあたりの部分ですよね。

なんかでもさっき言ったように、デザインタブとプロトタイプタブを一緒にしたいみたいなこと言ってたから、

何かもうちょっとそういうふうにしていこうっていう思想はありそうな気はするけどね。
そのバランス取るのは確かにVPオブプロダクトの立場だと難しいだろうな。

だから一気にプロトタイプ周りとか変数の種類とかもそうだけど、
一気に増やさなかったのは多分その辺も試しながらちょっと、
出しすぎちゃうと減らすの大変じゃないですか、逆に。
だからそこを考えながらやってるんだろうなっていう気もしたけどね。

非常によくわかりますね、SaaSの難しさ。

デブモード周りも一応セッション見て、見たけど、
デブモードはやっぱり何か大きい企業とか大きい会社でやってる人の方が、
活用のしがいがありそうだなっていう気はしましたけどね。
もちろん普通にデザイナーとエンジニアそれぞれ小人数でやってるみたいなチームでも、
意味ないことはないけど、どうしてもフロー的なものを結構意識してる感じがあったから。

フロー。

デザイン作って、このデザインは完成しましたよっていうのをやって、
FigmaのデザインとHTML/CSSの統合

さらにいろいろエンジニアがどう見てみたいなさ、
フローがちゃんと意識されてるというか、
プラグインでJiraとかも入るとか、そういうのも含めてGitHubも使えるようになるとかも含めて、
そういう開発フローに合わせてFigmaを最適化させてるっていう印象がすごくあったから。

そうですね。
すげえ小人数の5人以下のチームっていうよりはもうちょい10人以上みたいなぐらいかもしれないですね。

それのほうがすごくちゃんと使いこなせるというか、すごく効果がありそうな印象はあったけどね。
もちろん単純にデブモードで見るだけでも以前より全然良い部分っていうのがたくさんあるんだけど、
まぁでもインパクトっていう意味では大きいチームのほうが非常に使いこなした時にパワーになりそうだなっていう感じがあったかな。

あとなんかプロジェクトマネージャーみたいな立場の人間にとってもあれはいいかなと思ってて、
GitHubで意思起こしやすくするとか、アサナと連携するとかあったと思うけど。

そうだね。
あの辺はだからデザイナーにとっても、
例えばGitHubとFigmaを行ったり来たりしなくても寿命になるみたいなことがあって、
そのFigma上でどこにイシューが立ってるかみたいなのが見えるみたいなデモみたいなのがあって、
確かに。
それで参照してここまだ直してないやみたいなのをやって、
またFigmaに、あ、いかなくてGitHubに直しましたよみたいなのを送るみたいなのができるみたいな。

確かになんかPDMの立場だとデザイナーがやってるタスクってなかなか管理しにくいですよ。
エンジニアの方は割とGitHubでイシュー立ててそれ管理してみたいな。
GitHub側にも最近だと看板作れてみたいな、
その結構ワークフロー周りの機能が充実してきてるから。
かつ、Projectsとマージしたらイシューがクローズされてみたいな、
そういう作業とタスク管理が一体になって管理しやすいんだけど、
なかなかデザインでそれやるのって難しいから、
もしかしたらそういうところもカバーしやすくなってくるのかもしれないですね。

今のところDevモードはReady for Deploymentかな。

これから出ますよってやつ?

いや、Ready for Developmentかな。
Devってやつかな。
要はこれをReady for Devってやつにすると、
Devモードでいい感じに見れるってやつになるんだけど。

ステータスみたいなやつ。

そうそうそうそう。
多分それしかなくて、もしかしたらウィップみたいなのが追加されるとか、
今ってそれがしかもフレーム単位じゃなくてセクションでやるんですよね。
でももしかしたらこれはもうOKってなったけど、
ここ問題あるから直してねみたいになったら、
またそれフレーム単位でタグじゃないけど、
ステータスみたいなのを追加する必要性あるのかなとかちょっと思ったりしてたけどね。

もう一個はFigmaで使いこなせない機能としてブランチングがあるじゃないですか。
その辺で多分絡んできそうですよね。

そうだね。

マージしたらそのステータスがReady for Developmentに変わってみたいな。

あの辺もどっちかっていうと大きい組織向けというかの機能っていう感じがあるから、
もうちょっと小さい組織向けにもそういうのをうまく使いこなせるような
ライトなものになるといいなっていう気がするけど。

そうね。

今までだからバージョンみたいなのも一応作れたよね確か。
バージョン?
小バージョンヒストリーみたいなのね。
バージョンヒストリーみたいなのがあったのか。
全体の。

コミット歴みたいなの残せませんでしたっけ。

でもその辺とのDevModeの統合みたいなのがまだできてないような気がしたんで。
なんかもうちょっとまだまだベータ版っていう感じなのかもしれないですけどねDevModeは。

でもその辺なんていうかエンジニアリング的な流れを含めて考えるときっとその先にはステータスをReady for Developmentに変えたときに
なんかCIみたいなのが回って例えば画像の品質を最適化してくれるとか
なんかわかんないけどテキストのチェックみたいなのが
リンターみたいなのが回ってテキストのルールに
ライティングのルールに合ってるかどうかチェックしてくれるとか
なんかそういうのはありそうですね。

ありそうですね。
プラグインとかで普通にそういうのが出てきてもおかしくなさそうですよね。
なんかアイコン直してReady forにしたら勝手に書き出されるテキストが

ありそうありそう。
自動化されてるみたいなやつが。

ありそうだよな。
でもなんかそのいまいちなんかそのステータスをじゃあどう切り替えていくのかっていうのが
今その何もない状態とReady for Devっていうのしかないから
なんかそこの運用方法がいまいちちょっと僕もまだよくわかってないなっていう感じですね。
1回Ready forにしてまたこれ消すのかとか。

まあその辺はいろいろベストプラクティスがこれから出てくるんじゃないですか。

なんかでももうちょっとステータスの数が増えてもおかしくないんじゃないかなっていう気はしてるけどね。
だからそういう意味では。

プログラミングでいうブランチをどう切るかみたいな話な気がする。
それもなんかGitHub FlowみたいなやつがあってGitHubがこういうモデルケースがあってそれが広まっていくみたいなのがあったし。

まあでもその辺も同じようにまだベータ版で出しすぎないようにしてるのかなっていう気もしたけどね。
なんかいろいろ用意しすぎずにまずとりあえず最低限のものを用意して
みんなからのフィードバックを受けながら改善どういう風にしていくのがいいのかっていうのを考えてる。

なんかそのうちフィグマフローみたいなのができてこういうワークフローでやるのがお勧めだみたいなのが
フィグマがテンプレートで用意してくれるとかありそうですけどね。
そうだね。

あとはそうだな。
個人的にちょっと面白かったのが今回あのキーノートでも発表があったけど
ダイアグラムっていうデザイン系のAIについて考えて
いろいろやってる会社を買収したっていう話があって
そのダイアグラムの人が話すセッションっていうのがあったんですけど
その中でそのジーニアスができるまでみたいな話がちょっとあって
そこで結構個人的に面白かったのが
いやなんか結構どうやってやってるのかなって思う部分があって
あの本当に技術的になっていうかね
仕様的にどう作ってるのかなみたいな

もうできてるんですか?そもそもあれは。

一応なんかできてるっぽい。

あ、そうなんだ。コンセプトなのかと思ってた。

なんかまだ完全ではないからリリースされてないんだと思っているけど
まだリリースされてないだったよねそもそも確か。

うんそうそう。

だけどなんかそのどう考えて作ってるのかっていう部分で面白かったのが
要はフィグマって画面のレイアウト自体はビジュアルデザインだから
ビジュアルなものなんだけど
一応でもフィグマってそのデータで全部
APIとか叩けば分かると思うけど
データが取れるわけじゃないですか
どのオブジェクトがどういう大きさとか
デザイントークンとAIの関係

どの位置に配置されているとか色の値とかテキストとか
取れるんですけど
普通に取ろうとしたら例えばJSON形式で取れたり
するわけですよね
その画面全体の色んなオブジェクトのデータみたいなものに
でもそうなると
AI的にはGPT3とか4とかっていう
大規模言語モデルを採用して色々作ってるらしいんですけど
やっぱりそのJSON形式のデータだと
データ量がかさばって多くなりすぎちゃっていうのもあるし
それ自体を見た時になんかよく分かんないみたいな
理解ができないみたいななかなか
っていうのがあったっぽくて
それで色々考えてた時に
このGPTはHTMLとCSSの理解がすごいできてるっていうことに
どっかで気づいて
じゃあそれで突っ込めばいいんだっていう風にして
要はFigmaの画面のデザインとかっていうのを
HTMLとCSSに置き換えて
それをGPTに加わせて
提案してもらうというかね
さらに先を
っていうやり方をしてるみたいな
考え方でやってるみたいな話をしてて

確かにHTMLの方が教師データが多そう

そうそう教師データもその方が確かにいっぱいあるし
それは確かに理にかなってるなと思って
そういう方法でやってるんだと思って
ちょっと面白かったかなその話は
結構ねどうやってやってるのかなと思ってたから
それだと既存の
そのWebにあるHTMLとCSSっていうのも
教師データになり得るし
これからFigmaとかで作っていくデータも
どう読み取るのかっていうのが
理解しやすくなるから

ていうかなるほど
そう考えるとCopilotと一緒に似てるのか

確かにそう

Copilotとかもコードベースコード書いてるの
HTMLとか書いてたらそれ読んで
サポートしてくれるわけだけど
それと似てる

似てますね
このコードの次に
このコードを書くんじゃないの
的なことですからね結局
なるほどね
それをビジュアルに起こしてるだけですからね

結局
でもそれなんか結構
Figma上のJSONファイルと
入ったHTMLが結構精度良く
なってないといけない気がするけど
その辺は上手いことやってるのかな

その辺は上手いことやってるんじゃないですかね

そこの部分の技術だけでもなんですか
コードは
コードエクスポートみたいなのが今あるから
そういう感じでやってるのかな

多分そのFigmaからHTMLにするっていうのは
そんなに問題ないとは思うんだけど
どっちかっていうと
帰ってきたこういう感じにした方がいいんじゃないの
っていうのをいい感じにFigmaに当てはめる方が
難しそうな気がする
確かにね

確かに
decodeじゃないけど

その何を
例えば何をこのボタン置いたから
じゃあ次はこういうボタンを置くよね
みたいなのを言うのは簡単だけど
じゃあそれをどれぐらいの
例えばマージンで置くのかとかさ
そういうのはなんとなく予想してやらなきゃいけないわけじゃないですか

でもそれは面白いな
なんかFigmaの
コードエクスポートって
まだなんかそのままプロダクションに出すような
品質のコードとしては
まだちょっと使えないなっていう
単純認識じゃないですか
Figmaの可能性と買収

だけどそれはAIに
推測してもらうためには十分だった

っていうことですよね
そうだね

でかつAIがそれを推測して
何か提案してくれて
でもちょっと間違っててもまた人間が直すから
それはそれで完璧じゃなくてもいいだろうし

でもなんかこの辺は結構
その変数とかとも結構
関わってきそうだなと思ってて
その要はデザイントークン的なものが
定義されてればされてるほど
そうですね
参考になる値がどんどん増えていくから
精度がより上がっていくっていう感じになるんだろうな
確かに

意味がいっぱい付けられてると付けられてるほど
AIが理解しやすくなる

そうそうそうそう
ここはじゃあデザイントークンのこの値使って
いい感じの幅付けとけばいいなとかさ
勝手にやりやすくなる

それ面白いですね

なるほど

なんかいろいろ
フィギュアにやりたいことが分かってきた気がする

つながってくる感じがするよね

それは買収しますね

その話は結構
なるほどなと思ったね
なんか全然よく分かんないなと思ってたけど
筋が通ってますね
フィグマの新機能とプロトタイピング

そうそうそう
HTML CSSに変換するっていうところが
結構面白い
非常に優秀なところだなと思った
なるほどね
そこに気づいたのは面白い
なるほど
GPTならではの
大規模言語モデルっていう
AIのモデルならではの
使い方っていう感じがしたかな
その辺は
その辺が面白かったかな
あとはいつも話してる
コンテンツデザインの
人の話とかも
UXライティングの
UXライティングの人の話とかも
いつも通りって感じだったかな
その辺は
でも発表

あの人の発表が面白いのかもね

発表が面白かった
中身がどうっていうのは
一回聞いたことがあれば
あれかなって感じだったけど
プレゼンテーションが上手いね

あの人は
デザインマターズかな
日本でやってて
現場で見たけど
英語そんな分かんないけど
面白いっすよね発表の仕方が

発表の仕方がね
めちゃくちゃよくできてた
そのスライドを
どう使うのかっていうのも含めて
結局なんか
いいソフトウェアは何かっていうところの
問いから始まって最終的に
いいソフトウェアっていうだけじゃなくて
楽しいソフトウェアっていうのには
人間味っていうのが必要なんだよ
みたいな話を確かしてた気がするけど

前はスラックだったから
その時の話を聞いたのかな
スラックの時代の

言ってることはすごく単純な話なんだけど
でもプレゼンテーション自体が
すごい引き付けられるというかね
面白いんだよね
見てて

アンドリューさんだっけ

そうそう
なんか2本立てだったんだよね
確か
その1本上は
割と新人っぽい
新人じゃないと思うけど
若手的な
UXライターの方の話で
その人はUXライターが
多分どう入り込んでいくかというか
どうデザイナーと
コラボレーションしていくかっていう話をしてて
で
アンドリューさんは
めちゃくちゃ自由な
発表してたみたいな
そんな感じでしたね
そんな感じだったかな
まあでもなんか
他のねもちろん企業の
多分他の企業で呼ばれてる人だから
デブモードとかも含めて
プラグインとかで参加してた人とか
っていうのを中心に結構
選ばれてることが多かったんじゃないですかね
GitHubの人とか来てたりとか

結構デベロッパーというか
デザインエンジニア的な人多かった
感じですか

なんかパッと見そんな印象ですか
結構だから
デベロッパーが今まで多かったけど
エンジニアの人も割と登壇してたような
気がしますね

Googleの
CSSチームの

人とか
バーセル系の人たちとか
割といろいろと
発表してたりとかしてたんで
まあその辺も普通に
事例として聞く分には
面白かったですけどね
まあでもなんか特にやっぱり
今回のアップデート
単純にどういう機能が追加された
っていう目線だけじゃなくて
どういう考え方があって
追加してってるのかっていうのが
そのプロトタイピングのセッションなんて
もうタイトルからして
プロトタイピングのなんだっけ
過去現在未来
みたいなそんなタイトルセッションで
まあだから展望みたいなのも
話してたんで
そういう意味でも
割と面白い感じだったかな

なんかそういえば
DHHっていう

37

Signals
っていう会社あるじゃないですか
ベースキャンプとか作った
レイルス作った人が
記事書いてて
ちょっとなんかバズってたんだけど
Design for the Web
without Figmaっていう記事書いてて

あーなんか僕もちょっと見た気がするなそれ

まあ要はFigma作り込んでも仕方ないから
HTMLとCSS書けよっていう
言ってるんですけど
前提このDHHって
かなり過激派な人なんで
DHHはすげーそういうこと言いそうって
思ったんですけど
まあなんか
Figmaは素晴らしいツールだけど
Figmaを結局
いいデザインファイルを作ったとしても
それはあくまで
中間成果物だから
中間成果物を頑張るんじゃなくて
プロダクションに出すコードを
デザイナーも書きなよ
っていうような趣旨のことを言ってた
言ってるんですけど
まあまあ気持ちは分かると思ったけど
それできたらね

みんなそうしてるだろうね

気持ちは分かるし
DHHはすげーこういうこと言いそう
って思って面白かった

まあでもなんか

あくまで中間成果物であって
Figmaのデザインファイル付け詰めても
ユーザーに別に何か価値があるわけではない
というのはまあ
多少は意識しておいた方がいいかなとは

思いましたけどね
なんかやっぱ目的
意識をどこに持つかだよね
単純に
作りこむことに
やってても意味がないというかさ
なんかそれが最短の
手段だと思ったらそうすればいいっていう
感じだと思うけどねやっぱり

やっぱ過激だなと思って
面白かった

まあなんか人それぞれね
得意不得意あるからね
そのたとえばこの人
にとっての手遊びは高度覚悟と
なるかもしれないけど
グラフィックが得意な人にとっては
絵描いたほうが早いって思うかもしれないしね
色々試行錯誤するときに

面白いなと思ったっていう

まあこれは僕もなんか
チラッと読んだな
賛同する声も上がってた

エンジニア界隈ではね

まあまあそうなんだけどね

まあでも一方で
DHHはこういうけど
割とLP
簡単なLPを作るだけとかだったら
結構今でもノーコード系のツールでも
いいじゃんみたいな
レベルまで来てると思ってて

そうだね

まあコード書かなきゃ
済むなら書かなくていいと思いますけどね
僕は
コード書く仕事しておいてあれだけど

ちょっと

より本質的なところに集中したほうが
いいんじゃないかなっていう気は

完璧なコード書いてくれるんだったら
別にコード書かなくてもいいよね
そうそうそう
今はなかなかそれが難しいから
コード書く人間が書かなきゃいけない部分
っていうのが多いわけだけど

DHHがこういうのも分かるけど
さっきのAIの
あのツールの話とか
聞いてると
コード書くことに縛られすぎるのも
またそれはそれでというのも

思いましたね
そんな感じかな
ダイアグラムの
セッションとか
ダイアグラムのセッションって
2日目のメイン機能
一番最初のキーノートなんだよね
結構この辺はいろんな人が話すんだけど
面白かったので
見ても良さそうだな
って思いますよ
っていう感じなんで
僕も
デブモードはそんなに
使い倒すことはなさそうだけど
プロトタイプはもうちょっと
触ってみようかなと思っているので
それもね
どこまで触るか
みたいな塩梅が
難しそうではあるんだけど
多分その辺の
ノウハウとかもね
今後コミュニティ内で
共有されていったりするだろうから
DHHのノーコードに関する記事

ベストプラクティス的な
どうやるのがいい
みたいなのが
共有されていくだろうから
僕ツイッターで見たんだけど
プロトタイプ機能を
めちゃくちゃ使い込んで
フラッピーバー
みたいなのを
フィグマ上で作った
みたいな
あれよくやったなみたいな
やれなくはないかみたいな
そういう事例もあったりしたんで
まあじゃあそんなところかな
はい
なので今後も
フィグマには期待したいですね
まだまだ
というか
前話してたあれはどうなんですかね

フレーマーは

フレーマーはフレーマーで
違う方向行ってませんでしたか最近

でもフレーマーも最近
ノーコード的な文脈で
便利だっていう声を
ツイッターでツラツラ見たんだよな
そのLPとかを作るとき

なんかフレーマーも確かAI系の
ことを最近やってた
気がしたんだよね
それかなノーコード的な
話なんか対話しながら
サイト作っていくみたいな
そのチャットGP的に
対話しながら
そのLPみたいな
ウェブページ作っていくみたいなことを
最近やってた気がするな
軽くデモも見た気がしたけど

あとなんか最近CMSと
連携するみたいな
CMS機能持ったのかな
なんか割と
ちょっとピボットした
それがハマった感が

あるのかな
CMSタブがある

なんか
日本で言うスタジオみたいな用途で
かつちょっとコードも書けます
みたいなポジション
に行ったのかなっていう印象ですけどね

フレームは結構ピボット
してるからね
いろいろ立ち位置変えてる感じするよね

今回はなんかそういうの
ツイッターで見かけたから
ようやくハマったのかな
フレーマーの展開

っていうのは思ってた

なかなか難しいのかな
確かになんか

そういう
うちだったら例えばリンダの
LPを作ってそこで
基本は静的なLPなんだけど
一部分でそういう
ショピファイとかと連携するみたいな
機能が欲しいみたいな
用途とかには確かにフレームはいいかもな
っていうのを思ったり

それなんで

なかなかその
完全に静的なページだったら
今だったらスタジオとかで
ノーコードでデザイナー完結で
デプロイまで持ってくことはできると思うんですけど
多少そのちょっと
プログラミングが含むような
ものが入ると
途端にじゃあ
全てエンジニアで
LP組みますかみたいな話になってくるわけですよ
だからその0か1かしかない
ところの間
を埋めるのに
フレームはもともとコード化かけるデザインツール
みたいなポジションだから
うまく
はまりそうなイメージはあるなっていう
使ってないからわからないですけどね

いやーさすがにフィグマに
追いつくというか

完全に追いつくっていうよりは
そういう隙間産業的な

感じになってくるんじゃないかな

そうだね
あとフレーマーモーションっていう
もともとフレーマー用のモーションの
ライブラリがあるんですけど
それは結構フロントエンド開発普通に使ってて
フレーマー全く関係なくても便利な
ライブラリとして使ってたりしますね
そうだね
そういうところで生き残っていく感はあるな
まあ
フィグマとフレーマーの関係

コンテクタ好きですけどね
そうね
結構フィグマの最近の流れを見てると
フレーマーがやりたかったことを
フィグマがやっちゃう感じはするなっていう

気がしてきた
結構フレーマーの立ち位置が
最初の立ち位置が難しかったのかもね
やっぱり
デザインツールだけどだいぶエンジニア領域の方から
来たから
フィグマほどデザイナーにフィットしなくて
一方でフィグマは
やっぱデザインツールから来てるから
とりあえずまずデザイナーの指示を得て
そっから
エンジニアリング方面に
フィグマは戦略的には良かったのかもね

フィグジャムもそうだけどそういう山の登り方が
上手いよなって思う

どうステップを
刻むのかっていう部分で
戦略的に上手くいったのかもね

フィグマの方が
フレーマーも思想は好きだったけどちょっと山の登り方が
ちょっと間違えた感は

あるのかな
デザインツールの戦略的な登り方

フレーマーも期待はしたいですけどね
なんか
個人的にフィグマ一挙っていうのも

面白くないので

今後
アドビだからどうなるか分からないっていうのもあるからね

そうね
今んとこはまだいいけどね

今んとこはね

アドビの人がVP
になったら
途端によく分からなくなるとかね

今のは
CEOが辞めちゃってね
そんなところですかね

はい

リサイズFMへのご質問や
ご感想リクエストなどは
ハッシュタグリサイズFMでツイッターにつぶやくか
小野トリアのお便りのリンクから送っていただければ
配信内で取り上げたりしますので
どしどしいただければと思います
リサイズFMは毎週金曜日に配信しています
Spotify
Apple Podcast
Google Podcast
YouTubeなどで配信していますので
よかったらチェックしてみてください
ということで今回はここまでまた次回お会いしましょう

さよなら