Lovableとは？登録方法や使い方について解説！LLM搭載のTODOアプリを作ってみよう！

Lovableとは

Lovableとは、プログラミング知識が不要でWebアプリケーションを作成できるAIプラットフォームです。ノーコードで自然言語の指示のみでWebアプリケーションを作成できます。Lovableは非エンジニア、Webアプリケーション初心者でもアプリケーション開発を行うことが可能です。

Lovable

Lovableの特徴

1.直感的な操作かつノーコードでWebアプリを作成できる
プログラミングの知識がなくても、日本語の指示を行うだけでWebアプリケーションをサクッと作ることが可能です。

2.作成したアプリケーションをすぐに公開できる
Lovableにはデプロイ機能が搭載されています。無料アカウントでも作成したアプリケーションをインターネットに公開することが可能です。

3.自動バグ修正機能の搭載
作成したアプリケーションにエラーが発生した場合、エラーの修正指示をするだけでLovableが自然に修正してくれます。

4.バックエンドもサポート
Lovableはフロントエンドだけではなく、バックエンドもサポートしています。Supabaseなどのデータベース機能を提供するサービスと連携が可能です。

無料無料（アカウント）でできること

無料アカウントは1日のチャット回数が5回と制限があります。6回目以上からは有料プランへの移行が必要になります。またプロジェクトは4つまでとなります。

有料プランでできること

Lovableには、「STATER」プラン、「LAUNCH」プランなど複数の料金プランが提供されています。月額20ドルのSTATERプランでは、無料プランのすべての機能に加えて、無制限のプライベートプロジェクトやLovableのロゴ削除などが提供されます。ご自身の状況にあわせて有料プランを利用してみてください。

https://lovable.dev/settings/plans

Login

Lovableの登録方法

まず　https://lovable.dev/　にアクセスします。右上の「Sign up」ボタンを押します。

次に以下のページに遷移するので、GithubかGoogleアカウント、もしくはメールアドレスからアカウントを作成します。

Create account

アカウント作成が完了します。

作成したプロジェクトを確認する

過去に作成したプロジェクトは、ログインした状態でダッシュボードページ（ https://lovable.dev/ ）にアクセスして、中央した部分で一覧の確認ができます。

LLM搭載のTODOアプリを作ってみよう！

今回作成するTODOアプリは以下になります。アプリ利用者はOpenAI APIキーを入力することで、曖昧なタスクを具体的なタスクに細分化しタスクを追加・管理してくれるアプリです。以下は完成系です。

・完成系

1. 曖昧なタスクを入力

曖昧なタスクを入力します。たとえば、「プロジェクト資料を準備する」といったタスクを入力します。

プロジェクト資料を準備する

2.「具体化」ボタンを押す

1に基づいて以下出力が得られます。

1. プロジェクトの目的と目標を明確にする
2. プロジェクトのスケジュールを作成する
3. プロジェクトの予算を立てる
4. プロジェクトのメンバーと役割を決定する
5. プロジェクトのリスクと問題点を洗い出す
6. プロジェクトの進行プロセスを設計する
7. プロジェクトの成果物とその評価基準を定義する
8. プロジェクトの進行状況を追跡、報告するためのテンプレートを作成する
9. プロジェクトの関係者に対するコミュニケーション計画を立てる
10. これらの情報をまとめてプロジェクト計画書を作成する

3.追加ボタンを押す

追加ボタンを押すと以下のように追加されます。

完了したタスクは左のチェックボックスから削除ができます。

不要なタスクみは右のゴミ箱アイコンから削除が可能です。今回作成したプロンプトは以下にまとめます。

Lovableでアプリを開発する

Lovableでアプリ開発を開始するには、ダッシュボードページの赤枠部分に作りたいアプリケーションについて指示します。例えば『シンプルなTODOアプリケーションを作って。』などです。

https://lovable.dev/

Lovableの利用画面

以下は、Lovableの利用画面です。赤枠部分に作りたいアプリケーションについて入力すると、Lovableがコードを作成しアプリケーションを作ってくれます。

Lovableの画面

赤枠左側がチャット画面です。

右側にLovableが作成したアプリが表示されます。

左下の赤枠部分に続きの指示文を入力できます。

今回作成したアプリケーションは以下から試せます。無料プランで作成したアプリのためバグ等発生する可能性があります。

https://preview--yume-no-todo.lovable.app/

〜以下はメンバーシップ限定です。上記のTODOアプリを作成したプロンプトや要件定義自動生成GPTsについて利用したい方はご検討ください！〜

合計4回のプロンプトのやりとり

以下は、合計4回のプロンプトのやりとりになります。