2025年04月01日

Claude Codeでホームページをノーコードでリニューアルやってみた(#1)

Claude Code を自社サイトリニューアルで格闘した結果、獲得したノウハウを少し共有の1回目。今回ほ最も常用したプロンプトについて披露

Claude Codeでホームページをノーコードでリニューアルやってみた(#1)

Claude はサービス精神旺盛



突伝ですが。
とにかくChatGPTのあらゆるモデルと比較して Claude 3.7 Sonnetは極めてサービス精神が旺盛だ。短いプロンプトで、期待以上の生成結果が得れる。

文書作成、プログラミング、あらゆるシーンで期待以上の結果が得れる...のだが、しかし ある程度できあがって、いざ調整となるとサービス精神旺盛なのが仇になって指示以上を作業を実施し、破壊するなんて事がしばしば。

今回、採用強化の為に、HTMLやCSSは直接触ることは絶対にしないと心に決めて Claude Codeでリニューアルを実施してみたので、少しだけ出会ったトラブルと対処ノウハウを共有したい。

魔法の言葉 『絶対服従』『指示外の事はするな』『集中』



まず結論から、タイトルには日頃聞き慣れない/言い慣れない言葉が並んでいるが、Clode Code だけでノーコーディングを乗り切ろうとすると、調整局面においては指示プロンプトの最後に『絶対服従』『指示外の事はするな』『集中』と厳しい言葉を添えると的確に作業を実施してくれる。逆に、これら魔法の言葉を入れないと、指示以外の作業を実施してしまう。


日頃からクライアントには、「生成AIにパワハラしてはダメ」と言っている立場からすると、魔法の言葉はあまりに刺激的。

ChatGPTではハルシネーションが発生して ぶっ飛んで内容が全く行けてないことが往々に発生する。
要は想定範囲内で結果の良し悪しの問題(スコープ内で期待内)。

一方、Claude は想定外の作業、すなわち作業スコープの拡大し、ユーザ期待に応えようしてくれる。
最終調整局面では、これが返って全体ファイルの破壊につながる場合がある。

幾度かは、破壊工作に耐えきれず Claude が喧嘩が耐えない状態にまで...
結局の所 この魔法の言葉が破壊工作の抑止ににつながった。


指示外の事はするな。絶対服従。集中



魔法の言葉「根本原因を調査し抜本的対策を検討し報告。命令に絶対服従」



更に意図した通りに Claude と楽しく仕事をするには、意図しない事象に出会った際、いきなり修正を「根本原因を調査し抜本的対策を検討し報告。命令に絶対服従」とすると、丁寧に原因分析をした上で対応策を複数掲示してくれる。


根本原因を調査し抜本的対策を検討し報告。命令に絶対服従



作業をしている内に対象ソースの実装方針に一貫性が取れず所謂「汚いソース」になってくる。Claudeは気が向かない以上は、対処療法と その時気づいた命令以外の事を対処する傾向がある為、確り考えさせ実装方針を人間側で維持してやることが重要だ。

「じゅあ、自分で書けよ」なんて言われそうだが、そこはノーコーディングということで、

最後に



先ずは魔法の言葉について、最も多用したプロンプトを紹介しました。
まだまだ、Claude Code と仲良く仕事するには幾つかの工夫が必要なので、順次記事を書いて行きます