開発事例 / 開発基盤

ブランド＆SEO統合システム

ファビコン・OGP・SEOを一元管理するAPI基盤

公開中

lib/brand.tsで設定を一元管理し、SVGファビコン・Apple Touch Icon・OGP画像・JSON-LD構造化データを動的生成。設定変更だけで全アセットが自動更新される。他のアプリからもAPIとして参照可能で、ブランド統一を効率化。

この作品の要点

困っていたこと	ファビコン・OGP画像を各プロジェクトで個別に用意するのが手間。
やったこと	設定ファイル1つで全アセットを動的生成するAPI化。
起きたこと	ブランドアセット管理の工数を大幅削減。

どこでつまずいたか

01ファビコン・OGP画像を各プロジェクトで個別に用意するのが手間

02ブランドカラーやロゴ変更時に全プロジェクト修正が必要

03SEO対策（構造化データ等）の実装が属人化しやすい

01設定ファイル1つで全アセットを動的生成するAPI化

02他アプリからURLで参照可能にし、変更が即時反映される設計

03SEOコンポーネントをライブラリ化し、再利用可能に

担当	設計・API開発・SEO設計
使った技術	Next.js 16 App Router・TypeScript・Edge Runtime・ImageResponse API・SVG生成・JSON-LD・PWA (manifest.json)