技術記事

micomia株式会社の畑井です。
今回はFlutterFlowに搭載されているAIによるページ作成機能やコンポーネント作成機能に関する利用レポートをお届けします。

1.FlutterFlowを開く

FlutterFlowに課金しなくても5回までなら試すことができます。
今回はGrowthプランに契約しているので制限が200回/月です。
心置きなく進めていこうと思います。

2.プロンプトを入力する

まずはこのようなプロンプトを入力して投稿作成ページの作成をお願いします。
ここのプロンプトを詳しく書けば書くほど精度は高まるという意見もあると思いますが、細かく書くなら作ってしまったほうが早いので実際に効果を感じやすい画像のような粒度のプロンプトを送っておきます。
さりげなく日本語で入力していますが、全く問題なさそうです。

できあがると上の画像のように完了マークが付きます。
時間としてはおおよそ15秒程度でした。

生成結果を見てみますとなかなか良い見た目をしていると思います。
AIで生成したものでなかなかちゃんとしたものが出てくることがなかったので、かなり驚いています。
多少余白やサイズ感を調整してあげるだけで違和感の少ないUIに仕上げることができそうです。

3.Widget構成を確認してみる

問題はUIではなくこのWidget構成にありそうです。
アップロードされた画像をプレビュー表示する部分でGridViewが出てきています。
本来使用する必要がないWidgetなので削除してRowなどに変更する必要があります。
あまりFlutterFlowを使ったことがない方だと正直気にはならないかなと思います。

他の生成された部分を見てみましたが特別問題があるということはなさそうです。
めちゃくちゃなWidgetが生成されるということはないのである程度のクオリティを出してくれています。

4.コンポーネントを生成する

ページ生成時と同じように日本語で先ほどのような粒度で書いてみます。

失敗してしまいました。

言語を変えてみましたが、これも原因ではなさそうです。

何度かやってみましたが、成功したものは「create a component」という実用性のないプロンプトを送ってみたところ生成成功しました。
しかし、生成結果は真っ黒なので2025年10月現在はまだComponentの生成には利用できない可能性が高いです。

5.まとめ

現状のAI機能は使う人を選びそうです。
仕事でFlutterFlowを利用している人はおそらく利用できないものではないかと思いますが、趣味や勉強で利用している方は十分に利用することができると思います。
あくまで個人的な意見ですが、この機能を目当てにプランを上げる必要性は現在のところあまり感じていません。

動画でもっと知りたい方はこちら