Illustratorで複雑なイメージマップを作る

主に地図などから地域をクリックして該当ページに飛ばすなんてときに役立ちそうなネタです。

イメージマップって毎回座標を指定したりするのが面倒なんですよね。

ですが、この方法を使えば簡単にイメージマップを作れます。

便利なんだけど滅多にそんな案件は来ないので次来た時わすれててもいいようにメモ。

やりかた

今回は以前とある案件で使用した日本地図を例に進めてみます。

まずはとりあえず、Illustratorで地図を書きましょう。または完成してる地図を開きます。

続いて、「属性パネル」でイメージマップの設定をします。出ていない場合は「ウィンドウ」メニューにあるので開きます。

開いたら設定をしたいオブジェクトを選択肢ます。

その前に、属性パネルに「塗りにオーバープリント」と「線にオーバープリント」しか出ていない場合は、右上の端っこにあるメニューボタンから「すべてを表示」をクリックします。

イメージマップという項目が出てくるので、「多角形」を選択、URLに飛び先URLを指定しますが、この時点で未定ならば、どのエリアか分かるような名前を適当につけておきましょう。

マップ化しないならイメージマップを「なし」にします。

あとはこれを必要な分だけ繰り返します。

完了したら、「ファイル」メニューから「書き出し」を選択し、ファイル形式にJPEG(jpg)を選択し、「書き出し」をクリックします。

書き出しの設定が現れますので、「イメージマップ」にチェックし、HTMLにマップを埋め込む場合は、「クライアント側 (.html)」を選択します。

あとは保存するだけです。

自動的にjpgファイルと、下記のような素っ気ないHTMLが作成されます。

<html>
<head>
<meta http-equiv=content-type content=text//html;charset=utf-8>
</head>
<body>
<map name="japan">
<area shape="poly" alt="" coords="74,405, 75,402, 77,395, 79,392, 79,390, 78,386, 73,384, 70,384, 25,384, 24,384, 21,385, 19,387, 18,389, 14,401, 14,403, 14,407, 18,408, 21,409, 67,409, 69,409, 72,408, 74,405" href="kyushu-okinawa">
<area shape="poly" alt="" coords="104,240, 98,262, 99,263, 100,263, 108,263, 109,263, 110,262, 113,253, 114,252, 115,252, 126,252, 127,252, 127,253, 112,308, 112,309, 111,309, 108,309, 106,310, 105,311, 96,346, 97,348, 100,349, 108,349, 110,348, 111,347, 112,345, 112,344, 114,344, 146,344, 148,343, 152,342, 155,339, 157,331,160,319, 164,305, 167,294, 168,290, 169,288, 171,287, 172,287, 177,287, 180,287, 182,283, 190,258, 190,255, 187,254, 186,253, 182,253, 180,252, 179,250, 182,241, 182,239, 181,236, 178,234, 175,234, 113,234, 111,234, 107,236, 105,238, 104,240" href="kyushu-okinawa">
<area shape="poly" alt="" coords="300,292, 288,331, 287,333, 283,337, 277,338, 274,338, 185,338, 181,338, 175,335, 174,332, 174,330, 185,294, 187,291, 191,286, 197,285, 201,285, 290,285, 293,285, 298,287, 300,291, 300,292" href="shikoku">
<area shape="poly" alt="" coords="334,235, 325,266, 323,269, 320,274, 316,275, 311,275, 308,275, 212,275, 210,275, 207,273, 206,270, 213,251, 213,250, 213,248, 210,248, 208,247, 191,247, 188,247, 188,243, 189,237, 190,234, 191,232, 193,229, 197,227, 201,227, 325,227, 328,227, 333,229, 334,233, 334,235" href="chugoku">
<area shape="poly" alt="" coords="324,341, 334,305, 333,303, 331,303, 325,303, 322,302, 322,300, 322,299, 324,294, 328,280, 333,262, 338,245, 342,231, 344,226, 344,224, 347,222, 350,221, 352,221, 384,221, 386,221, 389,222, 389,225, 388,228, 389,231, 392,232, 419,232, 422,232, 425,233, 426,235, 426,237, 417,272, 415,274,412,274, 409,274, 407,275, 406,276, 388,342, 386,345, 383,345, 328,345, 327,345, 324,345, 324,343, 324,341" href="kinki">
<area shape="poly" alt="" coords="582,220, 576,243, 575,245, 573,248, 570,249, 567,249, 541,249, 539,249, 536,250, 534,253, 533,254, 525,282, 525,283, 525,286, 528,287, 530,287, 532,287, 534,287, 536,288, 537,290, 531,312, 528,314, 525,315, 523,315, 522,315, 520,315, 516,316, 515,319, 514,321, 507,345, 506,347, 504,349,500,350, 497,350, 491,350, 489,350, 487,349, 487,346, 489,339, 489,338, 488,335, 485,334, 429,334, 425,335, 423,337, 423,338, 419,352, 417,354, 415,355, 413,355, 397,355, 394,354, 394,351, 412,285, 413,283, 415,283, 420,283, 422,282, 422,281, 443,204, 444,203, 446,202, 458,202, 461,203, 461,205, 460,211, 460,213, 461,214,515,214, 517,213, 518,212, 519,210, 520,209, 522,208, 558,208, 559,209, 559,210, 558,212, 558,213, 560,214, 578,214, 580,214, 582,215, 582,218, 582,220" href="chubu">
<area shape="poly" alt="" coords="618,263, 597,348, 595,351, 591,352, 589,352, 580,352, 578,351, 578,349, 584,328, 584,326, 582,326, 574,326, 571,326, 570,327, 565,343, 564,345, 561,345, 520,345, 518,345, 517,342, 523,324, 524,322, 527,321, 532,321, 535,321, 536,319, 545,284, 545,282, 543,282, 538,282, 535,281, 535,279,539,265, 540,262, 542,258, 547,257, 550,257, 611,257, 613,257, 617,258, 618,261, 618,263" href="kanto">
<area shape="poly" alt="" coords="651,121, 647,136, 647,138, 649,138, 652,138, 654,138, 654,140, 650,162, 649,164, 648,164, 645,164, 642,164, 641,165, 641,166, 623,243, 622,245, 620,248, 616,249, 613,249, 587,249, 585,249, 582,248, 582,245, 582,243, 591,212, 591,211, 590,209, 587,208, 585,208, 581,208, 579,208, 577,207,577,203, 579,196, 579,193, 577,193, 575,193, 571,193, 569,191, 568,189, 568,187, 574,164, 575,161, 578,161, 583,161, 585,160, 586,159, 590,140, 591,138, 593,138, 594,138, 596,137, 596,136, 600,118, 602,116, 604,115, 644,115, 646,116, 650,117, 650,120, 651,121" href="touhoku">
<area shape="poly" alt="" coords="678,25, 661,101, 660,103, 659,105, 656,106, 654,106, 556,106, 554,105, 551,104, 551,101, 551,100, 568,25, 570,21, 572,21, 574,21, 674,21, 675,21, 677,22, 678,24, 678,25" href="hokkaido">
</map>
<img src="japan.jpg" usemap="#japan">
</body>
</html>

