読者です 読者をやめる 読者になる 読者になる

Webbiz

Webサイト制作やビジネス・デザインに関する備忘録的ブログです。

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

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

f:id:Webbiz:20160527225453j:plain

エリアごとに図形にする

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

f:id:Webbiz:20160527230051j:plain

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

f:id:Webbiz:20160527231102p:plain

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

f:id:Webbiz:20160527231140j:plain

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

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

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

f:id:Webbiz:20160527231554p:plain

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

htmlソースを書き出す

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

f:id:Webbiz:20160527232236p:plain

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

f:id:Webbiz:20160527232626p:plain

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