Drupal × Next.jsのヘッドレスCMS構成を採用したコーポレートサイトリニューアル

こんにちは、スタジオ・ウミの池田です。弊社コーポレートサイトを2025年2月にリニューアル公開しましたので、今回はその話をします。公開から約1か月が経ちますが特段問題なく安定稼働しており、ホッとしているところです。

プロジェクト概要

スタジオ・ウミは、2023年4月の法人化を機にコーポレートアイデンティティー（CI）を刷新し、その一環として自社サイトをリニューアルすることにしました。リニューアルにあたり、技術検証を兼ねて日本国内でも対応できるベンダーが少ないDrupal × Next.jsのヘッドレス構成を採用しました。

今回のリニューアルの目的は、以下のとおりです。

ブランドの一貫性の強化

CIの策定とリニューアルを通して、統一感のあるビジュアル表現を目指しました。CI策定についての詳細は、弊社の谷口が執筆したCI策定についての記事をご覧ください。

情報の整理とユーザー体験の向上

従来のサイトでは情報の整理が不十分であり、ユーザーが目的のコンテンツにたどり着くのが困難でした。情報設計を見直し、ユーザーエクスペリエンスの向上を図りました。

運用効率の向上

DrupalをヘッドレスCMSとして活用し、コンテンツ管理の柔軟性を高め、効率的な運用フローの確立を目指しました。

サイトのパフォーマンス最適化

従来のサイトはパフォーマンス面で最適化の余地がありました。Next.jsを採用することで、パフォーマンス改善を試みました。

ヘッドレス構成の技術習得

ヘッドレス構成でサイト構築するためのスキルを強化し、今後のサービス提供にもつなげる狙いがありました。

技術スタック

フロントエンド：Next.js

Next.jsのサーバーサイドレンダリング（SSR）と静的サイトジェネレーション（SSG）を組み合わせて、機能ごとに最適なレンダリング方式を採用しています。On-demand Revalidationという再レンダリングの仕組みを導入することで、コンテンツの更新内容を即時にサイトへ反映する仕組みを構築しました。また、サイト内で繰り返し使われるコンポーネント群をReactコンポーネントとして実装したり、TypeScriptを導入したりすることで、コードの品質と開発効率を向上させました。

CMS：Drupal

DrupalのJSON APIを用いてヘッドレスCMSとして稼働させ、フロントエンドのNext.jsにコンテンツのデータを連携しています。Next.jsモジュール を導入し、Drupal上でNext.jsのプレビュー機能を実現したり、Next.jsのOn-demand Revalidation機能をトリガーしたりしています。

スタイリング：Tailwind CSS

Tailwind CSSはユーティリティファーストのCSSフレームワークのため、マークアップとスタイリングを隣接させることができます。マークアップとスタイリングの隣接がコンポーネント指向の開発に適していることから採用に至りました。また、Figmaのテキストスタイルやバリアブルの機能と相性が良く、スタイル実装の効率も向上しました。

コンポーネント管理：Storybook

Storybookを用いてUIコンポーネントをカタログ化することで、フロントエンドエンジニアとデザイナーの間でコンポーネント設計について共通認識を持てるようにしています。また、フロントエンドエンジニア間でも、他メンバーが実装したコンポーネントを使用する際にStorybookを参照することでコンポーネントの仕様を瞬時に理解でき、開発効率の向上に寄与しています。

テスト：Vitest

Vitestのスナップショットテストを導入しています。スナップショットテストの導入により、コード変更の影響範囲を可視化でき、サイト公開後に改修を行なった際のリグレッションテストに役立てています。

ホスティング：さくらのVPS

ヘッドレス構成はサーバーコストが高くなるイメージを持っていましたが、弊社コーポレートサイトはさくらのVPSを利用することで、安価に運用できています。Next.jsのSSGを活用すれば、事前にレンダリングされたページが返されるため、高性能なサーバーを用意しなくても問題なく運用できます。

CDN：Cloudflare

画像等一部のアセットをCDNから配信することで高速化を図っています。ちなみに、CDNだけでなくDNSサーバーやTLS証明書の提供にもCloudflareを利用しています。

Next.js for Drupal

今回、Drupal × Next.jsのヘッドレス構成で開発するにあたり、Next.js for Drupalというプロジェクトが提供する開発ガイドを参照しました。このプロジェクトではNext.jsのスターターキットやDrupalのモジュールも提供されています。Next.js for Drupalのガイドを参照すれば、Next.jsとDrupalを連携する方法、プレビュー機能の実装方法、Webformへデータを送信する方法などがわかります。

他にもNext.js for Drupalのサイトでは様々なガイドが公開されています。今後、弊社ブログでも詳しい解説記事を投稿していきたいと考えていますので、ぜひご期待ください。

まとめ

Drupal × Next.jsのヘッドレス構成でのサイトリニューアルを通して、この構成では下記のメリットがあることを実感しました。

• コンテンツの管理と表示を分離することでコンテンツ管理の柔軟性が高まる
• モダンなフロントエンドフレームワークによりパフォーマンスが向上する
• コンポーネント指向開発によりコード品質と開発効率が向上する
• StorybookやVitestなどのツールと相性が良く導入しやすい

ヘッドレス構成の技術習得という目的もきちんと果たせたと考えています。

また、これを機に弊社はNext.jsを用いたヘッドレスサイト構築のサービスを正式に開始しました。サービスの詳細については、Drupalサイト開発サービスページに記載しています。ヘッドレス構成でサイト構築を検討されている方は、ぜひお気軽にお問い合わせください。