<html>

<head>

</head>

<body>

</map>

</body>

</html>

（コードを一部修正しました）

あとはこれを目的のHTMLに移植して、リンク先を再設定すれば完了です。

※CCだとうまくいかないようで、以下のように全て shape=”rect” となってしまうようです。~~（2014は試してません）~~（2014でもダメでした）

<map name="japan">
<area shape="rect" coords="13,384,80,409" href="kyushu-okinawa">
<area shape="rect" coords="96,233,191,349" href="kyushu-okinawa">
<area shape="rect" coords="173,284,300,339" href="shikoku">
<area shape="rect" coords="187,226,335,276" href="chugoku">
<area shape="rect" coords="321,220,427,346" href="kinki">
<area shape="rect" coords="393,202,583,355" href="chubu">
<area shape="rect" coords="517,256,618,353" href="kanto">
<area shape="rect" coords="568,115,655,250" href="touhoku">
<area shape="rect" coords="550,20,679,106" href="hokkaido">
</map>

</map>

Dreamweaverのようなマップ領域を視覚化できるソフトでも地図なんかはちまちまと設定するのは面倒ですので、Illustrator形式のデータがあるならば一気にマップの設定までやってしまったほうがぐっと楽になります。

地図以外でもなんか複雑な図形を形通りにクリックできるようにしたい場合はこちらのほうが楽なんじゃないでしょうか？

これ、機能自体は結構前からあるようですが、結構便利な割に周囲にはあまり知られてない機能だったのですが、マイナーなのかな？それともイラレでそういう仕事をする人があまりいないのかな？？

追記

イラストレータが書き出すマップHTMLのコードが間違えていたので修正しました。
記事内でも追記していますが、CCではこの方法はうまくいかないようです。~~（CC2014は未だにアップデートしてないため現時点では不明です）~~

追記２

CC2014にアップしてみたんですがやっぱりうまくいきませんでした。
うーん。なんなんだろうなぁ…。