AMEYOKO MAP

課題・背景

アメ横商店街の店舗情報をまとめたマップサイト制作として、チーム開発案件に参加。 多数の店舗情報を扱うWebサービスであり、視認性・操作性・更新性が重要なプロジェクトでした。

マップデザインとSVG最適化を担当し、大規模な情報を扱うUIの構築経験を積みました。 長期運用を見据えた設計が求められる案件でした。

目的

来訪者が店舗を探しやすいマップ型Webサービスを構築すること。 大量の店舗情報を整理し、直感的に操作できるUIを実現することを目指しました。

ターゲット

・アメ横商店街を訪れる観光客
・特定の店舗を探している来街者
・アメ横の店舗情報を確認したいユーザー

問題点・仮説

・店舗数が多く、視認性を確保する情報設計が必要
・Illustratorデータが重く、Web表示時のパフォーマンスが課題
・店舗変更や区画変更に対応できる運用設計が必要
・データとUIを連携させるインタラクション設計が必要

改善・デザイン意図

アメ横全体を網羅した初のマップ制作として、店舗の位置関係・区画・視認性を考慮しながら設計。 大量の店舗情報を整理し、ユーザーが探しやすい構成を実現しました。

Illustratorデータが非常に重く、Web表示時のパフォーマンスが課題に。 前景・背景を分割してSVG化し、表示負荷を大幅に軽減しました。

SVG化したマップに店舗IDを紐づける属性付与を担当。 チーム開発ツールを使用してデータとUIを連携し、インタラクティブなマップ体験を構築しました。

実装・施策

マップデザインをIllustratorで作成し、SVG形式で最適化。 店舗情報とマップを連携させるため、属性付与とデータ連携を実施しました。

店舗や区画変更が多く、修正時の再属性付与など継続的な更新を前提に制作。 長期運用を見据えた柔軟な構成を構築しました。

学び・成果

・大規模情報を扱うマップUI設計の経験を獲得
・SVG最適化によるパフォーマンス改善スキルを向上
・チーム開発におけるデータ連携の知識を習得
・長期運用を見据えた設計思考を身につけた
・大規模店舗情報を扱えるマップUIを構築