🟨 この記事はClaude Code(AI)と2ヶ月で開発した日本初のWebサイト校正ツール「fuSen」の開発ブログです。登録不要でデモを試せます → https://app.fusen.cloud/demo
第四話:世界初ノーコードCMS対応が動いた瞬間
fuSenを作ると決めたとき、どうしても確かめたい要件があった。
それはノーコードサイトへの対応だ。
Wix・Jimdo・ペライチ・STUDIO。日本の中小企業や個人事業主のWebサイトの多くは、これらのノーコードCMSで作られている。事実ウチのクライアントやデザイナー仲間も使っている人は多い。また、Wixで制作依頼されるケースも多かった。
Wixにも校正ツールはあるが、非常に使いづらかったし、Markupなどを使うと表示できない箇所があるし、校正ツール内だとレイアウトがズレてしまう。
「技術的に難しいです」
Claudeに聞いてみた。
「Wix・Jimdoなどのノーコードサイトをiframeで表示することはできますか?」
返ってきた答えは「技術的に難しいです」だった。
Claudeの理由は明確だった。ノーコードCMSのサイトはX-Frame-OptionsやContent-Security-Policyというセキュリティヘッダーが設定されていて、通常のiframeでは読み込みをブロックされてしまう。既存の校正ツールが軒並みノーコードサイトに対応できていない理由はここにある。
そうか、だからか。だから、Markupでもまともに表示できないのか。
でも自分は諦めたくなかった。
やり方は必ずある
Claudeから「技術的に難しい」という言葉を聞いたとき、「必ず別の方法があるはずだ」という確信もあった。
Web制作を20年やってきて、技術的な制約を別の方向から回避する場面を何度も見てきた。直接できないなら、別のアプローチがある。
Claudeが「難しい」と言った理由を整理しながら、別のアプローチはできないか考えた。
iframeで直接読み込むのがダメなら、別の方法でサイトのコンテンツを取得して表示できないか。Webの仕組みを頭の中で整理しながら、一つのアイデアが浮かんだ。
詳しくは書けないが、この方法ならできるんじゃないかと、Claudeに提案した。
「たしかにそれなら実装できます」
Claudeの返答は「たしかにそれなら実装できます」だった。
やっぱり!!それみろ!!!Claude!笑 実装が始まった。
技術的な課題は一つではなかった。ノーコードサイトはそれぞれ独自の構造を持っていて、WixはWixなりの、JimdoはJimdoなりのクセがある。一つ解決したら別の問題が出てくる。
それでも着実に前に進んだ。
動いた瞬間
WixのサイトをfuSenのプレビュー画面に表示するテストをした。
画面にWixのサイトが正しく描画された。
ピンを刺してみた。コメントが打てた。
「動いた。」
めちゃくちゃ嬉しかった!!
後から調べてわかったことだが、ライブサイトへの直接コメントでノーコードCMSに対応したツールは、世界中を探しても存在しなかった。
コードが書けないWebディレクターが提案したロジックが、世界初の機能を生んだ瞬間だった。
AIの技術と人間の経験という組み合わせが、世界初を作った
この経験で気づいたことがある。
AIは「現状の技術の組み合わせで何ができるか」を知っている。でも「現場で何が必要か」を知っているのは、人間だ。
Claudeが「技術的に難しい」と言ったとき、自分がそれを覆せたのは、20年の現場経験から「絶対に必要な機能だ」という確信があり、同じく現場経験から、回避方法を思いついたからだ。
AIの技術と人間の経験が組み合わさり、世界初を作った。
それは自分にとって、この開発で一番大切な発見だった。
次回:開発中、Claudeが突然ブラウザを自分で操作し始めた話。「え、勝手に動いてる」と思った瞬間のこと。
fuSen|Webサイト上に付箋を貼るように、フィードバックを残せるオンライン校正ツール。ベータ版リリース中、全機能無料。
👉 無料で始める → https://fusen.cloud/
👉 登録不要でデモを試す → https://app.fusen.cloud/demo