Bolt.new、co.dev と比較しながら Lovable.dev でアプリ開発をしてみた
8.9K Views
January 14, 25
スライド概要
https://aid.connpass.com/event/339650/
FPT ジャパン FPT データ& AI インテグレーション エグゼクティブエバンジェリスト 独立行政法人 国立印刷局 デジタル統括アドバイザー兼最高情報セキュリティアドバイザー AI 駆動開発勉強会主催。Microsoft エバンジェリスト時代から、Dell、Accenture、Elastic、VMware を経て現職まで一貫して開発者向けに最新技術を啓発。GPU クラウド技術訴求、AI 駆動開発推進。 政府の仕事は、内閣官房 政府 CIO 補佐官、 デジタル庁 PM を経て、現職を兼務。 Locofy.ai Regional Developer Advocate Google Cloud Partner All Certifications Engineer 2025
関連スライド
FPT AI Factory で加速する AI 開発-20250213-公開版
Shotaro Suzuki
29.3K
各ページのテキスト
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
ご清聴ありがとうございました︕