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

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

Web関連の案件を継続案件で対応させていただいています。

そんなWeb案件からの学びを共有します。

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

コーディングするのではなくて、イメージマップで画像の一部だけをクリッカブルにして作る簡易的なWebサイトの案件で使えるテクニックです。

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

「年末お歳暮関連のサイトで2017年版から商品だけを2018年に張り替えるコーディング」というものを対応させていただきました。

もうすぐ12月なのにお歳暮のサイトがまだということで超急ぎのため、
コーディングするのではなくて、ほぼ画像を貼り付けでWebサイトを作成との指示。

購入のボタンはどうしても必要ですが、イメージマップで、画像の一部・ボタン画像の部分だけをクリッカブルにできるんですね。

基本的な機能かもしれませんが、知りませんで勉強になりました。

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

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

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

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

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

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

 

ファイル>Web用に保存

 

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

 

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

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

 

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

 

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

 

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

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

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

 

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

まとめ

Adobe Illustratorでイメージマップで画像の一部だけをクリッカブルにして作るWebサイトの作り方についてご紹介しました。

クライアントさんでコーディングの予算が全くとれない案件などもたまにありますが、こんな感じで、ボタンだけつけて、後はJPGで貼り付けーというのもありかもしれません。

タイトルとURLをコピーしました