プログラミングの基礎知識は多少ある。でも、自分でゼロからECサイトを作るのは無理だと思っていた。それがAIへの日本語指示だけで、デザイン・サーバー設定・特商法ページまで全部できてしまった話をします。
Vibe Codingとは？
Vibe Codingとは、AIに自然言語（日本語や英語）で指示を出しながらソフトウェアやWebサイトを作っていく開発スタイルのことです。
自分でコードを書く必要はなく、「こういうデザインにしたい」「このボタンをここに置きたい」と伝えるだけでAIが実装してくれます。使ったツールはClaude Code。ターミナルからClaudeに指示を出せるCLIツールです。
実際にやったこと
作ったのはWordPress＋WooCommerceを使った電気系商品のECサイトです。自分でやったのはサーバーとドメインの契約だけ。あとは全部Claude Codeへの日本語指示で進めました。
- WordPressのインストール・初期設定
- テーマ（Astra）のカスタマイズ・デザイン調整
- WooCommerceの設定（商品登録・送料・決済）
- 特定商取引法ページの文言作成
- SSHでのサーバー操作・WP-CLIの活用
- functions.phpへのカスタムコード追加
法律が絡む特商法ページの文言まで、「こういう内容にしたい」と伝えれば叩き台を作ってくれました。あとは内容を確認して微調整するだけ。
一番驚いたこと｜Astraの管理画面より速い
Astraはカスタマイズ性が高いテーマですが、設定画面を開いてどこを変えればいいか探すより、Claude Codeに「このフォントサイズを16pxにして」と指示する方が圧倒的に速くて確実でした。
Astraの管理画面をいじる頻度がどんどん減っていきました。テーマの設定画面は「あるけど使わない」という状態になっていきます。
失敗談｜曖昧な指示はトークンの無駄遣い
何度も失敗しました。一番多かったのが「指示が曖昧すぎる」パターンです。
例えば「フォントを少し大きくして」と伝えると、AIはどのフォントをどこで変えればいいか分かりません。CSSなのか、Astraの設定なのか、functions.phpなのか——変更できる場所が複数あるので、AIも推測しながら試行錯誤を繰り返します。結果、トークンを大量消費して、直したい箇所と全然違う場所が変わっていたりします。
最終的にどうしたかというと、ブラウザの検証ツール（デベロッパーツール）で変えたい要素を特定して、「このCSSセレクタのfont-sizeを変えて」と具体的に伝えるようにしました。または、画面のスクショを渡して「この赤枠の部分」と視覚的に指示する方法も使いました。
気づいたら詳しくなっていた
失敗を繰り返すうちに、「なぜこの指示ではうまくいかないのか」が分かってきます。CSSの優先度の話、WordPressのフック、WooCommerceの設定の構造——調べながら指示を具体化していくうちに、自然と知識がついていきました。
Vibe Codingは「何も知らなくていい」ではなく、「知識がなくても始められるが、具体的に指示できるほど結果が良くなる」ものだと思います。やればやるほど指示の精度が上がる、という感覚です。
まとめ
- 日本語指示だけでデザイン・設定・法的ページまで作れた
- Astraの管理画面を触るより、AIへの指示の方が速くて確実
- 曖昧な指示はトークン無駄遣い・具体的な指示が成功のカギ
- 失敗しながら自分も詳しくなっていく
「コードが書けないとECサイトは作れない」は、もう過去の話です。ただし、AIに任せっぱなしではなく、具体的に伝える力が結果を左右します。
