FlutterFlowでWebアプリを作るときの注意点
はじめに
こんにちは。GenAiの平賀です。
FlutterFlowはモバイルアプリとWebアプリ開発が可能なローコードツールです。
詳しくは以下の記事で紹介しています。
そのFlutterFlowでWebアプリを作るときに、あらかじめ知っておくべき注意点について紹介します。
対象読者はFlutterとFlutterFlowでのアプリ開発をしたことがあるまたはこれからする予定の人になります。
初期ロードが重い
画面数にもよりますが、初期ロードに時間がかかります。理由はファイルのサイズの大きさにあります。SPAのため、ページで表示するための資材を初期ロードで取得します。そのため、プロジェクトのビルドファイルが大きければ大きいほど、初期ロードが重くなります。
フォントに注意
カスタムフォントを利用した場合、日本語フォントにありがちな話ではありますが、ファイルのサイズが非常に大きくなります。Google Fontsで利用できるものを使い、カスタムフォントを利用することを避けるなどの対策をしましょう。
SEO対策できない
Webアプリを公開して、SEO対策したいと考えられる方もいると思いますが、現状FlutterFlowで開発したWebアプリはSEO対策には未対応です。
Flutter公式でも、LPなどのSEO対策したい静的Webコンテンツを作る場合は、Webアプリとは別でHTMLで作ることを推奨しています。
一般的に、Flutterは動的なアプリケーション体験に向けて作られています。Flutterのwebサポートも例外ではありません。(中略)つまり、アプリケーションの出力は検索エンジンが適切にインデックスするために必要なものとは一致しません。静的な、あるいはドキュメントのようなウェブコンテンツには、flutter.dev、dart.dev、pub.devで使っているようにHTMLを使うことをおすすめします。また、Flutterで作成された主要なアプリケーション体験と、検索エンジンに最適化されたHTMLを使って作成されたランディングページ、マーケティングコンテンツ、ヘルプコンテンツとを分けることも検討すべきです。
実際にその方法でFlutter WebのサイトでSEOスコア１００点を取った方のブログも参考に、こちらに貼っておきます。
Flutter Webに向いていないこと
上記を踏まえ、Flutter Webでは、広く流入を狙うブログ・LPなどの制作には向かないでしょう。SEOで不利な点、ユーザーの初回訪問時の離脱を招く点はかなり痛いと言えます。
今のところはFlutterは動的なアプリケーションを作成するために使うのが良さそうです。
最後に
2023年5月10日に発表されたFlutter 3.10に関するアップデートでは、Flutter の Web Assembly（以下、Wasm）対応も公開されており、GoogleもFlutter Webに力を入れていることがうかがえるので、いつか上記の課題が解決されるといいなと思います。
開発会社をお探しの方、日本語でのFlutterFlowの技術サポート/設計/開発請負について
上記、興味あればFlutterFlowを使ったアプリ開発の技術サポートや、設計・開発の請負も弊社では行っているので興味あればお声がけください！
開発会社をお探しであれば、通常の要件定義から設計・実装また保守まで対応可能です。ローコードならではの迅速な開発や、費用感を抑えた開発をご希望の方はぜひご連絡ください。
サービスページ： https://studio.genai.co.jp/
弊社お問い合わせ先→ info@genai.co.jp
では！
Discussion