ヘッドレス CMS の活用で UI/UX と運用効率が大幅に向上！Web サイトのマイグレーション・構築・開発・デザイン株式会社インフォマート様のクラウドを活用した導入事例

https://www.infomart.co.jp/

掲載日：2024年5月7日

お客様の課題

運用しているサーバーと CMS の Google Cloud への移行を計画していた。
柔軟かつ効率的なコンテンツ管理と SEO 対策を意識した Web サイトを求めていた。

対応と結果

Google Cloud へのマイグレーションから、インフラ構築、アプリケーション開発、デザインまでをアイレットが支援。ヘッドレス CMS の導入で運用効率や柔軟性の高いコンテンツ管理を実現。

株式会社インフォマート様（以下、インフォマート様）は、ポータルサイトの柔軟なコンテンツ生成と運用効率の向上を目指し、Google Cloud へのマイグレーションおよびヘッドレス CMS の導入を含めた Web サイトのリニューアルを行ないました。

コンテンツ管理の工数削減、デザイン向上を目的として、Google Cloud へのマイグレーションを計画

インフォマート様は BtoB プラットフォームで企業をつなぎ、書類をデジタルに、仕事をスマートに変えていくクラウドサービスを提供する企業。フードビジネスのお客様を中心に、商流のデジタル化や発注・納品・請求のオンライン化など、企業のバックオフィス業務の課題を解決するさまざまなクラウドサービスを展開しています。

同社は〝食ビジネスに役立つ〟をテーマに、さまざまなニュースや業界動向、ツールを発信していく BtoB ポータルサイト「フーズチャネル（FOODS CHANNEL）」を運営していますが、事業拡大に伴い運用工数が増加していたことから、現行サーバーと CMS を Google Cloud 上に移行することを計画していました。また、コンテンツ管理の効率化や UI/UX のさらなる向上も実現すべく、マイグレーションからインフラ構築、アプリケーション開発、デザインまでをアイレットにご依頼いただきました。

お客様からは、クラウド移行により Web サイトの運用効率を高めること、現状よりも柔軟な UI/UX を実現すること、手動で作業しているコンテンツ管理の効率化をご要望いただきました。そこでアイレットは、Google Cloud 上でサーバーレス構成によるインフラ構築を実施した上で、ヘッドレス CMS の Kuroco の導入を提案・実行いたしました。

ヘッドレス CMS の Kuroco を導入し、お客様のニーズに合わせた最適なデータ構造を設計。管理工数やコストの最適化を実現！

ヘッドレス CMS とは、フロントエンド不要でコンテンツ管理できる CMS のこと。通常の CMS と比較して、低い開発・運用コストでスピーディーに実装できる点がポイントです。

Kuroco は株式会社ディバータ様が提供する国産ヘッドレス CMS で、機能性の豊富さ、拡張性の高さに定評があるサービスです。さらに、フロントエンド開発とバックエンド開発を分離して並行開発を行なうことができるため、スピーディに開発を進めることが可能となります。

Kuroco はバックエンド API にかかる負荷に応じて利用料金が変動するため、目的に応じて適切なデータ構造を構築することが重要になります。今回はアイレットが培ってきたバックエンド開発のノウハウを生かし、お客様のニーズに合わせて Kuroco のサービスを有効活用できるデータ構造を設計。数ある JavaScript フレームワークのレンダリングモードの中から、コストや速度、SEO 対策などを考慮して最適なレンダリングモードを採用しています。また、ユーザーの急増や Bot 対策として Cloud CDN を導入することで、利用料金の最適化が可能となります。

フロントエンド開発では、サーバーレス環境でも動作する Nuxt 3など最新の技術を活用することで開発効率を高め、デザイン性も優れたマルチプラットフォーム化を実現しています。さらに、コンテンツを動的に切り替える機能を実装したことで、記事ランキングや人気タグランキング、ログインユーザー限定記事、期間限定記事の表示切り替えなどを自動化し、お客様の管理工数削減につなげています。

今後もアイレットは、Google Cloud の導入をはじめ、Web サイトの構築・デザイン・運用を支援するプロフェッショナルとして、お客様の課題解決につながるベストプラクティスをご提案し、さらなるビジネス発展に貢献してまいります。

システム構成図

使用プロダクト

◾️ヘッドレス CMS
・Kuroco

◾️Google Cloud
・Cloud CDN
・Cloud Armor
・Cloud Load Balancing
・Cloud Functions
・Cloud Storage
・Cloud Scheduler
・Pub/Sub
・Firestore
・Cloud Logging

◾️Nuxt 3

◾️GitHub

案件名	ヘッドレス CMS の活用で UI/UX と運用効率が大幅に向上！Web サイトのマイグレーション・構築・開発・デザイン
クライアント	株式会社インフォマート様