パンフレットや広告チラシなどに載っている、上図のようなイラストマップ。皆さん一度は目にしたことがあると思います。イラストマップは地図内の地理を一目で把握できることが利点です。イラストですから目的地を目立たせたり、余分な情報を削りシンプルにまとめたり、ユーモアさを加えてみたりと、Googleマップなどとは違いバリエーションは無限大。illustratorで作ってさえおけば、例えば会社のコーポレートサイトや名刺の裏、広告チラシなどにも応用が可能。デザインによっては会社の味も出すことができます。
そこで今回は、illustratorを用いた見やすいイラストマップの描き方を、弊社のマップを例にご紹介します。
コーポレートサイトや名刺に地図を載せて分かりやすくしたいとお考えの方や、イラストレーターを始めたばかりで使い方を勉強したいとお考えの方は是非ご参照ください。
目次
- ベースの作成
- JR路線の作成
- 私鉄路線の作成
- 国道マークの作成
- 仕上げ
- 応用編
ベースの作成
今回はillustratorのバージョンCS6をキャプチャーしております。では早速作っていきましょう。
illustratorの基本的な操作方法は省略しますが、「長方形ツール」や「楕円形ツール」で道路や駅、主要な建物を描きます。目印となる建物は入れすぎないように注意し、なるべくシンプルにしましょう。
斜めの道路は、いったん長方形を描いた後で「オブジェクト▶︎変形▶︎回転」、曲がった道路は「ペンツール」を使用しました。
JR路線の作成
「直線ツール」で黒い線を描き（13pt）、直線を選択して「ウインドウ▶︎アピアランス」でアピアランスのメニューを開きます。
左下の「新規線を追加」をクリック。
すると一番上に新たな行が加わるので、色を白にし、線幅を11ptにします。
こうしてできたのは2本の黒線。13ptの太い黒線の上に11ptの白線が描かれている状態です。
次に白線の「線パネル」を表示し、「破線にチェック▶︎線分30pt▶︎間隔30pt」とすれば完成です。
回転させてから駅と重ね、駅を選択し「オブジェクト▶︎重ね順▶︎前面へ」で配置は完了です。
私鉄路線の作成
JR岐阜駅の北東には名鉄岐阜駅もありますので、名古屋鉄道もJRと区別しながら作成していきます。
基本はJR路線の描き方と同じです。まず「直線ツール」（曲線の場合はペンツール）で黒い線を描き（5pt）、直線を選択してアピアランスのメニューを開きます。次に「新規線を追加」をクリックし、「線パネル」を表示、線幅10pt、破線にチェック、線分2pt、間隔10ptとすれば完成です。
国道マークの作成
道路標識の素材を無料でダウンロードできるサイトはありますが、情報量を少なくしてシンプルにまとめたいので、今回は自作します。
まず「多角形ツール」で辺の数を「3」として三角形を生成し、輪郭線を無くして青く塗っておきましょう。
次に三角形を選択した状態で「オブジェクト▶︎変形▶︎リフレクト」を選択し、「水平」にチェックを入れて「OK」をクリックすると、水平方向を軸として対称移動します。
そして三角形を選択した状態で「効果▶︎スタイライズ▶︎角を丸くする」を選択し、「半径」は5mmとします。半径の値が大きいほど丸くなっていきます。
あとは白色のテキストで「157（フォント：ヒラギノ丸ゴ Pro W4）」と入力しサイズをうまく調整しながら重ねて完成です。
仕上げ
最後に建物の名前や方位磁針を加えれば、だいぶ地図らしく仕上がりました。
応用編
地図に立体感を出すために、イラストマップを3D化する方法をご紹介します。
「選択ツール」で図をすべて選択し、「オブジェクト▶︎グループ」を選択し、グループ化します。次に「効果▶︎3D▶︎押し出し・ベベル」を選択します。
すると下図のようなメニューが表示されますので、「位置」を「自由回転」、３つある「回転」を上から「50°」「0°」「0°」、「遠近感」を「90°」、「押し出しの奥行き」を「0pt」、「ベベル」を「なし」、表面を「陰影なし」と設定して「OK」をクリックします。
すると下図のように奥行きが表現できます。ちょっと感動しますね。
次に、建物となるパーツだけをコピーして新しいファイルに貼り付けます。パーツを全て選択して3D押し出し・ベベルオプションダイアログボックスを表示し、「位置」を「自由回転」、３つある「回転」を上から「20°」「0°」「0°」、「遠近感」を「0°」、「押し出しの奥行き」を「200pt」、「ベベル」を「なし」、表面を「陰影なし」と設定して「OK」をクリックします。
すると立体が出来上がりますので、「オブジェクト▶︎アピアランスを分割」をクリックします。さらに、「オブジェクト▶︎グループの解除」を選択し、上面、側面を別々のオブジェクトとして扱えるようにします。
色で明暗をつけます。
立体をもとの場所に配置します。
ビルの窓、木、バス停などを入れると賑やかになります。
終わりに
最後に再確認ですが、イラストマップで重要なのは「分かりやすいこと」です。そのために「情報量は少なめでシンプルにまとめる」「的確な位置に目印となる建物を配置し、目的地まで確実に誘導する」ことを前提に考えつつイラストマップを作成しましょう。
参照：見やすい・分かりやすいアクセスマップの作り方のコツ
本記事に関する提供サービス
・ホームページ制作
