Webサイト制作で地図コンテンツを配置することも、少なくない。というよりコーポレートサイトには欠かせない要素のひとつといえる。そしてそのほとんどがGoogleマップで、お客様におかれてもGoogleマップ以外の選択すら考えていないほど確実にである。

私は、モックアップ作成時に地図コンテンツ配置が要求された場合、往々にしてGoogleマップのキャプチャを用いるわけだが、この工程を煩わしく感じてしまう。ブラウザでGoogleマップを開き、該当プレイスを表示する。大きめにキャプチャして、対象オブジェクトにクリッピングマスクをかける。そして表示位置を調整する。面倒くさい。

工程を増やすことで研ぎ澄ましていく類のものと違い、制作の現場では可能な限り無駄を省かなければならない。とはいえもちろん省くなかにも、見極めが大切だと考えている。

たとえば、デザイン装飾のクオリティを上げる工程は重要なことであり、省いてはならない。その一方で、画像を書き出す作業は、省略できそうなものだ。

この違いには、なにがあるのだろうか？

私の理解では「ゴールが見えていて、そこまでの過程が面倒だと感じるか否か」であるが、あなたなりの理解でこのエントリーを読み進めていただけると幸いだ。

さてGoogleマップをアートボード上に表示する作業は、間違いなく省きたい作業に該当する。あなたがAdobe XDで作業しているならば、この工程を省略できるプラグイン「Maps generator」を紹介したい。使えるかどうか検討してみてほしい。

Maps generator プラグインについて

Maps generatorは、Adobe XDアートボード上にGoogleマップを表示する効率UPを図れるプラグインだ。このプラグインは、Google Maps APIを使用して地図を生成している。したがって、Webブラウザに表示する場合と遜色がないはずだ。

特徴

• 地名、または緯度経度を入力するだけで取得できる
• マップタイプやズーム値を変えられる
• ロケーションピンの有無を選べる

使い方

Maps generatorは、ダイアログを操作して使うタイプのプラグインとなっている。まずはMaps generatorプラグインをインストールしてもらいたい。その手順はとても簡単だ。

インストール

インストールの手順を示していこう。まずはAdobe XDのツールバー「プラグイン」>「プラグインを見つける…」をクリックしてほしい。

果たして、つぎのモーダルウインドウが開く。モーダルウインドウからプラグイン検索を行おう。入力フォームに「maps generator」と入力する。すると対象プラグインの「Maps generator」が表示されるはずだ。インストールボタンをクリックして完了させよう。

マップを表示する

まずはアートボード上に、マップ表示用のオブジェクトを配置する。

オブジェクトがアクティブな状態で、ツールバー「プラグイン」に「Maps generator」が表示されていることを確認できたらクリックしよう。

果たして、つぎのダイアログが開く。ダイアログには、

• Location
• Zoom Level
• Map Type
• Location Pin
• Enter Styles json

の設定項目が設けられている。Locationに目的地、あるいは緯度経度を入力。Zoom Levelでズーム値を変更。Map Typeで地図の種類を選択。Location Pinでピンの有無を切り替え。Enter Styles jsonでマップに装飾を与える。設定が決まったら「Generate Map」ボタンをクリックする。

果たして、Googleマップが表示される。ご覧のとおりオブジェクトぴったりにGoogleマップが配置されてるのがわかると思う。

これにてMaps generatorの地図生成は以上だ。

まとめ

クリエイターにおいて、余計な作業がアイデアの案出を阻害しかねない。アイデアを起こすモックアップ作成において、強力な機能になるに違いないと思い「Maps generator」を紹介させてもらった。

これにていくらかは時間短縮を図れるとは見込んでいるが、いざ必要に駆られてからプラグインをインストールしていては手間取ってしまうかもしれない。可能ならば、事前にインストールを済ませて、利用するその時を待つのが懸命だろう。

このエントリーが、あなたのクリエイティビティを広げるものであると期待したい。