本動画は、10WebのAI Builderを使用してWordPressウェブサイトをバイブコーディングで構築する方法を解説している。WordPressは世界のウェブサイトの約43%を動かしている強力なプラットフォームだが、これまでバイブコーディングに対応したプラットフォームは存在しなかった。10Webの新しいAI Builderは、プロンプトからわずか数分で完全にホストされたWordPressウェブサイトを生成し、ドメイン取得やSSL対応などのホスティング機能も統合している。さらに、オープンソースであるため、コードの所有権は完全にユーザーに帰属し、他のプラットフォームへの移行も可能である。動画では実際にパーソナルウェブサイトを構築するデモンストレーションを通じて、AIエージェントによる自動生成、リアルタイム編集、コードアクセス、公開までの一連のプロセスが紹介されている。
WordPressとバイブコーディングの新時代
WordPressはウェブサイトを構築する上で素晴らしい選択肢です。なぜなら、ウェブ全体のほぼ43%を動かしており、何千ものプラグインがあるからです。しかし、WordPressウェブサイトをバイブコーディングするためのプラットフォームはありませんでした。少なくとも今までは。
10Webがついに彼らのAI Builderをアップデートしました。この新しいAI Builderを使えば、WordPressウェブサイトをバイブコーディングして、同時にホスティングすることができます。つまり、本当にオールインワンのホスティングソリューションなのです。開発者向けのAPIも提供しており、まもなくバイブコーディング機能をAPIにも導入する予定です。
それでは、シンプルなプロンプトから、10Web上で完全にホストされたウェブサイトを数分で作る方法をお見せしましょう。今回のビデオのスポンサーでもあります。
プロンプトからウェブサイト構築まで
必要なのは、ここにプロンプトを入力するだけです。例えば、個人のウェブサイトを作りたいとしましょう。私のAIの旅を共有する個人ウェブサイトのランディングページを作るのを手伝ってください。このウェブサイトには、さらに2つのページがあります。1つは私のYouTube動画専用のページで、YouTubeコンテンツを共有します。もう1つのページは、主にブログ投稿や文章を共有するためのものです。
ところで、私は自分の文字起こしアプリを使っています。興味がある方は、説明欄に詳細があります。では、これを実行してみましょう。とてもシンプルなフローですが、良い点は完全にホストされたソリューションで、すべてがあなたのものだということです。つまり、100%オープンソースです。ソースコードを他の場所に移行することもできます。
今、ちょうどウェブサイトの構造を構築しているところです。AIが私たちのプロンプトを見て、それに基づいて異なるページと構造を考え出します。ホームページができました。それから、YouTube、ブログ投稿、お問い合わせが追加されました。これらは3つの他のページです。これを見ていきましょう。
ページの編集とカスタマイズ
ホームページには、私のAIアドベンチャーのセクションがあります。実は、これをAI Builderと呼ぶことにしましょう。何かを選択して、それを変更することができます。これは必要ないと思います。セクションが不要な場合は、ここから削除できます。個人のウェブサイトなので、証言は本当に必要ありません。私の洞察と経験を見てみましょう。
別のセクションも追加したいとしましょう。ここから選択できる事前定義されたセクションがたくさんあります。個人のウェブサイトなので、ここにギャラリーを追加しましょう。すると、AIが修正可能なデフォルトのプロンプトを提案してくれます。「AIで強化」をクリックすると、提供しているテキストを強化するのに役立ちます。これらは、生成される異なるセクションへのプロンプトとして機能します。
メインの構造には満足しています。実際にこれを修正しましょう。AI Builderと呼ぶことにします。さらに詳細を追加することもできますが、このままにしておきます。では、生成をクリックしましょう。今、ログインします。
今、ウェブサイトを作成しているところで、ここに移動します。現時点では、必要なすべてのインフラストラクチャを立ち上げています。最初に空白のWordPressウェブサイトを作成します。ここでコードにもアクセスできます。
ウェブサイトの最初の反復のプレビューがこちらです。これらのリンクを見ると、機能しているようです。とても素晴らしいですね。アバウトページに行きましょう。このAI Chroniclesが気に入らないとしましょう。では、ウェブサイト全体でAI ChroniclesをAI Builderに置き換えてもらえますか、と言います。これで満足です。
AIエージェントによる変更と最適化
エージェントがどんな変更を加えるか見てみましょう。おそらく、ウェブサイトを構築できるさまざまなプラットフォームを見たことがあるでしょう。そして、必要なすべての機能に基づいてウェブサイトを反復できます。しかし、10Webの美点は、オールインワンのホスティングソリューション、つまりホスティングスタックであることです。つまり、ここでウェブサイトを構築できるだけでなく、すべての高度な機能でホストすることもできます。SSLを提供し、無料ドメインも取得できます。WordPressに最適化されています。とても素晴らしいオールインワンソリューションです。
エラーが発生したようです。修正を試みます。ほとんどの場所で置き換えられたようで、とても良いです。メインページでは、まだAI Chroniclesがあると思います。ウェブサイトの異なる部分を選択して、エージェントに変更を依頼し、このテキストをAI Builderに置き換えることができます。
これは、非常にターゲットを絞った編集を行う能力を与えてくれるので、とても素晴らしいです。すべての変更を加えた最終的なウェブサイトがこちらです。ソーシャルに関するこのセクションも追加されました。これもとても良いですね。携帯電話でどのように見えるかを確認する機能も提供しています。コードベースも確認できます。
コードアクセスとウェブサイト公開
これがバックグラウンドで書いているコードです。バイブビルディング専用に設計されています。アイデアは、エージェントがあなたのために作業できるということです。興味があれば、コードを外部に持ち出すこともできます。また、プロセス全体でどのようなコード変更が行われたかを確認でき、作成されたウェブサイトをプレビューできます。
ウェブサイトに満足したら、公開できます。これが10Webの真の力が発揮される場所だと思います。なぜなら、ウェブサイトを作成できるだけでなく、SSLでホストすることもできるからです。無料ドメインを取得でき、これらはWordPressに最適化されています。
今、このリンクでウェブサイトを公開しました。独自のドメインがある場合は、ここで接続できます。または、無料のカスタムドメインを取得することもできます。ダッシュボード、プラグイン、テーマ、ウィジェット、WordPressが提供するすべてのものにアクセスできるため、さらにカスタマイズできます。
メインダッシュボードがこちらです。実際にページスピードスコアを確認できます。デスクトップとモバイルでどのように見えるか、必要に応じてこの分析を実行できます。
ウェブサイトは今ライブです。実際にアクセスできます。リンクも機能します。とても素晴らしいですよね。わずか数分で始めることができました。
価格設定とまとめ
価格設定に関しては、ビジネス、Eコマース、エージェンシー向けにさまざまな価格ポイントがあります。年間サブスクリプションで割引があり、有料ユーザーには最初の1年間、無料のカスタムドメイン名も提供しています。
ぜひチェックしてみてください。とても興味深い分野で、10WebはWordPressウェブサイトに本当に優れたソリューションを提供していると思います。とにかく、このビデオが役に立ったことを願っています。ご視聴ありがとうございました。いつものように、次回お会いしましょう。
コメント