TOP
Web制作実績
金融のWeb制作実績
某金融関連企業 MSコンパス Webサイト構築・運用

某金融関連企業 MSコンパス Webサイト構築・運用

MSコンパス Webサイト構築・運用

中堅・中小企業の経営者に向けて、経営課題の解決に役立つ情報やセミナー、各種サービスを提供するWebサイトを構築しました。ヘッドレスCMSのKurocoとNuxtを組み合わせ、記事・セミナー・サービス情報の管理、会員登録・ログイン、会員向けコンテンツ、各種申し込みフォームなどを実装しています。初期構築時はNuxt 2を採用し、その後も運用を継続しながら、Nuxt 3/4世代へのバージョンアップを進めています。

クライアント名	某金融関連企業
業種	金融レジャー・エンタメ
サイトのカテゴリ	サービスサイトシステム開発
サイトの特徴	JSギミック新規サイト構築 nuxt KUROCO
制作範囲	企画構成制作進行ディレクションデザインコーディングシステム CMS 会員管理

依頼内容とご要望

Kurocoで管理するコンテンツをWebサイトへ反映し、情報提供だけでなく、会員登録やログイン、セミナー申し込みなどにも対応したサイトを構築したいというご要望がありました。
また、公開後も長期的に運用できるよう、コンテンツ更新のしやすさと、フロントエンド技術のバージョンアップに対応できる構成が求められました。

提案内容とポイント

KurocoをヘッドレスCMSとして利用し、フロントエンドをNuxtで構築する構成を採用しました。
コンテンツ管理と画面表示を分離することで、Kuroco側で更新した記事やセミナー情報をAPI経由で取得し、用途に応じて一覧・詳細・プレビュー画面へ展開しています。
さらに、GitHub Actionsを利用して静的ファイルの生成からKurocoFrontへの公開までを自動化。初期のNuxt 2版からNuxt 3/4世代への移行にあたっては、既存URLや会員機能、API連携を維持しながら、段階的に構成を見直しています。

システム開発のポイント

KurocoとNuxtを組み合わせたヘッドレスCMS構成により、管理画面でのコンテンツ更新と、フロントエンドの柔軟な表示を両立しています。
また、一度構築して終わりではなく、公開後の改修を重ねながらNuxtの世代更新にも対応。長期運用を前提として、機能とURLを維持しながらシステム基盤を更新しています。

主な機能

記事・インタビュー掲載 / セミナー情報・申し込み / サービス・経営課題情報 / 会員登録・ログイン / マイページ / 会員向けコンテンツ / お問い合わせ・相談フォーム / CMSプレビュー / サイトマップ生成

外部サービス・システム連携

Kuroco Content API / Kuroco会員・認証API / Kurocoフォーム / KurocoFront / GitHub Actions / 郵便番号検索API

表示速度や運用面での工夫

Kurocoから取得した公開コンテンツをもとに、ビルド時に一覧・詳細ページのURLを生成しています。
GitHub Actionsでは、静的ファイルの生成、生成結果と設定ファイルの検証、公開用データの作成、KurocoFrontへの通知までを自動化しました。
Nuxt 3/4世代への移行後は、SSR時とブラウザ表示時の差異、認証状態、旧URLからのリダイレクト、404ページなども調整し、既存サイトの動作を維持しながら新しい構成へ置き換えています。

デザイナーのコメント

今回確認したソースと共有内容からは、デザイン担当者の具体的なコメントまでは判断できません。無理に掲載せず、空欄でよいと思います。

エンジニアのコメント

Kurocoから取得する多数のコンテンツに加え、会員登録・ログイン、マイページ、セミナー申し込み、各種フォームなど、幅広い機能をNuxt側へ組み込んでいます。
初期構築後も運用を継続し、Nuxt 2からNuxt 3/4世代への移行を進めました。フレームワークの仕様変更に対応しながら、既存URL、認証状態、プレビュー機能、動的ページ生成などを引き継ぐ必要があり、単純なバージョン更新ではない大規模な再構築となりました。

その他の制作実績

某金融関連企業 MSコンパス Webサイト構築・運用

某住宅・不動産関連企業

某住宅・不動産関連企業

某製造業企業

某住宅・不動産関連企業