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」を紹介させてもらった。
これにていくらかは時間短縮を図れるとは見込んでいるが、いざ必要に駆られてからプラグインをインストールしていては手間取ってしまうかもしれない。可能ならば、事前にインストールを済ませて、利用するその時を待つのが懸命だろう。
このエントリーが、あなたのクリエイティビティを広げるものであると期待したい。
