Figma Makeの紹介
どうも、こんのです。今日は、Figma Makeで作業しながら何か作ってみる回にしたいなぁと思っています。
いつもだと、ある程度話す内容を考えながら話してるんですけども、今日はFigma Makeで作業しながら、
ダラダラ喋っていく回にしていきたいなぁと思っています。 ただ、あまり作業配信をそのまま流すと、ちょっと聞きづらい部分あるので、
最低限の編集は加えていこうかなというふうに思っています。 で、今日やろうと思っていることは、
Figma Makeで何かしらプロダクトを作っていきたいなぁと思っています。 それで何のプロダクトを作るかなんですけども、
ちょっといろいろ考えてみたんですけども、 やりたいことリストを共有するプロダクトを作りたいなぁと思っています。
なんでこれを題材にするかなんですけども、 そこまで複雑なプロダクトにならないかなっていうのがあるので、
シンプルで始めやすいかなというふうに思っています。 意外にこういったやりたいことリストを公開するサービスって、
なかなか見かけないなぁと思ったので、 これもちょっとリサーチしながらやっていきたいなって思っています。
あと、Figma Make、仕事でもちょいちょい使っているんですけども、 ゼロからプロダクトとして作って公開するっていうところまでは、
なかなか業務ではやりづらいので、個人ワークとしてやっていきたいなというところで、 今日はやってみようかなというふうに思っています。
これで始める前に、まず簡単にFigma Make、どんなものかっていうと、 Figma が作っているプロンプトで作れる UI を生成する AI ツールですね。
要求定義と要件定義
これこれこういうサービスを作りたい、デザインを作りたいっていうのをプロンプトで書いて、 指示を出すとそれっぽいものが簡単にできちゃうんですよね。
有名なのだと V0 とかが結構前から流行っていたんですけど、 それと似たようなものがFigmaでも使えるようになったっていう感じですね。
ただ、V0 と違って、Figmaならではの部分でいうと、 デザインシステムを取り込めたりとか、
コンポーネントを解釈したまま、そのまま生成できたりとか、 今のFigmaの UI を連携させるっていうところが便利かなというふうに思っています。
あと、Figma サイトでサイトを公開する機能があるんですけども、 そちらにもMake で作ったものを持っていけるみたいです。
この辺はちょっとまだ試したことがないので、今後試してみたいなというふうに思っています。
ということで、早速Figma Make を使っていこうかなと思っています。 まずMake ボタンを押すと、何を作りたいですかっていう画面が出てきますね。
ここでFigmaのフレーム、URLをコピーしたりとか、 このままコピーして貼り付けとかもできるんですけども、テキストでそのまま書いたりとかもできます。
サンプルでいくつか下に表示されていますね。 ガラス素材エディター、
シンセメーカー、これは音で作れるやつですかね。 画像ティザーリングツール、これは何だろう。
画像を編集するものですかね。っていう感じで、 これはFigma公式が提供しているものっぽいですね。
っていうのがちょっと改めて見て、こんな機能があるんだなぁというふうに思いました。 それでやりたいことリストなんですけど、
やりたいことリストを作ってくださいって言っても、多分それっぽいものができるんじゃないかなぁとは思うんですが、
どういったものを作りたいかっていうのをきちんと言語化した上でやった方が精度が高いものができるかなと思うので、
ちょっとその辺をChatGPTでちょっと考えていきたいなというふうに思っています。
やりたいことリストをシェアするサービスを作りたい。 要求定義書、要件定義書を作ってくださいとちょっと投げてみますか。
はい、ChatGPTで投げてみました。 ちょっと画面共有できるわけじゃないので、
ちょっと言葉でうまくお似合いながらやっていきたいなと思っています。 まず要求定義書はユーザーとか事業支店の内容で、
要件定義書はシステム観点の内容に分けて書いてもらっています。
ざっと言語化というかいろいろアイディアを考えてもらってますね。
大枠問題なさそうかな。 カテゴリー機能、カテゴリー機能まではなんかちょっと複雑なので、ここまでやらなくていいかなと思ってます。
ちょっとこれコピーして、ちょっとNotionでこの機能は一旦やらないんじゃないかなというのは編集しようかなと思っています。
Notionにコピーして、 カテゴリーあった方がいいかな。
これ多分なんか100個とか登録されると順番で綺麗にまとまっていればいいんですけど、多分そういったことはユーザーに負担かけちゃうかなと思うので、
パッと見てわかりやすいようにカテゴリーあった方がいいかな。 ちょっとGPTのやつだと旅行学習趣味なども整理すると書いてある。
ここなんか大事な気がするので、 旅行学習趣味。
これなんかもうちょっと 言語化したいな。
ユーザーがカテゴリー追加するってなるとちょっと複雑なUIになりそうなので、
サービス側が最初から用意されているといいかなと思ってます。 旅行学習趣味だけじゃなくて10個ぐらいあれば耐えられるかなって思うので、
10個ぐらい考えていってちょっとGPTに投げてみました。
なんか10個良さそうなのが出てきたので、ローマタノーションに貼っています。
要求定義は個人がやりたいことを公開しやすい場を提供するというところですかね。
想定ユーザーは自分のやりたいことを可視化して整理したい人、 他人のやりたいことを除いて共感学びを得たい人。
これなんか雑に投げてもうまく受け動かしてくれてますね。 次、要件定義のところ行きたいなと思いますが、ユーザー登録ログイン。
あー、これもちょっと面倒なんで Google ログインのみにしようかなと思ってます。
やりたいこと投稿編集削除。 うん、これはできるのと、カテゴリーの分類はさっき登録したやつですね。
公開・非公開か。 あー、まあ非公開にしたいというニーズはありそうだけど、
いったんなんか複雑になるそうなものは一回削除しようかなと思います。 他人のリスト閲覧。
あー、他人のリスト閲覧あってもいいかなと思ってて、これトップページにある機能として 残したいんですよね。
機能要件と 画面構成をちょっとテキストで書いてみるか。
トップページは他人のリストを見れるんですけども、 詳細ページは2つの軸があるかなと思っていて、
ユーザーのプロフィールページに直接行くのと、 やりたいこと自体の詳細ページですね。
やりたいことの詳細って、これちょっとどうしようかなと思っていて、 ユーザーに紐づくやりたいことではなくて、
やりたいこと自体が詳細ページを持っていて、 それがユーザーに紐づいているという概念したんですよね。
ゾンヒャクの影響
やりたいことの詳細の中で、それを登録しているユーザー一覧を出せると面白いかなと思っての発想ですね。
あとはやりたいことの編集画面。 登録・編集・削除ができる。
あとフォロー・いいね・共感ボタンか。 フォロー機能もあったらいいけど、ちょっと複雑になりそうだな。
これは初期フェーズでいったんいいかな。 いいねはあった方がいいけど、
いや、なんかいったんいいねもいいかな。 あ、そうだ。やりたいことは進捗管理。
閉格中・実行中達成。 確かにこれはあった方がいいかな。
いったんできたので、 機能要件・画面構成・非機能要件。
非機能要件はモバイルファーストだったりとか、直感的なUIとかっていうことが書いてあります。
で、細かなデザインどうするかな。 Figma Make で作ってもそれっぽいのはできるんですけど、
デザインちょっとイマイチな感じになると思うんですよね。 自分でデザイン作ってもいいんですけど、ちょっとそこ手間になりそうなので、
デザインシステム読み込んで作ろうかな。 それっぽくいい感じできると思うので。
それは後で考える。 これを投げたら Figma Make どんな感じにできるかな。
ポチッと押しました。 Figma Make って雑に投げても、ある程度推論してくれて、こういったことをやりたいんじゃないかなっていうのを
言語化した上で作成してくれるんですよね。 例えば僕が今書いた内容で、
ユーザー認証とデータベースが必要になってくるので、スパベースが必要ですよねっていうところも付け加えて指示してくれてますね。
スパベースのこともちょっと後でやりながら触れていきたいなと思っています。 構築が結構時間かかるかなと思うので、ちょっとその間に
これなんでやりたいことリストを作ろうかって思った理由、もう一個思い出したんですけど、
ゾンヒャクってアニメ知ってますか? ゾンヒャク、正式名称なんだっけかな。
ゾンビになるまでしたい100のことっていうアニメと漫画なんですけど、これがすごい面白くて、
世界がゾンビだらけになって絶望な状況なんですけども、そんな絶望な状況の中でも主人公は常に前向きに自分がゾンビになるまでに
これを達成したいっていう100のリストを作るんですよね。 いきなり100個作るわけじゃなくて、話を物語進めながらちょっとずつ書いていくっていう形なんですけど、
その100個のことを達成をする物語がとても面白いんですよね。 やりたいことをどんなほど書いてるかっていうと、
難易度がすごい低いものだったりとか高いものがすごいいろいろ書いてあるんですけど、例えば好きなった人に思いを告げる
だりとか、部屋の掃除をする、昼間からビールを飲んでダラダラする、 バイクを乗り回す
とかですね。 なので結構簡単にできるものもあったりするので、話を進めていく中でその100個のリストができるんですよね。
中にはすごい難しいものがあって、それを達成するためにゾンビにならないように上手く立ち 合いながらやっていくっていうのがすごい面白い漫画です。
ゾンビの世界だったらもう普通の人だったらもうメンタルかなりやられるんじゃないかなと思ってるんですけど、
ほんとこれゾンビ漫画アニメかっていうぐらいすごいポジティブな感じで話が進んでいくので、
人間って何かを成し遂げたいという時にこういう風になれるのかなーっていうところが非常 にこのアニメの
いい応えになるかなーというところが思っています。 っていう間に今メイクが
一旦できました。 できましたって言ったけど画面が表示されないぞ。
プロジェクトの開始
エラーが出てますね。 これなんか知らないけど時々エラーが出るので修正以来するってボタンが続きに出るのでそれポチッと押すと修正してくれます。
スパーフェイスに接続してくださいっていうのがあって、これ接続するボタンを押すと サクセスっていう画面が出るんですけど
これ連携が僕ちょっと前からやってるんですけどうまくいかなくて ちょっと今回もやってみようかなと思います。
そもそもこれプロダクト名何にしようかな。ちょっとやりたいこと まあちょっといった後で考えるとして
やりたいことリストってそのままにしよう。 データベースの
あ、ごめんなさいちょっと今何やってるかというと スパーフェイスっていうバックエンドを提供してくれるサービスなんですけど
バックエンドの知識があまりなくても簡単に使えるっていうものですね。
で、Figmaと提携してましてこのスパーフェイスと連携することによってデータベースが必要なサイトだったりとか
あと会員登録が必要なものもこのスパーフェイスを使うことによってできるようになります。 そちらでプロジェクトを今僕が作ろうとしています。
プロジェクト名やりたいことリスト データベースのパスワードを入力してポチッと押すとプロジェクトが作られます。
ここでどういうデータベースの構造にするかっていうのも自分でポチポチできるんですけど
この辺はFigmaメイクで勝手にやってくれるんじゃないかなぁとは思うので、一回プロジェクト作ったら
Figmaメイクに戻ってやりたいなぁと思ってますが、これプロジェクトどうやって紐付けるんだ
一応プロジェクト名やりたいことリストだよっていうのも伝えてみるか。スパーフェイスのプロジェクト名は
やりたいことリストです。 エラーが出ているので修正してください。
ポチッ これでまたメイクが作業中になりました。
スパーフェイスの連携うまくいけばいいけどなぁ
まぁいったん どんな画面ができるところまでは今日できると嬉しいなぁと思ってます。
今気づいたけど、コンソール画面っていうのがあってそこでエラー内容が多くありますね。
なんか普通にJavaScriptのエラーっぽいのが入ってきてるなぁ。 ちょっとまだ生成中なんですけどその間にFigmaメイクは作ったものをそのまま公開する機能もあるんですよね。
URLは勝手に作られるんですけども カスタムドライブもできます。あとコミュニティにも公開できるので
Figmaコミュニティでいろんな人に見せることもできるかなぁと思ってますね。
今回は、まぁちょっと今回はまだしないんですが、ある程度できたらちょっとコミュニティにも公開してみたいなぁと思いますね。
お、エラー解消しましたと出ました。スパーフェイスうまくいってんのかこれ。
スパーフェイスとの統合が完了しましたと言ってあるけど本当かなぁ。 これちょっとなかなかうまくいかないんですよね。
FigmaメイクとスパーフェイスやりましたっていうのをXとかほとんど見かけないので、多分皆さんこれやってる人まだ少ないんじゃないかなぁと思ってます。
うまくいくといいなぁ。 まあ今回シンプルと言いつつ
まあまあ複雑な構成なので 生成の時間は結構かかるかなぁと思ってます。
サービス名どうしようかなぁこれ。 ちょっとGPTに聞いてみるか。
サービス名のアイディアをください。 ウィッシュリスト。直感だけどわかりやすいけど
なんか日本人がわかる内容にしたいな。 ホープとかウィルとか
やる、サムデイ、ウィッシュ
取れないかなぁ。まぁシンプルな 英語でもいいけど
日本語にしたいなぁ。 ちょっとこの辺はまた考えておこう。
ちなみにこのFigmaメイク無料アカウントでもできるんですけど、 僕も無料アカウントなんですが
1日に制限があっておそらく 5回から10回ぐらいのプロンプトができるかなと思ってます。
制限がかかるとまた明日やってねみたいな感じの画面になるので プロンプトはあまり無駄打ちしないように慎重にやるのがいいかなと思ってます。
課金してプロフェッショナルプランだと何回ぐらいできるのかな。 その辺書いてあるのかな。ちょっと待ってる間に見てみよう。
無料プランと
プロフェッショナルプラン。 違いはライブラリーを読み込めるかどうかですね。
それ以外は無料でも全部できるっぽいので スパベースの連携とかできるので
あ、あとあるか。公開機能が そのままサイトを公開できるわけではなくてコミュニティーにしか公開できないので
ここはちょっと不便かな。 まあじゃあ本当に公開するなら課金しようかなってちょっと思ってます。
はい。 まあメイクに戻ってきたら、おお、ようやく画面ができた。
おお、なんか 口で表現するの難しいので後で x へ投稿しようかなと思います。
まあちょっとUIとしてはすごい微妙ですね。 微妙だけど動くのかなぁこれ。
スパベースの設定が必要ですとか出てるのはやっぱり連携うまくいってないんですね。これ 多分今デモ画面で出てるんですけど
みんなのやりたいことっていうのが出て佐藤さん山田さんっていうのが出て 北海道でスキーを楽しむだったりとか
プログラミングスキルを向上させるというのがありますねー これはこれで面白いけど
なんか面白みがないなぁ ちょっとこの辺はカスタマイズしようかな
なんかエラーが出てたのでそれを修正してもらうとスパペースの設定 連携がうまくいってないのでやってってちょっと試著しました
スパペース側もちゃんと登録されてるのかをちょっと見てみようかなと思いますが やっぱりうまくいってないですね
やっぱりなんか誰かうまくいってる人 解説記事を作ってくれると嬉しいなぁ
自分で調べるよって感じなんですけど 公式サイト見てみるか
ああ 公式サイトにちゃんとヘルプがありましたね
やり方書いちゃって やっぱりなんかアレだな設定が足りてないっぽい
うーんこの辺ちょっと もうちょっと調べてから行ってみるか
ちょっと長くなったんで今日はここまでにしようかなと思います またちょっとスパペースの連携のところとかを調べてできるようになったらまた
プロダクト制作の楽しさ
Podcast で配信したいなと思っています ちょうど Figma Make 今日のクレジットは使い切りました
アップグレードしましょうという画面になったので もう今日はこれ以上触れなくなりました
ちょっとヘルプページ見て勉強しようかなと思います
はいっていう感じでながら作業をしてちょっと配信してみました またちょっとこんな感じで定期的にやっていきたいなというふうに思っています
やっぱり Figma Make 楽しいですね 簡単にプロダクトがポンってできるので
今までデザインしてたりとかコーディングしてた実感がカツッと減るので 本当アイディアに集中できるかなというところがやっぱり凄いなと思いました
機能要件とかを細かく書かないと やっぱりちょっと自分と想像したものと違ってくるものができるかなというところなので
最初の指示をいかに細かくするかっていうのと その後の修正をどのような形で指示をするかっていうところが大事なのかなというふうに思いました
この辺もちょっとやりながらブラシアップしていきたいなというふうに思っています 何か質問などあればぜひコメントください
またこのポッドキャストは毎週水曜日に配信しているので ぜひ番組をフォローしていただけると嬉しいです
それじゃあまた
