WordPressのカスタマイズをAIで実現！初心者でもできる伝え方

前回の記事では、Cocoon標準のサイトマップでできることを確認しながら、カスタム投稿にも対応した全自動サイトマップへカスタマイズする方法を紹介しました。

今回は、WordPress初心者の方でも迷わずに、自分が作りたいものをAIに伝える方法を、できるだけわかりやすく紹介したいと思います。

まずは「どうしたいか」を見える形にする

AIに頼むときに大切なのは、

「今はこうなっている」
「ここをこうしたい」
「完成したらこんな感じにしたい」

という希望を伝えることです。

言葉だけでうまく説明できない場合は、紙に完成イメージを手書きしても大丈夫です。

たとえば、上のような簡単な図でも…と言いたいところですが、これ、AIが書きました！なので、決して「簡単な図」ではありません！😂
しかも、カレンダーのウラ感までかもし出していて声に出して笑ってしまいました！（この辺がAIといっしょにやっていて面白いところでもありますｗ）
実際はもっと簡単でいいです！

「固定ページを上にしたい」
「カテゴリーごとに分けたい」
「カスタム投稿も入れたい」
「PCでは2列、スマートフォンでは1列にしたい」
「新しい記事を公開したら自動で追加してほしい」

といった希望は文字でも十分伝えられます。

自分が見て「こんな感じ」と分かる程度の図で十分です。

その図をスマートフォンで撮影したり、パソコンに取り込んだりしてAIに見せます。

スクリーンショットを見せるとさらに伝わりやすい

手書きの完成図だけでなく、現在のWordPress画面をスクリーンショットで見せる方法も便利です。

たとえば…

「今のサイトマップはこの状態です」
「この見出しを変えたいです」
「ここの余白をもう少し広くしたいです」

という相談なら、文章だけで説明するより、実際の画面を見せた方がさらに伝わりやすくなります。

AIに伝えるためのサイト情報を確認する

完成イメージやスクリーンショットだけでも相談はできますが、WordPressのコードを書いてもらう場合は、自分のサイトで使っている情報を事前にAIに伝えておくとスムーズです。

今回のサイトマップなら、まず確認したいのがカテゴリーのスラッグです。

WordPressの管理画面から「投稿」➔「カテゴリー」を開きます。

カテゴリー一覧には「名前」と「スラッグ」が表示されています。

たとえば、画面上では「Cocoon Guide」というカテゴリー名でも、スラッグは次のようになっています。
cocoon-guide
コードでは、このスラッグを使ってカテゴリーを指定することがあります。

その際、AIには
「Cocoon Guideというカテゴリーを表示したいです。スラッグは cocoon-guide です。」

というように伝えられます。

下のスクショのように、カテゴリーの一覧を撮影して、それを画像としてAIに見せれば正確に読み取ってくれますので、入力する必要すらありません。

分からない項目があれば、無理に自分で判断する必要はありません。

「この画面のどこを見れば必要な情報が分かりますか？」とAIに聞けば答えてくれます。

AIには材料をまとめて渡す

ここまで準備できたら、いよいよAIに相談します。

難しい「プロンプト（指示文）」を作ろうと考えなくても大丈夫です。

自分が持っている材料を順番に伝えるだけでも、かなり分かりやすくなります。

たとえば、今回のサイトマップなら、次のように頼めます。

ここで大切なのは、専門用語をたくさん並べることではありません。

何を使っていて、今どうなっていて、どうしたいのかが分かれば、AIは必要な方法を考えやすくなります。

サンプルコードもAIに見せられる

前回の記事では、当サイトで使用しているサイトマップ用のサンプルコードを掲載しました。

そのコードをコピーして、AIに自分のサイト用へ書き換えてもらう方法もあります。

たとえば…

そして、前回の記事からコピーしたコードなどをチャット欄にそのまま貼り付けます。

カスタム投稿タイプ名など、自分では分からないものがあれば、

「カスタム投稿タイプ名が分かりません。どこを確認すればいいですか？」

と先に聞けば大丈夫です。

分からないものを推測して入力するより、分からないこと自体をAIに伝えるほうが安全です。

一度で完成しなくても追加で頼めばいい

AIからコードが返ってきても、一度で思いどおりのデザインになるとは限りません。

実際の画面を確認して、

「もう少し見出しの間隔を広くしたい」
「この色をもう少し薄くしたい」
「ここのアイコンだけ変えたい」

など、気になるところを追加で伝えていきます。

このときも、修正したい場所のスクリーンショットを見せると便利です。

「この画像の赤く囲んだ部分を変更したいです。」

というように伝えれば、専門用語を知らなくても相談できます。

また、コードを修正してもらう場合は、

「変更後のコードを全文で返してください」

と伝えておくと、初心者でも差し替える場所を探さずに済みます。

AIとのやり取りは、一度の質問ですべて完成させる必要はありません。

作ってもらう ➔ 確認する ➔ 気になるところを伝える ➔ 直してもらう

という流れを繰り返しながら、自分の希望に近づけていけば大丈夫です。

また、CSSは最初から「外観」➔「テーマファイルエディター」などに書き込まず、固定ページの編集画面下部にある、「カスタムCSS」欄を利用することをおすすめします。

その方が圧倒的に「修正」が簡単だから、です。
また、そのページだけで使いたいCSSであれば、その箇所にのみ記述しておけばOKです。

どのAIに仕事を頼むか

さて、ここで悩むのが、数あるAIの中から誰（どのAI）に頼むのか、という話ですが、これはあくまで私の体験談としてお聞きください。

価格的にお手軽なのはGoogleのGeminiです。

Googleのストレージ容量もおまけでついてきたりするので、AndroidやWindowsのユーザーのみならず、便利に使える点は数多くあると思います。

また、Geminiならある程度まで無料でも利用できます。

その点、ChatGPTは無料では厳しいです。日常的なテキストチャットが無制限になった、と言われていますが、同一のスレッドでやり取りできる回数はこれまでと変わらずすぐ上限に達しますし、スクショなどの画像のやり取りも無料枠ではあっという間に使えなくなってしまいます。

なので、最初に試してみるのであればGeminiが無難かもしれません。

ただ、両者の「性格」は対照的ですので、まだ使っていらっしゃらない方は、無料体験期間があると思いますので、それらをうまく利用して両者と一度「話してみる」ことをぜひおすすめします！

私ですか？
今はChatGPTの新入社員を見習いで採用していたのですが、とうとう正社員登用になりそうです😂