WordPressから自社開発サイトに乗り換えた理由
2025.12.12·Vibe Coding·10 min readMUZIUM
他の言語:
日本語···
ウェブサイトは、お客様がクリックしてから数秒で開きますか？もし3秒以上かかるなら、すでに潜在顧客の50%は「戻る」ボタンを押しているでしょう。特に技術、デザイン、サウンドといったウェブサイトのパフォーマンスは、そのまま会社の技術力として映し出されます。
多くの方がウェブサイト制作に「WordPress」を選びます。しかし運営していると、増え続けるプラグイン、低下するローディング速度、毎月かかるホスティング費用に疲弊しがちです。私自身もそうでした。そこで決意しました。WordPressを捨て、いっそゼロから自分で開発しようと。
この記事は、専門の開発者ではない人間がバイブコーディング（Vibe Coding、AIと対話するようにコーディングする手法）を通じてホームページを自社開発した記録です。開発知識がなくても、どのようにして高性能なウェブサイトを作ることができたのか、そのプロセスを通じて得たコスト削減と速度改善の具体的な数値をお伝えします。
1. WordPressのメリットとデメリット
WordPressは全世界のウェブサイトの40%以上を占める強力なCMSです。しかし「何でもできる」というメリットは、逆説的に「何をやっても重い」という致命的なデメリットになります。あらゆることをこなすために存在するため、基本的に読み込まなければならないスクリプトが多すぎるのです。
最大の問題は「プラグイン依存性（Plugin Dependency）」でした。オーディオプレイヤー機能を追加するためにプラグインをインストールすると、そのプラグインは不要なCSSやJavaScriptファイルまですべて読み込んでしまいます。デザインを少し修正しようとするとページビルダー（WP Bakery、Elementorなど）を使う必要があり、これがサイトの速度を指数関数的に低下させます。まるで近所のスーパーに自転車で行こうとしているのに、大型トラックのエンジンをかけるようなものです。
コストの問題も無視できません。WordPressが重くなればなるほど、それを支えるためにより高価なホスティングサーバーを使わなければなりません。トラフィックが少し集中しただけでサイトがダウンする現象を防ぐために、あるいは単純にインスタンスのCPUやメモリの問題で、毎月数万円から数十万円の固定費を支出せざるを得ませんでした。「ホームページの自社開発」は単なる技術的な挑戦ではなく、ビジネスの存続のための必然的な選択だったのです。
💡 Pro Tip: 現在運営中のWordPressサイトの速度が気になる方は「PageSpeed Insights」を試してみてください。オレンジや赤のランプが多いようであれば、基本的なシステム改善からプラグインのダイエットが急務であるか、プラットフォームの移行を検討すべき時期です。
少数のプラグインを入れるだけで大丈夫だと思っていましたが、理想的なテーマと構造、機能を実現するために、膨大な数のプラグインがインストールされることになりました。
2. バイブコーディング（Vibe Coding）
「自社開発」と聞くと、黒い画面に白い文字をカタカタと打ち込むコーディングを想像して、尻込みしてしまいがちです。しかしバイブコーディング（Vibe Coding）の時代が到来し、状況は一変しました。バイブコーディングとは、厳密な文法（Syntax）を暗記して書くコーディングではなく、AIに自然言語で意図を説明し（Vibe）、AIが書いたコードを組み合わせて成果物を作り上げる手法のことです。
私たちはVS CodeでClaudeと共に作業を進めました。私がすべきことは「ヘッダーはスクロール時に半透明に変わるようにして、オーディオプレイヤーは下部に固定してほしい」と明確に指示するだけでした。以前はJavaScriptの非同期処理やCSSのレイアウト構造を理解していなければ実現できなかった機能が、今では「企画・アイデアと的確な質問」さえあれば実装できるようになりました。
この方法は単純にコードをコピー＆ペーストするレベルを超えて、プロジェクト全体の構造をAIが提案してくれます。サウンドスタジオに必要な「レスポンシブ対応のオーディオ波形ビジュアライゼーション」機能も、ライブラリのドキュメントを読み漁ることなく、AIに「WaveSurfer.jsを使って波形を表示して」とリクエストするだけで、あっという間に基本コードが完成します。技術の壁が崩れた場所に、企画の創造性が入り込んだのです。
3. 構造設計：削ぎ落とすほど速くなる（ウェブサイトの軽量化）
WordPressを捨て、自社開発をスタートするにあたって掲げた第一原則は「ユーザー体験とパフォーマンスの最適化」でした。WordPressの重いテーマとプラグイン依存性を取り除き、Next.js 16とNestJSをベースにした現代的なウェブアーキテクチャを採用しました。単に軽いサイトを作るだけでなく、React Server ComponentsとRedisキャッシングを積極的に活用することで、ローディング速度を飛躍的に向上させながら、必要な動的機能も余すことなく備えた堅牢なシステムを構築しました。
開発の自由度が確保されたことで、SEO（検索エンジン最適化）と構造的な効率性も最大化されました。従来のWordPress環境では、テーマやプラグインが強制する不要なスクリプトやスタイルを完全にコントロールすることが困難でした。しかし自社開発により、ページごとに必要なコードだけが読み込まれるよう設計し、セマンティックタグを適切に配置することで、検索エンジンがサイトを明確に理解できる盤石な構造を完成させました。
画像やフォントなどのリソース最適化も、一段と精緻になりました。WordPressが自動生成していた無意味なサムネイルや肥大化したコードを取り除き、Next.jsの機能を活用して最新の画像フォーマットであるWebPを適用しました。さらにフォントの読み込み戦略を見直してレンダリングブロックリソースを最小化することで、初期ローディング速度を改善しました。これらすべてのプロセスは、「何を加えるか」ではなく「何を省けるか」を徹底的に考え抜いた結果です。
4. ホスティング費用の削減：月16万円から6万円へ
自社開発のもう一つの成果は、ホスティング費用の合理化です。従来のWordPress環境では、PHPとDBの重い処理を支えるために、実際のトラフィックやコンテンツ規模に対して過剰に高価な高スペックのホスティングを使用せざるを得ませんでした。パフォーマンスの低下を防ぐために半ば仕方なく支払っていた費用は月16万円程度であり、ビジネスの観点から見れば明らかな非効率でした。
現在はAWS Lightsailにインフラを移行し、費用を6万円台にまで抑えました。Lightsailは高性能なEC2インスタンスと比べてスペックは控えめですが、無駄を削ぎ落とした最適化されたアーキテクチャのおかげで、現在のスペックでも十分すぎるパフォーマンスを発揮しています。ハードウェアの力で乗り切るのではなく、効率的なコードで軽やかに動作しているからです。さらにCloudflareの無料プランを連携してセキュリティとグローバルキャッシング（CDN）も強化したことで、コストを60%以上削減しながら、安定性と速度はむしろ向上するという結果を得ることができました。
💡 Pro Tip: WordPressの定番プラグイン「Contact Form 7」は、すべてのページでスクリプトを読み込み、サイト速度を低下させる主な原因の一つでもあります。自社バックエンド（NestJS）を構築すれば、シンプルなAPI連携だけでメール送信機能を完璧に実装できます。不要な外部サービスやプラグインに依存することなく、スパムフィルタリングからデータ処理まで自分でコントロールできる、軽量で安全な問い合わせシステムを手に入れることができます。
5. パフォーマンス比較（Lighthouse）
開発完了後に最初に行ったのは、Google Lighthouse（ライトハウス）のスコアを計測することでした。結果は衝撃的でした。
WordPress：80点台～
自社開発後：95点台～
結果はGoogle Lighthouse（ライトハウス）のスコアが客観的に証明しています。パフォーマンス（Performance）スコアは79点から91点へと上昇し、特にSEOスコアは61点から満点の100点を記録しました。何より喜ばしいのは、自社開発によって既存サイトよりもはるかに豊かなアニメーションと動的要素を実現しながらも、動作速度は比較にならないほど速くなったという点です。WordPressの持病とも言えたCLS（累積レイアウトシフト）もゼロにすることができ、画面がガタついく現象のない安定したビジュアル体験を提供できるようになりました。
このような技術的改善は、訪問者に即座の快適さをもたらします。ページの読み込みを待つ煩わしさが消えることで、お客様は私たちのポートフォリオとコンテンツだけに完全に集中できるようになりました。「より華やかで、なおかつより速い」という矛盾した目標を達成することで、ビジネスの成長のための最も盤石なデジタル基盤を固めることができました。完璧に整ったSEO環境を土台に、より多くの潜在顧客に私たちのスタジオの価値が滞りなく届けられると確信しています。
これらすべての成果がホスティング費用を大幅に削減しながら実現されたという点は、大きな示唆を持ちます。毎月・毎年支払っていた有料テーマとプラグインのサブスクリプション費用は、今や「0円」になりました。開発プロセスも効率の極みでした。バイブコーディングによって複雑なアーキテクチャと機能を短期間で構築しました。結果的に、コストは最小化しながら技術の主導権を完全に手中に収め、AIと人間の協業によって高性能なウェブサイトを作り上げた成功事例となりました。
6. メンテナンスの自由
WordPressを使っていて最もストレスだったのは「アップデート」でした。WordPressコアのアップデート、テーマのアップデート、プラグインのアップデート……ボタンを一つ間違って押しただけでサイト全体が崩れてしまった経験、皆さんも一度はあるのではないでしょうか。セキュリティの脆弱性のためやむなくアップデートしなければならないのに、するたびに互換性の問題で夜を明かす羽目になりました。さらに一部のプラグインはサブスクリプション形式のため、期間が過ぎるとアップデートのために再度課金が必要でした。
自社開発したサイトにはそんな心配がありません。コードの主権が完全に自分にあるからです。自分がコードを修正しない限り、サイトは永遠にその姿のまま、壊れることなく動き続けます。外部プラグインのサーバーがダウンして自分のサイトが遅くなるようなことも起きません。
もちろん、内容を修正するにはコードを開かなければならない手間はあります。しかしこれもバイブコーディングで解決できます。「プロジェクトセクションに新しいYouTube動画のリンクを追加して」とAIに伝えるだけでコードを書いてくれます。慣れてしまえば、WordPress管理画面にログインしてメニューを探してたどり着くよりも、はるかに速く直感的です。
7. 結論：技術はあくまで手段、本質に集中せよ
WordPressは今でも優れたツールです。ブログやニュースを毎日発信しなければならないコンテンツ中心のサイトであれば、WordPressが正解かもしれません。しかしサウンドスタジオのようにブランディング、ポートフォリオ、パフォーマンスが重要なサイトであれば、そして維持コストを抑えたいのであれば、「重さ」を脱ぎ捨てる必要があります。
バイブコーディングは、その脱出を後押しする最も強力な鍵です。私たちはもはや開発者を雇ったり外注したりしなくても、AIという優秀なアシスタントと共に、思い描くウェブサイトを現実のものにすることができます。重要なのは「コーディングスキル」ではなく、どんなウェブサイトを作りたいかという「明確な企画」です。
さあ、あなたの番です。毎月届くホスティング費用の請求書を見てため息をついていませんか？あるいは、遅すぎるサイトの速度のせいでお客様を取り逃がしてはいませんか？今すぐエディタを開いて、AIに話しかけてみてください。あなただけの軽量で強力なサイトを作ること、思っているより難しくありません。
💡 Pro Tip: 最初から完璧なサイトを作ろうとしないでください。「ランディングページ」たった1枚から始めてみましょう。AIと一緒に1枚を完成させてみれば、サイト全体を作れるという自信が生まれるはずです。