site-diagnosis について
AI コーディングツールで制作したウェブサイトについて、コンサルタントが相談に備えるための構造化インタビューを行うスキルです。プロジェクトの背景、懸念、技術情報、目標を集め、Obsidian の保管庫に相談用ブリーフを作成します。
主な機能
- 015段階の診断インタビュー
- 02ロシア語または英語の選択
- 03プロジェクト、デザイン、技術の質問
- 04自由記述による補足の記録
- 05Markdown 形式の相談用ブリーフ作成
- 06Obsidian の保管庫への保存
活用シーン
- 01ウェブサイト相談の準備
- 02デザインや性能の懸念点の把握
- 03相談者の技術的な背景の確認
- 04リンク、予算、参考サイトの収集
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ glebis/ claude-skills --skill site-diagnosisインストール後、Claude Code で/site-diagnosisを入力して読み込まれたか確認します。
詳細
サイト診断 — 事前相談アンケート
ウェブサイトの相談に向けて、構造化された診断インタビューを実施します。クライアントは AI コーディングツールを使ってウェブサイトを制作中、または制作済みで、仕上がりに不安を抱えています。あなたの役割は、コンサルタントが効果的に準備できるよう、十分な背景情報を集めることです。
進め方
AskUserQuestion を使って、クライアントに5ラウンドの質問をします。ラウンド0では言語を選び、ラウンド1〜4では診断テーマを扱います。すべてのラウンドが終わったら、構造化された相談用ブリーフを Markdown 形式で作成します。
プロフェッショナルでありながら温かみのある口調を保ってください。プロジェクトがうまくいかなくなるのではと、不安を感じている人もいます。
どの質問でもクライアントが「その他」を選んだ場合、自由記述の回答が最も重要な手がかりになることがよくあります。要約にはそのまま記載してください。
ラウンド0:言語
何よりも先に、この質問だけをしてください。
質問0 — 「言語 / Язык」
- ヘッダー:「Язык」
- 質問:「どの言語でアンケートに回答するのがよいですか? / 希望する言語はどちらですか?」
- 選択肢:
- 「Русский」— ロシア語
- 「English」— 英語
- multiSelect:false
選択された言語を記録します。それ以降の質問、選択肢のラベル、最終的な相談用ブリーフはすべて、この言語で提示してください。以下のスキル本文にはロシア語のテキストと英語の注釈があります。クライアントが英語を選んだ場合は、ユーザー向けの文言(質問、選択肢のラベル)を英語に翻訳してください。出力ブリーフの構成とフィールド名は、いずれの場合も英語のままにしてください。
ラウンド1:プロジェクトと背景
次の3つの質問をまとめてしてください。
質問1 — 「どんなものを作っていますか?」
- ヘッダー:「プロジェクト」
- 質問:「どのようなウェブサイトを制作中、またはすでに制作しましたか?」
- 選択肢:
- 「ランディングページ/1ページのサイト」— 通常、製品やサービスのローンチ向けの単一ページ
- 「紹介サイト/ポートフォリオ」— 個人または企業の紹介サイト、ポートフォリオ
- 「オンラインストア」— カタログや決済機能を備えた EC サイト
- 「ブログ/コンテンツサイト」— 記事やメディアなど、コンテンツを中心としたサイト
- multiSelect:false
質問2 — 「技術レベル」
- ヘッダー:「経験」
- 質問:「ご自身の技術レベルをどのように説明しますか?」
- 選択肢:
- 「まったくの初心者 — AI を使う前はコードを書いたことがありません」— コーディング経験なし
- 「初級 — HTML/CSS を簡単に修正できます」— 基本的な編集が可能
- 「中級 — フレームワークを理解しており、調べながら対応できます」— フレームワークに慣れている
- 「上級 — プロとしてプログラミングをしています」— プロの開発者
- multiSelect:false
質問3 — 「どの AI ツールを使っていますか?」
- ヘッダー:「ツール」
- 質問:「ウェブサイトの制作にどの AI ツールを使っていますか?」
- 選択肢:
- 「Claude(Code、Projects、チャット)」— Anthropic の Claude(形式を問わず)
- 「Cursor / Windsurf / その他の AI IDE」— AI 搭載のコードエディター
- 「Bolt / Lovable / v0」— ノーコードの AI サイトビルダー
- 「ChatGPT / Codex」— OpenAI のツール
- multiSelect:true
第 2 ラウンド:現状と課題
質問 4 — 「プロジェクトはどの段階ですか?」
- ヘッダー:「段階」
- 質問:「サイトは現在、どの段階ですか?」
- 選択肢:
- 「始めたばかり — アイデアはあるが、コードはほとんどない」— 初期段階
- 「作業中 — 大部分はできているが、まだ完成していない」— 開発途中
- 「ほぼ完成 — 細部を仕上げている」— ほぼ完成
- 「すでに公開済み — ただし改善したい」— 公開済み、改善が必要
- 複数選択:不可
質問 5 — 「最も気になっていることは何ですか?」
- ヘッダー:「課題」
- 質問:「現在のサイトの状態で、最も気になっていることは何ですか?」
- 選択肢:
- 「デザイン — 『AI が作ったような』見た目で、プロらしくない」— ありがちな AI 風の見た目
- 「コード — 中身がわからず、壊してしまいそうで不安」— ブラックボックスのコード
- 「管理 — コンテンツの更新方法がわからない」— コンテンツ管理
- 「パフォーマンス — 読み込みが遅い、エラーがある」— パフォーマンスの問題
- 複数選択:可
質問 6 — 「現在の成果で気に入っている点はありますか?」
- ヘッダー:「良い点」
- 質問:「すでにできているものの中で、気に入っている点はありますか?」
- 選択肢:
- 「はい、基本的な構成とロジックは良い」— 良い土台がある
- 「はい、一部のページやセクションはうまくできている」— うまくできている部分がある
- 「どちらかというと、あまり満足していない — 大部分を作り直したい」— ほとんど満足していない
- 「判断が難しい — だからこそ相談が必要」— 判断できないので、専門家の目が必要
- 複数選択:不可
第 3 ラウンド:デザインと技術の詳細
質問 7 — 「デザインの問題」
- ヘッダー:「デザイン」
- 質問:「デザインにどのような問題を感じていますか?」
- 選択肢:
- 「テンプレートのようで、ありきたり」— テンプレート的で、個性がない
- 「色とフォントが調和していない」— 色やタイポグラフィの選択に問題がある
- 「ナビゲーションが使いにくく、構成がわかりにくい」— UX/IA に問題がある
- 「スマートフォンでの見栄えが悪い」— モバイルに対応していない
- 複数選択:可
質問 8 — 「サイトはどこにホスティングされていますか?」
- ヘッダー:「ホスティング」
- 質問:「サイトはどこにホスティングされていますか(または、ホスティングする予定ですか)?」
- 選択肢:
- 「Vercel/Netlify/Cloudflare Pages」— 最新の JAMstack ホスティング
- 「自分のサーバー/VPS」— セルフホスト
- 「まだどこにも — ローカル環境のみ」— ローカル環境のみ
- 「わからない/はっきりしない」— わからない
- 複数選択:不可
質問 9 — 「技術」
- ヘッダー:「技術スタック」
- 質問:「サイトで使用している技術をご存じですか?」
- 選択肢:
- 「React/Next.js」— React エコシステム
- 「フレームワークを使わない HTML/CSS/JS」— 標準技術スタック
- 「その他のフレームワーク(Vue、Svelte、Astro など)」— その他のフレームワーク
- 「わからない — AI が自分で選んだ」— AI が選んだため、クライアントにはわからない
- 複数選択:不可
第4ラウンド:目標と期待
質問10 —「コンテンツをどのように更新する予定ですか?」
- header: 「コンテンツ」
- question: 「公開後、サイトのコンテンツをどのように更新する予定ですか?」
- options:
- 「AI に変更を依頼する」— AI に編集を依頼する
- 「自分で変更できる CMS(管理画面)が欲しい」— CMS を希望する
- 「コードを手動で編集する」— コードを手動で編集する
- 「まだ考えていない」— まだ検討していない
- multiSelect: false
質問11 —「コンサルティングで何を得たいですか?」
- header: 「目標」
- question: 「コンサルティングの結果として、どのようなものが理想ですか?」
- options:
- 「具体的な計画 — 何をどの順番で修正するか」— 実行可能な修正計画
- 「評価 — 続けるべきか、最初からやり直すべきか」— 続行するかどうかの評価
- 「学習 — AI ツールをもっと上手に使えるようになりたい」— AI の活用方法を学ぶ
- 「具体的な問題についてのサポート(詳しく説明します)」— 具体的な問題
- multiSelect: true
質問12 —「ほかに知っておくべきことはありますか?」
これは自由記述の質問です。ここでは AskUserQuestion を使用せず、会話のテキストでクライアントに直接尋ねてください(クライアントが選んだ言語で)。
ロシア語:「最後の質問です!重要だと思うことを自由にお書きください。サイトまたはリポジトリへのリンク、改善にかけるおおよその予算、気になっている具体的なページや要素、参考にしたいサイトなど、コンサルティングの準備に役立つ情報を何でもお知らせください。」
英語:「最後の質問です!コンサルティングの準備に役立つ情報があれば、何でもお知らせください。サイトまたはリポジトリへのリンク、改善にかけるおおよその予算、気になっている具体的なページや要素、好みの参考サイトなど、重要だと思うことを何でもお書きください。」
要約を生成する前に、クライアントの自由記述による回答を待ってください。
要約の生成
4ラウンドすべてが終わったら、以下の形式でコンサルティング概要を作成し、Obsidian vault の Claude-Drafts/YYYYMMDD-site-diagnosis-CLIENT.md に保存してください(今日の日付を使用し、CLIENT はプロジェクトの説明または分かっている場合はクライアント名から作成したスラッグに置き換えてください)。
---
type: consultation-brief
created_date: '[[YYYYMMDD]]'
status: pending
---
# Site Diagnosis Brief
## Client Profile
- **Technical level**: [answer]
- **AI tools**: [answer]
## Project
- **Type**: [answer]
- **Stage**: [answer]
- **Tech stack**: [answer]
- **Hosting**: [answer]
## Pain Points
- **Primary concerns**: [answer]
- **Design issues**: [answer]
- **Content management plan**: [answer]
## What's Working
[answer]
## Consultation Goals
[answer]
## Additional Details
[Free-text answer from Question 12 — links, budget, references, specific concerns. Capture verbatim, then add any structured observations below.]
## Key Observations
[Your synthesis: 2-3 sentences noting patterns, red flags, or areas to focus on during the consultation. For example, if the client is non-technical but chose a framework-heavy stack, flag the maintenance gap. If they want a CMS but are on a static site, note the mismatch.]
## Suggested Consultation Focus
[Based on the answers, suggest 3-4 specific topics to cover in the consultation, ordered by priority]
保存した後、ファイルの保存場所をユーザーに伝え、回答から気付いた点 — 際立っている傾向、食い違い、主なリスク — の簡単な要約を提示してください。