illustratorCCで複雑なイメージマップ（クリッカブルマップ）を書き出す方法

イメージマップ（クリッカブルマップ）はクリックできるエリアを座標で指定しますが、複雑な形になると座標の指定がとても面倒です。そこで今回はadobe illustratorで書き出す方法を試してみました。
今回はこのイラストの1階・2階・3階の座標をそれぞれ指定します。illustratorはCC2015を使用しています。

エリアごとに図形にする

まずは、座標をとりやすいようにイラストを図形に置き換えます。ベースとなるイラストのレイヤーを複製、元のイラストは非表示にします。そして複製したイラストをエリアごとに「パスファインダー」→「合体」で図形にしていきます。

できました。でもまだ青い線の部分が重なった状態です。

これだと綺麗に座標を取得できません。再びパスファインダーで分割します。3つを同時選択→「パスファインダー」→「分割」を実行。

きれいに3つに別れました。

「属性」の設定を変更する

「ウインドウ」→「属性」で属性パネルを開きイメージマップに関する設定を変更します。この設定は3つの図形それぞれに設定します。

「イメージマップ」→多角形を選択
「URL」→図形をクリックした際のリンク先を指定　※今回は未定なので適当な名称にしました。

htmlソースを書き出す

「ファイル」→「Web用に保存」を選択し左下のプレビューをクリックします。

するとブラウザが立ち上がり・・・

ソースが書き出されました。画像は先ほど作った3色のものが指定されていますので、非表示にしていた元のイラストを書き出し、パスを書き換えます。あとはリンク先のURLを正しい物に書き換えれば完成です。