某製造業企業 製造業向け多言語コーポレート・製品情報サイト構築

国内外の利用者に向けて、製品情報や技術資料を分かりやすく提供できるWebサイトが求められました。
製品カテゴリ、FAQ、カタログ、取扱説明書など多くの情報を扱うため、目的の情報へ迷わず到達できる検索性と、各言語のコンテンツを継続的に更新できる運用環境が必要でした。
また、一部の資料については会員ログイン後にダウンロードできる仕組みも必要とされました。

ヘッドレスCMSのKurocoとNuxtをAPIで連携し、コンテンツ管理とフロント画面を分離した構成を採用しました。
製品情報やニュース、FAQ、カタログ、取扱説明書などをKurocoから取得し、情報の種類に応じた一覧・詳細・検索画面を構築しています。
5言語それぞれのサイト構成と更新内容を管理しながら、共通する表示や機能は可能な範囲で統一しました。会員認証や資料ごとの公開制御にも対応し、一般公開情報と会員向け情報を同じサイト内で扱えるようにしています。

Kurocoをコンテンツ管理基盤として利用し、NuxtからAPI経由で各種情報を取得するヘッドレスCMS構成です。
5言語のコンテンツ展開に加え、製品情報の階層管理、FAQ検索、会員認証、資料ダウンロード制御など、企業サイトと製品情報システムの両方の性格を持つWebサイトを構築しました。
GitHub ActionsによるCI/CD環境も整備し、ソースコードの更新からNuxtの静的生成、成果物の検証、Kuroco Frontへの公開までを自動化しています。

製品情報の階層表示 / ニュース・お知らせ管理 / FAQ検索 / サイト内検索 / カタログ・取扱説明書一覧 / 会員登録・ログイン / 会員向け資料ダウンロード / コンテンツプレビュー / 5言語表示

Kuroco API / Kuroco Front / GitHub Actions / 会員認証API / 外部フォーム・マーケティング基盤 / Google Tag Manager / reCAPTCHA / 外部画像配信

Nuxtによる静的生成 / Kuroco APIデータのキャッシュ利用 / APIから取得した情報をもとにした詳細ページの事前生成 / 画像配信と画像サイズの最適化 / 言語別サイトの管理 / サイトマップの自動生成 / GitHub Actionsによる本番・ステージング環境への自動デプロイ / ビルド成果物とKuroco用設定ファイルの自動検証

多数の製品情報を扱うサイトのため、情報量が多くても目的のページを探しやすい階層構造とナビゲーションを意識しました。
製品カテゴリ、FAQ、資料ダウンロードなど、利用目的の異なるコンテンツを整理し、言語が変わっても共通した操作感で利用できる構成を目指しています。

KurocoのAPIから製品情報、ニュース、FAQ、資料情報などを取得し、Nuxtで各画面へ展開しました。
製品カテゴリの階層表示、複数条件によるFAQ検索、サイト内検索、会員ログイン、資料ごとのダウンロード制御など、コンテンツ表示以外の機能も多い案件です。
動的な情報を扱いながら、静的生成やAPIレスポンスのキャッシュ、画像の最適化などを組み合わせ、表示速度と更新性の両立を図りました。5言語それぞれの表示と運用を考慮する必要があり、規模の大きなKuroco連携案件となりました。
また、GitHub Actionsを利用して、ブランチへの反映を起点にNuxtの静的生成、成果物の検証、Kuroco Frontへの公開までを自動化しました。本番環境とステージング環境を分け、複数言語のサイトを継続的に更新しやすい公開フローを整備しています。