Figma makeの紹介
どうも、AI駆動開発ラボ大森です。今回は、AI駆動でデザインをする、AI駆動開発から少し拡張して、デザインのお話をしようと思います。
今日、めちゃめちゃ感動した話なんですけど、Figma makeっていうAIデザインツールがありまして、それを使ってみた感想をお話ししてみたいと思います。
僕はスマホアプリとかウェブのサービスとか作ります。デザインも自分でするんですけど、最近ちょっと作りたいスマートフォンのアプリのアイディアがあって、
デザインをどうしたものかなと思って考えてたんですよ。デザインが決まっちゃえば、機能とデザインとどういうアプリを作りたいか決まっちゃえば、
もうそれこそAI駆動でバババーッと作れるんですね。機能だけで言うとデザインとかはさておき、機能だけで言うと簡単にプロトタイプみたいなものが作れたんですね。
なんですけど、なかなかデザインいいのが決まらないなぁみたいな、自分でこうデザインソフトでいろいろしてと思ってたんですけど、今回、今日かな、今日たまたまFigma makeっていうAIツールのことを知りました。
Figmaっていうデザインソフトがあります。僕も使ってます。多分今一番デファクトスタンダードなんじゃないかな。Figmaって言うんですけど、基本無料で使えるんですけど、
その中の新しい機能をFigma makeっていうのがあって、これ使うとAIがデザインをしてくれるだけじゃなくて、もうそのサイト自体を作ってくれちゃう。よかったらそのまま公開できちゃうみたいな感じのものなんですよ。
しかもそのサイトを公開できるときに、そのウェブサイトだけじゃなくて、ちょっと簡単なウェブサービスまで作れるのかな。データベースみたいなものも用意されてたり、しっかりしたものと連携できるようになっていて、ある程度のウェブサイト、ウェブサービスならmakeできちゃうよみたいな機能なんですけど、
そいつにスマホアプリのデザインをさせてみようと思いました。僕はFigmaの有力範囲なのでmake機能が使えたんですけど、どういう風なアプリでどういう風なデザインにしたいか、どういう画面があるかっていうことで送ったらかなりいいものが出てきて、
もうかなりいいと思って。もうかなりいいので、要はこいつのデザインのセンスがある程度実用レベルだなと思ったので、AIに自然言語、日本語でこうだこうだ言います。こここうしてくださいとか、この要素を画面の中央に置いてくださいとか、
これすげーなと思ったのがあって、なかなかAIがデザインを作る。デザインの画像だけをポンって出すんじゃなくて、要はウェブサイトとかウェブサービスまで作れるよっていうものなので、じゃあこの要素をタップしたらこの画面に行くよねとか、この要素をタップしたら画面の表示が変わるよねみたいなこともしてくれる。
ユーザー体験の部分がデザイン段階ですごく体感しながらデザインができる。めちゃめちゃ体験良かったですね。すっごい感動しました。
結果フィグマメイクのおかげで、こうしたいなーって思ってたんですけど、どうすればそのデザインになるかがわからなかったデザインが7割ぐらい具現化されて、そこでAI使いすぎ制限がかかっちゃって、次使えるのが11月1日っていうすごく悲しいんですけど、
っていうところまで7割いったので、そこからはデザインを引き継いで、僕のほうで手直ししたらめちゃめちゃいいのできたじゃんみたいな。
フィグマメイク機能だけじゃなくて、フィグマもすごくプログラミングとの親和性が高くて、デザインデータをコードに変換するよとか、あとはMCPっていうAIがソフトを触れるようになる技術があるんですけど、
フィグマもそのMCPっていうのがあるので、僕が使っているAI駆動開発のツールコーデックスがフィグマのソフトを勝手に見に行って、ふむふむ、なるほどこういうデザインなのねってわかってくれるみたいなところまでいったと。
だからもうあとはコーデックスさんにこのデザインデータと動くものがあるからすっごく多分AIさんもわかりやすいんでしょうね。どんどん作らせてくださいって言って作らせたるでーみたいなことが今日あったんですけど、だからフィグマメイクめちゃめちゃ良かったです。
めちゃめちゃ良かった。めちゃめちゃ良いんですけど、AIクレジットがあるんですよ、月3000円みたいなのがあるんですけど、がすぐ来ちゃうので、個人的にはデザインの調整みたいなところをAIのクレジット使っちゃうとすごくもったいないので、
プロトタイプを作って、自分のUXを感じるユーザー体験がこういうものなのかとか、ここにこういう要素があったらいいよねとかを、プロトタイプ部分までフィグマメイクで作る。
そこからは、あとこうしたらいい感じになるだろうなが、イメージできる状態になったらもうそこから引き継いで自分でやっちゃう。余ったクレジットまた別の画面とか別のアプリとか別のデザインに回すみたいなのがいいんだろうなぁと、1日で1ヶ月分のクレジットを溶かしたことで学びました。
フィグマメイクめっちゃいいです。
ちなみにフィグマメイクですね。
僕は放送大学に、放送大学通うといいぞみたいな発信もしたんですけど、放送大学に通っていて、無料学生のプラン。
学生だから色々使えるようなプランになっているので、フィグマメイクも結果無料で使えました。放送大学はいいぞですね。
これガチで20ドルなんですね。密学。フィグマのメイクを使えるプランというのが最低で。
でも月3000円で1回もしスマホアプリのデザインをデザイナーさんに頼みますってなったら3000円どころじゃ絶対ないわけですよ。
3000円とか10倍以上の話だから、これ普通に1回しフィグマメイク使いたいので別アカウントを作って課金するみたいなことは全然無しじゃない選択なんじゃないかと思うほどにフィグマメイクめっちゃ良かったです。
AI駆動開発の進展
今までにも色々AIのデザインのツールって出てきたり、あったことは触ってたんですけど、やっぱりこういうものが作れるよっていうのと実務レベルに採用できる品質がどうかってめちゃめちゃ大きい溝があると思ってて、
それが初めてフィグマメイクを越えてきたなって思いました。これめっちゃいいやんって思いました。
本当にめちゃめちゃ感動したのでそれをお伝えしたかった感じです。
フィグマメイク、多分デザインやったことない人でも使えるけど、多分デザインやったことある人はより使いこなせる。
さらにコーダーさん、HTML、CSS、書けます、わかりますの人はよりより使いこなせるなと思いました。
デザインもできるし、あとコーディングですね。HTML、CSSも書けるからフィグマメイク120%は恩恵を受けられたんじゃないかなと思ってるんですけど。
要はどういう風に組むと破綻なく実装できるのか。
例えば画面の中央にこの要素を置きたいんだけれども、
Absolute、絶対位置で画面の中央に置いて、その下の要素は絶対位置に置いちゃうとサイズが反映されないからその分余白をとって、
ああだこうだ、みたいなことをAIに指示できると。
そうするとハリボテだけじゃなくて、中のコード、中のHTMLの構造、CSSのスタイルっていうのがかなり実用的な、
そのままコードに流して全く破綻しないようなことができるみたいなことにもなるので、
結果やっぱりデザインの知識知見とか、あとはコーディングの知識知見っていうのは生きてくる。
工藤開発、工藤デザインでもそうなんですけど、自分の力が全くなしでもできるんだけど、
あればあるだけめちゃめちゃ役立つなみたいな、そんな感じの感想を抱きました。
フィグマメイク、ぜひ一回触ってみてください。めちゃめちゃいいです。
ということで、この放送はAI駆動開発ラボと言って、AIを使って何かソフトウェアを開発する、
ウェブサイトとかウェブサービスとか、あとはスマホアプリとかゲームとか、
そういうAI駆動開発を、僕自身がAI駆動開発の恩恵をめちゃめちゃ受けてて、
AI駆動開発ができるようになるまではプログラミングも5年ぐらいめちゃめちゃ挫折してたんですけど、
AI駆動開発のおかげでですね、今ウェブサイトもウェブサービスもゲームもスマホアプリも作れるようになったで、
めちゃめちゃ早く作れるようになったぜ、みたいな感じなので、めちゃめちゃ楽しいしすごいし、
それこそ副業とか探されている方、副業に似せずになるよということで、
AI駆動開発のノウハウとかハウツーとか最新ニュースとか、これよかったよとかこれ使ったらいいよみたいなお話をですね、
なるべくエンジニアじゃない人にも分かるようにね、分かりやすくお伝えしていくような放送でございますので、
そういうこと興味あるなという方、ぜひぜひこの放送登録してください。
毎日18時に更新をしています。
またですね、今回の放送が良かったな、いいな、なるほど、フィギュアメイクめっちゃいいじゃん、使おうと思いましたって方、
よかったら、いいね、高評価押していただけると、めちゃめちゃ思われている以上の100倍ぐらいモチベーションになります。
あ、こんだけの人に心に響いたんだなと思えて、明日も配信も頑張るぜってなるので、
よかったらひと手間ポチッといいね、高評価していただけるとすごく嬉しいです。
はい、ということでここまでご清聴いただきどうもありがとうございました。
AI駆動開発ラボ大森でした。
それではまた次回の放送でお会いしましょう。またね。
