第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　すべての道路を選択してから、「オブジェクト」→「パス」→「パスのアウトライン」をクリックする。これで太くした線の輪郭をパスに変換できる。

Tips3　地図を完成させてswf形式で出力する

パスオブジェクトを合成する
パスファインダの形状エリアに追加

	画面10　線だった道路が画面のようにパスオブジェクトに変換された。続いて「パスファインダ」パレットの「形状エリアに追加」、「分割・拡張」をクリックすると、道路全体を1つのパスオブジェクトに変換できる。
	画面11　地図の背景に描いた魚のパスオブジェクトの「塗り」に色をつけ、「効果」→「ぼかし」→「ぼかし(ガウス)」でぼかし効果を与える。道路の「塗り」を白に設定する。
	画面12　最上部に新規レイヤーを作成して、目的地やランドマーク、それぞれの文字を作成する。ランドマークは作りすぎないことがポイント。幹線道路がある場合は、道路名を記載しておこう。目的地はお店のロゴマークを使うとベスト。

　「線」で描いた道路の輪郭が、「パスのアウトライン」でパスに変換された。この方法を使わず、「線」に太さを持たせたままでも道路として成り立つ。しかし、途中から太くなる道路を描きたい場合や、複雑な形状の交差点を描くときは、アウトライン化したほうが編集の自由度が高くなるのだ。描く地図の性質によって、それらを使い分けるといいだろう。また、画面10のように、パスオブジェクトを「パスファインダ」で合成する際、Illustrator 10からは元の状態を複合パスとして維持してくれるようになった。つまり、合成後も元のオブジェクトを編集できるわけだ。「分割・拡張」をクリックすると、Illustrator 9以前と同じように1つのパスオブジェクトに変換してくれる。後から編集しなおす必要がある場合は、「分割・拡張」しないようにしよう。

　地図の背景、ランドマークとなる図形や文字が入力できたら地図の完成だ。後は、swf形式に出力してIllustratorを閉じ、GoLiveを起動しよう。

画面13　描いた地図をIllustratorの形式で一旦保存したら、次にswf形式で保存するために「ファイル」→「データ書き出し」をクリックする。

画面14　「ファイルの種類」で「Macromedia Flash」を選んで、「保存」をクリック。「形式オプション」では「書き出し形式」で「AIファイルをSWFファイルに変換」を選び、「HTMLを生成」にチェックを付けて「OK」をクリック。

画面15　画面14で指定したフォルダにHTMLファイルと、swfファイルの2つが作成される。HTMLファイルを開いて、地図画像が表示されるかを確認しておこう。

Tips4　GoLiveでHTMLを編集しよう

ドラッグ＆ドロップで簡単編集
面倒な設定は必要なし

画面16　GoLiveを起動して既存のHTMLを開いておく。次に画面15で作った地図のHTMLを開いて、swf形式の画像を選択し、コピーする。

画面17　既存のHTML上にswf地図画像をペーストする。他のオブジェクトとのバランスを考え、地図画像のサイズを変更する。swf形式の画像は、拡大縮小しても画質が劣化しない。

　Illustratorでswfを出力する際、画面14で「HTMLを生成」にチェックを付けておけば、swf形式のファイルを正しく表示する設定が記述されたHTMLファイルが自動的に生成される。(画面15)このHTMLファイルをGoLiveで読み込んで、表示されたswfオブジェクトを既存のHTMLファイル、例えば店舗の紹介がされているHTMLファイルにドラッグ＆ドロップするだけで、簡単にswfオブジェクトを移植できる。(画面16)移植した後は、他のオブジェクトとのバランスを考えて、swfオブジェクトのサイズをマウスで調整してやればいい(画面17)。

　swf形式に変換した地図は、Webブラウザ上でも拡大縮小ができる。画面18、19のように、Webブラウザで表示された地図を右クリックして「拡大」を選ぶと、外枠はオブジェクトのサイズまでだが、その中で地図が何段階かに拡大できる。拡大された地図は、マウスでドラッグすることも可能だ。限られた領域内で全体と詳細を見比べる必要のある地図のような画像にとって、swf形式はうってつけなのである。

見る人が楽しめる地図を描こう
デフォルメを楽しむ

画面18　地図を張り込んだHTMLをアップしてWebブラウザで表示する。地図の上で右クリックしてコンテキストメニューから「拡大」を選んでみよう。

画面19　地図が拡大表示され、マウスでドラッグできるはずだ。小さくでよく見えない部分も、拡大することで確認できる。swf形式だとこんな便利な使い方もできる。

　Illustratorは、精密な図形を描くことが得意なソフトだが、より独創的で印象的な図形を描くことも得意だ。画面20のような思いっきりデフォルメされた地図も、線にさまざまな効果を与えることのできる「アートブラシ」という機能を使えば、ペンツールで線をひいていくだけで、いとも簡単に描くことができるのだ。あとは、どんな風に地図をデフォルメするかを楽しんでもらいたい。ただし、見る人が楽しみながらも、目的地まできちんとたどり着けるようなデフォルメを心がける必要があるだろう。

画面20　Illustratorのブラシ機能を使えば、「ブラシ」パレットでブラシサンプルを選び、「ペンツール」で道路を描くだけで、手書き風の地図を簡単に描くこともできる。

次回予告

　次回からは、FlashやQuickTime MovieといったWeb向けアニメーションを作成できるツール「Adobe LiveMotion」などを利用してのWeb作成・画像編集テクニックを紹介する。

• 【関連記事】「仕事に使えるグラフィックス入門　第3回　A0の大判ポスターを作成する」(from 月刊アスキー)
• 【関連記事】「仕事に使えるグラフィックス入門　第2回　自分の企画書に満足してますか？」(from 月刊アスキー)
• 【関連記事】「仕事に使えるグラフィックス入門　第1回　仕事でAdobe Illustratorを使うべき理由(ワケ)」(from 月刊アスキー)
• 【関連記事】アドビシステムズ「Adobe Photoshop Elements 2.0」レビュー(from 月刊アスキー)
• 【関連記事】アドビシステムズ「Adobe Photoshop Elements 2.0」レビュー(from アスキー PC Explorer)
• 【関連記事】アドビシステムズ「Adobe Photoshop 7 日本語版」レビュー(from アスキー PC Explorer)
• 【関連記事】アドビシステムズ「Adobe Illustrator 10 日本語版」レビュー(from ASCII24 Reviewオリジナル)
• 【関連記事】アドビシステムズ「Adobe Photoshop Elements」レビュー(from ASCII24 Reviewオリジナル)
• 【関連記事】アドビシステムズ「Adobe Photoshop 6.0 日本語版」レビュー(from ASCII24 Reviewオリジナル)
• 【関連記事】フォトレタッチソフトレビューインデックス
• 【関連記事】グラフィックソフトレビューインデックス
• 【関連記事】ASCII24「アドビ、『InDesign 2.0』と『Illustrator 10』の日本語版を発表」ニュース

(薮田 織也)