Dreamweaverでクリッカブルマップの作り方をお探しですね。
広告
1枚の画像に複数のリンクを設定する方法をわかりやすく解説
1枚の画像の中に、複数のリンクを設定したいと思ったことはありませんか？HTMLの「イメージマップ」という機能を使えば、画像内の特定のエリアごとに別々のリンク先を指定できます。
たとえば、店舗案内の地図画像で各エリアをクリックできるようにしたり、商品一覧の画像から個別ページへ誘導したりするときに便利です。
この記事では、Dreamweaverを使ってクリッカブルマップを作る基本的な手順から、リンク設定時の注意点、スマートフォンで表示するときに気をつけたいポイントまで、初心者の方にもわかりやすく解説していきます。
クリッカブルマップ（イメージマップ）って何？
クリッカブルマップとは、1枚の画像の中に複数のクリックできる範囲を作って、それぞれに違うリンクを設定する仕組みのことです。
HTMLでは「イメージマップ」と呼ばれていて、`map`要素と`area`要素を使って作ります。
普通、画像全体にリンクを貼るときは`img`タグを`a`タグで囲みますよね。
でもこの方法だと、画像全体が1つのリンクになってしまいます。
イメージマップを使えば、画像内の「この四角い部分はAページへ」「この丸い部分はBページへ」「この複雑な形の部分はCページへ」といった細かい指定ができるんです。
Dreamweaverを使えば、HTMLコードを直接書かなくても大丈夫。
画面上で画像を選んで、「ホットスポット」と呼ばれるクリック領域を作ってリンクを設定できます。
ホットスポットには四角形、円形、多角形などの形があって、画像のデザインに合わせて選べます。
たとえば、地図上の都道府県や施設の位置、バナー内に並んだ複数の商品、組織図やフローチャート内の各項目などにリンクをつけたいときに向いています。
画像1枚で視覚的に情報を整理しながら、ユーザーを目的のページへ案内できるのが大きなメリットです。
ただし、イメージマップは便利な反面、画像サイズが変わるレスポンシブデザインでは注意が必要です。
HTML上のクリック範囲は基本的に画像上の座標で指定されるので、画像が縮小・拡大されたときにクリック位置がずれてしまう可能性があります。
そのため、パソコン向けの固定幅レイアウトでは扱いやすいのですが、スマートフォン対応を重視するサイトでは、表示確認や代わりの方法を検討することが欠かせません。
Dreamweaverで作る場合も、単にリンクを貼って終わりではなく、公開前に複数の画面サイズで動作確認することが大切です。
Dreamweaverで1枚の画像に複数のリンクを貼る手順
Dreamweaverでクリッカブルマップを作るには、まずHTMLファイルに対象となる画像を配置します。
デザインビューまたはライブビューで画像を選んで、プロパティインスペクターを表示しましょう。
バージョンによって画面構成や名前が少し違う場合がありますが、画像を選んだ状態でイメージマップ関連の設定項目を確認して、マップ名を入力してからホットスポットを作る、という流れが基本です。
マップ名はHTML内で画像とクリック領域を結びつけるために使われるので、半角英数字でわかりやすい名前にしておくと管理しやすくなります。
ホットスポットを作るときは、画像の中でリンクを設定したい部分を選んで、四角形、円形、多角形のいずれかのツールで範囲を指定します。
四角形はボタンやバナー内の区切られた領域に向いていて、円形はアイコンや丸いマークに適しています。
多角形は地図の地域区分や不規則な形のパーツに使いやすい方法です。
範囲を作ったら、プロパティインスペクターでリンク先のURLを入力して、必要に応じてターゲットや代替テキストを設定します。
外部サイトへリンクする場合はURLを正確に入力して、サイト内ページへリンクする場合はファイルの階層関係に注意しましょう。
基本的な作業の流れをまとめると、こんな感じです。
– HTMLに画像を入れて、画像を選ぶ
– イメージマップ名を設定して、ホットスポットの形を選ぶ
– クリックさせたい範囲を画像上に描く
– 各ホットスポットにリンク先URLと代替テキストを設定する
– プレビューでクリック範囲とリンク先を確認する
Dreamweaverの便利なところは、座標を手で入力しなくても、画面上で視覚的にクリック範囲を作れることです。
HTMLに慣れていない人でも、画像を見ながら「どこをクリックできるようにするか」を直感的に指定できます。
ただし、細かい部分まで正確に設定したい場合は、最後にコードビューで`area`タグの`coords`属性を確認しておくと安心です。
座標が意図した範囲と大きくずれていないか、リンク先の記述が間違っていないかをチェックしておけば、公開後のリンク切れやクリックミスを防げます。
ホットスポット設定で失敗しないコツ
クリッカブルマップを作るときによくある失敗は、クリック範囲がわかりにくいことです。
画像の中にリンクが設定されていても、ユーザーがクリックできる場所だと気づかなければ、リンクとして機能しません。
特に、普通の写真やイラストの一部にリンクを設定する場合は、ボタン風のデザインにしたり、「詳しくはこちら」などのテキストを画像内に入れたりすると、ユーザーが迷いにくくなります。
Webページでは、見た目から操作できることがわかるデザインがとても大切です。
また、ホットスポット同士が近すぎる場合も注意が必要です。
リンク範囲が重なっていたり、隣り合う領域が細かすぎたりすると、ユーザーが意図しないリンクをクリックしてしまう可能性があります。
特にスマートフォンやタブレットでは指で操作するので、マウス操作よりも広めのクリック領域が必要です。
パソコンでは問題なく見えても、タッチ操作では押しにくいことがあります。
Dreamweaver上で範囲を作ったあとは、ブラウザのプレビューだけでなく、できれば実機でも確認すると安心です。
代替テキストの設定も見落としやすいポイントです。
`area`要素には`alt`属性を指定できて、これは画像が見られない環境やスクリーンリーダーを使うユーザーにとって重要な情報になります。
たとえば、地図画像の一部に「東京支店」へのリンクを設定するなら、代替テキストにも「東京支店の詳細ページ」など、リンク先がわかる内容を入れると親切です。
単に「リンク」や「クリック」と書くのではなく、クリックした結果どの情報へ移動するのかがわかる表現にすることが大切です。
SEOの観点でも、イメージマップだけに重要な導線を頼りすぎるのは避けたほうがいいでしょう。
検索エンジンがリンクをたどれるとしても、ユーザーにとってわかりやすいテキストリンクが別に用意されているほうが親切です。
特に、主要なカテゴリページや商品ページへのリンクは、画像内リンクに加えて、画像の下にテキストリンク一覧を置くとアクセシビリティと回遊性の両方を高められます。
見た目のわかりやすさと、情報構造としてのわかりやすさを両立させることが、使いやすいページ作りにつながります。
レスポンシブ対応と公開前チェックで品質アップ
Dreamweaverで作ったクリッカブルマップを公開する前に、必ず確認したいのがレスポンシブ表示です。
イメージマップのクリック範囲は画像上の座標で指定される仕組みなので、画像の表示サイズが変わるとクリック範囲が意図した位置からずれることがあります。
パソコン向けに横幅800pxの画像で設定した座標が、スマートフォンで横幅350pxに縮小されたとき、そのまま正しく追従するとは限りません。
今のWebサイトではスマートフォンで見る人が多いので、この点を確認せずに公開すると、ユーザーがリンクを押せなかったり、違うリンクへ移動してしまったりする原因になります。
レスポンシブ対応を重視する場合は、CSSやJavaScriptを使って座標を画像サイズに合わせて調整する方法があります。
また、画像を無理にイメージマップ化せず、HTMLとCSSでボタンやカード型リンクを配置するほうが管理しやすいケースもあります。
たとえば、商品一覧やサービス紹介であれば、画像1枚に複数リンクを埋め込むより、個別の画像とテキストリンクを組み合わせたレイアウトのほうが、スマートフォンでも見やすくて更新もしやすいです。
イメージマップは便利な選択肢ですが、すべての場面で最適とは限らないので、用途に合わせて判断することが大切です。
公開前には、リンク先、クリック範囲、表示崩れ、代替テキストの4点を中心に確認しましょう。
Dreamweaverのプレビューだけでなく、実際のブラウザで動作を確認して、Chrome、Safari、Edgeなど主要なブラウザで問題がないか見ておくと安心です。
さらに、画像ファイルのパスが正しいか、サイト内リンクが本番環境でも切れないか、外部リンクを新しいタブで開く必要があるかも確認しておきます。
リンク先を別タブで開く場合は、ユーザーの操作感に影響するので、外部サイトやPDFなど必要な場面に絞ると自然です。
最後に、イメージマップを使う目的を明確にしておくことが大切です。
単に「画像に複数リンクを貼れるから使う」のではなく、ユーザーが画像を見ながら直感的に目的の情報へ移動できるかを基準に考えると、失敗しにくくなります。
地図、座席表、フロアガイド、組織図、キャンペーン画像のように、画像そのものが情報の位置関係を表している場合は、クリッカブルマップの効果を発揮しやすいです。
一方で、通常のナビゲーションや商品一覧であれば、テキストリンクやカード型レイアウトのほうが適していることもあります。
Dreamweaverを使えば作業自体は比較的簡単ですが、公開後に使いやすいページにするには、リンク設定だけでなく、閲覧環境やユーザーの行動まで考えて設計することが大切です。
広告
