bolt.newという革新的なAIツールをご存知でしょうか？

アメリカ、サンフランシスコに本社を置くStackBlitz社が2024年10月にリリースした、フルスタックのWebアプリケーション（フロント／バックエンドの両方を単一のコードベースに含むソフトウェアアプリ）をブラウザ上で作成からデプロイすることまでできてしまうツールです。

本記事では、bolt.newとは何なのか、その特徴や使い方、料金体系についても解説します。

VRコンテンツ制作！自社開発による柔軟性でお客様のビジネスをリードする『monoVR』
サービスの特徴や導入事例をまとめた資料をご用意しました。

開発事例

サービスの特徴

開発の流れ

monoVRサービス紹介資料の無料ダウンロードはこちら

資料をダウンロードする

|bolt.newとは？

「こんなアプリがあればいいな。」と思っても、ITスキルのない人が一からコンピュータ言語を学び、アプリを作成するには大変な労力と時間を要します。

しかし、bolt.newを使用すれば、例えプログラミングの知識が皆無だとしてもAIの力でアプリを短時間で開発できてしまいます。

コードの生成だけでなく、利用するところまで全てが簡単です。

開発者にとってもコストを大幅に削減できるため、高評価を受けています。

|bolt.newの特徴

bolt.newがどんなものなのかはお分かりいただけたかと思います。

bolt.newにはいくつか特徴があります。その中でも大きな特徴といわれている、自然言語の指示に対応していること、フルスタック開発が可能であること、デプロイが簡単にできること、様々なフレームワークに対応していることの4点について具体的に解説します。

自然言語での指示

一つ目の特徴は、日常的に使用する言語による指示のみでアプリを作成できる点です。

普通、アプリを開発するためには開発言語をある程度習得し、コーディングすることが必須です。

しかし、bolt.newでは、「シンプルなショッピングサイトを作成して」と入力するだけで、必要なコードを自動で生成してくれます。

フルスタック開発が可能

二つ目の特徴は、アプリを作成するのに必要な複数の技術要素を持つフルスタック開発が可能な点です。

アプリ開発では通常、ユーザーが実際に目にするフロント部分と、裏側で実際に動くバックエンドは別々のチームで開発されます。

しかし、bolt.newはこの2つを同時に開発するフルスタック開発が可能です。

簡単なデプロイ機能

三つ目の特徴は、デプロイをクリック一つだけでできてしまう点です。

デプロイとは作成したプログラムを実際に使える状態にすることで、基本的には手間のかかる作業です。

これをDeployと書いてあるボタンをクリックするだけでNetlifyという無料で静的サイトをホスティングできるWebサービスにデプロイしてくれます。

多様なフレームワークのサポート

四つ目の特徴は、React, Vue, Angular, Next.jsといった様々な人気なフレームワークをサポートしている点です。

カレンダーアプリをbolt.newを使用して作成したところ、Reactを最適なフレームワークとして自動的に選びました。

ユーザーがフレームワークの選択や設定などを考慮する必要はありません。

|bolt.newの使い方

ここまではbolt.newの特徴について解説しましたが、ここからは、実際にどのように使用するのかを解説します。

既にどのようなアプリを作成したいかイメージは沸いていますでしょうか？

早くアプリを作成できるよう指示を与えたいところですが、そのアプリをうまく作成できるようひとつひとつのステップを実施してください。

アカウントの作成

まずはアカウントを作成しましょう。

2024年12月現在、入力は日本語に対応しているものの、ホームページ自体は英語のみのようです。

GitHubのアカウントをお持ちの方は、ログイン画面に移動したら、そのままログインできます。

お持ちでない方は、”Don’t have an account? Create one here.”と書かれたリンクに飛び、メールアドレス、ユーザー名、パスワードを入力し、アカウントを作成してください。

初期設定

ログイン後、DeployのためにはNetlifyとの連携が必要です。

左下のメニュー内にあるSettingsをクリックし、Applicationsを確認しましょう。

Netlifyに青いConnectボタンがある場合はまだ接続できていない状態です。

クリックすると、Authorize Applicationという承認画面が出てくるので、Authorizeをクリックし、承認します。アカウントがない場合は、こちらのアカウントも作成しましょう。

アプリケーション作成

実際に文章を入力してアプリを作成してみましょう。

例えば、「カレンダーアプリを作成して」と入力してみます。

すると、1分ほどでカレンダーアプリを作成してくれます。

文章は具体的であるほうがいいです。追加したい機能やデザインについても追記してみましょう。

例えば、「予定を入力できる白いカレンダーアプリを作成して」と文章を変更するだけで、生成されたアプリはイメージに近づくはずです。

バグ修正と改善方法

バグの発見と修正はアプリの作成において重要な工程のひとつです。

特にバグの発生個所が分からない場合には、デバッグをする必要もあり、一つのバグを修正するのに多くの時間を浪費することも多々あります。

bolt.newではバグに気づいたら、「Fix Problem」と書かれたボタンをクリックしてください。

すると自動的にバグを検出し、修正案を提示してくれます。

開発者の負担を大幅に削減してくれるのです。

|bolt.newでアプリを作る際のコツ

実際にアプリを作成してみてどうでしょうか？バグも修正でき、問題なく動いているかもしれませんが、アプリを使っていく中で、追加・変更したい機能、変更したい全体的なデザインやフォントなどに気づくこともあると思います。

ここでは、そういった時にどういった方法で変更を加えていくことができるのかを解説します。

複数回対話を重ねる重要性

実際に商品などを制作するとき、担当者やデザイナーと打ち合わせを重ねながら、よりよい商品を作っていると思います。

bolt.newも同じです。

作成したアプリの機能変更や強化、デザインを理想に近づけるためには対話を重ねることが重要です。

「カレンダーの色を黄色に変更する」、「曜日表示を追加する」など具体的な指示を繰り返しながら対話を重ねましょう。

参考画像を活用したデザイン提案

人に対して、文章や言葉のみでデザインを伝えるのはとても難しいことです。

bolt.newでは、画像を使用することで、デザインのイメージを伝えることができます。

例えば、シンプルなデザインの画像を添付し、「添付した画像のようなシンプルなカレンダーアプリを作成して」と指示するだけで、添付の画像に近いデザインのアプリを生成します。

エンハンス機能によるプロンプト強化

どんな機能・デザインを指定したらいいか分からない時はプロンプトのエンハンス機能を使用しましょう。

「カレンダーアプリ作成」と入力し、下の星マークのボタンをクリックします。

すると、より具体的な指示ができるよう、追記すべき要件や成果物について日本語で教えてくれます。

品質を高めるためにも積極的に使用しましょう。

|bolt.newの料金体系

bolt.newは無料で使用することができますが、有料プランも含めた4つのプランがあります。

それぞれについて比較してみます。

|まとめ

本記事では、bolt.newの特徴とその使い方、使用する際のコツについて解説し、料金体系を比較しました。

プログラミング知識のない方も開発者にとっても業務効率を飛躍的に向上させることのできる、驚異的なAIツールであり、今後まだまだ進化を遂げていくことが予想されます。

また、新しいAI技術の導入は、社会に新しい価値を提供することにも繋がっていきます。

bolt.newの導入を検討する際には、この記事が参考になれば幸いです。

「医療研修に時間やコストがかかりすぎる…」その悩みをVRで効率化！
コストを抑えながら反復練習が可能な事例を含む『monoVR』サービスの資料をダウンロードいただけます。

開発事例

サービスの特徴

開発の流れ

monoVRサービス紹介資料の無料ダウンロードはこちら

資料をダウンロードする