第4回　Web用地図を作成しよう 仕事に使えるグラフィックス入門

Illustratorは地図のような図形を描くのに便利だ。複雑な地図も簡単に作ることが可能だ。作成した地図はFlash形式で出力し、GoLiveでHTMLにはめ込んでみよう。拡大・縮小のできる便利な地図が完成する(月刊アスキー 2002年7月号より再掲)。

Tips1　下絵になる地図をトレースする

地図ソフトのデータをコピーして
Illustratorにリンクさせる

画面1　Adobe GoLiveで作った寿司屋のHTML。ここに掲載する地図をIllustratorで作ってみよう。出力する画像形式はFlashのswf形式だ。ちなみに、寿司屋の店名やロゴマークもIllustratorで描いている。

	「仕事に使えるグラフィックス入門　第3回」(from 月刊アスキー)。写真をクリックすると当該記事に移動します。	「Adobe Illustrator 10 日本語版」レビュー(ASCII24 Reviewオリジナル)。

　会社や店舗の地図は、企業のサイン、つまり標識や記号の一部だと小生は考えている。つまり、地図もCI(Corporate Identity)の一環だと思う。だから、自分の会社やお店の地図を作るのなら、その企業の特性が一目でわかるものにするべきだろう。というわけで、今回はサインとして優れた地図の描き方を紹介しよう。

　例にあげた地図(画面2)は、実在する寿司店のもので、小生が以前に作成した出前用メニューに掲載したものだ。その制作過程を説明しながら、今回はWeb用にFlashのswf形式に出力し、Adobe GoLiveを使ってHTMLを作成してみよう(画面1)。

	画面2　Illustratorで描いた寿司屋の地図。バックの魚の絵がボケているのは、Illustrator9以降に搭載されている「効果」の「ぼかし(ガウス)」機能を使っている。

　せっかくベクトル描画ツールであるIllustratorを使って地図を描くのだから、保存形式はベクタデータのswf形式にするのがおすすめだ。GIFやJPEGは画像の拡大・縮小時にどうしても画質が劣化するが、swf形式にはそれがない。これがベクタデータのいいところだ。地図データをHTMLにレイアウトする際、他のオブジェクトとのバランスを考えて、どのようなサイズにも簡単に変更できる。

　実際に画面2の地図を描き始める前に、準備として、まず地図の画像データを用意しなければならない。紙の地図をスキャナでスキャンしてもいいが、地図ソフトを持っているのなら、それからコピーするのもいいだろう。ここではインクリメントPの「MapFan.net」(画面3)を使ってみた。MapFan.netの専用ビューアーを使って地図データを表示したら、キーボードの[Alt]＋[PrtSc]キーを押すと、表示されている地図データがクリップボードにコピーされる。次にAdobe Photoshopを起動して「新規」ファイルを開き、[ctrl]＋[v]キーを押すとクリップボードにコピーした地図データがペーストされる(画面4)。それに適当な名前を付けて保存すれば、準備は完了だ。

画面3　今回、下絵に使う地図は、インクリメントPのMapFan.netを使った。描きたい地図を表示させ、[Alt]＋[PrtSc]キーを押す。これで地図ウィンドウがクリップボードにコピーされる。

Tips2　線だけで簡単に道路を描く

はじめは「線」だけで道路を描く
道路全体をデフォルメする

　地図を描くときのポイントは、初めから道路の輪郭を描こうとしないことだ。まず、画面6のように道路を「線」で大雑把に描く。また実際の道路のように複雑な「線」にしないこと。道路をどこまで描くかを考えて、デフォルメしながら直線で描くことが大切だ。そして、それがどんな形に見えるかをイメージしてみる。サインとしての地図を描くためには、ここが最も重要なポイントだ。ここでは寿司店の地図を描くわけで、寿司店に関連する何かに見えないかを考える。今回の場合、道路が魚の骨に見えてきたので、地図全体を魚に見立てることにする。ここまでくれば地図は完成したも同然だ。あとは、道路の「線」の太さ(画面8)や長さを調整して、画面9の手順でアウトライン化する。

画面4　Photoshopを起動して、「ファイル」→「新規」をクリック。クリップボードにコピーされた画像のサイズが自動的に指定されているので、そのまま「OK」ボタンをクリック。[ctrl]＋[v]キーでペーストする。名前を付けて保存しておく。	画面5　Illustratorを起動して新規ファイルを開き、画面4で保存したファイルを「ファイル」→「配置」でリンクとして読み込む。地図画像を描きたい方向に回転させ、不透明度を50％程度に下げておく。
画面6　地図をリンクしたレイヤーの上に新規レイヤーを作り、そこに「ペンツール」で道路を描く。正確な道路ではなく、ある程度デフォルメして描くとよい。その際、道路がどんな形に見えるかイメージする。	画面7　道路が魚の骨に見えてきたので、地図の背景になる魚の形を「ペンツール」で描く。その形に合わせるように、道路の線の長さや角度を調整する。
画面8　「選択ツール」を使って道路の線を選択して「線種」パレットで「線幅」を太くし、「線端の形状」で「丸型線端」をクリックする。幹線道路か一般道路かによって道路の太さを変えるとよい。	画面9　すべての道路を選択してから、「オブジェクト」→「パス」→「パスのアウトライン」をクリックする。これで太くした線の輪郭をパスに変換できる。

• 下絵になる地図をトレースする／線だけで簡単に道路を描く
• 地図を完成させてswf形式で出力する／GoLiveでHTMLを編集しよう