誰でもできるIllustratorを使った地図の描き方

地図を描くためにはIllstratorを使うことが多いのではないでしょうか。
いろいろ描き方や表現方法はあると思います。
ここでは、「私なりの」地図の簡単な描き方を紹介します。

基本編 -地図を描くときのポイント-

地図を描くときのポイントはたった3つです!
・できるだけ曲線は描かない!
・線のみを使って描く!
・線は3種類くらいを使い分ける!

基本編 -できるだけ曲線は描かない-

普通、真っ直ぐな道というのはあまり存在しません。どこかしら曲がっているものです。
ただし、地図を描く場合は曲がった道を忠実に曲げて描くと、なんだか汚くなるのです。(これは単純に、綺麗に曲線が描けないという技術に問題があるのかもしれませんが・・・)
特にwebサイトに載せるような地図は要点(主要な交差点とか学校とか)さえ抑えておけば、細かく描く必要がありません。
できるだけ簡略に。なので、道は直線で描きます。
ただし、線路や主要な道路など、1つや2つくらいであれば曲線を使ったほうがきれいな場合もありますので、それは臨機応変にやってください。

基本編 -線のみを使って描く-

線のみを使って描くと非常に楽です。
線のみであれば、道の終わり(終点)の形状も簡単に円形と直角を変更できますので楽です。
線を使用すると縁取りができないと思われるかもしれませんが、レイヤーを使うことで、非常に簡単に縁取りできます。
地図を描いて、それを複製します。
上のレイヤーの線の幅を下のレイヤーより細くすれば、縁取りされたように見えます。
これなら、交差したところもきれいにできます。

基本編 -線は3種類くらいを使い分ける-

大きな道路(国道)など道路の幅によって、線の幅も変えると見やすい地図になります。
ただし、リアリティをもたせようとして、線の幅を変えすぎるのも逆に主要な道路というのがわかりにくくなってしまいます。
多くても3種類くらいあればよいのではないでしょうか?

実践編 -まずは道路から-

実践してみます。上記のことに注意して地図を描いてみようと思います。
使用するIllustratorのバージョンは9です。
用意したのは、本当に適当な場所。掛川城が目的地の地図です。

サンプルマップ

まず最初のポイントはレイヤーを使用するということです。
下絵となる地図画像、道路、線路、目印となるもの・・・などをお好きなような名前で機能別にレイヤーを作成します。
今回は以下のようにレイヤーを作成しました。
レイヤーウィンドウ

下絵のレイヤーはロックをかけておくと、便利です。
さくさくと地図をトレースします。このとき注意するのはできるだけ直線で描くということです。
CSであれば、直線ツールなるものがあるらしいですが、9にはないので、ペンツールで描きました。

ここで問題となるのはどこまでの道路を描くべきか、ということ。
その地図の場所がどういうところが知っておかねばなりません。仕事で作成する場合はクライアントに聞いてみたほうがよいです。
私も地図上の道路を描いていたらクライアントから、その道の先はある会社しかないから描く必要はないです、とか言われたこともありますので。
今回、掛川城辺りのことをさっぱり知らないので、すごく適当に描きました。
サンプルはこちら。

道路まで描いた地図

また、地図を描くときに、道路の端部分はどうするべきか?と悩んでしまいます。
今回のように、先端の形状を「丸型先端」にしてしまうか、とりあえず線を適当に延ばしておいて、最後にクリッピングマスクではみ出した部分を非表示にするという2つのパターンがあるのではないかと思います。

実践編 -線路の描き方-

線路は9から搭載された「アピアランス」機能を使うとかなりすばやく描けます。
アピアランスは一本のパスに複数の線や塗りを指定できます。
アピアランスのパレットが出ていない場合は、「ウインドウ→アピアランスを表示」をクリックします。
線路の線を描いたら以下のように設定します。
アピアランスウィンドウ

一番下に線路のふちとなる部分、真ん中が背景です。一番上に破線です。破線は以下のように設定することでできます。
線種ウィンドウ

地図は以下のようになりました。
線路まで描いた地図

実践編 -道路名を挿入-

続いて、道路の名前を描きます。道路の名前と言うのは、「国道1号」とか「県道39号」とかです。これは皆さんもよく知っている標識を使用します。国道は三角、県道は六角形です。
今回は自分で作成しましたが、面倒な方は、フリー素材を利用するのもよいと思います。
クリップアートファクトリーというサイトがあります。こちらのサイトは、地図を描いたり、ポスターを作製したり、プレゼンする際に非常に役立つ素材がいっぱいです。
クリップアートファクトリー

道路標識の素材のダウンロードは以下から。
【RICOH DigiClip】-CLIP ART Factory

以下のページには地図作成に役立ちそうな素材がありました。併せて使用してはいかがでしょうか?
地図用作成素材-CLIP ART Factory

地図は以下のようになりました。

標識まで描いた地図

実践編 -最後に目印を-

最後に目印となる「コンビニ」や「公共機関」を描き込みます。
といっても、ロゴを最初からIllustratorから作り出すのは結構面倒・・・。
なので、フリーで配布しているロゴを借りてきてしまいましょう!
地図記号 - CREATOR'S EXCHANGE
以下のようなロゴが手に入ります。

サンプルロゴ

このサイトは他にもいろんなマークをeps形式で配布していますので、すごく重宝します。

このサイトは素材を「StuffIt形式」で圧縮しています。
これを解凍するには専用のツール「SttuffIt Expander」が必要です。
以下のサイトからダウンロードしてください。
SttuffIt Expander - act2.com ダウンロード
ツールをPCにインストールするとき、「解凍ユーティリティをインストールします」というメッセージが出る場合があるかもしれませんが、そのまま「はい」で続行してください。

あとは、駅など描き込んだら完成!

完成した地図

今回は描きませんでしたが、車用に大きな交差点には信号のマークを描くと、わかりやすくなってよいのではないでしょうか。

かなり雑に地図を描いてしまいましたが、基本はこんなところではないでしょうか。
あとは、家の近くとか知っている場所の地図をいろいろ描くと勉強になってよいと思います。
私も技術的にはまだまだなので、勉強します。

※最後に。コンビニ等のロゴを商用サイトで使用する場合は一応、企業側の許可を取っていたほうがよいかもしれません。
投稿日:2007年2月 3日 | 編集

トラックバック歓迎です。以下URLにて登録をお願いいたします。

このエントリーのトラックバックURL:

↓↓↓トラックバックしてくださった方々↓↓↓
※トラックバックされても管理人がスパムと判断したものは公開されません。

ホームページ制作一括見積もり
top

ホームページ作成に役立つコーナー