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