プロジェクト概要

「既存の headless CMS では手が届かない、もっと自由な運用を実現したい」というニーズに応えるために開発した、高拡張・多機能な自社用CMS基盤です。

LPや小規模サイトでは WordPress や microCMS が選ばれることが多いですが、複雑なビジネスロジックや高度な権限設定が必要な場合、汎用ツールでは設定が困難になることがあります。本プロジェクトでは、そうした課題を解決するため、シンプルながらもカスタマイズ性の高いベースシステムを構築しました。

Fox Studio CMS

技術構成とシステム設計

モダンで堅牢なフルスタック開発

フロントエンドには Nuxt 4 を、バックエンドには Express.js を採用。認証には JWT（JSON Web Token） を活用した REST API 設計により、高速な動作とセキュアな通信を両立しています。

また、管理画面としての使い勝手を重視し、Tailwind CSS v3 を用いたミニマルで直感的な UI を実装。開発環境には Docker を導入し、チーム開発やデプロイの再現性を高めています。

  • Frontend: Nuxt 4 / Vue 3 / Tailwind CSS v3
  • Backend: Node.js (Express.js) / MySQL
  • Auth: JWT (JSON Web Token)
  • Quality: ESLint / Markuplint / Vitest
  • Infrastructure: Docker / Git (CI/CD)
  • Design: Adobe XD

多彩なコンテンツ運用機能

直感的な編集ワークフロー

コンテンツ制作に集中できるよう、プレビュー機能と連動したドラフト（下書き）機能を実装。「公開」「非公開」「削除」のステータス管理により、柔軟な運用が可能です。

ダッシュボード視認性を重視したダッシュボード

コンテンツ一覧検索・フィルタリングに優れたコンテンツ一覧

ニュース編集リッチな編集が可能なニュース投稿画面

画像の最適化とメディア管理

手間をかけずに高品質な配信を

画像のアップロード機能では、サーバー負荷を軽減しつつ高品質な配信を実現するため、自動圧縮（WebP / AVIF） を組み込んでいます。アップロード先は環境変数で柔軟に切り替え可能で、ローカルサーバーからクラウドストレージまでシームレスに対応します。

メディアアップロードドラッグ＆ドロップ対応のメディア管理

組織運用を支える管理機能

柔軟な権限設定と予約投稿

複数人での運用を想定し、Admin / Editor / Viewer の3段階の権限（RBAC）を用意。また、キャンペーンや告知に欠かせない時刻指定公開（予約投稿） 機能も備えており、管理者の運用負荷を大幅に軽減します。

ユーザー管理詳細な権限設定が可能なユーザー管理画面

サイト公開設定即時公開・予約公開の選択が可能な公開設定