ブログ

2015.09.11

イラストレーターを用いた見やすいイラストマップの描き方
イラストレーターを用いた見やすいイラストマップの描き方

Web制作

こんにちは、松井です。

パンフレットや広告チラシなどに載っている、下図のようなイラストマップ。皆さん一度は目にしたことがあると思います。

Screenshot_20
https://townweb.e-okayamacity.jp/miyoshidemura/09chonaimap/index.htmlより

イラストマップは地図内の地理を一目で把握できることが利点です。イラストですから目的地を目立たせたり、余分な情報を削りシンプルにまとめたり、ユーモアさを加えてみたりと、Googleマップなどとは違いバリエーションは無限大。イラストレーターで作ってさえおけば、例えば会社のコーポレートサイトや名刺の裏、広告チラシなどにも応用が可能。デザインによっては会社の味も出すことができます。

そこで今回は、イラストレーターを用いた見やすいイラストマップの描き方を、弊社新オフィスのマップを例にご紹介します。

コーポレートサイトや名刺に地図を載せて分かりやすくしたいとお考えの方や、イラストレーターを始めたばかりで使い方を勉強したいとお考えの方は是非ご参照ください。

目次

  1. ベースの作成
  2. JR路線の作成
  3. 私鉄路線の作成
  4. 国道マークの作成
  5. 仕上げ
  6. 応用編

 ベースの作成

今回はイラストレーターのバージョンCS6をキャプチャーしております。では早速作っていきましょう。

イラストレーターの基本的な操作方法は省略しますが、「長方形ツール」や「楕円形ツール」で道路や駅、主要な建物を描きます。目印となる建物は入れすぎないように注意し、なるべくシンプルにしましょう。

斜めの道路は、いったん長方形を描いた後で「オブジェクト▶︎変形▶︎回転」、曲がった道路は「ペンツール」を使用しました。

Screenshot_1

JR路線の作成

「直線ツール」で黒い線を描き(13pt)、直線を選択して「ウインドウ▶︎アピアランス」でアピアランスのメニューを開きます。

Screenshot_2

左下の「新規線を追加」をクリック。

Screenshot_3

すると一番上に新たな行が加わるので、色を白にし、線幅を11ptにします。

Screenshot_4

こうしてできたのは2本の黒線。13ptの太い黒線の上に11ptの白線が描かれている状態です。

次に白線の「線パネル」を表示し、「破線にチェック▶︎線分30pt▶︎間隔30pt」とすれば完成です。

Screenshot_5

回転させてから駅と重ね、駅を選択し「オブジェクト▶︎重ね順▶︎前面へ」で配置は完了です。

Screenshot_6

私鉄路線の作成

JR岐阜駅の北東には名鉄岐阜駅もありますので、名古屋鉄道もJRと区別しながら作成していきます。

基本はJR路線の描き方と同じです。まず「直線ツール」(曲線の場合はペンツール)で黒い線を描き(5pt)、直線を選択してアピアランスのメニューを開きます。次に「新規線を追加」をクリックし、「線パネル」を表示、線幅10pt、破線にチェック、線分2pt、間隔10ptとすれば完成です。

Screenshot_7

国道マークの作成

道路標識の素材を無料でダウンロードできるサイトはありますが、情報量を少なくしてシンプルにまとめたいので、今回は自作します。

まず「多角形ツール」で辺の数を「3」として三角形を生成し、輪郭線を無くして青く塗っておきましょう。

Screenshot_8

次に三角形を選択した状態で「オブジェクト▶︎変形▶︎リフレクト」を選択し、「水平」にチェックを入れて「OK」をクリックすると、水平方向を軸として対称移動します。

Screenshot_9

そして三角形を選択した状態で「効果▶︎スタイライズ▶︎角を丸くする」を選択し、「半径」は5mmとします。半径の値が大きいほど丸くなっていきます。

Screenshot_10

あとは白色のテキストで「157(フォント:ヒラギノ丸ゴ Pro W4)」と入力しサイズをうまく調整しながら重ねて完成です。

Screenshot_11

仕上げ

最後に建物の名前や方位磁針を加えれば、だいぶ地図らしく仕上がりました。

Screenshot_12

応用編

地図に立体感を出すために、イラストマップを3D化する方法をご紹介します。

「選択ツール」で図をすべて選択し、「オブジェクト▶︎グループ」を選択し、グループ化します。次に「効果▶︎3D▶︎押し出し・ベベル」を選択します。

Screenshot_13

すると下図のようなメニューが表示されますので、「位置」を「自由回転」、3つある「回転」を上から「50°」「0°」「0°」、「遠近感」を「90°」、「押し出しの奥行き」を「0pt」、「ベベル」を「なし」、表面を「陰影なし」と設定して「OK」をクリックします。

Screenshot_14

すると下図のように奥行きが表現できます。ちょっと感動しますね。

Screenshot_15

次に、建物となるパーツだけをコピーして新しいファイルに貼り付けます。パーツを全て選択して3D押し出し・ベベルオプションダイアログボックスを表示し、「位置」を「自由回転」、3つある「回転」を上から「20°」「0°」「0°」、「遠近感」を「0°」、「押し出しの奥行き」を「200pt」、「ベベル」を「なし」、表面を「陰影なし」と設定して「OK」をクリックします。

Screenshot_16

すると立体が出来上がりますので、「オブジェクト▶︎アピアランスを分割」をクリックします。さらに、「オブジェクト▶︎グループの解除」を選択し、上面、側面を別々のオブジェクトとして扱えるようにします。

Screenshot_17

色で明暗をつけます。

Screenshot_18

立体をもとの場所に配置します。

Screenshot_19

ビルの窓、木、バス停などを入れると賑やかになります。

Screenshot_1

 

終わりに

最後に再確認ですが、イラストマップで重要なのは「分かりやすいこと」です。そのために「情報量は少なめでシンプルにまとめる」「的確な位置に目印となる建物を配置し、目的地まで確実に誘導する」ことを前提に考えつつイラストマップを作成しましょう。

 

 

ホームページ制作でお悩みですか? アクシスのホームページ制作サービスをご覧ください。

WEBコンサルティング

最適化・最大化させる。

制作、集客、解析、改善、検証まで一気通貫した完全オーダーメイドのWebコンサルティング。
お客様のビジネスゴールに向けた戦略的コンサルティングを行います。

VIEW MORE くわしく見る

ホームページ制作

キレイなだけじゃない。

競合分析・サイト設計から更新・運用までトータルサポート。
Web集客のプロが在籍しているアクシスだからこそ実現するデータに基づき最適化されたHPを制作します。

VIEW MORE くわしく見る

ネット集客・広告

来てほしい人が来てくれる。

御社にとっての最適解は、本当にリスティング広告で集客することですか?
リスティング運用者全員がWebコンサルタントのアクシスでは、そこから話を始めます。

VIEW MORE くわしく見る

解析・分析・改善

あなたのサイトを丸裸に。

Webサイトの現状を正しく把握し、目指すべき姿とのギャップを知る。
“2軸思考”であなたのWebサイトを丸裸にし、Webサイトで今何が起きているかを正しく把握します。

VIEW MORE くわしく見る

お問い合わせ

メールフォームからの
お問い合わせ