【Sketch】地図を埋め込むおすすめ時短プラグイン

はじめに

今日ご紹介するのは、Sketchのデザインに素早く簡単に地図を入れることができる時短プラグイン、sketch map generatorです！

Sketchで会社情報のページなどのアクセス部分をデザインしていて、地図をとってくるためにわざわざブラウザを開き、会社をGoogle Mapsで検索し、良い感じのズームまで調整し…など一連の作業ってめんどくさいですよね…。

形に入れた時に、幅が足りない…高さが足りないとなり、またGoogle Mapを開くところからやり直し、となったら作業効率がガタ落ちです。

今回ご紹介するsketch map generatorを使えば、Sketch内でMapをとってくることができるので、とても便利です！

sketch map generatorとは

概要

sketch map generatorとは、フロントエンドエンジニアの Eduardo Gómez Vásquez が開発したSketch内でGoogle Mapsのスクリーンショットをシェイプのfillとして設定することができる時短プラグインです！

使える地図の種類

Mapbox

MapboxとはGoogle Mapsに近い地図サービスです。Google Mapsもすごいですが、Mapboxはさらにカスタマイズ性が高く地図の種類が豊富なのが特徴です。

Mapbox 公式サイト

Google Maps

バージョン

Sketch 4以上のバージョンで使用できるプラグインです。

セットアップ / 使い方

では、実際にsketch map generatorのセットアップと使い方をご紹介します。

プラグインは無料で使えます。

sketch map generatorのリポジトリ
sketch map generator

1. プラグインをインストールする

プラグインをインストールしていない方は、以下いずれかの方法でインストールしてください。

すでにインストールされている方は、次のステップへ。

1. Sketchpacksでインストールする

2. Sketch Runnerでインストールする

1. Sketch Runner を開く
2. install コマンドに移動する
3. Map Generator を検索する

Sketch Runnerはコマンドライン感覚でSketchを動かすことができるSketchのプラグインです。ダウンロードはSketch Runner w公式サイトからどうぞ。また、使い方に関してはこちらからどうぞ。
【Sketch】Sketch内でAlfredを使うようなSketch Runner とは？

3. マニュアル

1. sketch map generator公式リポジトリのZipファイルをダウンロードし、解凍する
2. Map Generator.sketchpluginをダブルクリックして自動インストールを実行させる

2. プラグインを使用する

1. シェイプを作る。
長方形がおすすめですが、円形や三角などでも使用できます。

2. Map Generatorのプラグインを走らせます。

Google Mapsの地図を埋め込みたい場合:

Plugins > Map Generator > Generate a Map using Google Maps
ショートカット: Shift + Cmd + M

Mapboxの地図を埋め込みたい場合:

Plugins > Map Generator > Generate a Map using Mapbox
ショートカット: Shift + Cmd + B

3. 地図の設定を入力する

Enter an address or a place:
埋め込みたい地図の住所や建物名を入力します。

Please choose a zoom level:
地図のズームレベルを指定します。

You can choose a map type as well:
マップの種類を選びます。

Google Maps:
roadmap – 道路や建物などが表示される地図
satellite – 衛星写真を使った地図
hybrid – 衛星写真の上に道路や建物などが表示されている地図
terrain – 地形情報を使った地図

Mapbox:
Mapboxの地図のスタイルはこちらからご確認ください。

4. 確定して地図を確認する
設定を変更したら、「Ok」で確定し、地図を確認します。

特に、ズームレベルは事前にマップのプレビューがないので、どれくらいになるのかわからない分、何度か試していただかないとイメージ通りにならないかもしれないです。

まとめ

以上、今日はSketchのデザインに素早く簡単に地図を入れることができる時短プラグイン、sketch map generatorをご紹介しました。

Google Mapsだけでなく、Mapboxにも対応しているので、地図の種類が豊富です。
ぜひデザインに地図をよく取り入れる方は試してみてください。