Bolt.newは、ユーザーがコードを書くことなく、自然言語の記述から直接完全なウェブサイトを生成することを可能にする、新しいAI主導の開発プラットフォームです。バイブコーディング」ツールとして、ウェブサイトの構造、機能性、スタイル、雰囲気など、ユーザーのクリエイティブな意図を理解し、実現します。この記事では、Bolt.newを使ってプロフェッショナルなウェブサイトを素早く作成する方法を詳しく説明する。
Bolt.newとその中核機能
Bolt.newは、コードを書かずに自然言語の記述からウェブサイトを生成する「バイブコーディング」プラットフォームです。そのコア機能は、自然言語で記述されたウェブサイトに対するユーザーのアイデアを、実際に使用可能なウェブサイトに変えることです。
V0とCursorを組み合わせたようなもので、ユーザーはフルスタックのプログラムを効率的かつ効果的に編集することができる。Boltはブラウザで直接バックエンドを実行し、Netlifyへのデプロイをサポートしており、さらにReact、Next.js、Remix、SvelteKit、Viteといった最新のプログラミング言語/フレームワークでアプリを生成することができる。
Bolt.newの大きな利点のひとつは、パッケージを動的にインストールできることだ。例えば、OpenAI APIパッケージやTailwindのようなパッケージをインストールしたければ、それも可能だ。つまり、基本的には完全なアプリケーションを作ることができるのですが、v0ではそれができません。
その他の特筆すべき点は以下の通り：
- 開発環境を設定する必要はなく、ウェブページが開かれ、すぐに使用できる。
- 継続的なコード最適化のための複数回の対話のサポート
- 手描きスケッチをアップロードし、ウェブサイトに掲載することができる。
- リアルタイムのコード生成とプレビュー
- ワンクリック配備機能を提供
Bolt.newでウェブサイト制作を始めよう！
Bolt.newの使い方はとても直感的だ：
- 公式サイトにアクセス： ブラウザを開き、次のように入力する。https://bolt.newをクリックし、アカウントにサインアップしてください。
- ご希望をお書きください：ホームページの中央にある入力ボックスに、チャットのようにウェブサイトの要件を入力してください！
- AIがウェブサイトを生成し始める：数秒から数分以内に、Bolt.newはページ構造と対応するHTML/CSS/JavaScriptを含む、作業中のドラフトウェブサイトを自動的に生成します。
- 探索と最適化：プロンプトを修正して再生成したり、インターフェイスツールを使ってさらに微調整したり、コードを直接修正したりすることができる！
コード生成にはソフトをインストールする必要がなく、URLを開くだけで利用でき、中国地域の制限の問題もない。コード生成の過程で、Boltとの複数回の対話を通じて、ウェブサイトを最適化することができます。コードとプレビューボタンをそれぞれクリックして、対応するコードを表示し、効果をプレビューすることができます。
ウェブサイトの設計が完了したら、直接ダウンロードの右上隅を介して生成されたコードをダウンロードすることができます、また、直接ワンクリック配置を配置をクリックすることができます。
効率的なBolt.newプロンプト・ワーズを書く
Bolt.newを使いこなすには、効果的なキューワードを作ることが重要です。重要な原則をいくつか紹介しよう：
- AIは強力だが、腹の虫が収まるものではない。より具体的であればあるほど、あなたが望む構造、配色、機能性、スタイルを復元することができる。
- 雰囲気とスタイル」の表現に重点を置く：ボルトは「何をすべきか」だけでなく、「どう見せるか」も理解する「雰囲気コーディング」ツールに属する。
- 常にプロンプトの反復と最適化：最初のプロンプトはラフ原稿にすぎないことが多く、本当に良いプロンプトを作るには、何度も実験、改良、研磨を繰り返す必要がある。
- 最初に多くを求めすぎると、AIは「混乱」してしまう。最初に骨組みを示し、それから詳細を加える方が効果的だ。
- コード編集との組み合わせ：AIが生成した結果が十分に正確でないことがあり、手動でコードを調整することで、より精度の高い制御を実現できる。
キュー・ワードのテンプレート式
具体的な構成]、[色]の配色、スタイル[周囲の言葉]、全体的な雰囲気[説明的な形容詞]を含むページで、[ターゲットオーディエンス]のための[ウェブサイトのタイプ]を作成します。モバイルへの対応もお願いします。"
例
技術スタック：純粋なHTML + TailwindCSSで行う
コア機能：私はマラソントレーニングプランのウェブサイトを行いたい、ユーザーが自分の年齢、身長、体重、最新のマラソンと最新のハーフマラソンのレース結果、パフォーマンス（PB）を向上させるために期待される目標を記入し、ボタンをクリックすると、トレーニングプランを生成することができます。計画生成アルゴリズム私は気にしない、あなたは私が完了するのに役立ちますが、ユーザーが支払うことを喜んで、正当化、プロフェッショナルを感じるように生成するために計画する。生成された計画は、少なくともアスリートの現在のレベル、必要な時間の目標性能を達成するための計画だけでなく、トレーニング計画の期間と理由などを含める必要があります。
機能エリア：完全なヘッダー、testinoials、faq、機能、価格、どのように動作するか、フッターエリアを持ちたい。ウェブサイトの著作権所有者はAI Nuggets Society, 联系方式jiangzziv@gmail.com。残りのコンテンツはプロフェッショナルかつ真正に書かれる必要があります。
ウェブサイトのコピーライティング：ウェブサイトのすべてのコピーライティングコンテンツは、私はあなたが中国語を使用する必要があります。このマラソントレーニングプランのウェブサイトについては、それが専門的であり、ビッグデータによって予測されていることを強調する必要があります。
ウェブサイトのスタイル：ウェブサイトの配色とスタイルは、アップルの公式ウェブサイトのスタイルに似た、モダンで先進的なものにする必要があります。また、様々な画面サイズに対応する必要があります。
実践的な事例と実例
以下は、さまざまなタイプのウェブサイトに対応するプロンプトワードの例です：
- 個人ポートフォリオウェブサイト：フリーランスのグラフィックデザイナーのために、ミニマルな個人ポートフォリオウェブサイトを制作。ページにはトップナビゲーションバー、プロフィール、作品エリアを表示する大きな画像、コンタクトフォームがあります。カラースキームは黒、白、グレーで、大きなサンセリフフォント、シンプルなレイアウト、十分な余白、モダンでアーティスティックなスタイルです。モバイルにも適しています。
- 製品ランディングページ：エコフレンドリーな水筒ブランドの製品ランディングページを、全体的にナチュラルでフレッシュなスタイルでデザイン。上部にロゴとシンプルなナビゲーション、中央に製品の高解像度画像、グリーンとライトブラウンの配色。製品の特徴ブロック、ユーザーレビューのスライダー、「今すぐ予約」ボタンを配置。ページ下部にはソーシャルメディアへのリンクと購読フォームを設置。モバイルフレンドリー。
- SaaS企業ホームページ：製品説明、機能比較表、お客様の声、価格表、CTAボタンを備えたB2B SaaS製品ホームページを作成。ダークブルー＋グレー＋ホワイトの配色でテクノロジーとプロフェッショナリズムを強調。見出しのフォントは太く、本文は明瞭で、レイアウトはデスクトップとモバイルデバイスに対応したレスポンシブ・グリッドに基づいています。モダンで信頼性が高く、プロフェッショナルなスタイルです。
- 教育プラットフォームページ：オンラインプログラミングコースプラットフォームのホームページデザイン。トップ検索ナビゲーション、コースカテゴリーカード、ホットコースバナー、講師プロフィール、「今すぐ登録」ボタンが含まれています。色は水色＋オレンジで、全体的にモダンでエネルギッシュなスタイルです。丸みを帯びたボタン、大きな見出し、わかりやすいカードレイアウトにより、モバイルやタブレットでの閲覧にも対応しています。
高度なヒントとベストプラクティス
反復と最適化
Bolt.newの特に強力な機能は、右側のアプリケーションとの対話中にエラーが発生した場合、左側に同様の応答がポップアップ表示されることだ。この機能は、他のいくつかのオリジナルの自動AIツールにはなかったものだ。
もう1つの便利な機能は、複数のイテレーションで、新しい要件が発生すると、ボルトは元のプロジェクトのコードを修正し、飛び交っているコードに対応する変更ファイルを確認できることで、要件がプロジェクト全体のどこに影響を及ぼしているかを理解するのに役立つ。
実用的な機能の組み合わせ
開発プロセスでは、このようなストラテジーの組み合わせを使用できます。開発の初期段階では、Bolt Designを使用して初期デザインとフロントエンドコードを生成します。その後、Cursorをインポートし、引き続きCursorを使用して細かい修正を行い、バックエンドにアクセスします。これにより、両方のツールの長所が組み合わされ、より良い開発体験が得られます。
価格と資源の考慮
より多くのAIトークンが必要な場合やプライベートプロジェクトが必要な場合は、Bolt.newの設定でサブスクリプションを購入することができる。最も安いのは1ヶ月20ドル、10Mトークンで、平均的なユーザーには十分だろう。プラットフォームが普及するにつれて、無料額が制限される可能性があることは注目に値する。現在は基本的に無料で複数回利用できるが、V0の軌跡と同様に、将来的に状況が変わるかもしれない。
Bolt.newを使えば、プログラミングの経験がないユーザーでも、プロフェッショナルで機能的なウェブサイトを素早く作成することができます。Bolt.newは、AIの自然言語理解力とコード生成技術を組み合わせることで、ウェブサイト開発への斬新なアプローチを提供します。起業家、コンテンツ制作者、または素早くプロトタイプを作りたいプロフェッショナルなど、Bolt.newはあなたのウェブサイトのアイデアを効率的に実現するのに役立ちます。
特筆すべきは、Bolt.newは単なるコード生成ツールではなく、表現したいウェブサイトのスタイルや雰囲気を理解し実現する「バイブコーディング」プラットフォームであるということだ。キューを賢く構成することで、美しさと機能性を兼ね備えたウェブサイトを作成することができます。
GPT Plus、Claude Pro、Grok Superの公式有料独占アカウントを使用したい場合、アカウントのトップアップの方法がわからない場合は、当社の専門チーム（wx: abch891）にお問い合わせください。
