Bolt.new、co.dev と比較しながら Lovable.dev でアプリ開発をしてみた
1.3K Views
January 14, 25
スライド概要
https://aid.connpass.com/event/339650/
FPT ジャパン エグゼクティブエバンジェリスト 独立行政法人 国立印刷局 デジタル統括アドバイザー兼最高情報セキュリティアドバイザー Microsoft で13年間、テクニカルエバンジェリストとして .NET、C#、Visual Studio、Windows、iOS、Android、Microsoft Azure 等の開発者向け技術啓発活動 (DevRel) 。Dell、Accenture、Elastic、VMware 等での DevRel 後、2024年11月1日より現職で DevRel 活動を開始。NVIDIA との戦略的協業 AI GPU クラウド、Azure/AWS/GC 上の AI ＆データ関連サービスのマーケティング、プリセールス、教育、関連新規サービス開発。元内閣官房 IT 総合戦略室 政府 CIO 補佐官（兼務）、元デジタル庁 ソリューションアーキテクト（兼務）。
関連スライド
各ページのテキスト
Bolt.new、co.dev Lovable.dev を 実際に使って⽐較 してみた(仮) 2025.1.14 鈴⽊ 章太郎 Executive Evangelist, FPT Data & AI Integration FPT Japan Holdings © Confidential ‒ FPT Smart Cloud
Bolt.new、co.dev と⽐較しながら Lovable.dev で アプリ開発をしてみた 2025.1.14 鈴⽊ 章太郎 Executive Evangelist, FPT Data & AI Integration FPT Japan Holdings © Confidential ‒ FPT Smart Cloud
鈴⽊ 章太郎 X (Twitter) ︓ @shosuz FPT ジャパン FPT データ & AI インテグレーション エグゼクティブエバンジェリスト 独⽴⾏政法⼈ 国⽴印刷局 デジタル統括アドバイザー兼最⾼情報セキュリティアドバイザー 略歴︓ Microsoft で13年間、テクニカルエバンジェリストとして活動し、.NET、C#、Visual Studio、 Windows、iOS、Android、Microsoft Azure 等の開発者向け技術啓発活動 (DevRel) を担当 その後、Dell、Accenture、Elastic、VMware 等での DevRel 活動等を経て、2024年 11⽉1⽇より、現職で引き続き DevRel 活動を継続NVIDIA との戦略的協業 AI GPU ク ラウドサービス や、各パブリッククラウドベンダーとの AI＆データ関連サービスのマーケティング、プリ セールス活動、教育活動、関連新規サービス開発、等を実施する 政府での仕事は、2019年4⽉〜2021年8⽉、内閣官房 IT 総合戦略室 政府 CIO 補 佐官(法務省 CIO 補佐官併任)、2021年9⽉〜2024年3⽉、 デジタル 庁プロジェクトマ ネージャーユニット ソリューションアーキテクト (⾦融庁 デジタル統括アドバイザー併任) の兼務 を経て現職 https︓//www.docswell.com/user/shosuz
Agenda § bolt.new § co.dev § lovable.dev § 機能の⽐較、ユーザー体験の⽐較 ※ 最新の情報は常に変更される可能性があるため、必ず公式サイトで最新情報を確認してください︕
bolt.new、lovable.dev、co.dev の⽐較表 項⽬ bolt.new lovable.dev co.dev キャッチフレーズ AI で作るフルスタックアプリ ノーコードで簡単 Web デザイン AI で加速するチーム開発 対象ユーザー プログラミング経験者、スタートアップ、⼩規模チーム ⾮プログラマー、デザイナー、Web制作初⼼者 開発チーム、スタートアップ、教育機関 主な⽤途 フルスタック Web アプリのプロトタイピング、⼩規模 Web アプリ開発 ランディングページ、ポートフォリオサイト、シンプルな Web アプリ 作成 チームでの Web アプリ開発、複雑なプロジェクト、複数⼈ での同時作業 プログラミング⾔語/フレームワーク JavaScript, TypeScript, React, Next.js, Node.js - (プログラミング⾔語/フレームワークは特定しない) 50以上の⾔語に対応 (Python, JavaScript, Java, C++, Go, Ruby, PHP, C#, etc.) AI の活⽤⽅法 コード⽣成、コード補完、デバッグ⽀援 UI デザイン⽀援、コンポーネント提案、バックエンド連携 コード⽣成、コード補完、デバッグ⽀援、リファクタリング提案 コラボレーション機能 GitHub 連携⼀部可能 - リアルタイム共同編集、チャット、バージョン管理 デプロイ先 Vercel (ワンクリックデプロイ) lovable.dev 独⾃のプラットフォーム Replit, GitHub, またはその他Gitサービス データベース連携 サーバーレス関数経由で様々なデータベースに接続可 能 外部サービス連携が必要（簡単） 多様なデータベースに接続可能 API 連携 可能 外部サービス連携が必要（簡単） 可能 外部サービス連携 可能 連携可能 (Zapier, Make (Integromat)など) 可能 学習コスト 中 易 中〜難 料⾦ Free プラン(制限あり), Proプラン ($20/⽉〜) 無料 Free プラン(制限あり), Pro プラン (10/⽉〜),Teams プラン(10/⽉〜), Teams プラン(15/user/⽉〜) カスタマイズ性 ⾼ 中 (テンプレートのカスタマイズ) ⾼ メリット 迅速な開発、AI による⽀援、フルスタック開発 直感的な操作、プログラミング不要、無料 チーム開発の効率化、AI ペアプログラミング、多⾔語対応 デメリット モバイルアプリ開発未対応、⾼度なカスタマイズは難しい 場合も バックエンドロジックは連携が必要、複雑な機能実装は⼯夫 オフライン利⽤不可、無料プランの機能制限 公式サイト https://bolt.new/ https://lovable.dev/ https://co.dev/
bolt.new
bolt.new とは 公式サイト︓ https︓//bolt.new/ • 概要︓ • StackBlitz 社が開発した AI を活⽤したフルスタック Web アプリ開発プラットフォーム • ⾃然⾔語で指⽰を出すことで、AI がコードを⽣成し、Web アプリを構築・デプロイできる • • • React、Next.js、Node.js などのフレームワークに対応 料⾦プラン︓ • Free︓ 制限付きで利⽤可能 • Pro︓ ⽉額$20〜より多くの機能とリソースを利⽤可能 主な機能︓ • AI によるコード⽣成︓ ⾃然⾔語で指⽰を出すことで、AI がコードを⽣成 • ワンクリックデプロイ︓Vercel にデプロイ可能 • リアルタイムプレビュー︓コード変更がリアルタイムで反映 • GitHub 連携︓GitHub リポジトリとの連携が可能
bolt.new の制限と改善してほしい点 •制限事項︓ • モバイルアプリ開発には未対応 • ⽣成されるコードの複雑さには限界がある • ⾼度なカスタマイズには、⼿動でのコーディングが必要となる場合がある •補⾜︓ • StackBlitz 社が開発・運営 • ⽣成 AI を使った開発の効率化、迅速なプロトタイピング作成に適している
co.dev
co.dev とは 公式サイト︓ https://co.dev/ • • 概要: • Replit が提供する AI を活⽤したオンライン IDE およびペアプログラミングツール • リアルタイムの共同編集、チャット機能などを備え、チーム開発を効率化 料⾦プラン: • Free︓制限付きで利⽤可能 • Pro︓⽉額$10〜Ghostwriter(AIペアプログラミング機能)の利⽤回数増加、 プライベートリポジトリの作成など • Teams︓⽉額$15/user〜組織での利⽤に特化したプランSSO、SAML など の機能が利⽤可能 • 主な機能: • リアルタイム共同編集: 複数⼈で同時にコードを編集可能 • AI ペアプログラミング: AI がコードの提案、バグの検出、リファクタリング等を⽀援 • 統合ターミナル: ブラウザ上でターミナル操作が可能 • 50以上のプログラミング⾔語に対応: Python, JavaScript, Java, C++, Go, Ruby, PHP など • GitHub 連携
co.dev の制限と改善点 •制限事項︓ • オフラインでの利⽤は不可 • 無料プランでは利⽤できる機能やリソースに制限がある •補⾜︓ • チーム開発、ペアプログラミング、オンラインコーディング環境として利⽤できる • 多様なプログラミング⾔語に対応しており、様々な開発プロジェクトで活⽤可能
lovable.dev
lovable.dev とは 公式サイト︓https://lovable.dev/ • 概要︓ • AI を活⽤したノーコード Web デザインツール • 直感的な操作で Web サイト/Web アプリを簡単に作成 • 料⾦プラン︓ • 無料 • 主な機能︓ • ドラッグ&ドロップによる UI 構築 • 豊富なコンポーネント: ボタン、画像、テキスト、フォームなど、 様々なコンポーネントが⽤意されている • レスポンシブデザイン: デスクトップ、タブレット、スマートフォン等、 様々なデバイスに対応したデザインを⾃動⽣成 • パブリッシュ機能: 作成した Web サイトを簡単に公開できる • 豊富なテンプレートな Web アプリの作成に適している
lovable.dev の制限と改善点 •制限事項︓ • バックエンドロジックの実装には外部サービスとの連携が必要 • ⾼度な機能の実装には限界がある •補⾜︓ • プログラミング未経験者でも簡単に Web デザインができる • LP、ポートフォリオサイト、シンプルな Web アプリの作成に適している
Lovable.dev is INSANE (FREE!) ハンズオン https://youtu.be/4qt9nlamiIQ •機能の探索、SaaS ランディングページの作成、GitHub および SuperBase との統合機能のテスト、Bolt との⽐較 •Web サイト、ツール、アプリを簡単に構築する⽅法 •ランキング戦略、ユースケースなどについての洞察、他 00:00 Lovable No-Code Editor の紹介 00:16 サインアップと初期設定 00:25 テンプレートと機能の探索 00:43 サンプル プロジェクトの作成 01:05 SuperBase と GitHub への接続 01:39 プロジェクトの公開とプレビュー 03:02 SEO のユースケースと例 04:22 ツールとアプリの構築 05:10 キーワード リサーチ ツールの作成と展開 09:31 Lovable と Bolt の⽐較 11:14 アフィリエイト ブログの作成 12:17 SEO に最適化されたコンテンツの⽣成 12:39 WordPress へのツールの埋め込み 13:49 結論と追加リソース
機能の⽐較、 ユーザー体験の⽐較
対象ユーザーの違い プログラマーおよび⾮プログラマー 開発経験の必要性 • bolt.new はプログラマーと⾮プログラマーの両⽅ • lovable.dev は特に初学者に適している に対応 • lovable.dev は⾮プログラマー向けに設計 • co.dev はチーム開発者が主な対象 • co.dev はチームでの開発経験がある ユーザーにとって便利 • bolt.new は全てのユーザーにとって柔軟に 対応できるプラットフォーム • 各ツールはどのようなタイプのプロジェクトに適しているか︓ • bolt.new︓フルスタック Web アプリのプロトタイピング、⼩規模 Web アプリ開発 • lovable.dev︓ランディングページ、ポートフォリオサイト、シンプルな Web アプリ作成 • co.dev︓チームでの Web アプリ開発、複雑なプロジェクト、複数⼈での同時作業
ユーザー経験の⽐較 初⼼者向けのインターフェースか否かの⽐較 • lovable.dev は⾮プログラマー向けに最適化され、ドラッグ&ドロップでUIを構築できる直感的なインターフェースを提供。 ユーザーは⾃然⾔語で指⽰を⼊⼒するだけで、簡単にアプリを作成できる。この点では、初⼼者や技術に詳しくないユーザ ーにとって⾮常に有⽤ • bolt.new はコード⽣成機能を利⽤するため、ある程度のプログラミング知識が必要。フルスタック開発のための追加機能 が多いため、少し学習曲線が必要 • co.dev はチーム向けに特化しているため、熟練開発者には使いやすいが、初⼼者には少しハードルが⾼い可能性あり 各プラットフォームのデザインカスタマイズ機能の⽐較 • lovable.dev は豊富なテンプレートを提供しており、ユーザーはこれらを基に⼿軽にカスタマイズが可能 • bolt.new はフルスタック環境のため、デザインカスタマイズよりも機能追加に重きを置いている • co.dev はチーム開発向けのため、個々のデザインカスタマイズはあまり強調されていないが、協⼒して作業することで 優れたデザインを実現することが可能
機能の⽐較 フルスタック開発のサポート • bolt.new は、フロントエンドだけでなく、データベース接続、API チームコラボレーション機能の有無 • 連携、サーバーサイドロジックの実装などバックエンドの開発もサポ ートする、フルスタックプラットフォーム • • が主で、チームコラボレーション機能は限定的 • これにより、データベース設定やサーバーサイドのロジックの実装も 簡単に⾏える co.dev の最⼤の特徴は、リアルタイム共同編集、チャット、 バージョン管理など、リアルタイムの共同作業に対応している • ユーザーは、アプリケーション全体を⼀元管理できるため、効率的 な開発が可能 bolt.new や lovable.dev は個々の開発者 向けの機能 複数の開発者が同時にコードを編集できるため、プロジェクト の進⾏が⾮常にスムーズ • コードレビューやバージョン管理も容易に⾏えるため、⼤規模 なチームでも効率的に開発が進められる • lovable.dev も、フロントエンドの開発においては、シンプルな アプリ開発を実施しつつ、バックエンド連携もすばやくできる構造 になっている
bolt.new、lovable.dev、co.dev の⽐較表 項⽬ bolt.new lovable.dev co.dev キャッチフレーズ AI で作るフルスタックアプリ ノーコードで簡単 Web デザイン AI で加速するチーム開発 対象ユーザー プログラミング経験者、スタートアップ、⼩規模チーム ⾮プログラマー、デザイナー、Web制作初⼼者 開発チーム、スタートアップ、教育機関 主な⽤途 フルスタック Web アプリのプロトタイピング、⼩規模 Web アプリ開発 ランディングページ、ポートフォリオサイト、シンプルな Web アプリ 作成 チームでの Web アプリ開発、複雑なプロジェクト、複数⼈ での同時作業 プログラミング⾔語/フレームワーク JavaScript, TypeScript, React, Next.js, Node.js - (プログラミング⾔語/フレームワークは特定しない) 50以上の⾔語に対応 (Python, JavaScript, Java, C++, Go, Ruby, PHP, C#, etc.) AI の活⽤⽅法 コード⽣成、コード補完、デバッグ⽀援 UI デザイン⽀援、コンポーネント提案、バックエンド連携 コード⽣成、コード補完、デバッグ⽀援、リファクタリング提案 コラボレーション機能 GitHub 連携⼀部可能 - リアルタイム共同編集、チャット、バージョン管理 デプロイ先 Vercel (ワンクリックデプロイ) lovable.dev 独⾃のプラットフォーム Replit, GitHub, またはその他Gitサービス データベース連携 サーバーレス関数経由で様々なデータベースに接続可 能 外部サービス連携が必要（簡単） 多様なデータベースに接続可能 API 連携 可能 外部サービス連携が必要（簡単） 可能 外部サービス連携 可能 連携可能 (Zapier, Make (Integromat)など) 可能 学習コスト 中 易 中〜難 料⾦ Free プラン(制限あり), Proプラン ($20/⽉〜) 無料 Free プラン(制限あり), Pro プラン (10/⽉〜),Teams プラン(10/⽉〜), Teams プラン(15/user/⽉〜) カスタマイズ性 ⾼ 中 (テンプレートのカスタマイズ) ⾼ メリット 迅速な開発、AI による⽀援、フルスタック開発 直感的な操作、プログラミング不要、無料 チーム開発の効率化、AI ペアプログラミング、多⾔語対応 デメリット モバイルアプリ開発未対応、⾼度なカスタマイズは難しい 場合も バックエンドロジックは連携が必要、複雑な機能実装は⼯夫 オフライン利⽤不可、無料プランの機能制限 公式サイト https://bolt.new/ https://lovable.dev/ https://co.dev/
2/5 ファインディAI 駆動開発イベント https://findy.connpass.com/event/342057/ #AI駆動開発_findy Locofy.ai による AI 駆動 エンタープライズフロンドエンド開発実践 ( 仮)
ビジネス FPT AI インテグレーションのサービス概要 AI トランスフォーメーション データドリブン経営 AI エコシステム FPTの製品 Docify AI アプリ エンタープライズAI AI アプリケーション デジタルツイン ビデオ分析 データサイエンス&アナリティクス • バーチャルアシスタント • メインフレームのマイグレーション • スマートシティ＆スペース • ファクトリーデジタルツイン • 需要予測 • ナレッジ管理 • コーディングアシスト • 検査・検品 • 製品ラインの最適化 • エッジ端末管理 • 専⾨知識/ドメイン特化型 • コード品質管理 • エッジ・ビジョンAI • 予知保全 • 予測分析 エージェント Nvidia フレームワーク インフラ AIソフトウェア Nemo LLM Metropolis サービス コンサルティング データ エンジニアリング データクレンジング &アノテーション クラウドインフラ クラウド ハードウェア (GPU, スイッチ,..) サーバー サービス コンサルティング AI 設計開発 Omniverse MLOps / LLMOps RAPIDS メンテナンス データセキュリティ データベース システムインテグレーション マネージドサービス CloudOps / DevSecOps
FPT AI ファクトリー AI のイノベーションとデータ主権を加速するための包括的なスイート • • FPT AI ファクトリーは、NVIDIA 認定の⾼性能インフラ、プラットフォーム、AI アプリケーションを包括的に備えたソリューションで、 AI 製品ライフサイクル全体をサポート 最新の NVIDIA テクノロジーを活⽤し、⼤規模な AI および ML ワークロードにおける⾰新と効率を推進し、⾼いパフォーマンス とスムーズな導⼊を実現 FPT AI インフラストラクチャ FPT AI スタジオ FPT AI 推論 FPT AI エージェント
FPT AI Studio 安全、セキュアかつスケーラブルな⽅法でカスタムモデルを開発、展開することで、強⼒な AI による創造を解き放つ • • • AI/ML の開発、評価、展開のためのインテリジェントなツールの包括的なセットを提供 深い専⾨知識がなくても AI モデルを現実のソリューションに変換できるようにする このアプローチにより、AI イノベーションが加速し、オペレーションが簡素化され、全体的なパフォーマンスが向上 定義 主な特徴 • • • • AI のためのデータ 処理 AI Notebook ⽣データを AI モデルの構築と トレーニングに適した形に変換 ノートブック、コード、データの統合 開発環境（IDE）を活⽤し、 FPT GPU インスタンスを活⽤した フルマネージド JupyterLab を提供 データ収集 データクレンジング データ変換 データのモニタリングと評価 • • • • サーバーレス シームレスな統合 実⾏時間の制限なし プリインストールされた AI フレームワーク モデル 事前トレーニング • • • • • • メリット • • • • データ・セキュリティの強化 拡張性と柔軟性 コスト効率 ⾼いパフォーマンスと信頼性 • • 最先端の GPU モデルの活⽤ オンデマンド、セルフサービス • • • モデル ファインチューニング モデル Hub 顧客データを使い AI モデルを 事前訓練し、継続的に事前訓 練するためのマネージドサービス ゼロからモデルをトレーニングした り、事前にトレーニングされた モデルを特定のドメインに簡単 に適応させることができる • マルチ GPU によるマルチノード 統合されたトレーニングパイプ ライン ビルトインアルゴリズムと持ち 込みアルゴリズムのサポート データ品質の向上 • • • マルチ GPU コンテナ 統合された微調整パイプライン ビルトインアルゴリズムと持ち 込みアルゴリズムをサポート • モデルをトレーニングするため の複雑で反復的なエンジニア リング作業を排除 GPU 占有時間の短縮 モデル品質の向上 • モデルを微調整するための 複雑で反復的なエンジニア リング作業を排除 GPU 占有時間の短縮 継続的な微調整の採⽤ • • • • • 幅広いベースモデルに基づき お客様のデータを使って AI モデルを微調整するマネージド サービス コード不要 ⻑期間の GPU 予約容量が 不要 カスタムモデルとそれぞれの重要 な情報を保存し、モデルのライフ サイクルを管理し、AI プロジェクト を通じて共同作業を⾏うための ⼀元化された場所 • • • ⾃分のモデルをアップロードする か、カタログから選ぶ モデルサービングへの⾼速転送 組織内での共有 すべてのバージョン、評価結果、 サービング履歴を管理 モデルのライフサイクルに 基づく、容易な管理とコラボ レーション
FPT AI Factory で AI イノベーションの最前線へ https︓//fptcloud.com/ja/product/fpt-ai-factory-ja/ API 他は、3⽉公開予定︕
2/13 Developer Summit 2025セッション https://event.shoeisha.jp/devsumi/20250213/session/5523
ご清聴ありがとうございました︕