Featured image of post さらばWordPress!静的サイトジェネレーター「Hugo」へ移行した理由と手順 Featured image of post さらばWordPress!静的サイトジェネレーター「Hugo」へ移行した理由と手順

さらばWordPress!静的サイトジェネレーター「Hugo」へ移行した理由と手順

本サイト「netguide.jp」をWordPressからHugo+Stackテーマへ移行した舞台裏。SEO・表示速度・ホスティング費用のメリットを解説。

本サイト「netguide.jp (かいせつくん)」は、長年利用してきたWordPressから、静的サイトジェネレーター(SSG)である「Hugo」への移行を完了しました。

これまで、表示速度の遅さやセキュリティ対策、毎月のサーバー費用に頭を悩ませてきましたが、Hugoへの移行によってこれらすべての課題をクリアすることができました。本記事では、WordPressからHugoへの移行に至った動機、具体的な移行の手順、そして移行後のパフォーマンス改善結果について詳しくご紹介します。


1. WordPressから移行を決意した3つの理由

WordPressは非常に便利なCMS(コンテンツ管理システム)ですが、動的なデータベース駆動型システムであるため、運用期間が長くなるにつれていくつかの致命的な問題が表面化してきました。

  1. 表示速度(ページスピード)の限界 プラグインの増加やデータベースの肥大化に伴い、特にモバイル環境での表示速度(LCPやINPなど)のスコアが低下していました。これはGoogleのCore Web Vitals指標に直接影響し、SEO的なマイナス要素となります。
  2. セキュリティ脆弱性への不安 WordPress本体やテーマ、プラグインは頻繁に脆弱性が報告されます。アップデートを怠ると不正アクセスや乗っ取りのリスクに常に晒されるため、保守管理の負担が大きくなっていました。
  3. ホスティング(サーバー)維持コスト データベースやPHPを高速に動かすためには、ある程度高性能なレンタルサーバーやVPSを借りる必要があり、毎月の維持費が発生し続けていました。

2. Hugo + Stackテーマ移行の設計と工夫

移行先として選定したのは、世界最速を誇るGo言語製の静的サイトジェネレーター Hugo と、カード型デザインが美しい Stackテーマ (hugo-theme-stack) の組み合わせです。

🌐 多言語化 (ja / en) のスマートな設計

Hugoの標準機能を用い、日本語は /ja/、英語は /en/ のディレクトリ構造で完全に分離させました。HTMLの hreflang 設定に加え、XMLサイトマップでもGoogle推奨の xhtml:link(多言語対称アノテーション)を出力するように設定し、多言語SEOのベストプラクティスを導入しました。

🖼️ 次世代画像アセット最適化(AVIFの採用)

表示速度を極限まで引き上げるため、記事のサムネイル画像は従来のPNG形式だけでなく、超軽量な次世代画像フォーマットである AVIF を全自動で生成して配置するパイプラインを構築しました。

🔗 完璧な301リダイレクト設計

URL構造を日付入りの古い形式から、クリーンな英字スラッグのみ(例: /ja/software/...)に整理したため、SEO評価(被リンクパワー)を引き継ぐためのリダイレクト設定ファイル(_redirects)を 104件 用意し、旧URLからのアクセスを瞬時に新URLへ転送するように設計しました。


3. 具体的な移行手順

移行作業は以下のステップで進めました。

  1. WordPressデータの書き出し プラグイン WP All Export 等を使い、過去記事のテキスト、投稿日、スラッグ、アイキャッチ情報をXML/CSVとしてエクスポートします。
  2. Hugo Markdownへのコンバート エクスポートしたデータを、コンバートツール(またはPythonスクリプト)を用いて、Hugoが解釈できるフロントマター付きの .md ファイルへ一括変換します。
  3. テーマの適用とレイアウトカスタマイズ hugo-theme-stack をプロジェクトに組み込み、必要なウィジェット(検索・タグクラウド・目次など)を設定します。
  4. アセットの再生成 記事内の画像のリンク切れをチェックし、画像最適化スクリプトを走らせてAVIFファイルや通常・ダークモード用のサムネイルを一括構築します。

4. 📈 移行後の結果とメリット

Hugo + Cloudflare Pages(ホスティング)の構成に切り替えたことで、結果は劇的なものとなりました。

  • PageSpeed Insightsスコアの大幅向上 モバイル環境におけるパフォーマンススコアが 100点満点を記録。特にLCP(ページの最大表示時間)は0.6秒以下となり、体感速度も驚くほど爆速になりました。
  • 運用コストが「ほぼゼロ」に Cloudflareのグローバルエッジネットワークを利用することで、何百万アクセスあってもホスティング料金は無料枠内に収まり、レンタルサーバー代の削減に成功しました。
  • セキュリティ不安の解消 データベースを持たないただのHTML/CSS配信であるため、SQLインジェクションや管理画面への不正ログインといったWordPress特有のセキュリティ脅威が完全に消失しました。

💬 まとめ

移行初期の手間はかかりますが、長期的なSEO効果、速度、コスト、安全性を考えれば、WordPressからHugoへの移行は非常に価値のある決断だったと確信しています。