開発ストーリー

MoteRakuをつくった理由

2023年ごろから、ChatGPT・Gemini・Claudeといった生成AIが一般に広がり、「AIと対話しながらコードでサイトを作る」人が一気に増えました。デザインを言葉で伝えれば、AIが数十秒でHTMLとCSSを返してくれる。サイト作りのハードルは、確実に下がったはずでした。

ところが、そこで新しい課題が生まれました。できあがったコードを、既存のWordPressサイトにどうやって反映させるかです。固定ページに貼ってみると、テーマのデザインやコードが干渉して、AIが作ったはずの見た目が崩れてしまう。海外でも「テーマやプラグインとCSSがぶつかる」ことは定番のつまずきとして語られ、命名規則を工夫して衝突を減らす、といった回避策が紹介されているほどです。

症状は中途半端なものが多いのも厄介でした。ページ全体を置き換えたつもりでも、ヘッダーとフッターだけテーマのものが残ってしまう。逆に、ページの見た目はうまく反映できたのに、日々の記事だけはテーマのブロックエディタで書きたいのに全部が置き換わってしまう。「あちらを立てればこちらが立たず」の状態です。

プログラミングがもともとできる人なら、子テーマを作りカスタムテンプレートを書いて対応できます。しかし知識がない人は、この場面でChatGPTやGemini、Claudeに聞いても、テンプレート階層やfunctions.phpといった前提知識の壁にぶつかり、結局つまずいてしまう。AIはコードを書けるようになったのに、それを「効かせる場所」が無い——これが、私たちが見つけた本当の課題でした。

だから、「貼るだけで効く場所」を作った

MoteRakuは、この課題だけを解決するために作った最小のプラグインです。

• AIが作ったHTML/CSSを貼ると、テーマを一切通さない白紙キャンバスでそのまま表示（干渉ゼロ）
• 共通ヘッダー・フッターは全ページに自動反映。テーマ側のヘッダーは自動で非表示
• 記事の個別ページは今まで通りお使いのテーマのまま。ブロックエディタの快適さはそのまま

「枠はAIと自分の手で、記事は使い慣れたテーマで」。この役割分担なら、知識がなくてもAIとの対話だけでサイトを作り、育て続けられます。

参考リンク

同じ課題を扱った記事・体験談です（外部サイト）。

• My Journey to Creating a WordPress Plugin With ChatGPT（Themeisle・英語） — ChatGPTのCSSが他のテーマ・プラグインと衝突する問題と、命名規則での回避策に触れた開発記
• Why ChatGPT Keeps Saying WordPress Will Make You Lose Your Mind（英語） — AIで作ったコードをWordPressに載せる難しさを扱ったコラム
• ChatGPTでWordPress化はできる？実際にやってみた（らくらくエンジニア） — HTMLからのWordPress化を実践し、できる範囲と限界を検証した記事
• 無料WordPressテーマCocoonをChatGPTでカスタマイズする方法（1ミリ独歩） — 既存テーマの枠内でAIカスタマイズする際の工夫
• HTMLとCSSでレイアウト崩れを修正！ChatGPTで解決 — 貼り付け後のレイアウト崩れをAIと修正していく体験談