こんにちは。ノーコードでありかつローコードツールであるFlutterFlow（フラッターフロー）は今流行りの強力なアプリ開発ツールです。Webとネイティブアプリ（iOS/Android）を同時にノーコードで素早く作ることができ、他のノーコードツールと比較してもかなり複雑な機能に対応でき、かつ一部をローコードとしてプログラミングすることでよりカスタマイズ可能です。新規事業のコストダウン・スピードアップに貢献してくれます。では、そのFlutterFlow、どのように学習するのが良いでしょうか？今日はFlutterFlowの学習方法について書いていきたいと思います。公式サイトのドキュメントを見る方法https://docs.flutterflow.io/こちらがFlutterFlow公式のドキュメントです。公式なので、まずはこちらが一番信頼性が高いでしょう。ですが、こちらを地道にみていくのはかなりしんどいですよね、、、すべて英語ですし。せめて動画で見ていきたいですよね。公式のYoutube動画を見る（英語のみ）https://www.youtube.com/@FlutterFlow/videosこちらはFlutterFlow公式のYoutubeチャンネルです。過去の情報や最新の情報はこちらの動画で共有されます。私もFlutterFlow公式Youtubeチャンネルをこまめにチェックし、最新情報を取得しています。%3Ciframe%20width%3D%22560%22%20height%3D%22315%22%20src%3D%22https%3A%2F%2Fwww.youtube.com%2Fembed%2FmlR6rcWexdI%3Fsi%3D4v4-vgDeoxOZnWsV%22%20title%3D%22YouTube%20video%20player%22%20frameborder%3D%220%22%20allow%3D%22accelerometer%3B%20autoplay%3B%20clipboard-write%3B%20encrypted-media%3B%20gyroscope%3B%20picture-in-picture%3B%20web-share%22%20allowfullscreen%3D%22%22%3E%3C%2Fiframe%3E上記がチュートリアル動画なので、こちらも参考にしてもいいかもしれません。ただし、すべて英語ですので、頑張って閲覧しましょう。日本語のYoutubeサイトはこちらやはり日本人は日本語でサイトを見たいですよね。以下に日本人向けに日本語で解説しているFlutterFlowのYoutube学習動画をいくつか紹介します。とはいえ、FlutterFlowは常に進化しているので、進化を追い続けるのが大変です。半年前の動画だとすでにかなり古くなっていて、見た目違っている、機能が増えている、、、なんてことはよくあります。バージョン違いがあるであろう前提で視聴するのが良いと思います。では参考の学習動画を共有します。超初心者向け：TODOアプリの作り方解説動画こちらはFlutterFlow公式動画を参考にほぼ同じようにやって試してみた動画になります。公式動画は英語ですが、こちらは日本語なのでとてもありがたいですね。完全な初心者向けなのでまずはこのTODOアプリの動画からみて作ってみてはいかがでしょうか？%3Ciframe%20width%3D%22560%22%20height%3D%22315%22%20src%3D%22https%3A%2F%2Fwww.youtube.com%2Fembed%2F2nyNcumOZig%3Fsi%3DxnFlX_QcF2BrjRkc%22%20title%3D%22YouTube%20video%20player%22%20frameborder%3D%220%22%20allow%3D%22accelerometer%3B%20autoplay%3B%20clipboard-write%3B%20encrypted-media%3B%20gyroscope%3B%20picture-in-picture%3B%20web-share%22%20referrerpolicy%3D%22strict-origin-when-cross-origin%22%20allowfullscreen%3D%22%22%3E%3C%2Fiframe%3EゼロからX（Twitter)のクローンアプリを作ってみよう。こちらはX（旧ツイッター）のクローンアプリを作ってみる動画です。一覧、詳細、登録（画像、動画）、フォロー、いいね、コメント、フォロー、マイページ、などなど、よくある機能が一通り経験できる動画になっています。%3Ciframe%20width%3D%22560%22%20height%3D%22315%22%20src%3D%22https%3A%2F%2Fwww.youtube.com%2Fembed%2Fd2tJ4Cy46Hw%3Fsi%3DVhcihGh8NBxiGGi-%22%20title%3D%22YouTube%20video%20player%22%20frameborder%3D%220%22%20allow%3D%22accelerometer%3B%20autoplay%3B%20clipboard-write%3B%20encrypted-media%3B%20gyroscope%3B%20picture-in-picture%3B%20web-share%22%20allowfullscreen%3D%22%22%3E%3C%2Fiframe%3Eテンプレートを使ってLINEみたいなチャットアプリを作ってみようこちらはテンプレートをベースにアプリを作っています。FlutterFlowで最初から用意されている、アカウント登録・ログインフローのテンプレート、グループチャットアプリのテンプレートを使うことで、わずか1時間程度でLINEみたいなアプリを作っています。「家族向けのチャット機能」というコンセプトで、招待コードを送って招待する機能なども備えています。%3Ciframe%20width%3D%22560%22%20height%3D%22315%22%20src%3D%22https%3A%2F%2Fwww.youtube.com%2Fembed%2FjPSvEPgxvOs%3Fsi%3DVtI3mXJyxh56Gus1%22%20title%3D%22YouTube%20video%20player%22%20frameborder%3D%220%22%20allow%3D%22accelerometer%3B%20autoplay%3B%20clipboard-write%3B%20encrypted-media%3B%20gyroscope%3B%20picture-in-picture%3B%20web-share%22%20referrerpolicy%3D%22strict-origin-when-cross-origin%22%20allowfullscreen%3D%22%22%3E%3C%2Fiframe%3Eタイミーのような求人マッチングアプリを作ってみよう。タイミーのような求人マッチングアプリを作る方法解説しています。一覧、詳細、日付検索、都道府県複数選択、いいね・お気に入りなどの機能を試しています。%3Cdiv%20class%3D%22height-adjuster%22%20style%3D%22border%3A%200px%3B%20font-family%3A%20sans-serif%3B%20line-height%3A%201%3B%20list-style%3A%20none%3B%20margin%3A%200px%3B%20padding%3A%200px%3B%20text-decoration%3A%20none%3B%20-webkit-font-smoothing%3A%20antialiased%3B%20backface-visibility%3A%20hidden%3B%20box-sizing%3A%20border-box%3B%20color%3A%20rgb(51%2C%2051%2C%2051)%3B%20transition%3A%20all%200.3s%20cubic-bezier(0.4%2C%200.4%2C%200%2C%201)%200s%2C%20--g-angle%2C%20--g-color-0%2C%20--g-position-0%2C%20--g-color-1%2C%20--g-position-1%2C%20--g-color-2%2C%20--g-position-2%2C%20--g-color-3%2C%20--g-position-3%2C%20--g-color-4%2C%20--g-position-4%2C%20--g-color-5%2C%20--g-position-5%2C%20--g-color-6%2C%20--g-position-6%2C%20--g-color-7%2C%20--g-position-7%2C%20--g-color-8%2C%20--g-position-8%2C%20--g-color-9%2C%20--g-position-9%2C%20--g-color-10%2C%20--g-position-10%2C%20--g-color-11%2C%20--g-position-11%3B%20word-spacing%3A%201px%3B%20display%3A%20block%3B%20max-width%3A%20560px%3B%22%3E%3Cdiv%20class%3D%22wrapper%22%20style%3D%22border%3A%200px%3B%20font-family%3A%20sans-serif%3B%20line-height%3A%201%3B%20list-style%3A%20none%3B%20margin%3A%200px%3B%20padding%3A%20315px%200px%200px%3B%20text-decoration%3A%20none%3B%20-webkit-font-smoothing%3A%20antialiased%3B%20backface-visibility%3A%20hidden%3B%20box-sizing%3A%20border-box%3B%20color%3A%20rgb(51%2C%2051%2C%2051)%3B%20transition%3A%20all%200.3s%20cubic-bezier(0.4%2C%200.4%2C%200%2C%201)%200s%2C%20--g-angle%2C%20--g-color-0%2C%20--g-position-0%2C%20--g-color-1%2C%20--g-position-1%2C%20--g-color-2%2C%20--g-position-2%2C%20--g-color-3%2C%20--g-position-3%2C%20--g-color-4%2C%20--g-position-4%2C%20--g-color-5%2C%20--g-position-5%2C%20--g-color-6%2C%20--g-position-6%2C%20--g-color-7%2C%20--g-position-7%2C%20--g-color-8%2C%20--g-position-8%2C%20--g-color-9%2C%20--g-position-9%2C%20--g-color-10%2C%20--g-position-10%2C%20--g-color-11%2C%20--g-position-11%3B%20word-spacing%3A%201px%3B%20position%3A%20relative%3B%22%3E%3Ciframe%20width%3D%22560%22%20height%3D%22315%22%20src%3D%22https%3A%2F%2Fwww.youtube.com%2Fembed%2F2ow1pEjSZzE%3Fsi%3DD6dlkQd2dGDq9GH4%22%20title%3D%22YouTube%20video%20player%22%20frameborder%3D%220%22%20allow%3D%22accelerometer%3B%20autoplay%3B%20clipboard-write%3B%20encrypted-media%3B%20gyroscope%3B%20picture-in-picture%3B%20web-share%22%20allowfullscreen%3D%22%22%20loading%3D%22lazy%22%20style%3D%22border%3A%200px%3B%20font-family%3A%20sans-serif%3B%20line-height%3A%201%3B%20list-style%3A%20none%3B%20margin%3A%200px%3B%20padding%3A%200px%3B%20text-decoration%3A%20none%3B%20-webkit-font-smoothing%3A%20antialiased%3B%20backface-visibility%3A%20hidden%3B%20box-sizing%3A%20border-box%3B%20color%3A%20rgb(51%2C%2051%2C%2051)%3B%20transition%3A%20all%200.3s%20cubic-bezier(0.4%2C%200.4%2C%200%2C%201)%200s%2C%20--g-angle%2C%20--g-color-0%2C%20--g-position-0%2C%20--g-color-1%2C%20--g-position-1%2C%20--g-color-2%2C%20--g-position-2%2C%20--g-color-3%2C%20--g-position-3%2C%20--g-color-4%2C%20--g-position-4%2C%20--g-color-5%2C%20--g-position-5%2C%20--g-color-6%2C%20--g-position-6%2C%20--g-color-7%2C%20--g-position-7%2C%20--g-color-8%2C%20--g-position-8%2C%20--g-color-9%2C%20--g-position-9%2C%20--g-color-10%2C%20--g-position-10%2C%20--g-color-11%2C%20--g-position-11%3B%20word-spacing%3A%201px%3B%20height%3A%20315px%3B%20left%3A%200px%3B%20position%3A%20absolute%3B%20top%3A%200px%3B%20width%3A%20560px%3B%22%3E%3C%2Fiframe%3E%3C%2Fdiv%3E%3C%2Fdiv%3ETinder（ティンダー）風UIのマッチングアプリを作ってみた。Tinder風の右左にスワイプしてLIke（いいね）するようなマッチング系アプリの作り方について動画解説しています。%3Ciframe%20width%3D%22560%22%20height%3D%22315%22%20src%3D%22https%3A%2F%2Fwww.youtube.com%2Fembed%2Fq6qydMsv-o8%3Fsi%3DdFTx0R2iGBGjwJYx%22%20title%3D%22YouTube%20video%20player%22%20frameborder%3D%220%22%20allow%3D%22accelerometer%3B%20autoplay%3B%20clipboard-write%3B%20encrypted-media%3B%20gyroscope%3B%20picture-in-picture%3B%20web-share%22%20allowfullscreen%3D%22%22%3E%3C%2Fiframe%3E初心者向けSNSアプリをゼロから作ってみるこちらはFlutterFlowで簡単なSNSアプリをゼロから作ってみる動画のシリーズになります。一覧、詳細、登録機能やいいね、コメント、フォローなどよくある機能を実装しています。%3Ciframe%20width%3D%22560%22%20height%3D%22315%22%20src%3D%22https%3A%2F%2Fwww.youtube.com%2Fembed%2FZL2Zqgd0KwE%3Fsi%3DKiPVqdsPOm6E8yp5%22%20title%3D%22YouTube%20video%20player%22%20frameborder%3D%220%22%20allow%3D%22accelerometer%3B%20autoplay%3B%20clipboard-write%3B%20encrypted-media%3B%20gyroscope%3B%20picture-in-picture%3B%20web-share%22%20allowfullscreen%3D%22%22%3E%3C%2Fiframe%3EFAQ／掲示板アプリの作り方FlutterFlowでFAQ機能（掲示板機能）の作り方を解説している動画です。firebaseの設定から質問の一覧、登録、詳細、返信、カテゴリ検索・フリーワード検索などを紹介しています。%3Ciframe%20width%3D%22560%22%20height%3D%22315%22%20src%3D%22https%3A%2F%2Fwww.youtube.com%2Fembed%2FDhzL9PD8Tl8%3Fsi%3DNB_s9sYXVpUtA9gn%22%20title%3D%22YouTube%20video%20player%22%20frameborder%3D%220%22%20allow%3D%22accelerometer%3B%20autoplay%3B%20clipboard-write%3B%20encrypted-media%3B%20gyroscope%3B%20picture-in-picture%3B%20web-share%22%20allowfullscreen%3D%22%22%3E%3C%2Fiframe%3ETikTok風SNSアプリを作ってみる＜フルバージョン＞以下はTikTokみたいな縦スクロールのSNSアプリをFlutterFlowで作ってみる動画です。フルバージョンですので動画を見ながら一緒に作っていくことができます。%3Ciframe%20width%3D%22560%22%20height%3D%22315%22%20src%3D%22https%3A%2F%2Fwww.youtube.com%2Fembed%2FEMHdHvtCA5o%3Fsi%3DA8UAAm9knumJ2SPl%22%20title%3D%22YouTube%20video%20player%22%20frameborder%3D%220%22%20allow%3D%22accelerometer%3B%20autoplay%3B%20clipboard-write%3B%20encrypted-media%3B%20gyroscope%3B%20picture-in-picture%3B%20web-share%22%20allowfullscreen%3D%22%22%3E%3C%2Fiframe%3E昔のマリオみたいなレトロゲームを作ってみる。こちらは、ちょっと趣向を変えて、レトロゲームを作ってみてます。公式サイトでレトロゲームを作ってみる動画があったので、それを真似て作ってみた動画になりますね。%3Ciframe%20width%3D%22560%22%20height%3D%22315%22%20src%3D%22https%3A%2F%2Fwww.youtube.com%2Fembed%2F8o7gFZeo9FE%3Fsi%3DFn7B1kFlAFM7F_TZ%22%20title%3D%22YouTube%20video%20player%22%20frameborder%3D%220%22%20allow%3D%22accelerometer%3B%20autoplay%3B%20clipboard-write%3B%20encrypted-media%3B%20gyroscope%3B%20picture-in-picture%3B%20web-share%22%20allowfullscreen%3D%22%22%3E%3C%2Fiframe%3EFlutterFlowでチャットアプリを作ってみよう。こちらは、チャットアプリの作成です。FlutterFlowはテンプレートが用意されているので結構簡単にチャットアプリを作成することができます。%3Ciframe%20width%3D%22560%22%20height%3D%22315%22%20src%3D%22https%3A%2F%2Fwww.youtube.com%2Fembed%2F-AMZ1Wg2-Yo%3Fsi%3DHmGeoBlJBLBxVTZ7%22%20title%3D%22YouTube%20video%20player%22%20frameborder%3D%220%22%20allow%3D%22accelerometer%3B%20autoplay%3B%20clipboard-write%3B%20encrypted-media%3B%20gyroscope%3B%20picture-in-picture%3B%20web-share%22%20allowfullscreen%3D%22%22%3E%3C%2Fiframe%3EAIロゴメーカーを作ってみた。こちらはChatGPTのAPIなどを利用してAIロゴメーカーを作成している動画です。技術的には、CloudFuncitonを使ってCloudFunction側でAIのAPIを呼んでみる練習をしています。%3Ciframe%20width%3D%22560%22%20height%3D%22315%22%20src%3D%22https%3A%2F%2Fwww.youtube.com%2Fembed%2FILxtwVEe88U%3Fsi%3Drui6oEiZ4wEb0buK%22%20title%3D%22YouTube%20video%20player%22%20frameborder%3D%220%22%20allow%3D%22accelerometer%3B%20autoplay%3B%20clipboard-write%3B%20encrypted-media%3B%20gyroscope%3B%20picture-in-picture%3B%20web-share%22%20allowfullscreen%3D%22%22%3E%3C%2Fiframe%3EGPT4 with Visionで料理の画像からカロリーを教えてくれるAIアプリを作ってみよう。こちらはタイトルの通り、GPT4のVision APIで画像情報からカロリーを教えてくれるAIアプリを作ってみました。%3Ciframe%20width%3D%22560%22%20height%3D%22315%22%20src%3D%22https%3A%2F%2Fwww.youtube.com%2Fembed%2FrR2a6UtxrNo%3Fsi%3DkZGYRXIqMmmI2ykp%22%20title%3D%22YouTube%20video%20player%22%20frameborder%3D%220%22%20allow%3D%22accelerometer%3B%20autoplay%3B%20clipboard-write%3B%20encrypted-media%3B%20gyroscope%3B%20picture-in-picture%3B%20web-share%22%20allowfullscreen%3D%22%22%3E%3C%2Fiframe%3EChatGPTでAI予約アプリを作ってみよう%3Ciframe%20width%3D%22560%22%20height%3D%22315%22%20src%3D%22https%3A%2F%2Fwww.youtube.com%2Fembed%2FlGty12xFHWA%3Fsi%3D1oOtxF1Le2Uut4Oa%22%20title%3D%22YouTube%20video%20player%22%20frameborder%3D%220%22%20allow%3D%22accelerometer%3B%20autoplay%3B%20clipboard-write%3B%20encrypted-media%3B%20gyroscope%3B%20picture-in-picture%3B%20web-share%22%20allowfullscreen%3D%22%22%3E%3C%2Fiframe%3EFlutterFlow学習方法：まとめ今回はノーコード（ローコード）ツールであるFlutterFlow（フラッターフロー）の学習方法について解説してきました。やはりこういったアプリ／Web開発系のツールはYoutube動画での学習が一番ですよね。とはいえ、（ありがたいことに）常にFlutterFlow側が進化し続けることで、動画やブログの内容があっという間に古くなってしまう、という嬉しい悲鳴もありますよね。。情報を追いかける側はそれを理解した上でキャッチアップしていく必要がありますね。とはいえ、それだけ成長しているということは、予算を投じてくれているということで、今後のFlutterFlowの成長に期待できる、ひいては学習するメリットが大きい、ということです。今後もFlutterFlowの躍進に期待して学習を継続していきたいですね！アプリ・Webサービスの開発の無料相談はこちらFlutterFlow、Adalo、bubble、STUDIOなどのノーコードツールを使うことで、リスクを抑えて低コストでスピーディにビジネスアイデアを形にすることができます。弊社はスタートアップ・新規事業向けにコストを抑えた最速のアプリ・Webサービスの開発、さらにはサービス立ち上げのコンサルティングから提案を行なっております。また、法人向けにノーコードのスクール事業を通して内製化のサポートも行っています。アプリ、Webサービス、LPなどの構築に興味のある方は、こちらからご気軽にご相談ください。