← 一覧に戻る
Zenn記事ドラフト — 非エンジニアのvibe-codingに「理解」を足すプラグイン
2026年2月27日 更新 · 📝 記事ドラフト
📌 一言でいうと
「雰囲気で作る」vibe-codingを卒業したい非エンジニア向けに、AIの設計計画を読める形に自動翻訳するプラグインの紹介記事
🎯 記事の核心メッセージ
vibe-coding（AIに雰囲気で指示を出してコードを書かせる開発スタイル）の最大の弱点は「自分が何を作っているか理解しないまま進む」こと。plan-viewer は毎回の設計承認で理解を強制するプラグイン。
ターゲット読者は「エンジニアじゃないけど Claude Code で自分でプロダクトを作っている人」。つまり自分と同じ立場の人に向けて書く。
🏗️ 記事の構成（6セクション）
1
前提 — 「自分は非エンジニアだ」
非エンジニアが Claude Code で vibe-coding している。でも「自分が何を作っているか」を理解できていない瞬間がある。「雰囲気でやる」部分を減らしたい。
2
plan-viewer の紹介
設計計画を確定する前に、非エンジニア向けHTMLへの翻訳を強制する仕組み。「後で読もう」は一生読まないから、ゲートフック（自動ドアのセンサーのような仕組み）でブロックする。
3
具体例 — Before / After
AIが出す専門用語だらけの文章が、「括弧解説 + なぜ必要か」のルールでどう変わるかを実例で見せる。ここが記事のハイライト。
4
なぜ vibe-coding に効くのか
理解せずに進めると → バグの原因が分からない、機能追加の場所が分からない、人に説明できない。plan-viewer を挟むと「vibe が理解に変わる」。
5
セキュリティの話
「AI に監査させる」は非エンジニアでもできる品質管理の手段。2つの AI（Codex + Claude）のダブルチェックで実際に脆弱性を4件発見・修正した話。
6
文章ルールが本質
プラグインの価値は技術じゃなくて文章ルール。AIに「優しく書いて」だけだと出力がブレる。「括弧解説 + なぜ必要か」のパターンを具体的にルール化することが鍵。
📊 Before / After（記事のハイライト部分）
✕ AIが出すplanそのまま
- dependency arrayにuserIdを追加
- auth.tsのvalidateTokenを修正
- APIエンドポイントを追加
○ plan-viewerを通した後
- 括弧で専門用語を解説
- 「なぜ必要か」の理由を添える
- ファイル名に役割の説明をつける
💡 ポイント
記事ファイル: ~/plan-viewer-plugin/article-draft.md にZenn投稿用のMarkdownドラフトを保存済み。Cursorで開き済み。
GitHub ユーザー名: ramenumaiwhy に統一済み（plugin.json, docs LP, 記事内URL全て）。
残タスク: スクリーンショット撮影、画像パス設定、最終校正。
記事のトーン: 非エンジニアの一人称で書いている。「自分はエンジニアではない。でも〜」から始まる。同じ立場の人に共感してもらう構成。