東京ガスが運営するメディアサイト「ウチコト」では、CMSの老朽化で生じていた課題をヘッドレスCMSへと移行することで解決したという。リニューアルを手掛けたニュートラルワークスの稲森剛さんに、どのようにして解決したのか伺った。
東京ガス 暮らし情報メディア ウチコト
https://tg-uchi.jp/
- 稲森剛さん
- 株式会社ニュートラルワークス 制作会社でWebサイトの制作統括・技術顧問、Webアプリケーション開発などを手掛け、2019年にニュートラルワークスにCTOとしてジョイン。Node.jsを中心としたフロントエンド技術を得意とし、技術力の高いチームをつくるべくメンバーと一丸となり奮闘中。
https://n-works.link/
ヘッドレスCMSを選んだ理由
東京ガスが運営する、暮らし情報発信メディア「ウチコト」は、仕事や家事・子育てに忙しい30～40代女性をメインターゲットとし、暮らしに役立つ情報を発信している。取り上げるテーマは料理のレシピ、掃除、洗濯、節約術、季節の話題など幅広く、2016年の開設以来約4,000記事ものコンテンツが蓄積されてきた。もともとフルスクラッチで開発したCMSで運用されてきたが、2023年2月にヘッドレスCMSへと移行した。そのリニューアルを手掛けたニュートラルワークスの稲森剛さんは、もともとのCMSで生じていた課題をこう話す。
「CMSが老朽化してきたので、リニューアルをしたいというご依頼でした。課題として、1つはサイトの規模が大きくなり、表示速度が遅くなっていることがありました。SEOを重視されていて、表示が遅いことで離脱率や回遊率にも影響しているのではないかというご懸念をお持ちでした。2つ目としては、投稿する記事の自由度が低かったり、サイトを運営していく中で後から追加したい要素が出てきたときに効率的に追加できる仕組みがなかったりしたことです。例えば著者プロフィールのような同じ情報を複数のページに掲載するようなものも、1記事ごとに手作業で追加しなければならないため、非効率な上修正漏れなどのミスが起こり得るということがありました」
新しいCMSには国産ヘッドレスCMSのmicroCMSが採用された。これは、東京ガス側での選定だったという。
「先述した課題の解決が期待できることに加えて、もともとのフルスクラッチのCMSを改修するよりもコストが抑えられます。また、オープンソースのCMSでは脆弱性の対策が必要になりますが、microCMSではセキュリティ対策がすでに整っていることも選定理由となりました。他の案件でも、ヘッドレスCMSを選ぶ理由としてセキュリティを挙げる方は多いです」
要素をパーツ化し投稿の質と利便性を向上する
以前のCMSではコンテンツの構成要素が限定的だったが、リニューアル後は画像の掲載枚数や掲載位置を任意に指定できるなど、記事構成の自由度が高まった。例えば目次を追加したり、複数画像をスライダーで見せたりと、さまざまな見せ方ができる。
「microCMSの管理画面にあるリッチエディタだけでも、動画の埋め込みなど自由度の高いコンテンツ作成ができます。また、要素をパーツごとに設計することで、好きな位置に配置できるようにしました。さらに、カスタムフィールドという要素をグループ化する機能を用いて、例えばレシピページに掲載する調理手順などをまとめて配置できるようにもしています」
東京ガスではハウスクリーニング事業なども展開していて、掃除の記事などではそうしたサービスへの導線となるバナーも設置している。要素の配置を柔軟に変えられるようになったことで、PDCAも回しやすくなった。
「バナーごとにGoogleタグマネージャーを設定するといった細かい指定もできるので、コンバージョンの測定もしやすくなっています」
パーツ化で記事の自由度を高め、更新しやすく
更新の利便性を上げ運用の負担を軽減
ウチコトでは季節ものをテーマにした記事も多く、トップページのコンテンツの入れ替えが頻繁に行われる。そのため、効率的に更新しやすい仕組みになっている。
「季節ごと、曜日ごとなど短いスパンでおすすめ記事や特集記事などの入れ替えが行われます。そのため、指定のイベント発生をトリガーに通信を行うWebhookという技術を使って、記事の予約投稿をする際におすすめ記事や特集など一緒に変えたいところを指定して変更できるようにしています。また、トップページだけでなく、他のページの要素も指定できます。記事の更新時以外にも、おすすめ記事を指定のタイミングですべて入れ替えるといった予約ができます」
こうした投稿の仕組みで、運用の負担も大きく軽減された。
Webhookで更新を連携させる
画像の軽量化で表示速度を上げコストも削減
ウチコトは約9割がスマホから閲覧されている。そのため、通信環境の良い場所だけでなく、移動中の電車内など回線の細い状況で見られることも少なくない。そうした環境でも軽快に閲覧できるよう、画像のサイズや表示の調整には気を配ったという。
「閲覧時に読み込み負荷が大きいのは画像ですが、メディアサイトなので4万ファイルくらいありました。そのため、PCやスマホなどのデバイスごとに最適化した画像を出し分けています。また、スマホのブラウザは記事をスクロールしながら読んでいくものなので、ファーストビューを表示した際に記事内にあるすべての画像を読み込む必要はありません。下の画像は遅延して読み込むことで、サイトの表示を速くしています」
ページの読み込みが遅いと、スクロールして読み進めたり次のページへと回遊したりするのが面倒で、離脱に繋がってしまうだろう。表示が速くなることで、離脱率減少や回遊率アップが期待できる。
また、画像の多くはAWSに置いている。サイズを最適化することで、そうしたクラウド代などのコストを抑えることにもなる。
「アクセスの多いサイトなので、そうした細かい調整でランニングコストを大きく下げることができます。リニューアル前はファーストビューの画像合計、ページ全体の画像合計は同じく3MB、ページ全体の合計が5.5MBでした。リニューアル後は、ファーストビューでは遅延読み込みをしているため画像合計が50KB、ページ全体の画像合計は650KB、ページ全体の合計を2.3MBまで抑えることができました。また、ヘッドレスCMSの良さとして、静的に生成したページを見てもらうので、キャッシュをうまく使うことでたくさんのユーザーがアクセスしてもサーバに負荷がかからないため、コストを抑えられるというメリットもあります」
コスト削減の観点では、サイドバーにある人気ランキングもAPIを活用することでコストを抑えて開発している。有料のランキングツールを使うと、月額数百万円になるものもあるそうだ。
「GAのAPIは無料で使えるので、ランニングコストはいっさいかかりません。前のCMSでもランキングは実装されていたのですが、CMS内で独自に表示回数をカウントするものでした。GAのPV数や集計方法と連動することで、より自然なランキングになっています。ただ、GAのAPIは1日に使用できる上限があり、それを越えると止まってしまうので、工夫が必要です。ウチコトでは、APIを使う頻度をリアルタイムではなく、例えば1日おきといったように設定して、その間に集計したデータでランキングを出しています。リアルタイム性を持たせても、そこまで結果が変わるものではありませんので」
画像サイズの最適化とスマホの遅延表示
ユーザー体験を向上する高速化の仕組み
ヘッドレスCMSは表示が速いものの、最初に静的ページをビルドするために多くの時間を要する。しかしウチコトでは、ユーザーがアクセスすればするほどビルドの時間が分散される仕組みになっている。
「Next.jsというフレームワークを使うことで、リアルタイムに近い形で更新を反映しつつ、表示を高速化しています。静的ページのビルドはサイトの規模が大きいほど時間がかかってしまうことがデメリットです。しかしNext.jsでは更新などで変更した差分だけを読み込むことができるので、再度ビルドするのにかかる時間を抑えられます。また、ユーザーがアクセスした際にはCDNというキャッシュサーバにキャッシュを見に行くのですが、Next.jsのISRという機能を使うことで、ユーザーのアクセスが続くほどサイトが高速化できる仕組みをつくっています。まずユーザーのアクセスをトリガーにキャッシュを生成し、それ以降にアクセスした人にはそのキャッシュが表示されます。そしてISRに設定した時間をすぎて最初のアクセスをトリガーとし、そのユーザーには既存のキャッシュを表示しつつ、新しいキャッシュを生成します。そのため、定期的にユーザーのアクセスがあることで、新しいキャッシュが常にストックされていて、みんなが軽いページを見ることができます」
また、ユーザーのサイト遷移も差分の機能によって高速化されている。
「画面遷移した際に、ヘッダやフッタなど内容が変わらないところはそのままで、差分だけ読み込みます。遷移時のデータの通信量が減るため高速化し、サイトの回遊率向上が期待できます。ユーザーが速いと実感するのが、最初にアクセスしたときと次のページへと遷移するときなので、それぞれ高速化しました」
閲覧者が増えるほど高速化する仕組み
指標に沿った軽量化でSEO向上を
サイトリニューアルの懸念点として、検索順位が下がるという話はよくある。静的ページで軽快に閲覧できるヘッドレスCMSにおいても、同様にそのリスクはあるという。
「ヘッドレスCMSは、フロントエンドで読み込むライブラリのファイルデータがけっこう多くなるので、キャッシュされていない状態の一番最初にページを読み込む際は意外と重くなります。また、PCで通信環境のよい状態で見るとすごく速く表示されるのですが、Googleでは低速回線のスマホを基準に計測されるので、そのような環境を想定した最適化をしないと順位が下がることが起こりがちです。Googleタグマネージャーが遅くなる原因になっている場合もあるので、そちらも注意が必要です。今回のリニューアルでもSEO向上を目指していましたが、検索順位を落とさないのは意外と大変なことなので、まずは下げないということを重視しました」
ニュートラルワークスではそのためにさまざまなチューニングを行い、Google PageSpeed Insightsのスコアを向上させることができた。
「画像の遅延読み込みや推奨されたサイト構成など、Googleの検索順位を上げるための指標となるものがあります。また、構造化マークアップも評価対象となるので、著者名やレシピなどで行っています。先述したNext.jsによる表示の高速化はユーザー体験を上げるためのものでしたが、検索順位は表示が速いだけではなく、さまざまな状況下で快適になっているか、Googleの指標に沿って構築していくことが必要となります。最近は、ファーストビューの表示速度に加えて、操作の快適さの指標など、より実際のユーザー体験を反映する方向に進んでいるようです。東京ガス様にも、スコアが落ちずにむしろ上がったことに安心していただけました」
Google PageSpeed Insightsのスコア向上
