タスク管理のヌケモレを防ぎ、マルチタスクを支えるツールとフロー
まてぃさん
まてぃさん.どっどこむ
AIでWeb診断テストのコンテンツをつくった過程とプロンプト
まてぃさん
「プログラミングができないと、Webサイトに診断テストのような機能は実装できない」と思っていましたが、ClaudeAIに相談しながらやってみたら、プログラミングスキルがなくても、自分のサイトに診断テストを実装できました。
今回は私自身が実際にClaudeAIの助けを借りて「Web集客診断テスト」という診断コンテンツをつくって公開するまでの過程をご紹介します。
関連記事
思考の壁を壊すAIの使い方
もくじ
なぜWeb集客診断テストを作ろうと思ったのか
私が提供するサービスや書いている記事だけでは、「私が具体的に何ができて何ができないのか」がクライアントにとってわかりにくいと思ったのがきっかけです。
Web集客したい方がサイト改善を考えていて、自分のサイトの課題が何か知るきっかけを見つけたり、改善指針を提供できるツールをつくれないかと思った次第です。
そこで思いついたのが診断テストです。これにより、潜在顧客が自分のWebサイトやコンテンツの現状を客観的に把握し、次に取りたいアクションを明確にできるのでは、と。
診断テストの内容と機能
「Web集客診断」は、私が提供している有料サービスの内容をベースに設計しました。ClaudeAIにサービスの内容を詳しく説明し、その内容から診断コンテンツを作成してもらいました。
- 現状のWeb集客・コンテンツ戦略における弱点
- 改善要素のリストアップ
- 次に取りたい具体的なアクション
診断結果を通じて、これらを提示するようにしてもらいました。診断結果では点数表示も実装し、視覚的にも課題がわかりやすい形に仕上がっています。
▼公開した診断テストはこちらです
無料Web集客診断テスト
AIとの対話プロセス
診断コンテンツは一発で制作に成功したわけではありません。何度かの試行錯誤を経て、完成に至りました。3回つくって、3回目でできました。2回は調整がしきれずダメでした。
最初の2回は診断プロセスが意図した流れにならなくて、投げ出しました。3回目にClaudeAIに対して以下の点を明確に、大量に（行数で言うと30行ぐらい説明した）伝えたとき、私がつくりたかったコンテンツになりました。
- 診断テストの目的
- 潜在顧客が目指すゴール
- 私が重要視しているポイント
これらをリストアップして伝えることで、AIと診断コンテンツの方向性のすり合わせができ、そこからはスムーズに進みました。この「方向性のすり合わせ」がAIとのクリエイティブの協働においていちばん大事な点だと実感しました。あいまいな指示は、あいまいな結果しか出しません。
関連記事
テキストコミュニケーションで意識していること
AIへの指示プロンプト
AIには、次のようなプロンプトを出しました。
#最初の設問は、想定顧客の課題を確認
#最後の結果で、想定顧客が「次に自分は何をするべきか」がわかる
#診断の目的：診断後、私の得意なジャンルのコンサルティングにつなげたい
#Hubspotに貼り付けられるソースコードで用意してください
#想定顧客：個人事業主や経営者
#想定顧客の課題：集客。サイトやブログをつくったが、人が来ない。サイトに集客して、売り上げを上げたい
この指示の特徴は、技術的な詳細ではなく「ビジネス上の目的」や「ユーザー体験」に焦点を当てている点です。「何を実現したいか」をAIに伝えることで、コンテンツをつくる道筋と骨組みを確認します。
骨組みができると、あとはソースコードを吐き出してくれます。吐き出されたものをプレビューしながら、仕上がりを確認していきます。
エラー対応とデザイン調整もAIがやってくれた
ややWeb制作の知識がある方向けの話になりますが、私の自社サイトはHubspotのCMSでつくっています。ですので、Hubspotにコピペする前提でソースコードを出してもらいました。
出してもらったソースコードを「コンテンツ＞デザインマネージャー」で「新規ファイル」を作成。モジュールとして保存（←これは私用のメモ）。モジュールをウェブページのテンプレートに読み込んで、HTMLに表示しています。
上記の流れで実装してみると、想定通りに表示されない部分が多々ありました。動かないし。これを解決するために、
- プレビュー画面のキャプチャを撮影して、ClaudeAIに添付
- 問題点をテキストで具体的に説明
- 問題点のソースコード修正を依頼
この流れで修正依頼を出しました。そのときの画像がこちら↓です。
次のようなプロンプトで修正依頼をしました。
添付画像の画面を見てください。修正済コードを貼り付けましたが、赤い〇で囲んだボタンはやはり動きませんでした。また、黄色い〇で囲んだ「診断結果」部分が、表示されています。これを診断結果が出るページにのみ表示してください。
以上2点を修正してください。
上記のキャプチャは、修正してほしい部分を拡大してClaudeAIに依頼したときのものです。
余談ですが、これとは別に最初に画面キャプチャを添付したとき、私のサイト全体のキャプチャも添付しました。その際、ClaudeAIはカラーコードを読み取り、それに合わせてデザインも調整してくれました。そのおかげで、サイトの全体的なカラートーンと統一感のある診断テストに仕上がりました。気が利く～！
関連記事
自分をコンテンツ化するテクニック
従来型制作にかかるコストと時間の比較
この診断テストを従来の方法で作成した場合と比較すると、こんな感じになります。
| 従来の方法（外注） | AIで自作した方法 | |
|---|---|---|
| コスト | 約10万円 | 実質0円（AIサブスク代のみ） |
| 所要時間 | 1～1.5ヶ月 | 約3日間 |
フリーランスのエンジニアに診断コンテンツを依頼した場合、10万円前後の費用と1～1.5か月の工数がかかります（打ち合わせ開始から公開までの時間数。たぶん）。
ですが、ClaudeAIの力を借りたことで、試行錯誤（＆途中で投げ出した）を含めてわずか3日で完成。しかも、実質的なコストはAIサブスクリプション費用のみです。つくり方のコツがわかったので、今後は1日あれば別のものもつくれると思います。
完成した診断テストの成果
完成した診断テストは、私としては大満足です。画面遷移も思い通りの流れに仕上がりましたし、デザインもサイトのデザインと融合していて、違和感なし。診断結果ページに必要事項をリストアップされますし、診断結果の点数表示も想像以上にいい感じに表示されるようになりました。この診断テストをつくったことで、
ユーザーにとっては、
- 自社のWeb集客の現状をざっくり把握できる
- 具体的に何を改善するか方向性がつかめる
- 次のアクションが見えるため、行動に移しやすくなる
私にとっては、
- 無料診断テストをきっかけに新規ユーザーの獲得につながる
- リード獲得ツールとして機能（結果ページからの遷移はメルマガ登録にしました）
- 潜在顧客の課題がわかりやすくなるので、サービス提案がしやすくなる
といった流れをつくることができます（理論上）。
やる気とAIがあれば、ある程度のことは自分でできる
診断コンテンツをつくってみて、やる気とAIがあれば、簡易的なものなら外注しなくてもつくれると実感できたのは大きかったです。技術的な専門知識がなくても、はっきりした目的とAIへの適切な指示があれば、以前なら専門家に依頼するしかなかった複雑なものも、自分の手で実現できるのです。
最も重要なことは、AIが理解できる正しいディレクションをいかにできるかにかかっていることです。
AIは優れた能力を持っていますが、その能力を最大限に引き出すには適切な指示が不可欠です。あいまいな指示ではあいまいな結果しか得られません。具体的な指示を出せるかどうかが成否を分けます。
とくになるほどと思ったのは、AIに対して技術的な詳細ではなく、「何を達成したいか」というビジネス的な目標や「どんなユーザー体験を提供したいか」の視点で指示を出すことの大切さです。専門用語を使わなくても、目的と理想の結果をわかりやすく伝えることで、AIはそれを実現する方法を見つけ出してくれます。
また、AIとの対話では方向性のすり合わせが重要で、目的・ゴール・依頼主が重視するポイントを誤解なく伝えることで、よりよい結果につながります。それは生身の人間に依頼するときと同じです。
関連記事
「伝えたいこと」と「ユーザーニーズ」のズレを埋める書きかた
AIに依頼する際の6つのポイント
AIを使い慣れない方がつまづきやすい点を踏まえ、依頼時のポイントをまとめます。
- 目的とゴールを明確にする
何を作りたいのか、それによって何を達成したいのかをはっきりさせる - 段階的に進める
一度に完璧を求めず、まずは簡易版を作り、そこから改善していく方法が結果を出しやすい - 視覚的なフィードバックも使える
エラーや修正点はスクリーンショットなどの視覚情報と共に伝えると、AIの理解が深まりやすい - 目的を共有する
技術的な詳細よりも、ビジネス的な目標やユーザー体験の視点で指示を出すと、AIがその点を踏まえた提案をしやすい - 具体的なディレクションをする
AIが理解できる正しい指示を出すことが成功のカギ。あいまいな指示ではあいまいな結果しか出ない - 試行錯誤を前提で行う
最初から上手くいくことは少ない。AIと対話を重ねることで、解決策に到達しやすくなる
関連記事
専門性のあるコンテンツが生み出す価値
専門知識の壁が劇的に低くなったからこそ
AIによって「専門知識の壁」が劇的に低くなったことで、以前なら専門家に依頼するしかなかった領域も、気軽にチャレンジできるようになってきました。
もちろん、高度な専門性が必要な場合には専門家の力が必要ですが、思いついたらまずAIとやってみて、それから専門家に相談するのもひとつの手段。この選択ができること自体がとても素晴らしいことです。それは同時に、私自身の専門性も脅かされているわけですが、それはそれ、これはこれです。
大切なのは「行動するかどうか」です。AIという強力な支援者がいるなら、とにかくやってみる。それが新しいことを可能にする一歩になるんだなあと思いながら、今日もClaudeAIと会話をしています。
書いた人
「独立して穏やかに暮らす働き方」を軸にデジタルマーケティングの支援を行っています。自分らしさを出せるSEOライティングとか、自分の商品・サービスのよさを伝えるコンテンツの磨き方がメインのお仕事。趣味はキックボクシングと登山。株式会社Rdesign factory代表取締役。
