boltを使ってみよう

boltは、チャットベースの生成AIを使用してアプリ開発が出来るサービスです。

AIに命令してWebサイトやWebアプリ、ゲームなどを作成できますが、ソースコードを直接編集することもできます。

Web開発に興味の"ある"人にとっては

• AIのアシストを駆使してプログラミングを勉強できる
• 開発環境がブラウザ上で完結するのですぐに始められる
• 苦戦しやすいインターネットに公開する作業がボタン1つで完結する

Web開発に興味の"ない"人にとっても

• ソースコードを意識せずAIのみでも作成できる
• プロトタイプとして作って、その後はソースコードをエンジニアに引き継ぐこともできる
• ノーコードツールなどを使った場合の制約がない

などのメリットがあります。

手順

1. boltにアクセス

   https://bolt.newにアクセスしてください。

2. サンプルプロンプトを実行

   以下のプロンプト (生成AIに対する指示) をコピーして、boltのプロンプト入力欄に貼り付けてください。

   以下の条件を満たすWebサイトを作成してください
   - viteを使用し、index.html, style.cssのみでjavascriptは使用しないシンプルな構成にしてください。
   - htmlにlinkタグを追加してstyle.cssを読み込んでください。
   - クラシックで落ち着いた雰囲気のカフェのサイトを作成してください。
   - コンセプト、お知らせ、メニュー、お問い合わせのセクションを入れてください。
   - 適度に画像を使用してください。

3. アカウント登録

   プロンプトを実行しようとするとアカウント登録ボタンが表示されます。いずれかの方法でアカウント登録してください。

   

4. プロンプトを実行

   アカウント登録が完了すると自動的にプロンプトが実行されます。実行されない場合はチャットの送信ボタンをクリックして実行してください。

   しばらくしてカフェのサイトのプレビューが表示されたら成功です。

   

   生成AIによってWebサイト

5. カスタマイズ

   追加のプロンプトを実行して生成されたWebサイトを自由にカスタマイズしてみましょう。

   プロンプトの例

   • サイト全体の配色を赤系にしてください

   • 季節限定メニューを追加してください

   • グリッドレイアウトを使用して雑誌のようなデザインにしてください。

注意点

• boltの無料プランでは1日あたり、1ヶ月あたりの使用量が制限されています。
• 1ヶ月あたりの制限は最終課題を作成するには十分ですが、1日あたりの制限に引っかかった場合は次の日まで待ってください。

解説動画

以下の動画で同じ内容を解説しています。もしテキストで分かりにくかった場合はこちらをご覧ください。

この動画では`Webサイトを作る`、`Webサイトを公開する`の手順を解説しています。