【Adobe Illustrator】イメージマップ作成方法!コーディングせずWebサイトにボタンのみ付ける

Adobe Illustratorでイメージマップを作る
この記事は約3分で読めます。

筆者ミミウサが先日対応した、Web関連の案件から一つ学びがあったので共有させてください。

Adobe Illustratorでのイメージマップの作り方です。

イメージマップで画像の一部だけをクリッカブルにします。

画像の一部分だけをクリッカブルに(イメージマップ)

例えば次のように、1枚の大きなJPG画像を貼り付けたサイトで、画像内の一部分だけをクリッカブルにして別のページへリンクを貼れます。

Illustratorイメージマップの作り方

この例では、[詳細を見る]の部分だけをイメージマップで、クリッカブルにできるんですね。

イメージマップ作成 Adobe Illustratorでの操作

Illustratorでイメージマップを作成するときの手順を説明します。

Illustratorで、クリッカブルにしたい部分の形状を選択し、[属性]メニューへ。

ここでは「詳細を見る」のボタンを選択しています。

[属性]メニューでイメージマップの形状とリンク先URL指定。

Adobe Illustratorでイメージマップを作る

 

ファイル>Web用に保存

 

Adobe Illustratorでイメージマップ 操作

 

Web用に保存画面で[プレビュー]。

Adobe Illustratorでイメージマップ Web用に保存

 

ブラウザで、以下のようにイメージマップ部分のコードが確認&コピーできます。

 

Adobe Illustratorでイメージマップ コード確認

 

確認したコードをコピーし、HTML上にペースト。

画像JPGもHTMLにリンクする。

1枚のJPG画像のボタン部分だけ([属性]を設定した部分)がクリッカブルに!

 

Adobe Illustratorでイメージマップ クリック

まとめ

Adobe Illustratorでイメージマップで画像の一部だけをクリッカブルにする方法を紹介しました。

筆者はPhotoshopがイマイチ苦手で、あらゆるものをIllustratorで作れるかまず試すタイプです。

そんななんでもIllustrator派の方は、イメージマップは結構便利かと思いました。

TECHWeb
スポンサーリンク
記事をシェアする・後で読む
スポンサーリンク
torutsume.net
タイトルとURLをコピーしました