更新しやすさと表示性能を両立するWebサイト構成

企業のWebサイトを作るとき、よく利用されるのがWordPressです。

管理画面から記事やお知らせを更新できるため、継続的に情報発信をするWebサイトでは非常に便利です。

一方で、Webサイトの構成や運用方法によっては、表示速度やセキュリティ、保守などを考える必要があります。

そこで株式会社moveeでは、WordPressをやめるのではなく、

「WordPressは情報を管理する」「Next.jsはWebサイトを表示する」

というように、それぞれの役割を分けたWebサイト構成を検討しました。

今回は、そのために開発したNext.js × Headless WordPressスターターについてご紹介します。

WordPressは便利。でも、すべてを任せる必要はない

WordPressの大きなメリットは、情報を更新しやすいことです。

たとえば企業サイトでは、

• お知らせ
• ブログ
• 導入事例
• 実績
• 採用情報

など、公開後もさまざまな情報を追加していきます。

こうしたコンテンツを管理する仕組みとして、WordPressは便利です。

一方で、「情報を管理する仕組み」と「Webサイトを表示する仕組み」を必ず同じWordPressで行う必要はありません。

そこで考えたのが、Headless WordPressという構成です。

Headless WordPressとは？

通常のWordPressでは、

記事を書く → WordPressがページを作る → WordPressがWebサイトとして表示する

ところまでを一つのシステムで行います。

Headless WordPressでは、この役割を分けます。

WordPress
→ 記事やカテゴリなどの情報を管理する

Next.js
→ WordPressの情報を取得してWebサイトとして表示する

つまり、担当者はこれまでと同じようにWordPressの管理画面から記事を更新できます。

一方、ユーザーが実際に見るWebサイトについては、Next.jsを使って構築します。

WordPressの情報をNext.jsから取得

今回開発したスターターでは、WordPress REST APIを利用しています。

WordPressに登録された投稿やカテゴリなどの情報をNext.jsから取得し、それをWebサイト上に表示する仕組みです。

これによって、

更新する人はWordPressを使える

表示するWebサイトはNext.jsで自由に開発できる

という構成になります。

WordPressの更新しやすさを残しながら、フロントエンドを独立して開発できるのが特徴です。

Next.js App Routerを採用

フロントエンドにはNext.jsのApp Routerを採用しました。

企業サイトとして利用することを想定し、コーポレートサイトだけではなく、ブログ・ニュース・実績などのコンテンツを展開できる構成にしています。

WordPress側でコンテンツを管理しながら、表示側ではNext.jsを使って自由にデザインや機能を実装できます。

開発しやすいようDocker環境も用意

今回のスターターは、一つのWebサイトだけで利用するために作ったものではありません。

今後さまざまなWebサイトで再利用できるよう、Docker Composeを利用したローカル開発環境も整備しました。

さらに、

• システム構成
• 利用用途
• セットアップ方法
• 開発手順

などをREADMEにまとめ、開発者が利用しやすい形にしています。

OSSとして公開

今回開発したスターターは、特定の企業だけで利用するものではなく、OSSとしてGitHubで公開できる形にしました。

これによって、新しくHeadless WordPressサイトを制作するときに、毎回ゼロから環境を構築する必要がなくなります。

スターターをベースに、それぞれの企業に必要なデザインや機能を追加していくことができます。

WordPressを「使う・使わない」ではなく、役割から考える

Webサイト制作では、

「WordPressがいいのか」

「Next.jsがいいのか」

という二択で考えてしまいがちです。

しかし、必ずしもどちらか一方を選ぶ必要はありません。

たとえば、

ほとんど更新しない企業サイト
→ CMSを使わずNext.jsなどでシンプルに構築する

頻繁に情報を更新する企業サイト
→ WordPressをCMSとして活用する

更新性を残しながら表示側を自由に開発したい
→ WordPress ＋ Next.js

というように、Webサイトの目的によって適した構成は変わります。

大切なのは、最初に技術を決めることではなく、

「このWebサイトを今後どう運用していくのか」

を考えることです。

Webサイトの運用方法からシステムを考える

株式会社moveeでは、WordPress、Next.js、Headless CMSなど、特定の技術ありきでWebサイトを制作するのではなく、更新頻度や運用方法、必要な機能を確認したうえで構成をご提案しています。

頻繁に情報発信するのであれば、更新しやすい仕組みが必要です。

反対に、ほとんど更新しないのであれば、複雑なCMSを導入する必要がない場合もあります。

「今のWordPressをそのまま使い続けるべきかわからない」

「更新はWordPressで続けたいけれど、Webサイト自体は作り直したい」

「自社に合ったWebサイトの構成がわからない」

といった場合も、現在の運用方法から必要な構成を一緒に整理することができます。