Googleマップの埋め込みなど、Webサイト上に地図を表示させる方法は他にもありますが、サイトのデザイン的な統一感を保つ意味や、分かりやすい地図を表示するためには、Illustratorで地図を描いたほうがいい場面も多いかと思います。ここでは、Googleマップの地図をIllustratorでトレースする方法をご紹介します。
１．まずは、Googleマップから目標となる位置の地図を表示しましょう。ここでは一例として、当教室のアクセスマップを描いてみます。Googleマップを開きます。
京都駅前の地図を表示させましょう。（他に描きたい場所がある場合は違う場所でも構いません。）
２．この地図のスクリーンショットを撮ります。ブラウザに地図を表示した状態で、Alt+PrtSc（プリントスクリーン）を押します。これでクリップボードに表示画面が一時保存されました。
３．次にPhotoshopを起動します。[ファイル]→[新規]を選択し、プリセットがクリップボードになっていることを確認して、カンバスを開きます。
４．カンバス上にクリップボードの画像をペーストします。Ctrl+vでペーストできます。
下の写真のようになります。
５．この画像を保存します。[ファイル]→[Webおよびデバイス用に保存]を選択し、今回は劣化しないようにPNG-24形式で保存しましょう。ファイル名はmap.pngとしておきましょう。
６．このPNGファイルをIllustratorのアートボード上にテンプレートとして配置します。まずはIllustratorを起動しましょう。[編集]→[環境設定]→[単位]を選択し、単位をすべてピクセルに変更します。次に、[ファイル]→[新規]を選択し、[新規ドキュメントプロファイル]を[Web]に設定してドキュメントを開きます。
７．次に、さきほど保存した地図のPNGファイルをテンプレートとして読み込みます。[ファイル]→[配置]を選択し、map.pngを選択するのですが、このときテンプレートのチェックボックスにチェックを入れておきましょう。
８．テンプレートレイヤーのロックを外して、地図をトレースしやすい位置に移動・拡大・縮小しましょう。
９．編集レイヤーを「レイヤー１」に変更して、地図をトレースしましょう。今回作成する地図は、卒業制作に埋め込む場合もあるかと思います。制作予定の作品のイメージに合わせた色使いや装飾にしましょう。また、京都の地図を描く場合は、碁盤の目を意識して地図を描くのが好ましいと思います。
地図の完成例）
