当社にて、WordPressをヘッドレスCMSとした構築ソリューションの提供を開始しました。

こちらはフロントエンドにNext.js（JavaScriptフレームワーク）を用いることで、より高度なUI／UXをご提供できるソリューションとなっております。

本ソリューションの狙い

本ソリューションは

• フロントエンドとバックエンドの分割によるセキュリティ／負荷強度の向上
• ホスティングにAWS Amplifyを用いることでのウェブサイト速度向上
• WordPressブロックエディターによるコンテンツ編集力の確保
• Next.js等のフレームワークを用いた高度UI／UXの提供を可能にする

を狙いとしています。

従来（ヘッドフル）のWordPress単体によるウェブサイト作成では、URLがリクエストされた際、PHPによってサーバーレンダリングが行われます。そのため、データベースなどの接続をする領域と実際にユーザーがアクセスできる領域が同じになっていました。

WordPressをヘッドレスCMS化することで、PHPを動作させるバックエンドの領域とユーザーがアクセスできるフロントエンドの領域を分け、データをより強固に守ることができるようになります。さらにアクセス集中時に対するサーバー負荷を分散させることができ、過負荷による耐久性も向上しております。

また、ホスティングにAWS Amplifyを用いることでCDN上でコンテンツを配信することができるようになり、ウェブサイトの表示速度向上が見込めます。

バックエンドはWordPressを利用するため、WordPressブロックエディター（Gutenberg）によるコンテンツの編集のしやすさを享受することができます。

新規構築・リニューアルどちらをとってもおすすめできるソリューションとなっております。

なぜWordPressを使うのか

本ソリューションではバックエンドのCMSにWordPressを採用しています。

WordPress
https://ja.wordpress.org

これは

• WordPressブロックエディター（Gutenberg）がコンテンツを編集する際のエディターとして、利便性が高いこと
  • 直感的なインターフェースでのコンテンツ編集
  • 独自コンテンツブロックの作成

• CMSとしてシェアが高く、問題解決の手段が豊富であること
• 当社がWordPressの扱いに長けていること

が理由として挙げられます。

また、本ソリューションは基本としてWordPressを採用していますが、ヘッドレスCMSとして扱えるものであれば、CMSの変更は可能です。お気軽にご相談ください。

なぜNext.jsを使うのか

フロントエンドにはReact.jsを使ったJavaScriptフレームワーク、Next.jsを採用しています。

React.js
https://react.dev

Next.js
https://ja.wordpress.org

これは

• React.js／Next.jsの普及率が高く、エコシステムが豊富になっていること
• Next.jsが様々なレンダリングパターンを網羅でき（CSR・SSG・SSR・ISR）、各ウェブサイトの要件、コスト感に沿ったソリューションが可能なこと
• 開発者体験（DX）が優れているため

が理由として挙げられます。

上記のほか、JavaScriptを使用しているため、より高度なUI／UXの実現が可能であるため

• 地図UIやドラッグ＆ドロップ等、デスクトップアプリのようなデータ操作
• 非同期なページ・コンテンツ遷移
• モバイルアプリ／デスクトップアプリ等へのマルチプラットフォーム対応
• SaaSやIoTなど、クラウドサービスとのデータ連携

といったようなことも実現可能です。

また、CMSにWordPressを採用する場合は、Next.jsをラッパーしているフレームワーク、Faust.jsを利用しています。

Faust.jsはWordPressをヘッドレスCMSとして扱うためのフロントエンドフレームワーク（WP Engine製）となっております。

Faust.js
https://faustjs.org

制作実績

函館大学付属柏稜高等学校 Webサイト

「ウェブサイトの表示速度が遅い」とのヒアリングを受け、表示速度の早いJamstackアーキテクチャのISR（インクリメンタルスタティックリジェネレーション）を採用しました。

投稿記事や各ページはWordPressの投稿・固定ページを利用しており、各編集者が各々にコンテンツを更新できるようにしています。また、WordPressのブロックエディター（Gutenberg）を活用し、ウェブサイト表示に必要な独自のブロックを設けています。

リリース記事
https://www.hakoreco.com/2023/08/28/hakuryo-release/

おいしい函館

こちらもレンダリングパターンとして、ISRを採用しました。

従来のウェブサイトでは、「食ニュース」や「こだわりの飲食店」の絞り込みがページリロードを挟むため、ワンテンポ遅れた表示になっていました。

リニューアルされた本件では、キャッシングされたページを活用するため、絞り込み表示が非常にスムーズになりました。

最後に

当社ではお客様のご要望に沿ったソリューションのご提案をして参ります。

当社お問い合わせよりお気軽にご連絡ください。