観光関連サイト向け地図ウィジェット群の開発

訪日観光分野のWebサイトで使われる、地図を用いたインタラクティブなUIコンポーネント（ウィジェット）群を開発しました。

課題: テーマ別ページごとに異なる地図UIが必要

観光サイトのトップページやテーマ別ページ（積雪情報、ダイビングスポット、アクセス情報など)では、それぞれ異なる地域・カテゴリを表現する地図UIが求められていました。単発のページ実装ではなく、今後複数のテーマページへ展開できる形で地図コンポーネントを構築する必要があり、また対象サイトの利用者層を踏まえて古いブラウザ（IE11)を含む幅広い環境での表示互換性も確保する必要がありました。

アプローチ: 再利用可能なウィジェットとして地図コンポーネントを構築

Vue.jsとStorybookによるコンポーネント単体の開発環境を整備し、SVGベースの地図・エリア選択UIをウィジェットとして実装しました。ビルド時に単一のJavaScriptファイルへバンドルし、既存サイトへ埋め込み可能な形で納品する構成を採用しました。Babelやpostcss-preset-envなどのトランスパイル環境を組み込み、レガシーブラウザでも動作するようにしました。Figmaで作成したデザインガイドをもとにコンポーネントを実装するワークフローを確立し、最初のテーマページ用ウィジェットで確立した実装パターンをもとに、後続の複数テーマページ向けウィジェットを短期間で複製・展開しました。

成果

地図コンポーネントをテンプレート化することで、テーマ別ページごとの地図ウィジェットを効率的に追加開発できる体制を実現しました。