creatersnest126

サイトやチラシなどに使うアクセスマップをIllustratorで作る方法


こんにちは、ウェブガカリです。
GoogleMapsを使えば、サイト上に直接地図を表示できるので便利ですよね。
しかし、サイトのコンセプトやデザインによっては使いづらい場合がありますし、そもそもチラシなどの紙媒体では使えません。
そこでGoogleMapsのスクリーンショットを撮るなどして自分で作成する必要が出てくるのですが、『Google マップおよび Google Earth に関する使用許諾ガイドライン』によると…

トレース: Google マップまたは Google Earth を、独自の地図やその他の地理コンテンツのトレース元として使用することはできません。

とあり基本的には禁止されています。

ですので、今回はこちらのサイトを利用します。

OpenStreetMapのサイトのスクリーンショット

https://openstreetmap.jp/

OpenStreetMap(OSM)はフリーの地理情報データを作成することを目的としたプロジェクトで、誰でも自由に利用する事が出来ます。

それでは、アクセスマップを作っていきましょう。

 

準備

まずは、新規ドキュメントを作成します。
今回は仮に紙媒体を想定、単位はmm、A4横向きとします。
ファイル名はお好きな名前をつけてください。

Illustratorで新規ドキュメントの作成

 

次に、作成したい地図周辺のスクリーンショットを撮影してCtrl+VでIllustrator上に地図を貼り付けます。
(キーボードのAlt+PrintScreenで、選択されているウィンドウのみのスクリーンショットが撮れます)

Illustrator上へ地図の貼り付け

 

カラーのままだとやや見難いので、地図をグレースケールに変換します。
上部メニューの[編集]から[カラーを編集]⇒[グレースケールに変換]を選択してください。

グレースケールに変換

 

レイヤーパネルのレイヤーをダブルクリックしてレイヤーオプションを表示してください。
(見当たらなければF7でレイヤーパネルを表示できます)
分かりやすいように名前を『下絵』に変更、テンプレートを選択して[OK]をクリックしてください。

テンプレートレイヤーの作成

すると下絵レイヤーがロックされ半透明になります。

テンプレート化されてロックされたレイヤー

これで準備は完了です。

 

通り・線路の作成

次に、レイヤーを分けて通りと線路を描いていきます。

大きい通り・小さい通り・線路レイヤーを作成します。

種類別のレイヤーを作成

さきほど作成したレイヤー毎にペンツールで通りと線路を描いていきます。

通り・線路をペンツールで描く

通り・線路レイヤーのアピアランスパネルに新規線を追加します。

アピアランスパネルに新規線を追加

色・線幅を設定します。

色・線幅の設定

線路は破線で描きます。
線分と間隔を同じ数値にすると線路らしくなります。

アピアランスパネルで破線の設定

アピアランスパネルを利用すると、後々修正になった時に直しが楽です。
積極的に利用しましょう。

通り・線路の完成

 

 

交差点部分の処理

それでは、重なってしまっている交差点部分を繋げていきましょう。

線路レイヤーの下に、交差点レイヤーを作成します。

交差点レイヤーの作成

小さい通りレイヤーの右丸をクリックして、小さい通りレイヤー全てを選択してください。

小さい通りレイヤーの全選択

そのままCtrl+Cでコピーをして交差点レイヤーを選択後、Ctrl+Shift+Vで同じ位置にコピーしてください。
そして交差点レイヤーのアピアランスパネルの枠線にあたるレイヤーの、目のマークをクリックして非表示に。
すると交差点が綺麗に繋がります。

繋がった交差点

 

 

ライブペイント

次に、ライブペイント機能を使って公園などを塗っていきましょう。
この部分は必要なければ飛ばしてもらってかまいません。

まずはライブペイントレイヤーを作成します。

ライブペイントレイヤーの作成

交差点の処理の時と同じように、Ctrl+Cでコピー、ライブペイントレイヤーを選択後Ctrl+Shift+Vで同じ位置にコピーします。
そして[オブジェクト]メニューから[ライブペイント]⇒[作成]を選択してライブペイントを作成してください。

ライブペイントの作成

塗りを設定して、ライブペイントツールを使って公園などをペイントします。

ライブペイントツールでペイント

 

 

仕上げ

仕上げに、クリッピングマスクを使って利用したい形に切り取ります。

クリッピングマスクレイヤーを作成して、長方形ツールなどで使用したい範囲を囲みます。

クリッピングマスクの準備

Ctrl+Aで全てのオブジェクトを選択後、Ctrl+7でクリッピングマスクを作成します。

クリッピングマスクを作成

あとはペンツールや長方形ツールなどを使って公園やビルといったオブジェクトを作って完成です。
フリー素材を使ってもいいですね。完成したアクセスマップ

お疲れ様でした。

 

まとめ

ライブペイントの部分が分からなければ、単純に図形を作って配置してしまってもいいと思います。
目的地や目印になるものを立体的に作れば、より目立つので地図を見る人にとっては分かりやすくなります。
工夫して、見易い地図を作ってくださいね。

地図素材はこちらからお借りしました。
マップラボ

今回参考にしたサイト
Creating a roadmap in Illustrator

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


NESTonlineBlog編集部

NESTonlineBlog編集部です。ご寄稿頂いた記事などを公開していきます。

Next Article【こんなこともできるの!?】Photoshopで3Dの画像を作る方法