【ITニュース解説】We migrated a Jimdo site to Neleto with a few Claude prompts, and the Lighthouse scores tell the whole story
2026年09月15日に「Dev.to」が公開したITニュース「We migrated a Jimdo site to Neleto with a few Claude prompts, and the Lighthouse scores tell the whole story」について初心者にもわかりやすく解説しています。
ITニュース概要
AI（Claude）を使い、JimdoサイトをNeletoへ移行した事例だ。プロンプト指示だけでサイトを再構築し、Lighthouseで評価。初回はアクセシビリティが低下したが、追加プロンプトで問題を解決した。結果、サイトのパフォーマンスとアクセシビリティが大幅に向上し、AIによる迅速な改善が可能だと示された。
ITニュース解説
今回のニュースは、既存のウェブサイトを、人工知能（AI）と新しいコンテンツ管理システム（CMS）を使って、より高性能で柔軟なサイトへと移行した事例について解説している。ウェブサイトの制作や運用に興味を持つシステムエンジニアの卵たちにとって、現代のウェブ開発がどのように進化しているかを知る良い機会となるだろう。
まず、移行元のウェブサイトは「Jimdo」というサービスで構築されていた。Jimdoは、専門知識がなくても簡単にウェブサイトを作れるツールであり、WixやSquarespaceなどと同様に、多くの個人事業主や中小企業に利用されている。これらのサービスは手軽さが魅力だが、その裏側にある技術基盤、いわゆる「スタック」を開発者が自由に操作することは難しいという制約がある。サイトの見た目は良くても、内部構造や性能に深く踏み込んで改善するには限界があるのだ。このJimdoサイトは、Googleが提供するウェブサイト品質評価ツール「Lighthouse」で評価したところ、パフォーマンスが88点、アクセシビリティが88点という結果だった。これは決して悪い数字ではないが、ページの読み込み速度を示す「Largest Contentful Paint (LCP)」が約2秒、最初のコンテンツが表示されるまでの時間「First Contentful Paint (FCP)」が約1.3秒と、まだ改善の余地があった。また、アクセシビリティには4つの問題が潜んでおり、SEO（検索エンジン最適化）のスコアも不完全な状態だった。
そこで登場するのが、今回の主役の一つである新しいCMS「Neleto」とAI「Claude」だ。Neletoは、開発者がウェブサイトのスタックを完全にコントロールできるように設計されたCMSである。そして、Claudeはテキストによる指示、つまり「プロンプト」を受け取ることで、様々なタスクを実行できるAIである。今回の移行では、特別なプログラミングコードを書くことや、Jimdoのようなページビルダーを開いて手作業で要素を配置するといったことは一切行わず、Claudeに一つのプロンプトを与えるだけでサイトの複製を試みた。そのプロンプトの内容は、「このJimdoサイトをNeleto CMSに1:1で複製し、完全にコンポーネント駆動型で構築せよ。テキスト、画像、リンク、色といったすべての要素をCMSから編集可能にせよ。全てのページを構築後、自分で検証してから報告せよ。」というものだった。
Claudeは、このプロンプトを受けて、まず「ヘッドレスChrome」という、画面に表示されないウェブブラウザを使ってJimdoサイトのスクリーンショットを撮り、そのサイトの「計算されたスタイル」つまりフォントの種類、色、サイズ、余白、ボタンの形といったデザイン要素を正確に抽出し、模倣した。そして、Neletoが求める「1つのレイアウト、セクションごとに1つのコンポーネント、ルートごとに1つのページ」という構造に従って、サイトを「コンポーネント駆動型」で構築した。コンポーネント駆動型とは、ウェブサイトを独立した小さな部品（コンポーネント）の組み合わせとして作る開発手法で、柔軟性が高く、後からの編集や再利用が容易になる。さらに、Claudeはサイト構築後に、自動的にウェブサイトのアクセシビリティ問題を検出するツール「axe-core」を使って自身でウェブサイトを検証し、問題を修正するよう指示されていた。この一連の作業は、Neletoの「MCPコネクタ」というインターフェースを通じて、AIの指示とCMSの連携により自動で行われた。
このAIによる最初の移行が完了した後、再びLighthouseで新しく構築されたNeletoサイトを評価した。その結果、パフォーマンスは97点、SEOは100点と大幅に改善され、LCPも1.1秒、FCPも0.7秒と読み込み速度が向上していた。これは非常に良い結果であったが、予想外の問題も発生した。アクセシビリティスコアがJimdoサイトの88点から81点へと低下してしまったのだ。多くの移行事例ではこうした「失敗」は隠されがちだが、このニュースでは正直に報告されており、むしろ問題が起きたからこそ得られる学びがあるとして重要視されている。
Lighthouseが指摘したアクセシビリティの問題は以下の4点だった。一つ目は「html-has-lang」で、ウェブページの言語を示す<html lang="ja">のようなlang属性が設定されていなかったため、画面読み上げソフト（スクリーンリーダー）がページの言語を正しく認識できないという問題である。二つ目は「label」で、フォームの入力欄に適切なラベルが関連付けられていなかった。これもスクリーンリーダー利用者が入力欄の内容を理解する上で非常に重要である。三つ目は「heading-order」で、ウェブページの見出し（<h1>、<h2>など）の階層が正しく降順に並んでいなかった（例：<h2>の次に<h4>がくるなど）。これにより、コンテンツの構造が分かりにくくなる。四つ目は「color-contrast」で、テキストの色と背景の色のコントラスト比が、ウェブアクセシビリティの国際的な基準である「WCAG AA」を満たしていなかった。これは視力の弱い人や色覚特性を持つ人がテキストを読みにくくする原因となる。これらの問題は、ウェブサイトの見た目を1対1で複製するだけでは解決できない、意味論的な情報や構造に関する課題であることを示している。
しかし、Neletoのシステムでは、開発者がサイトの「スタック」を完全にコントロールできるという強みがある。先述のJimdoのような既存のビルダーでは手の届かない部分も、Neletoではすべてがコンポーネントとして管理され、個々の値を編集できるため、AIへの追加のプロンプトによって迅速に修正することが可能だった。具体的な修正指示として、「レイアウトにlang属性を追加せよ」「フォーム入力に適切な関連ラベルを与えよ」「見出しの階層を正しい順序に修正せよ」「テキストの色をWCAG AAコントラスト基準を満たすように調整せよ。ただし、ブランドカラーを変更する前に私に確認せよ。」といったプロンプトがClaudeに与えられた。最後の指示には、ブランドイメージを損なわないよう、AIが自動で色を変更するのではなく、人間が最終的な判断を行うという重要な条件が付けられている。これは、AIが優れた自動化能力を持つ一方で、人間の判断やクリエイティブな意思決定が依然として重要であることを示している。
わずか20分後、これらの修正を反映したNeletoサイトを再度Lighthouseで評価したところ、驚くべき結果が得られた。パフォーマンスは99点、アクセシビリティは100点、ベストプラクティスは100点、SEOも100点と、ほぼ完璧なスコアを達成したのだ。JimdoサイトのLCPが1.9秒、FCPが1.3秒だったのに対し、Neletoサイトはそれぞれ0.9秒と0.5秒と、約3分の1の時間でページが表示されるようになった。元のJimdoサイトもアクセシビリティが88点だったが、実は今回検出されたような問題が隠されていた。今回の移行は、これらの潜在的な問題を表面化させ、AIとNeletoの組み合わせによってそれらを実際に修正できたという点で非常に価値がある。
この事例は、現代のウェブサイト構築における重要なポイントを示している。第一に、開発者がサイトの「スタック」を所有し、自由にコントロールできることの重要性だ。これにより、既存のビルダーでは手が届かない深層の問題にも対応できるようになる。第二に、AIがサイト構築や改善の多くの「労働」部分を担い、人間は品質管理やブランド保護といった重要な意思決定に集中できることである。そして第三に、品質を犠牲にすることなく、サイト移行や改善を驚くほど迅速に行えることだ。今回の事例では、移行、測定、問題特定、修正、再測定という一連のループがわずか半日で完了し、最終的に元のサイトをあらゆる点で上回る高品質なサイトが完成した。
この技術は、Jimdo、Wix、Squarespaceといった既存のサイトビルダーを使っている人々に、より高度なコントロールと性能を提供する新しいウェブサイト構築の可能性を示している。AIと開発者が完全にコントロールできるCMSの組み合わせは、ウェブ開発の未来を大きく変えるかもしれない。