多言語の製品情報を、ヘッドレスCMSと共同開発で支える

多数の製品と技術情報を言語別に整理し、閲覧者が目的の情報へ迷わず到達できることが求められました。一方で、CMS、フロント実装、外部ツールを複数社で分担する体制だったため、データ項目、画面、公開工程の責任範囲を明確にする必要があります。新旧仕様が並行する場面や、デザイン確定後に管理項目が変わる場面でも、表示と登録の食い違いを防ぐことが重要でした。スマートフォンを含む下層画面、SEO、計測、公開日の共有まで、全体を見通した調整が必要な案件でした。

サイト構造とCMS項目の対応表を作り、画面ごとに誰が何を用意し、どの環境で確認するかを課題へ明記しました。製品情報は共通部品へ分解し、Kurocoの登録内容をNuxt.js側で再利用できる構成にしています。メニュー、検索、資料、FAQ、多言語切り替えなど、影響範囲が広い機能はデータ登録から表示までを一連のシナリオで確認。外部会社とのGit運用では担当範囲と反映順をそろえ、定例会の決定事項、公開日、テスト結果を記録しました。公開後の言語追加や機能変更にも同じ手順を使える運用へ整えています。

製品群、企業情報、技術資料へ素早く移動できるよう、階層の深い情報をメニューと見出しで整理しました。PCでは情報量の多いメガメニューを活用し、スマートフォンでは下層まで含めて操作状態を設計。システムへ組み込みやすい共通パーツとして、カード、タブ、一覧、詳細、ダウンロード導線を定義しました。文字量や言語が変わっても崩れにくい余白と行数を設定し、製品の専門性を保ちながら読み進めやすい画面にしています。デザインデータには状態と例外を注記し、実装者が判断に迷う箇所を減らしました。

KurocoをヘッドレスCMSとして用い、Nuxt.jsからAPIで製品、ニュース、FAQ、資料などを取得して表示しました。CMS登録をディレクション側でも検証し、入力項目とフロントの出力を相互に確認できる体制を構築。複数社でのGit運用ではブランチ、担当範囲、レビュー、反映環境をそろえ、外部ツールとの連携や既存仕様の変更も履歴へ残しました。多言語ページ、メニュー、画像配信、ダウンロード、計測を横断してテストし、公開後はFAQの仕様変更や画像パスの更新などにも継続対応できる実装基盤としています。