Jリーグチームで断トツの読み込み速度を誇るウェブサイトに

大阪府大阪市を拠点するJリーグ所属のプロサッカークラブ、セレッソ大阪。多くのサッカーファンが訪れるセレッソ大阪のウェブサイトは2023年1月に大幅なリニューアルが行われ、その際にコンテンツ管理ツールとしてmicroCMSが導入されました。

今回のインタビューでは、セレッソ大阪プロモーショングループに所属し、サイトリニューアルにたずさわった島田皓介さんと野口翔大さん、そして実際にサイトリニューアルを担当されたプラスクラス・スポーツ・インキュベーション（以下、PSI）の宮川貴佳史さんに、microCMSの導入経緯や利用状況についてお話をうかがいました。

導入の背景：来訪者に楽しんでもらえるウェブサイトを目指したリニューアル

ウェブサイトのリニューアル前はどんな課題があったのでしょうか。

-セレッソ大阪・島田さん
以前のサイトは、現在のお客さま目線でエンターテインメントを提供するという観点で考えると、セレッソ大阪にふさわしいサイトではないと感じていました。我々が伝えたい情報を優先的に提示するような発想で作られていましたし、ページの読み込み速度が遅いことも課題のひとつでした。訪れたお客さまに楽しんでもらえるようなウェブサイトにリニューアルしたいと考えていたのです。

microCMSを導入した背景を教えてください。

-PSI・宮川さん
リニューアルにあたって「ページパフォーマンスの向上」というご要望をいただいており、表示速度改善は重要なポイントでした。リニューアル前はWordPress上で構築されていましたが、別の案件でmicroCMSを導入した知見から「microCMSならば読み込み速度を大きく改善できるはずだ」という確信があり、CMSから刷新する決断をしました。

また、microCMSにはクエリパラメータによる調整機能がたくさん用意されているので、コンテンツの量や種類に対応してメディア周りを最適化しやすいという期待もあり、セレッソ大阪さまにご提案させていただきました。

導入の決め手は何だったのでしょうか？ 

-PSI・宮川さん
日本語のサービスである点は大きなポイントでした。microCMSは日本語によるサポート体制が充実しています。日々の更新作業を担当されるセレッソ大阪のみなさまは、エンジニアではなく広報やマーケティング部署の方たちですので、ストレスなく気軽に使っていただけることは重要だと考えました。

また、開発のしやすさも重視しました。APIを手軽に設計しやすいツールであることや、各種ドキュメントやハウツーブログが充実していることも知っていたので、自信を持ってご提案できました。

活用の状況：サイト上のほとんどのコンテンツをmicroCMSで管理

microCMSをどのように利用されていますか？

-PSI・宮川さん
セレッソ大阪のウェブサイトのほとんどすべての部分で利用しています。試合情報、クラブ情報、ニュースなどはmicroCMSで更新されています。女子チーム「セレッソ大阪ヤンマーレディース」のページや、英語ページについてもmicroCMSで管理しています。

-セレッソ大阪・野口さん
更新や管理を担当しているのは、私のほかには広報のメンバーなど数人程度です。更新時は、microCMSのレビュー機能を使ってテストページを作成し、社内外の関係者に展開して確認をもらってから公開するというフローで行っています。

導入の効果：表示速度が大幅に改善し、SNSのフォロワー数にも好影響

実際にmicroCMSを使ってみて、良さは感じられましたか？

-セレッソ大阪・島田さん
課題としていたページの読み込み速度は、体感的にもかなり速くなっていますね。コンテンツの運用面についても、サイト内やSNSなどをまたいだ回遊性が向上したことで、SNSのフォロワー数やYouTubeの再生数も増加しました。ファンの方たちからも「ウェブサイトが使いやすくなった」というポジティブな声が届き、嬉しい限りです。

-PSI・宮川さん
リニューアルのご提案時にLighthouse計測値の目標を提示しておりました。結果として、モバイル・デスクトップともに目標値を超えることができており、特にモバイルのパフォーマンスがリニューアル前後で大きく改善されました。この数値はJリーグの他クラブ様のサイトと比べてもかなり高いものとなっておりまして、ご提案時の期待に応えられたかなと思っております。

とはいえ、依然としてGoogleの提唱する基準（LCPで言うと2.5秒以内）には達しておらず、まだまだやれることは残っているなという心象です。
今後も、ページの表示が遅いことで生じる閲覧ユーザーの離脱を防ぐために、表示速度の改善活動を継続して離脱率低下の循環を生み出していきたいです。

-セレッソ大阪・野口さん
以前使っていたWordPressから管理画面などが大きく変わったので、最初は運用メンバーのあいだでは不安の声もあったのですが、実際にはスムーズに導入できました。

宮川さんには以前のサイトで感じていた課題を細かくお伝えしていて、その要望に応じた管理画面を開発していただいたので、作業効率は格段に向上しています。コンテンツの見せ方も工夫しやすくなりましたし、とても助かっているというのが半年以上使った実感です。

-PSI・宮川さん
microCMSの管理画面は開発サイドにとっても直感的でわかりやすいので、運用現場の希望を反映しやすかったです。新機能のリリース頻度も高く、日に日に使いやすくなっていると感じています。

日本語によるサポートやドキュメントの充実はmicroCMSの魅力

サイトの技術構成はどうなっていますか？

-PSI・宮川さん
基本構成は、microCMS + Next.js + Vercelです。

試合速報などは、Jリーグ所属クラブ向けに配信される公式のAPIを自動更新プログラムにつないで、microCMSのPOST APIで更新しています。

スポーツチームのウェブサイトなので、試合直前や新規加入選手がいるときなどにはアクセスが集中しやすいという特性がありますが、個々のページの通信量を抑えることでVercelがスケールできる範囲に収めています。

また、高画質な写真データやPDFを扱うことも多いのですが、アップロード前に圧縮する運用にご協力いただいていることと、データ取得の際にクエリパラメータで最適化できていることによって、通信量は比較的抑えられています。

※ 技術的なアプローチの詳細にご興味をお持ちの方は、プラスクラス・スポーツ・インキュベーションさま執筆の「2万超のコンテンツを抱える大規模サイトをWordPressからmicroCMSに移行した記録」、「Next.js x microCMS でページパフォーマンスも運用パフォーマンスも改善した記録」についても、ぜひご確認ください！

今後microCMSに期待してることはありますか？ 

-セレッソ大阪・野口さん
あえて言うとすれば、管理画面に同時にログインしているユーザーがいる場合には、それが表示されるような機能があると嬉しいですね。

-PSI・宮川さん
複数アカウントで同じコンテンツを同時に編集することができず、先祖返りしてしまうケースがあるので、その点については改善されるとありがたいです。

microCMSはドキュメントやテックブログなどがとても充実していて、それを読み進めていけばエンジニアは簡単に開発ができると思います。「読んでもわからないからサポートに問い合わせよう」ということがないので、実際に開発中にサポート窓口を利用する機会はありませんでした。ただ、まだまだ活用しきれていない機能などもあると思うので、ざっくばらんに相談できるカスタマーサクセスのようなサービスがあったら利用してみたいですね。

日本語によるドキュメントやサポートがあることは、提案させていただく立場としても非常に安心感があります。今後も引き続きサポートコンテンツが充実されていくと嬉しいです。

取材協力：エディット合同会社（ライター：藤井亮一　撮影 : 牛久保 賢二）