サイト15周年のリニューアルでmicroCMSに移行し、表示速度が大幅向上

Webデザイン・Web制作の情報を発信する「Webクリエイターボックス」を運営するWebデザイナーのManaさんは、サイト立ち上げから15周年を機にmicroCMSを採用したサイトにリニューアル。Next.jsとの組み合わせにより、サイト表示速度の向上と運用負荷の軽減を実現しました。海外のWeb制作会社で働いてきた経験をもち、現在は執筆や講演活動も行うManaさんに、microCMS導入の背景から効果などをうかがいました。

導入の背景：サイト開設15年の節目でヘッドレスCMSを使ってリニューアル

まずはManaさんのご経歴について教えていただけますか？ 

-Manaさん
日本でグラフィックデザイナーとして2年ほど働いたのち、海外のWeb制作の専門学校に通いました。専門学校の卒業後は、カナダ、オーストラリア、イギリスの3か国で約10年間、Web制作の仕事をしてきました。2015年に日本に帰国し、現在は広島に住んでいます。Web制作業務とあわせて、執筆、講演などの活動をしています。

「Webクリエイターボックス」を立ち上げたのは2010年1月なので、ちょうど15年が経ちました。その当時はWordPressが全盛期を迎え始めた頃です。私の通っていた専門学校でもWordPressを使っていましたが、日本語の情報がほとんどなくて、日本の友人にWordPressについて説明したいと思ってもリソースがなかったんです。そこで自分でブログを書くことにしたのが最初ですね。

いつの間にか多くの方に読んでいただけるようになっていました。海外の情報を日本語でわかりやすく発信することを心がけていたのが、サイトが広まっていった要因かもしれません。その後も、Webデザインの仕事を続けながら情報発信を続け、著書もこれまでに6冊ほど出版しました。

Webクリエイターボックスをリニューアルされた背景について教えてください。

-Manaさん
15周年という節目でサイトをリニューアルしたい気持ちが、数年前から漠然とありました。その頃にヘッドレスCMSやJamstackといった技術を知り、実際にちょっと試してみたら楽しかったんです。

また、サイトを開設した初期から使い続けていたWordPressは、動作の重さやセキュリティ面での懸念がありました。実際に攻撃を受けたことも何度かあって、データベースに侵入の形跡が見つかったりもしました。それに、プラグインのアップデートをすると別の場所が壊れてしまうなど、保守管理がストレスに感じていた事情もあって、WordPressに代わる選択肢を探していました。 

ヘッドレスCMSの中でも、なぜmicroCMSを選ばれたのでしょうか？

-Manaさん
最初にmicroCMSを試したのは2020年頃でした。その時はまだリリースされたばかりで、あまり使い勝手がよくなかったので導入を見送りました。今回、いろいろなサービスを検討してみると、microCMSにも便利そうな機能が増えていて選択肢に入ってきました。

サイトリニューアルの検討中は、Contentfulの採用や、WordPressをヘッドレスCMSとして使う方法、ローカルでMarkdownファイルを管理する方法なども検討しました。最終的には、国産の製品を応援したいという気持ちもあってmicroCMSを選びました。

活用の状況：Next.js、Vercel、Tailwind CSSの組み合わせでサイトを構築

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

-Manaさん
Webクリエイターボックスのサイト全体で使っています。サイト内の「読んだ本」というページは数か月ほど移行を後回しにしていたのですが、いまはAPIを作ってmicroCMSで管理しています。

サイトの技術構成について教えてください。

-Manaさん
フレームワークはNext.js、サーバーはVercel、CSSはTailwind CSSを使っています。この構成にしたのは正直に言って「流行っているから」という理由が大きいです（笑）。なぜ流行っているのか知りたいという興味や、人気があるということは優れているのだろうという考えがありました。

レンダリング方式は、ページによって変えています。更新頻度の低い「About ページ」は静的生成（SSG）で、ブログ記事のページは頻繁に更新されるのでISR（Incremental Static Regeneration）を採用しています。

実装には『Next.js＋ヘッドレスCMSではじめる！ かんたんモダンWebサイト制作入門』を参考にさせてもらいました。あと、microCMSの技術ブログも参考させていただきましたね。移行方法や初期設定からブログ作成までの流れが分かりやすかったです。

コンテンツの移行は大変でしたか？

-Manaさん
WordPressから出力したXMLデータを、PythonでCSV形式に変換して移行しました。15年間で書いた記事は1000件以上もあってちょっと心配でしたが、整形後のCSVファイルを読み込ませると簡単に移行できました。実はPythonを触ったのは今回が初めてだったのですが、この機会に新しい技術を学ぶことができて、いまもいろいろと勉強中です。

ただ、WordPressで使っていた動画タグがうまく移行できなかったようで、動画ファイルを全てアップロードし直す必要がありました。画像データはうまく移行できたのですが、動画データはなぜか弾かれてしまって。その作業はちょっと大変でしたね。

導入の効果：表示速度の向上と管理画面のシンプルさが好評

microCMSを導入した効果はありましたか？ 

-Manaさん
読み込みは明らかに速くなったと感じています。これはmicroCMSだけの効果かどうか分かりませんが、読者からも「速くなりましたね」といったフィードバックをいただいています。Lighthouseのスコアも大きく改善していました。 

microCMSの管理画面がシンプルで使いやすいのもいいですよね。移行したとき、非エンジニアのスタッフに細かいチェックをお願いしたのですが、「APIキーのような気軽に触ったらまずそうな部分と、操作しても大丈夫な部分が明確にわかるので、安心して使いやすい」と話してくれました。情報がきちんと住み分けされて1つの画面に収まっているのは、とてもいいですよね。

microCMSを使った新しいプロジェクトの予定はありますか？

-Manaさん
直近での予定はありませんが、「繰り返しフィールド」を活用したサイト制作を試してみたいと思っています。microCMSはブログサイト以外の制作にも活用できそうなので、その使い方を探っていきたいですね。

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

-Manaさん
HTMLやCSSなどの解説記事を書くときにCodePenをよく埋め込むのですが、現在のmicroCMSでは意図した通りにコードが表示されません。個人的にはすごく不便なので、ぜひ改善されてほしいですね。

カナダで働いている日本の友人がいるのですが、彼も最近WebサイトをmicroCMSでリニューアルしていました。AstroとTailwind CSS、microCMSの組み合わせで、すごく簡単にできたそうです。「日本産のサービスを応援したいからmicroCMSを選んだ」と彼も話していました。Web制作の選択肢が多いのはデザイナーにとっても嬉しいことなので、今後も頑張っていただきたいなと思います！

取材協力：エディット合同会社（ライター：藤井亮一　撮影：関口佳代）