【社内インタビュー】Mapboxを用いた地図開発について
松田
イチマルイチデザインではこの度、Mapboxを用いた地図開発を行いました。今回は、開発を担当したフロントエンドエンジニアの吉永さんにMapboxの開発にまつわる話を聞いていきます。
今回お聞きするプロジェクトは、Mapboxを用いた地図開発とのことですが、どのような案件だったのでしょうか。
災害時に様々な情報を地図上でリアルタイムに表示する「災害情報マップ」のプロトタイプの実装という案件です。
災害時の避難情報や浸水・洪水の危険度分布といった様々な情報を地図上で提示し、災害時に利用者が周囲の危険を適切に理解し、避難行動を判断することを目的としています。
最初は土地や道路の色などのベースとなる地図のデザインとその上に乗る重畳データ（浸水や洪水の危険度分布、停電情報、台風情報、ハザードマップなど）の色味などの各種UIデザインをFigmaで制作して納品するというお話だったのですが、Figma上で完結するのが難しく、実際にプロトタイプを制作して納品という形になりました。
このプロジェクトはどのような体制とプロセスで進められたのでしょうか。
弊社では、9名（ディレクター1名、UIデザイナー2名、UIデザイン品質サポート1名、テックリード兼フルスタックエンジニア1名、フロントエンドエンジニアサポート2名、契約管理2名）で体制を組みました。
まずはベースマップのデザイン制作ということで、Mapboxの提供するMapbox Studioというツールを使うことになりました。これはマップのカスタマイズをウェブブラウザ上でGUI（Graphical User Interface）で行えるツールです。Mapbox Studioでカスタマイズできる項目の洗い出しを行い、クライアント様から指定のあったベースマップの設定の一覧と照らし合わせながら、Mapbox Studio上のどの機能に当たるのかをリスト化しました。その後、デザイナーがベースマップの作成に入ったので、技術面のサポートとして私たちエンジニアがそれぞれのデザイナーのサポートを行っています。
その間、ベースマップの上にのせる重畳データのサンプルについては、クライアント様からご共有いただいたので、Mapbox GL JSというライブラリを使用して私の方でローカルでの描画テストを行いました。またUIのデザインに入ってからは、弊社で作ったDev環境でワイヤーを見ながら、機能の雛形の実装とサンプルデータの描画に入りました。表示の速さというところも大事だったので、言語はReactでフレームワークはNEXT、ホスティングにはVercelを使用しています。
そして、UIデザインがほぼ固まった段階で、UIの実装に入りました。同時にデザインのフィードバックもあったので、デザインの変更もリアルタイムで行いながらの実装です。現在、UIの実装はひと段落し、実際の調査用のデータを組み込んだり追加のフィードバック分を反映しているところです。
Mapboxのはじめの印象はいかがでしたか？
Mapboxのウェブサイト上に「自由自在に地図描画」という言葉があるのですが、カスタマイズ性の高さに驚きました。ベースマップのカスタマイズもGUIで行えるので、非エンジニアでも手軽に行えるのが便利だと思います。例えば、ズーム値によって色を変えたり、幅を変えたり。本当に細かい部分の設定が変えられるんです。特に今回はベースマップのデザインの提案も含まれていたので、エンジニアを介さずデザイナーが直接マップを触りながらデザインを反映できたのが良かったと思います。直接見ながらデザインを反映することで、イメージも湧きやすかったのではないでしょうか。
開発にあたり、特に気を配った点や工夫をした点はありますか？
ベースマップの作成時にセンシティブな地名の表記は避け、海外の情報は地形のみに絞りたいとの要望があり、その点は気を使いました。特に元々作っていたデザインを崩さず日本だけの情報を表示させたり、一部施設のラベルやアイコンをデザイン的に変更したいという要望をMapbox Studio上で再現する方法を見つけるのに苦労しましたね。ベースマップのスタイルはJSONドキュメントなので、マップをカスタマイズする際にJSONを編集するか、Mapbox Studioを使って編集するかの2通りなのですが、まさに“これ”というドキュメントが見当たらなかったので、とにかくドキュメントを隅々まで読み込んだり、直接Mapbox Studioを使いながら方法を探りました。
プロジェクトを振り返って、印象的だったことはありますか？
台風の進路図をJavascriptで描画するのが大変でした。台風の進路情報から緯度や経度などの必要なデータを取得し描画するのですが、よくニュースなどで見かける予報円同士を繋ぐ線を描画するのに時間がかかりました。今回は円同士の距離の計測にTurf.jsというライブラリを使用しています。単純に繋ぐだけだと円が重なったときに線も重なってしまい綺麗に見えないので、円で線を分割し、必要な線のみ描画させました。初めての経験だったため、テックリードの松井さんにサポートしていただきながら何とかやり遂げることができ、とても印象に残っています。
今後、どのように活かせると思いますか？
デジタル地図の開発は、地図表示や住所の検索、道路探索や道案内など、様々なサービスで需要があるかと思います。今後、様々な地図プラットフォームが検討される中で、カスタマイズ性やデザイン性の高さ、コストの低さといった点でMapboxが選択肢の一つとなることも多くなっていくのではないでしょうか。またMapboxを使用したプロジェクトに参加する機会があれば、デザイン面・実装面ともに今回の経験を活かしたいと思っています。
関連記事
Category
