# サイトやアプリ作成がAIで簡単にできる はいどうも、プロダクトハックです。デザイナーの京ちゃんです。 プロダクトマネージャーの文太です。このチャンネルでは世界のデジタルプロダクトやテックニュースについて私たちが気になったものを取り上げてお話ししていってます。 はい、今日は何のお話ししましょうか。はい、今日は毎日使っているFigmaのアップデートでAIの搭載ツールの幅がまたすごく広がっているというところをお話ししたいなと思っています。 はい、いろんなプロダクトでAI搭載とか、あとAIの新しいプロダクトが出てきて、もう何で何ができるのかみたいな。 だんだんできるところが被ってきているので、何のツールをベースにそこを伸ばしていくのか、その仕様の幅を伸ばしていくのかというのは、逆にちょっと迷うくらい被ってきているなというのが思ってきて、 これ何でやったら一番いいかなというのが迷うくらいだとは思うんですけど、今回のAIの活用で本当に広くまた迷う幅が増えたなと思っているのは、 まず以前のアップデートでスライドとかは作れるようになっていたと思うんですけど、もっとバナーとかマーケティングツールみたいなところにも広がっていくとかだと、 看板と看板でできることを被ってきたなとか、もっと自由自在にイラストを描けたりするみたいな、アドビとも被ってきたなとか。 さらに今回私がすごいなと思ったのは、ウェブサイトも作れるようになっちゃう。ノーコードで作って、さらにコードもAIで吐き出せるみたいなことがなってきて、 WixとかWordpressとかStudioとかそこら辺にも進出してきているのが今回のアップデートです。 もうちょっと詳しく話していくと、まず一つ目がウェブ作成ツールのFigmaサイトというもので、これも本当にシンプルにAIによってサイトが簡単に作成できます。 基本のデザインを作ったらレスポンシブの対応だったりとか、あとはトランジションとかアニメーションとかスクロールでより効果を出していくとか、 そういったところのFigmaの強みとしているデザインの表現の部分をすごく柔軟に作れるようになっていって、さらにCMSも組み込めるようになるらしくて、 そうなってくると更新していくっていうところについてもすごくできるので、それこそWordpressとかStudioのCMSとかを使わなくてもFigmaでCMSを組み込めちゃうよっていうのは、 これは今まだないんだけど追加予定ですっていうリリースが出てました。そこでAIでさらにコードっていうのが自動生成されるし、 知識があればそれをまたカスタマイズしてより自分たちの最適な動きにできるとか、そういう風になっていくっていうので、 かなり簡単にサイトがもう何の知識もなくても作れるようになるんじゃないかっていうのがこの一つ目のFigmaサイトです。 じゃあもうWordpressは、それは自分で設定が必要ということですね。カードは用意して、そこにFigmaのAIで作ったサイトを組み込めばすぐにできるということらしいですね。 だからもうデザインの部分、フロントエンドの部分はここで作れちゃうよということですね。 今までGUIでぽちぽちいろいろプラグインとかやってましたけど、それすらもいらないと。 それすらもいつものフィグマ、言葉だけでいけるし、そこにフィグマの使いやすいデザインの動作で全部そのデザインもカスタマイズできるという感じですね。 でも表現の幅が広がりますよね。僕も経験ありますけど、CSSとかJavaScriptを使って動き出したりとか、細かい調整ってやっぱりそれなりに技術ができないじゃないですか。 その辺がある程度言葉でできるというところは、本当誰でも民主化というかアイデアがあればいいものができるという。 そうですね。アイデアがある。本当にその通りだと思います。 2つ目がフィグマメイクというもので、これがプロンプトを入力するだけでウェブアプリケーションを作成できますと。 しかもコードも含めて。例えば時間が分かる時計のアプリケーションを作りたいみたいなことを書くと、 その時計のアプリケーションが作れて、それをさっきのフィグマサイトに埋め込むみたいなことができるというので、 よりインタラクティブなものっていうのをフィグマメイクで作れる。 なので文太さんがたまにカーソルとか使ってAIでいろんなプロトタイプ作ってくれてると思うんですけど、 もうちょっとそれをさらにインタラクティブなアプリケーションとして作るみたいなところができるというかたですね。 これなんかちょっとまだ私もあんまりイメージ湧かないので、作ってみないと分からないなと思ってるんですけど、 より動的な要素っていうのがプロンプトだけで作れますっていうのがフィグマメイク。 じゃあそのあたりはパッケージ化されているのか、サンプルみたいなのが組み込まれて簡単に作れるようになっているのかみたいな。 そうですね。 サービスも分かれているんですね、そのフィグマサイトと。 そうですね。今フィグマのデザイン作るのとフィグジャムとかフィグマスライドって最初から分かれているんでしょうね。 ああいう感じで分かれている。 なるほど。 次がフィグマバズっていうので、これがマーケター向けなので一番競合するのがCanvaかなと思うんですけど、 ブランドのイメージのテンプレートみたいなのを作っておけば、それをどんどんそのテンプレートをベースにしていろんなバナーとかマーケティングツールっていうものを作成できたり、 スプシでデータソースをバーって入れておくと、そこからアセット一括作成、大量に似たようなデザインのいろんなバリエーション違いを大量に作りたいみたいなときに、 そういったデータソースからアセット一括作成できるっていうので、これは確かにマーケティングのデザイナー、ノンデザイナーでも、今でもいろんなツールあると思うんですけど、 よりそこが柔軟にできますよっていうのがこれですね。 AIの得意分野ですね。反復というか。 そうですね。バリエーション作るというか。 めっちゃ面倒くないですよね。 ちょっとこっきゅうの文言変えようとか。 あっちゃこっちゃ調整して。 そうですよね。それが一括でできちゃいます。 痒いところに背が取れるという感じですね。 あとはこれはデザイナーが嬉しいと思うんですけど、フィグマドローっていうのがあって、これはAIというよりかはもうちょっとデザインツールとしての発展のアップデートですけど、 今までベクターデータって複雑なイラストを描いたりとか、細かいアイコンを自分でオリジナルで作ったりとかするときに、 輪郭を取るベクターっていうやつを複雑に編集するのがフィグマは苦手だったんで、それを大体いつも書き出して、 それをイラレとかアドビのツールに読み込ませてっていうことをやってたのが、一定の編集はフィグマでできますっていう形で、 結構アドビのイラストレーターのベクターを自由自在に操るみたいなところを組み込み始めた。 だからUI、グラフィックデザイナーとかだともう少し凝った表現をしたいので、もうちょっとアドビを使うかなと思うんですけど、 私みたいにUIデザイナーの使いたいベクターの範囲っていうのはもうここで完結するので、ほぼアドビを使わなくてもよくなるんじゃないかっていう形ですね。 これはAI関係なく? これはAI関係なくです。でももしかしたら、生成AIを使ってイラストを作るみたいなところは入ってそうな感じですかね。 でも一気にこの機能をドンとリリースした。 やばいですよね。だからもう全部フィグマさえあればよくなるっていう世界を一気に目指しにきたなっていう感じで、 ここはちょっとキャッチアップしていかないと、いろいろと作業の効率化だったりとか、 ノンデザイナーとコミュニケーションするっていうものも踏まえて、これはちょっと使えるようになってほしいなと思った機能ですね。 というわけで、いつも使っているフィグマが急にいろんなことができるような大型アップデートがされました。 でもあれですよね、最初どのツールを使っていいかわからないみたいなのがありましたけど、そこに惑わされちゃダメですね。 最終的に何をしたいか。 そうですね、目的が一番大事。 僕もXの投稿で言うと、これを使えば上手くいくみたいになって、めちゃくちゃ出るじゃないですか。 AI祭りですからね。 めちゃくちゃになるけど、そこに惑わされちゃダメだなと思って。 一番やりたいことが実現できるっていうのを逆算して選ぶ。 でもフィグマは特にデザイナーとかだとずっと身近なツールだったから、そこから発展していける。 使い方の幅が広がっていくっていうのはありがたいというか、自然な形でここに主役されるっていうのはすごく夢のようだなと思っております。 みんなそうしたいですね。 というわけで今日はフィグマの大幅アップデートについてお話ししました。 ありがとうございました。