単純に本当に CSS だけに焦点を絞ると 完全にあれスタイルを定義するためのものだから
それを書いてる感じで UI が書けるといいっていうのは なんとなくわかります
で まあ多分 ジオンゴールドとかも 多分そういうモチベーションだったんじゃないかなっていう気はしていて
ただ最近は AirBに関しては この分野ではほとさとはないんですけど
ただこれこういうデザインからコードを生成するみたいな分野の中で
Aerbyが出してる中で一番実用的なのがRottyってやつ
そうだね
確か持山さんも会社でブログ書いてたと思いますけど
僕も何度か使ったことありますねRottyは
マロッティは何かっていうと After Effects とかで作った UI のアニメーションを
SVG アニメーションとして コードとして出力するっていうようなツールですね
だから 動画とか GIF アニとかよりも 軽量だったりとか
あとはプログラマブルに操作できたりとかっていう特徴があって
かなり実用的なツールで
そうだね これは本当に単純なアニメーションというだけじゃなくて
インプットもコード上でできるんだよね
この色にするっていうのをプログラムベースで渡せるから
渡そうと思えば
そういう意味では非常にうまくデザイン的な部分と
コードっていうのがうまく融合しているプロダクトっていう感じがしますね
感じがしますね そうなんですよ ね
で まあ あと ROTY はいいなと思う のが ROTY Files っていうなんかコミュニティ
サイトみたいなのがあって GitHub みたいに人の作ったそこに上げている
ROTY Files のアニメーションをフォーク してきてコピーしてきて そっから
なんかちょっと修正加えて独自で 物を作ったりとかっていうこと
ができるっていうのがちょっと 面白い点ではありますね
最近だとFigmaコミュニティ近いかもし るんですけど
うんそうだね
っていう割とアニメーションっていう ものの制作のっていうワークフロー
の中にGitHub的な思想を持ち込んで きたようなものがRottyだったりして
結構YabiiがやってるDesign to Code の中で一番実用的な取り組みが
Rottyかなって思ってます
この辺り結構2018-2019あたりから デザインからコード出力する系の
ツールってAirBee以外にもいく つか出てたりしてて例えばSuperNova
っていうツールがあるんですけど これ今はあるんですけどこれも本当に
デザインを作ってそこからReact のコード出力するとかFlutterのコード
出力するとかまあそういうようなものですね なんか昔使った限りはまるとそのまプロダクションに出せるかって
なかなかこう実践投入できないなと思ってたところに
1個そのフレーマーの話になってくんですけど
フレーマーはどっちかちょっとデザイン with code だと思っていて、コードを書きつつデザインするみたいな感じ。
じゃあ結構、コードでガシガシ書いていけるみたいな感じなんですかね?
そうですね。
なんかちょっとまあフレーマー歴史が色々ややこしくて。
なんか結構色々ありましたよね。
JS だった時もあった気がするし。
2013、2014年ぐらいの時は、フレーマージェースって名前だったんですね。
で、その頃って、時代的にはスケッチとかがようやく出てきてて、
あと、プロトタイプ作るためには、名前なんだっけ、フリントとか、
フリントとか、あと、インビジョンもあったのかな、その時。
どっちかというと、紙芝居的なプロトタイプを作るツールが当時よかったと思いますよね。
画像をアップロードして切り替えていくみたいな。 トランジッションぐらいはつけれるかなーみたいな感じですよね。
そこに対して、フレーマージエスっていうのは、もうちょっと本物に近いプロタイプを、
こうなんか疑似コードを書きつつ実現するみたいな なんかそういうハイファイのプロタイプを作るためのツールで
今だと折り紙スタジオとかそういったものがと似たカテゴリーの製品だったんですよね最初って
でそこからなんかいつの間にかフレーマーXってものが誕生して
あったあった
でこれはあの後から説明する今のフレーマーに近い思想で作られたもので
そこからさらにピポッとしてフレーマーウェブってものができて
これはFigmaなんですよ。Figmaにかなり影響されたもので
そんな感じですよね
でさらに名前を変えて、今はフレーマーっていう名前になったんですよ
あ、フレーマーウェブとフレーマーも違うんだ
どっちかというとフレーマーJSっていう最初のプロトタイピングツールとしてのフレーマーと
フレーマーXってデザインツールとしてのフレーマーがしばらく両立してたんですよね
それが今フレーマー、デザインツールとしてのフレーマーが主流になってフレーマーっていう名前に変わったっていう感じです
なんかもう色々ガチャンってなって合体してフレーマーに戻ったみたいな感じなんですかね
なんか結構3年間ごとにフレーマーが刺してるものが結構変わるんで
なんか色々変わってるよね。いつも僕もあんまりそこまでウォッチしてないから、時々見るとあれ、またなんか変わってるみたいな。
なんかもう全然違うものとして思った方がいいですね、フレーマーを。
過去のフレーマージェンスをしてる人から見るとだいぶ混乱すると思うんですけど、もう全然違うものです。
それと同じように
フレーマーっていうその砂場上で
アニメーションを表現するのに適した
ライブラリになってたりするんで
多分それをそのまま本番に出すってのは
多分パフォーマンスとかそういう面で難しいんじゃないかなって気はしてます
もしかしたら頑張ればそういう フレーマー上で生成されたコードを
実際のReact Nativeの方にうまく最適化して エクスポートできるのをかけることもできるかもしれないけど
それが現実的かどうかっていうのは ちょっとまた別の話だっていうことですよね
ある意味そのアプローチをめちゃくちゃ 深くやってるのがXcodeだと思って
そうだね もうあれは完全にね iOS の Swift UI とかはね
完全そのアプローチですもんね
だからわかんない 僕がフレーマーの中の人だったら あんまそこは掴まらないかも
まあまあまあ でもそれのぞいても全然ちょっと
僕もフレーマーまた触ってみたいなって気持ちになってきましたね これ
見てて
そうか
なんかでも、なんていうの、初めての人、僕も多分初めてになると思うんですけど
からすると、もうちょっとなんかこう、こういう感じでいいよみたいなノウハウ的なドキュメントが欲しいですね
ああ
なんていうの、その別に普通に作ってもいいと思うんですよ、Figmaみたいな感じで
適当にレクタングルとか並べてテキスト並べてみたいな感じでも別にできると思うんですけど
そうじゃない良さが多分あると思うんですよさっき言ってた
色を中色化したりとかっていうのも含めて
多分もうちょっと色々あると思うんですよそれ以外にも
そういうノウハウがどっかにあるとすごい良いなって思ってるんですけど
なんかあるんですかそういうの
いやないと思います
たぶんフレーマー的には今まさにFigma的に使ってほしいっていうところで製品でアップデートしてると思うんですよね
だからもうコードコンポネントとか難しいことももちろんできるんだけど
そういうことは一旦忘れてFigmaとして使えますよっていうツールとして今アップデートしてると思ってて
僕はまあその方向性は正しいかなっていうふうに思って
いやなんかこう別に僕はそれをフレーマーのオフィシャルのものに求めてるってよりは
どっちかっていうとコミュニティ的に使ってる人たちの
だから例えば出口君がそういうブログ書かないかなっていうのを
僕はちょっと期待してたんですけど
なるほどね
使ってみてこういう感じでやると良かったよっていうのを
なるほどね
なんか見れるとまたちょっとやってみようかなっていう気持ちになるかなっていう
確かにね
僕も正直コードコンポネートめちゃくちゃ今活用してるわけではないんですよね
なんていうか必要性が今は現れてないというか
会社のフェーズ的に結構プロタイピングどうこうみたいな感じじゃないんで
結構なんだろう
そういうことがあったら発信していきたいなと
いや でも 多分 結構 使ってない人 多いと思うから
なんか 本当に ちょっとしたことでも 多分 参考に
もしかしたら もう 誰か書いてる人 いるのかもしれないけど
ちょっと調べたら 多分 出てくるんじゃないかとは思うけど
なんか そういうのでも 結構 まだまだ
参考になるドキュメントに なるんじゃないですかね
うん 確かに
ちょっと じゃあ 今回が その第一弾ということで
単純に使ってみてどうだったとかっていうのだけでも
結構参考になる
そういうのって、一個だけでもあれじゃないですか
いろんな視点で書かれてた方が
ああっていう部分もあると思うし
僕は期待してしまいますね、そういうのを
やっぱりコミュニティが盛り上がらないと
こういうのってなかなかうまくいかないところがあるじゃないですか
Figmaもそうだったし
インビジョンも結構その辺頑張ってた時あったし
なんかコミュニティをどう盛り上げていくかみたいなとこありますよねやっぱり
そういう意味では日本ではまだまだですねフレーマーは
海外どこかだったら結構使われてたりするんですかね
そういう意味ではちょっと1個僕がすごい注目してる取り組みがあって
なんかまぁこれ2020
いつだっけな ちょっと前の記事なんであれなんですけど
2018年か
DataDocっていうまあサービスがあるんですけど
まあそこのデザイン何なのかな エンジニアなのかな
が書いてた記事なんですけど
プロダクションのコードを基点にデザインを始める
っていうことをフレーマーでできないかっていうことを書いてる記事があって
これ面白いなぁと思って
要はプロダクションコードをインポートしてフレーマー上に
でそこからデザインをスタートするっていう感じですね
でここでまあこれまだなんかテストできないかなみたいな感じなんで
まだ実用段階にはないんですけど
なんかこれフレーマーにとってすごい価値があるんじゃないかなと思ってて
その冒頭で話したやっぱデザインと実装ってどうしても帰りしてくると思うんですよ
どんどんどんどん
で、なんかこう、やっぱ僕は実装が一番デザインにとって正だと思うんですよね
世の中に出ててユーザーが使ってるものがデザインのマスターデーだと思ってて
まあそうだね
で、そのデザインデータをそこに追いつかせるっていう取り組みは
なんか結構あんまりこう、生産性がないというか、価値を生んでないと思うんですよ
だからやっぱデザイナーはプロダクションの、プロダクションの世の中にユーザーが使っているものから新しいデザインをスタートできた方が、なんかこう生産的だなーっていう風に思ってて
なるほどね
でその点でこの取り組みはそこに通じるなと思ってて
例えば今ウェブ上で動いてるプロダクトをインポートして
そこから新しい機能を追加するためデザインデータを作るとか
その後エンジニアと連携してマージされたらそのデータは一旦終わりみたいな
なんか常にデザインの起点をデザインデータから始めるんじゃなくて
プロダクションコードからデザインを始めるっていうようなワークフローが作れると
なんかこう新しいというか
そうだね
もうそしたら完全にもうマスターが一致するもんね絶対に
そうそうそうそう
かつエンジニアとデザイナーを見てるものも一致するし
プロトタイプもより早くなるやりやすくなると思うし
そうなると便利だな確かに
それができるのってやっぱフレーマーがこうコードベースでデザインをするってことを
やろうとしてるからだと思ってて
結構さ、まあアプリだけに限らずさ
ウェブサイトとかでもそういうのあるんだよね
まあ僕とかだったらさ、普通にデザイン、グラフィックも作るけど
まあ普通にHMDとかJSとかCSSも書いたりするから
なんかこうCSSで書いてる上で
やっぱなんかもうちょっとこうかなみたいなの変えちゃったりして
そうそうそう、あるあるある
どんどんデザイン、元々のデザインはなんかこう
なんとなくのぼやっとした目標みたいな
分かる分かる
最終的に出来上がったものがいいみたいな感じになってる時があるんだよね
僕もやっぱLPとか作る時とってデザイン上のデザインはレイアウトの概念図でしかなくて
あとはCSS書きながら組み立ててディテールを考えるかみたいな
一応デザインしてる時もなんとなくこれは同じものを使いますって思ってたりするけど
実際にやってみると 別物だったり もっと別の他のものとも一緒にできるなって考え始めちゃったりとか
どんどん変わってっちゃうっていうのはよくある これウェブサイトのコーディングの話だけど
アプリでもそういうのあったりするかもしれないし やっぱりアプリの実装されてるコードがマスターであるっていうのは本当に正しいし
加工ベースにまた新しいデザインを加えていくとか変更していくっていうのは正しい取り組みな気はしますよね
だからデザインからコードを出力するっていうデザインというコードはちょっと非現実的かなと思うんだけど
その逆でコードからデザインを出力するっていうコードというデザインは