Transcription
今日は、Cloud Code を使って WordPress 内で美しいウェブサイトを構築する方法についてお話しできるので、とてもワクワクしています。私がワクワクしている理由は、10年前にウェブデザインを始めた頃、WordPress で美しいウェブサイトを構築するのは苦痛なプロセスだったからです。まるで歯を抜くような感覚でした。そして今、Cloud Code を使えば、10分か20分でそれができ、しかも 10点満点中 10点のような仕上がりになります。文字通り、控えめに見積もっても5時間、もっと言えば10時間かかっていたであろう美しいものを、これほど良く仕上げることはできなかったでしょう。
それでは、早速始めましょう。まず、WordPress を初めて使う方は、SiteGround、Hostinger、Bluehost のようなホスティングプラットフォームで、文字通りワンクリックでアカウントを作成できます。そして、始めるにあたって、ウェブサイトのブランドキットを作成したいと思います。さて、おそらくすでに WordPress のウェブサイトを持っていて、同じ色、フォント、スタイルを維持したいと思っているでしょう。Cloud 内で行うことは、既存のサイトの画像をアップロードすることです。これにより、色、タイポグラフィ、ボタンなどのすべての要素を抽出し、今後構築するページで使用できます。そして、これをどのように行うかというと、Cloud にアクセスします。サイドバーには、Cloud Design へのアクセスがあります。この機能にアクセスするには、有料の Cloud サブスクリプションが必要です。Cloud にサブスクライブしたくない場合は、Google Stitch という無料の Google の代替手段があります。ほぼ同じことを行います。
さて、現在のデザインをコピーしてデザインするために、Cloud Design 内のデザインシステムにアクセスし、ここで新しいデザインシステムを作成します。既存のサイトのスクリーンショットを撮る必要があります。理想的には、可能な限り多くのスクリーンショットを撮りますが、このデモではスクリーンショットを1枚だけ撮り、デザインシステムにアップロードします。このデザインシステムは、今後構築するすべてのページで使用でき、すべてのページで一貫した体験を作り出すことができることを覚えておいてください。今日は架空のブランドである Apex ウェブサイトを作成しているので、このデザインシステムに「Apex ウェブサイト」と名付けます。そして、フォント、ロゴ、アセットを追加するセクションにスクリーンショットをアップロードします。理想的には、撮ったすべての異なるスクリーンショットをアップロードします。すべて設定が完了したら、生成に進むことができます。これには約5分かかるでしょう。
戻ってきました。結果を見てみましょう。ページをこちらに移動させて、簡単な比較を行います。UI キットを見ると、これはほぼページそのもので、要素もすべて取得できています。本文のテキスト、さまざまな色、サーフェスカラーはプライマリーパープルです。ページから取得しているスペーシングを確認できます。これらのブランド要素はすべて、Cloud Code を介して WordPress で構築するすべてのページで使用します。これで、ポイントはご理解いただけたと思います。次に、このデザインキットを使って実際に美しいウェブサイトを構築する必要があります。これを行うには、Cloud Design のメインページに戻り、デザインシステムが有効になっていることを確認してから、新しいプロトタイプを作成します。プロトタイプとは、ウェブサイトのページを作成することを意味します。このプロトタイプに「Apex ウェブサイト」と名付けます。ウェブサイトを構築するために作成したばかりのデザインシステムを選択し、高忠実度を選択します。これは高品質なウェブサイトを作成することを意味します。そして、プロンプトを送信して始めます。画面を拡大します。私の顔が画面の最も重要な部分をすぐにブロックしているからです。しかし、基本的に、デザインシステムを追加する必要があります。追加されているようです。追加し忘れた場合は、ここのボタンをクリックして追加することもできます。円形のアイコンのいずれかに表示されたら、追加されたことがわかります。そして、プロンプトを送信できます。「Apex という SEO エージェンシーのために、美しい 1 ページのウェブサイトを構築してください。ブランドキットは添付のデザインシステムから取得し、アップロードしたスクリーンショットからページレイアウトまたは構造を取得してください。」
了解しました。これには2つの要素があります。デザインキットは色やタイポグラフィなどに使用しますが、レイアウト用の画像も取り込みたいと思います。そこで、Dribbble という無料のウェブサイトにアクセスします。これはデザインウェブサイトで、世界中の多くのデザイナーが作成したプロジェクトをアップロードしています。ここで「マーケティングエージェンシーウェブサイト」と入力すると、構造をコピーしたいウェブサイトを見つけることができます。ブラウズして気に入ったものを見つけることができますが、私はこれが気に入りました。ページが欲しいです。レイアウトをコピーします。レイアウトとは、画面の中央にヘッダーがあり、次に本文、次にこれらのボタン、次にダッシュボードがあり、さらにロゴなどが続くことを意味します。気に入ったものを見つけたら、保存して Cloud Design にアップロードできます。このリンクは説明欄に無料で含めますので、この写真が必要な場合は入手できます。そして、Cloud Design 内で、見つけたファイルを添付し、このウェブサイト全体を一度に生成します。
戻ってきました。ウェブサイトが作成され、非常に美しいです。これも手作業で作成するには非常に時間がかかったでしょう。さて、ウェブサイトを作成したので、Cloud Code を介して WordPress にアップロードする必要があります。これで、2番目の部分、つまり Cloud と WordPress を実際に接続することになります。アップロードに入る前に、Cloud Code についての簡単な 10 秒間の概要を説明します。なぜなら、これを見ている多くの人が Cloud Code を使ったことがないかもしれないからです。問題ありません。それについては後ほど説明します。
こんにちは、皆さん。このビデオを撮影してから 1、2 日後に、Google Antigravity が Cloud Code へのアクセスを削除するアップデートをリリースしました。これを回避するには、VS Code を無料でダウンロードできます。これはほぼすべての点で同一の代替手段です。さて、本題に戻りましょう。まず、Antigravity というツールを開いています。 antigravity.google にアクセスして無料でダウンロードできます。これは Google の製品で、コーディングワークスペースです。技術的には、ここでコーディングプロジェクトを行うことができますが、技術的な背景は一切必要ありません。チュートリアルの残りの部分を簡単に進めることができます。しかし、コーディングワークスペースを使用している理由は、Cloud Code、つまりシニアエンジニアがいるからです。私たちは彼に何をすべきかを指示するだけで、Cloud が私たちのために仕事をしてくれます。Cloud Code は、Antigravity 内に存在するプラグインとして登場します。右側には、拡張機能にアクセスし、Cloud を検索してインストールすることで、Cloud と双方向で通信できるようになります。これには有料サブスクリプションも必要です。まだ購入したくない場合は、エージェントに切り替えることもできます。これは実質的に同じことを行います。これは Antigravity 内の Cloud Code の Google 版です。無料で試すこともできます。チュートリアルの残りの部分では、Cloud Code を使用します。
さて、Antigravity または Cloud 内にいるときは、新しいフォルダーでプロジェクトを作成する必要があります。そこで、フォルダーを開き、「WordPress」という名前の新しいフォルダーを作成します。これは空です。開くことができます。これで準備完了です。サイドバーの Cloud アイコンをクリックして新しいセッションをクリックすることで、Cloud との会話を開始できます。完璧です。ビデオの残りの部分では、チャットボットのように双方向で通信し、残りは Cloud が処理します。さて、次のポイントは、Cloud を WordPress に接続する必要があることです。そして、それを Nova Mira というツールを介して行います。これは最近見つけた無料のツールで、WordPress 内のプラグインであり、Cloud が Nova Mira にデータを送信し、WordPress 内でアクションを実行できるように、一方向で通信できます。多くのことができることがあり、文字通り WordPress サイト全体にアクセスして、ページを作成したり、ページを編集したり、プラグインを更新したり、テーマを更新したり、ほぼ何でも自動的に行うことができます。
さて、novamira.ai にアクセスします。これは説明欄の下に無料であります。この zip ファイルをダウンロードします。これは WordPress プラグインです。次に、WordPress にアクセスし、プラグインタブで新しいプラグインを追加し、ダウンロードした zip ファイルをアップロードします。コンピューターから選択し、開くをクリックします。これで準備完了です。これをインストールします。すでに WordPress 環境にインストール済みです。そこで、Nova Mira をクリックして先に進みます。プロジェクトに名前を付け、生成をクリックします。別のパスワードを生成します。別のアプリケーションパスワードを生成すると、ここにコピーできるプロンプトが表示されます。ええ、誰もと共有しないでくださいと言っているのが好きです。しかし、とにかく、ここにすべてがあります。Cloud Code に戻って貼り付けます。これで準備完了です。MiraNova がインストールされたので、Cloud Code から WordPress に情報を送信できるようになりました。ブログ投稿の作成、ブログ投稿の編集、ページの作成など、すべてが可能です。
さて、ここで 2 つのことを強調したいと思います。Cloud Code を使用して WordPress 内で投稿またはページを生成するには、2 つの方法があります。このビデオでは、両方のオプションについて説明します。最初の方法は、ピクセルパーフェクトなカスタムコーディングされたウェブサイトを作成することです。作成したものをピクセルごとに、つまり全く同じようにコピーできます。それは信じられないほど美しく見えます。欠点は、これらのページを編集できる唯一の方法は、直接 Cloud Code を介して行うことですが、Cloud Code は編集が非常に高速です。私の意見では、手作業で行うよりもはるかに高速です。これにより、9/10 または 10/10 のウェブサイトを構築できます。しかし、問題は、チームメンバーやクライアントに引き渡す場合、Cloud Code を介さない限り編集できないことです。2番目のアプローチは、Gutenberg エディターまたは Elementor 内で完全に編集可能なページを構築することです。これにより、チームメンバーやクライアントはドラッグアンドドロップで編集できます。これも構築できます。問題は、これの美しさの限界が 6.5/7 程度であることです。しかし、ウェブデザインは最高ではないかもしれませんが、もちろん編集できます。ビデオの最後では、ブログ投稿の作成、オンページ SEO、AI のような響きではなく、適切なトーンを捉えるブログ投稿の作成など、手作業の多くを自動化する方法について説明します。
さて、これらを踏まえて、最初のアプローチから始め、次に2番目のアプローチに進みます。これを行うには、Cloud Design に戻ります。ウェブサイトで共有をクリックし、Cloud Code に引き渡してコマンドをコピーし、ここに貼り付けます。もう一行追加したいと思います。「下の Cloud Design ウェブサイトをコピーして、新しい WordPress ページにアップロードしてください。このページはカスタム PHP を使用して作成する必要があり、デザインをピクセルごとにコピーしてください。これは Cloud Design の正確なクローンである必要があります。」
サイトが稼働しました。これを確認するには、Cloud Code のリンクをクリックします。ライブサイトに移動し、ピクセルパーフェクトに表示されます。WordPress 内で、ページにアクセスすると、この正確なページが表示され、もちろん表示できます。欠点は、編集しようとすると、編集するものが何もないことです。つまり、編集可能なフィールドがなく、テキストなどを変更できません。これをどうするかというと、Cloud Code に変更したいことを伝えます。最も簡単な例を挙げます。「この見出しを別の例に変更してください。リンゴとオレンジのようなランダムなものを選択してください。」これを貼り付けると、参照しているテキストに基づいてウェブサイトのどこを変更すべきかがわかります。これを入力するだけで、Cloud Code はそのセクションを変更したいことを理解します。ページ上のどこでもこれを行うことができ、オブジェクトを互いに参照することもできます。「このテキストの下にあるボタンを更新してください。」と言うと、それが何を指しているかを正確に理解し、変更を行います。更新されたことがわかります。更新されたことを確認するためにリフレッシュすると、すべてが変更されています。リンゴとオレンジ、しかし主にリンゴです。これは最もばかげた例でした。なぜそれが最初に頭に浮かんだのかわかりません。だから、これがアイデアです。下にフォームがある場合、そのデータを CRM や n8n、GoHighLevel などのツールに送信するように配線することもできます。
さて、次に Elementor 内で完全に編集可能なページを作成するセクションに進みましょう。これを行うには、いくつかのステップがあります。現在、カスタム PHP で完璧なウェブサイトを作成しました。しかし、サイトの残りの部分では、WordPress に古いテーマ、古いナビゲーションバー、古いフッターがあります。Elementor のようなプラグインを追加する必要があります。Cloud に戻り、簡単な音声コマンドでこれをすべてワンショットできます。「WordPress ウェブサイトの WordPress ページを更新して、Elementor テーマ Hello を追加してください。また、Elementor をウェブサイトのプラグインとして、またブログやウェブサイトのページで使用できるすべての追加の Elementor ウィジェットプラグインも追加してください。」
さて、戻ってきました。すべての変更が実装されました。これらを一つずつ見ていきましょう。まず、プラグインにアクセスすると、これらの Elementor プラグインがすべてインストールされていることがわかります。これらはすべて無料です。後でこれらの Elementor アドオンについて詳しく説明します。Elementor は単なるページビルダーなので、WordPress 内でページを構築するのに適しています。これは必須ではありません。これは、多くの人が Elementor を使用している場合に備えて追加したオプションです。これが最初の点です。次に、ページのテーマを変更しました。テーマにアクセスすると、おそらく 21、20、24 のいずれかだったでしょう。Hello に変更しました。これが私を笑顔にさせている美しい点は、10年前に WordPress で遊んでいた頃、最も基本的なことを行うのが非常に困難だったことを覚えていることです。ナビゲーションバーやフッターを変更したい場合、「これは非常に簡単であるはずだ」と思います。そして3時間後、「ああ、まだこれに取り組んでいる」となります。デフォルトでは、これがフッターです。ここにナビゲーションバーがあります。この更新で、ここにナビゲーションバーが追加されました。そして、ここにフッターが追加されました。これらのテキストはすべてサンプルです。無視してください。両方のページにあります。次のプロンプトで更新します。だから、本当に、本当に美しい仕上がりです。これを編集できますが、WordPress でこのようなことがなぜこんなに難しいのか、Cloud Code ではなぜこんなに簡単なのだろうかと思います。
さて、次にブログ投稿を作成します。ここではブログ投稿を使用します。2つのブログ投稿を作成してください。1つは Elementor について、もう1つはデフォルトの Gutenberg エディターについてです。WordPress について書いてください。ロイヤリティフリーの画像を取り込み、ブログ投稿で複数回使用してください。デザインも絶対に美しく、可能な限り美しくしてください。そして、このプロジェクトにインポートした Cloud Code デザインシステムを使用してください。これにより、目指しているブランディング全体に適合します。
さて、戻ってきました。2つの新しいブログ投稿が作成されました。Gutenberg の投稿と Elementor の投稿があります。どちらもこのデフォルトのテキストが上部にあることにすぐに気づくでしょう。これはテーマによるものだと思います。Cloud Code と双方向でプロンプトを送信して削除できます。今のところ、開発者コンソールに入って手動で削除します。これがブログ投稿の見た目です。Elementor から始めましょう。デフォルトでは完璧ではないことに気づくでしょう。これは中央に配置されていません。下にスクロールすると、テキストはおそらく少しずれており、この画像はテキストと少しずれている可能性があります。全体として、これはおそらく 4、おそらく 5/10 です。Gutenberg のブログ投稿を見ると、はるかに良く見えます。ブログ投稿としては、おそらく 7、おそらく 8 です。しかし、もちろん、非常にシンプルなブログ投稿です。編集セクションに入ると、完全に編集可能であることがわかります。これをクライアントやチームメンバーに送信でき、彼らは好きなように編集できます。Elementor でも同様です。これらのさまざまなブロックをすべて編集できます。ただし、これは私がワンショットでプロンプトしたもので、全く編集していません。これがそのまま得られたものです。おそらく 1、2 時間かけて Cloud に追加のコンテキストを提供し、「私のブログ投稿はこうあってほしい」と言えば、もっと良くなるはずです。しかし、これはおそらく最低ラインであり、そこからしか向上できません。もちろん、Cloud Code を介して編集することも、ページ上で直接編集することもできます。しかし、私が伝えたいのは、Cloud Code を使用して編集可能なページを非常に簡単に構築できるということです。
さて、これはブログ投稿用です。編集ページで編集を調整して満足するのに、おそらく 1、2 分かかるでしょう。真の時間の節約は、編集プロセスではなく、ブログ投稿のランキングに関する追加作業にあります。ブログ投稿を作成する理由は、お金を稼ぐためです。顧客を獲得したり、オンラインで製品を販売したりすることで、お金を稼ぎます。具体的には、SEO でランク付けすることで機能します。Google でブログ投稿が可能な限り上位にランク付けされるようにしたい、つまり、上位にランク付けされるほど、より多くの検索トラフィックを獲得し、クライアント、リード、または製品の販売を通じてより多くのお金を稼ぐことができます。そこで、Cloud Code を使用して、以前は非常に時間がかかっていた多くのことを自動化できます。この Gutenberg ブログ投稿を続けます。なぜなら、それははるかに優れていると思うからです。これを読むと、新しい WordPress プロジェクトの反射的な行動は、ページビルダーをインストールすることです。退屈です。もう眠ってしまいました。このページから離れます。それは絶対にひどいです。そして、ここでほとんどの人がブログ投稿を作成するのをやめます。それは AI のゴミです。あなたがしたいのは、語彙、ユーモア、話し方、トーンなどのコンテキストを渡すことです。そうすれば、あなたらしく聞こえ、人々をページに留めることができます。より多くの人があなたのコンテンツを読むほど、Google はそれを認識し、ランキングを押し上げます。オンページ SEO も追加できます。かなりの時間がかかっていたことが、Cloud Code を使用して自動化できるようになりました。だから、自分でこれらのことをすべて行う必要はありません。自動化できます。
そこで、これを処理しましょう。まず、自分のトーン、WordPress でブログ投稿を書きたい方法を追加します。これを tone.md ファイルと呼びます。ユーモア用の別のファイルを作成したり、意見用の別のファイルを作成したり、好きなように構造化したり、話し方や Cloud Code にブログ投稿を書いてほしい方法を分解したりできます。これらのファイルを複数分解します。今回はユーモアから始めます。この文章を見つけました。気に入っています。あなたが書くメールの書き方、LinkedIn の投稿の書き方、過去のブログ投稿の書き方から情報を取ることができます。この例では、この特定のブログ投稿を使用します。なぜなら、それは非常に面白いと思うからです。私は 99 の問題を抱えていますが、私の息子がかわいそうです。私は 99 の問題を抱えていますが、私のユーモアは一つではありません。これらの言葉を書いているとき、私が考えているのは、14歳の息子がその冒頭の声明を読んだらどれほど恥ずかしいだろうかということです。だから、それはダジャレに満ちています。それが私のユーモアのタイプです。だから、これをすべてコピーして、Cloud に貼り付け、「この文章を humor.md に追加してください。」と言います。おっと、humor.md。そして、@シンボルをヒットしてファイルを参照できます。私のユーモアタイプをブログ投稿で使用できるように、それをデコードしてください。そして、ここに貼り付けます。Cloud はこの文章からダジャレとブログ投稿におけるユーモアのあり方を抽出します。抽出したら、ここにあるユーモアファイルを更新します。そして、この正確な書き方を将来のすべてのブログ投稿に注入できます。
さて、準備完了です。ユーモアファイルを確認できます。ユーモアがどのようなものかについての文章があります。そして、Cloud はそれをデコードしました。ユーモアに関しては、最も良いことは、自分らしくいることです。アプローチや使用するユーモアに誠実でない場合、読者はそれを知ることができます。軽く保ち、普遍的な参照を使用し、聴衆に適したジョークを使用し、散りばめてください。これで、これらのブログ投稿でユーモアがどのように聞こえるべきかについての参照ファイルができました。AI のゴミのように聞こえるだけではありません。そして、元の図面に戻って、個々のブログ投稿を更新できます。これをコピーして別のプロンプトを追加します。「このブログ投稿を humor.md ファイルで更新してください。楽しくて enjoyable で、軽い読み物にしてほしいです。なぜなら、より多くの人が共感するほど、ブログ投稿に長く滞在するからです。だから、本当に面白くしてください。また、すべてのオンページ SEO 最適化を行ってください。キーワード「WordPress」でランク付けされていることを確認してください。内部リンクがあることを確認してください。外部リンクもあることを確認してください。」
さて、すべてライブです。リンクはここにあります。まず、変更前の状態から始めましょう。新しい WordPress プロジェクトの反射的な行動は、ブログ投稿が退屈なので眠ってしまうことです。そして、更新されたバージョンがここにあります。想像してみてください。真新しい WordPress プロジェクトがあり、ステークホルダーはクリーンなものを求めており、キックオフコールまで約6時間です。最初の本能は、ページビルダーを起動し、80のデモサイトが付属するテーマを探し、IKEA をハードモードでプレイしているかのようにウィジェットをドラッグし始めることです。私も経験があります。私の14歳の息子は私を恥じるでしょう。真顔に切り替えます。WordPress ブログエディター、はい。そして、このように続きます。ユーモアを散りばめているので、読むのがはるかに楽しくなりました。人々が長く滞在するほど、ページは SEO にとってより良くなります。外部サイトへのリンクもあります。ウェブサイトの内部へのリンクもあります。もちろん、簡単に最適化できます。オンページ SEO は簡単な作業ではないことを覚えておいてください。手作業で行うには非常に時間がかかる可能性があります。Cloud Code を使用して完全に自動化できます。技術 SEO も役立つはずです。
これでビデオは終わりです。ご視聴ありがとうございました。価値を見出した場合は、いいねボタン、購読ボタンをクリックし、質問があればコメントを残してください。また、無料の学校コミュニティがあります。そこには、人生やビジネスのさまざまなプロジェクトを自動化するための何百もの自動化のブループリントがあります。また、有料コミュニティもあり、2つの変革があります。最初の変革は、30日以内にフリーランサーになるか、独自の AI 自動化エージェンシーを作成する方法です。クライアントを見つけて最初の取引を完了する方法を説明します。数百人の人々が成功しており、その多くはフリーランシングやビジネス作成の経験がなかったことを覚えておいてください。2番目の変革は、Cloud Code のようなツールを使用してビジネスの大部分を自動化する方法です。7桁にスケールし、チームが行っていた作業の最大80%を自動化できた正確なブループリントを提供します。また、これらの変革を進めるにつれて、直線的なパスではないため、途中で障害に遭遇します。7回の通話に参加でき、Zoom 通話で会って、行き詰まったときに解決策を見つけることができます。最後に、代理店もあります。ビジネスを持っていて自動化したいが、自分でやりたくない場合は、ここに連絡できます。ライブ通話で、すべてを自動化する方法について話し合います。ご視聴ありがとうございました。次回のビデオでお会いしましょう。