先日、ニホン継業バンクさんの「みんなでつくる残したい仕事マップβ」が公開されました。地域の「残したいお店・技術・仕事」をタレコミしてもらい、地図上に見える化するというサービスです。
このマップ、実は最初から今の形が決まっていたわけではありません。プロトタイプの段階から少しずつ形を変えながら、公開までたどり着きました。今回はその開発の裏側を振り返ってみます。
きっかけは「Googleマイマップをオリジナルデザインにしたい」
そもそもの始まりは、既存のGoogleマイマップのデータを、サイトのデザインに馴染む形で見せたい、というシンプルな相談でした。
Googleマイマップは便利ですが、見た目をブランドに合わせてカスタマイズすることはできません。そこで、地図のライブラリ（Leaflet.js）を使って、データはスプレッドシートから読み込みつつ、見た目は完全にオリジナルで作る、という方針でスタートしました。
最初のプロトタイプは、スプレッドシートのデータをそのままコードに埋め込んだだけの静的なものでした。まずは「動くものを見てもらう」ことを優先し、そこから少しずつ要望を聞きながら作り込んでいく進め方です。
「更新したら自動で反映される」を実現する
プロトタイプを見てもらう中で出てきたのが、「スプレッドシートを更新したら、自動的にマップにも反映されるようにしたい」という要望でした。
これは技術的には難しい話ではないのですが、いくつか考えるべきポイントがありました。
- スプレッドシートを「ウェブに公開」する必要があるが、これはセキュリティ的に大丈夫なのか
- 誰でも編集できてしまうのではないか
結論としては、「ウェブに公開」の設定は閲覧専用であり、編集権限までは付与されないため問題ないという整理ができました。ここは技術的な話であると同時に、クライアントに正しく安心してもらうための「説明」も含めて大事な工程でした。
地図の見た目、何を選ぶかで意外と迷う
地図には「タイル」と呼ばれる画像データが使われていて、これを差し替えることで見た目を変えられます。ここが今回、一番検討を重ねたポイントでした。
最初はCARTOという無料のタイルを使っていましたが、「Googleマップに近い見た目にしたい」「日本語表記を完全にしたい」といった要望が出てくるたびに、選択肢を洗い出して比較する必要がありました。
- CARTO：無料・キー不要だが、地名が完全な日本語ではない
- MapTiler：日本語対応だが、地名の日英表記が混在することがある
- 国土地理院：完全に日本語対応、無料でキーも不要。ただし見た目は地形図寄り
- Google Maps API：見た目は申し分ないが、APIキーの管理や従量課金が発生する
それぞれにメリット・デメリットがあり、特にGoogle Maps APIについては「見た目は一番良いが、セキュリティ対応のためにサーバー側の処理が必要になり、その分開発コストが上がる」という説明を丁寧に行いました。
最終的には、コストと運用のバランスを見て、国土地理院のタイルに着地しています。無料で、日本語表記も完璧で、出典表示さえ守れば商用利用も問題ない、というのが決め手でした。
3つのデータソースをどう1つの地図にまとめるか
途中で大きな仕様変更がありました。「タレコミ」「募集記事」「継ぐまち・継ぐひと」という3種類のデータを、1つの地図の上にまとめて表示したい、という要望です。
「ややこしい指示で申し訳ない」と前置きされながらの相談でしたが、実際にはそこまで複雑な話ではありませんでした。データソースが増えるだけで、仕組みとしてはピンの色や形を変えて区別するだけです。
最終的にはカテゴリを「後継者募集中！」「継業しました！」「継業中」「残したい！」の4種類に整理し、それぞれに色を割り当てる形に落ち着きました。
オリジナルのピンをどう表現するか
このマップの見た目を印象づけているのが、吹き出し型のオリジナルピンです。これはクライアント側でデザインしたSVGファイルを渡してもらい、それを地図上で動的に使えるように実装しました。
ピンには3つのパターンがあります。
- 「残したい！」用の、文字入りの塗りつぶしピン
- 画像がある場合の、枠線だけのピンに写真をクリッピングして入れるもの
- 画像がない場合の、文字入り塗りつぶしピン
特に画像をピンの中に円形にクリッピングして表示する部分は、何度か調整が必要でした。SVGの線の太さの分だけ外側にはみ出してしまい、枠線が欠けて見えてしまう問題があったのですが、これは表示エリアの計算を座標ベースで見直すことで解決しました。見た目の細かい調整は、実際にスクリーンショットを見ながらのやり取りが一番早く、何度かキャッチボールをしながら仕上げていきました。
PCとスマホで違う操作感を作る
途中から、UIについても「地図の上にフィルターを浮かせたい」「PCとスマホで見せ方を変えたい」という要望が出てきました。
最終的な形は以下のようになっています。
- PC・タブレット：ハンバーガーメニューを押すと、カテゴリと業種のフィルターがドロワーで開く
- スマホ：地図の上部に、カテゴリと業種のフィルターを横スクロールできる形で常に表示
同じ機能でも、画面サイズによって適切な見せ方は変わります。この振り分けも、実際にスクリーンショットを見ながら「ここはこうしたい」というやり取りを重ねて調整しました。
セキュリティは後回しにしない
外部から取得したデータや画像を表示する以上、セキュリティへの配慮は欠かせません。今回は以下の対応を行っています。
- リンクを
innerHTMLで挿入するのではなく、安全な方法でDOMを組み立てる - 外部リンクを開く際は
rel="noopener noreferrer"を必ず付与する - 記事URLや画像URLは、ニホン継業バンクのドメインのみを許可するホワイトリスト方式で検証する
これらは見た目には現れない部分ですが、公開するサービスである以上、後回しにしてはいけないポイントだと思っています。
公開後も、対話は続く
サイトが実際に公開されたあとも、「初回アクセス時に位置情報の許可ダイアログが毎回出るのはなぜか」といった、運用の中で出てくる素朴な疑問への対応が続きました。
これはブラウザの標準機能によるもので、制作側でコントロールできる範囲には限界があります。ただ、「なぜそうなるのか」「改善するとしたらどんな選択肢があるのか」を丁寧に説明することも、開発と同じくらい大事な仕事だと感じています。
おわりに
プロトタイプから始まったこのマップは、要望を聞きながら少しずつ形を変えて、最終的には200件を超えるデータを、日本語の地図の上に、オリジナルデザインのピンで表示するところまでたどり着きました。
技術的な選択肢は無数にありますが、大事なのは「何が正解か」ではなく「今回の目的とコストのバランスに一番合っているのはどれか」を都度考えることだと思っています。
こういった地図・データ活用の相談は今後も増えていきそうな予感がしています。同じような課題を持っている方がいれば、ぜひ相談してみてください。