「キャリアガーデン」サイトリニューアル

「キャリアガーデン」は、職業選びを考える人に向けて、700職種ものさまざまな職業の内容や、その仕事に就く方法を紹介する職業情報サイトです。職業ごとの資格・年収・将来性に加え、働く人へのインタビューや、進学・学びに関する情報も掲載しています。

課題

お客様がWordPressで運営するWebメディアは、記事や子サイトが増えるなかで表示が重くなっていました。アクセスが集中した際にサイトが落ちることもあり、読者が記事を閲覧できない状況もたまに生じていました。

リニューアルでは、約10,000ページ・数百の子サイトのコンテンツを移すだけでなく、広告、自動内部リンク、自動目次といった従来のサービス特有の機能も引き継ぐ必要がありました。
また、複数のライターさんが記事を制作するため、移行後も編集画面で必要な表現を扱えることが重要でした。

エンジニアコミュニティで情報交換していたときも、「ページ数が4~5桁のWordPressサイトをヘッドレスCMS構成にリニューアルするプロジェクトは、レイアウトやコンテンツを完全に反映できなかった」という話を聞いていたので、ご相談を受けた時は気が引き締まる思いと、何がなんでも初めから理想系に近づけてやろうという燃える思いがありました。

アプローチ

1. 表示速度と安定性を改善する構成への刷新

WordPressで記事の管理と表示を担っていた構成を、microCMSでコンテンツを管理し、Next.jsでサイトを表示する構成に刷新しました。

記事ページをあらかじめ生成するVercelから配信するJamstackという構築を採用することで、読者がアクセスするたびにWordPress側でページを組み立てる処理を避け、ページの表示速度を改善しました。表示時のサーバー負荷を抑え、アクセスが集中しても記事を届けられる構成にしています。

2. 約10,000ページのコンテンツと画像の移行

従来サイトのデータの構造を理解した後、WordPressのコンテンツのフィールドがmicroCMSではどのように対応して定義すべきかの設計から着手しました。

そのうえでNode.jsによる移行処理を構築し、数百の子サイトにまたがる約10,000ページのコンテンツと、約20,000点の画像を移行しました。

3. メディア運営に必要な機能の再実装

サイトの構成を変えても従来の運営を続けられるよう、記事検索、広告枠、自動内部リンク、自動目次を実装しました。記事を届ける導線や広告の表示を、リニューアル後のサイトにも組み込んでいます。

4. ライターが記事を仕上げられる編集環境の整備

複数のライターが記事を制作する運用に合わせ、記事内の装飾やパーツを扱う30を超えるショートコードと、それぞれに対応するUIを実装しました。ライターがコードを直接書かずにリッチエディタで記事を仕上げられるようになり、編集にかかる時間を短縮しました。

技術的特長とシステム構成

コンテンツ管理とサイト表示の分離

• Next.js（App Router）とmicroCMSを使用し、記事の管理とサイトの表示を分けて構築しました。
• Node.jsで、WordPressからのデータ移行処理を構築しました。
• GitHub ActionsとNetlifyをCI/CDとデプロイに使用しました。

メディア向けの表示・編集機能

• 広告枠、自動内部リンク、自動目次を、刷新後のサイトに実装しました。
• ライターが記事内の装飾やパーツを編集画面から扱えるショートコードを定義しました。

成果

リニューアル後は表示速度が劇的に改善し、アクセス集中時に起きていたサイトダウンも解消しました。

ライターが編集画面で記事を仕上げられるようになり、記事の編集にかかる時間も短縮しました。