【月3,000円で20万円のスキルを手に入れた】Claude DesignでWordPressテーマをゼロから作る方法 ——未経験でもできた全記録とランサーズ案件への活かし方

「WordPressのデザインを変えたいけど、プログラミングができないと無理なんじゃないか」
「AIを使えばサイトが作れると聞くけど、実際にどこまでできるのか信じられない」

そう思っていました。つい最近まで。

プログラミング未経験・サイト制作未経験の筆者が、Claude Designだけを使ってWordPressのフルカスタムテーマをゼロから作りました。コードを一行も書かずに。

この記事を読めば、Claude Designを使ったサイト制作の全体像・実際にできること・ランサーズで案件につなげる方法がわかります。

なぜサイトを作り直そうと思ったのか

毎日記事を更新しているのに、情報が埋もれていく——そう感じていました。

訪れた人が読みたい記事を探しにくい状態になっていて、UI（使いやすさ）の観点でサイトを改善したいと思っていました。さらにGoogle AdSenseの審査に必要な固定ページ（プライバシーポリシー・お問い合わせ等）の整備も必要でした。

「どうせ変えるなら、理想のデザインにしたい」

その思いがあったのに、既存のサイトをカスタマイズしようとするたびに壁にぶつかり続けました。Claudeに相談しながら手順通りに試しても、直したつもりが別の場所が崩れる。その繰り返しでした。

そこで気づきました。「ファイルごとゼロから作り直す」という発想に切り替えれば、この問題は解決できると。

Claude Designとは「デザインとコードを同時に作るAI」

Claude Designは、Anthropicが提供するAIツールです。

通常、WordPressのカスタムテーマを作るには、デザイン設計・HTML/CSSコーディング・PHPでの実装・サーバーへのアップロードという複数のステップが必要で、それぞれに専門知識が必要です。Claude Designはこのハードルを一気に下げてくれます。「こういうサイトにしたい」と伝えるだけで、デザインのプレビューと実際に使えるコードを同時に出力してくれます。

実際にやった全体の流れ

一番驚いたこと

テーマフォルダにファイルを置くだけで、サイトが完成した。

生成されたファイルをテーマフォルダに置いて有効化するだけ。コードを一行も書かなくていい。

「CSSを一行ずつ書き換えるのではなく、ファイルごと入れ替える」という発想の転換がすべてでした。

Before / After

百聞は一見にしかずです。実際の変化をご覧ください。

Cocoonのデフォルト感から、フルカスタムのオリジナルデザインへ。かかった時間は2日間。コードは一行も書いていません。

このスキル、ランサーズで売れます

ここが今回の記事で一番伝えたいことです。

月3,000円のClaude Proでこの作業ができるなら、1案件取るだけで何ヶ月分もの元が取れます。しかも「WordPressテーマを実際に作った実績」として、ポートフォリオにも使えます。

ランサーズで案件を取るために必要なこと

1. 実績を作る：今回のサイトがそのまま実績になります
2. ポートフォリオを作る：Before/Afterのスクショを用意する
3. 案件に応募する：「WordPress カスタマイズ」「テーマ制作」で検索して応募する

副業として案件を受注するなら、このスキルは今すぐ使えます。

よくある質問

この記事のまとめ

手順の全記録はnoteで公開しています

今回やったことの具体的な手順——Claude Designへの指示文・ファイルのアップロード方法・カスタマイズ箇所・詰まった箇所と解決策——をnoteで全部公開しています。

→ AI Hacks_note記事

ズルいくらい、うまくいく。