無料会員制サイト

アフィリエイト【初心者必見】簡単イメージマップの作成方法!

イメージマッピング

イメージマップってなに?
一枚の画像に複数のリンクを設定することをイメージマップと言います。

このイメージマップがアフィリエイト記事を書く時に活躍してくれるんです。

例えばどんな時に使うのか?

こんな使い方もあります
  1. 全国展開をする店舗紹介などに
  2. 化粧品の使い方などを紹介する時に
  3. 目立つリンクで読者に行動をうながす時に

アイディア次第で色々な使い方ができるのがイメージマップです。

今回は1番で紹介した「店舗紹介」のイメージマップの作り方について紹介していきます。

簡単イメージマッピング

イメージマップを作成するのは比較的に簡単です。
ただHTMLやCSSの知識がないと、かなりハードルが高くなってしまいます。

そこで今回は時間をかけずにコピペだけでイメージマップを完成させていきましょう。

まずはその前に下準備を。

下準備あれこれ
  1. 素材集め(地図)
  2. 地図に色付けするためのソフト
  3. 地図に文字入れするためのそふと

コピペで簡単にと言いましたが、下準備だけはあなた自身でやらなければいけません。

どんなソフトを使えばいいの?
ペイントやインクスケープなどの無料ソフトなど何でも構いません。

それでは素材集めから初めていきましょう。

超便利!地図が無料ダウンロードできる「白地図専門店」

白地図専門店は日本地図から世界地図までダウンロードできる便利なウェブサービス。

地域別の地図もダウンロードできるんです。。

それでは「白地図専門店」から地図をダウンロードする方法を説明していきましょう。

白地図専門店にアクセス
白地図専門店

出典:白地図専門店

  1. 画面を少しスクロールしてください
  2. 無料の白地図「詳細を見る」をクリック
  3. 下までスクロールして「白地図の一覧を見る」をクリック

これで白地図の一覧が表示されます。

白地図の一覧
一覧表示

出典:白地図専門店

日本全体の地図から地域別の地図、そして市町村別の白地図を選ぶことができます。

あなたが欲しい地図をダウンロードしてください。

白地図のダウンロード方法
地図のダウンロード

出典:白地図専門店

  1. ダウンロードしたい地図を選んでクリックしてください
  2. 「欲しい地図を選んでください」と表示されます
  3. その中から「無料の地図」をクリックしてください
  4. 無料ダウンロードページへ移動をクリックしてください
  5. 一括でダウンロードするをクリックしてください
  6. ダウンロードして任意の場所に保存してください

以上でダウンロードは終了です。

白地図専門店には有料版と無料版があります。
無料版でも「商用利用可」になっていますので安心して使えます。

それでは文字入れと色付けをしていきましょう。

私の場合はイラストレーターで作成しました。

地図を装飾する時の注意点
  1. スマホでも見やすいように文字は大きめに
  2. 色は派手すぎないようにしましょう
  3. できるなら平面よりも立体的に

これで素材の準備はできました。
さっそくイメージマップを作成していきましょう・・・と言いたいところですが、色塗りをして初めてわかりました。

イラストレーターで色塗りをしたら、かなりの時間がかかってしまうという予想外の結果に。

これでは時間の無駄になってしまいます。
そこでもっと便利なサービスはないか探した結果、ありましたありました。

最初からコッチを紹介しろよ。
と言う声が聞こえて来そうですがご勘弁を。

無料で商用利用可能な素材サイト「Flame illust」

この「Flame illust」は地図がメインのサイトではありません。

他の素材も豊富にそろっていますので、地図をダウンロードしたら色々と見てみてください。

それでは地図のダウンロード方法について紹介していきます。

「Flame illust」
「Flame illust」

出典:「Flame illust」

  1. 最初に「Flame illust」にアクセス
  2. 左メニューのカテゴリーから「日本地図」を選択
  3. 日本地図のページへ移動します
お好きな地図を選択
地図を選択

出典:「Flame illust」日本地図

ページが移動すると画像のように色々な設定の地図がダウンロードできるようになっています。

今回はデフォルメされた日本地図をダウンロードしてみます。

地図のダウンロード方法
    地図のダウンロード

    出典:「Flame illust」日本地図

  1. お目当ての地図をクリックしてください
  2. 日本地図が表示されます
  3. 右クリックで画像を保存
  4. これで画像が保存されました
関東地方の地図
関東の地図

出典:「Flame illust」日本地図

  1. 関東地方の画像を探してみましょう
  2. 画像下のページ送り2ページ目にありました
  3. 関東地方の地図はクリックしてダウンロード
  4. ダウンロードした画像に文字入れをしましょう

やっぱり「イラストAC」を便利なサービス

私がオススメしている「イラストAC」にも魅力的な地図がいっぱいありました。

本当に「イラストAC」は便利なサービスですね。

イラストACからダウンロードした関東地図
イラストAC

出典:「イラストAC」

  1. 検索窓に「地図」または「関東」と入力
  2. お好みの地図があったら画像をクリック
  3. 今回はデフォルメされたPNG画像をダウンロード
  4. ダウンロードした画像に文字入れをしましょう

かなりデフォルメされた関東地図が出来上がりました。

前置きが長くなりましたが、次からが本題のイメージマップ作成方法です。

参考記事
アフィリエイト初心者なら絶対に知っておきたいイラストACの使い方

「HTML Imagemap Generator」でイメージマップ作成

「HTML Imagemap Generator」

出典:「HTML Imagemap Generator」

それではイメージマップの作成方法について紹介します。

今回紹介するサービスは「HTML Imagemap Generator」と言う無料で使えるイメージマップ作成サービスです。

この「HTML Imagemap Generator」は簡単にイメージマップが作成できる便利なウェブサービスです。

素材さへ準備できていれば、あとは画像をアップロードするだけ。

下準備の確認
  1. 地図のダウンロードを済みましたか?
  2. 地図の文字入れは済みましたか?

既に文字が入っている画像の場合はそのままアップして大丈夫です。

それではイメージマップの作成を始めましょう。

動画で見る「HTML Imagemap Generator」の使い方

最初に「HTML Imagemap Generator」にアクセスしましょう。

動画解説

以上が「HTML Imagemap Generator」の使い方でした。

衝撃の事実発覚!レスポンシブ対応してませんでした

衝撃の事実

ここまで順調に進んできて気持ち良く記事を書いていました

しかしテストをした結果、なんと「HTML Imagemap Generator」で作成したイメージマップはレスポンシブに対応していません。

考えてみれば当たり前のことですよね。
イメージマップは画像の座標を読み込んでリンクを張る位置を決めています。

画像の大きさが変われば座標がズレてもおかしくありません。

せっかくここまで書いたのに記事をボツにするには忍びない。

そこで「HTML Imagemap Generator」で作成したイメージマップを、レスポンシブに対応させるための方法が探してみました。

イメージマップをレスポンシブ対応にする方法

HTMLとCSSだけではレスポンシブに対応させるのは不可能と判断しました。

そこで見つけたのが「jQuery RWD Image Maps」というjQueryプラグインです。

ここで初心者の方にはハードルが上がってしまいますが、基本的にコピペするだけで実装可能です。

まずは本家のサンプルを見てみましょう。

 本家のサンプルを見てみる

レスポンシブに対応させるためのイメージマッピング設定方法

「Responsive Image Maps jQuery Plugin」

出典:Github

Githubから「Responsive Image Maps jQuery Plugin」のZIPファイルをダウンロードしてください。

プラグインの設定方法
  1. ZIPファイルを解凍してください
  2. 「jquery.rwdImageMaps.min」をアップロード
  3. ヘッダーに「jQuery」を読み込みます
  4. 「jquery.rwdImageMaps.min」を読み込みます
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="/js/jquery.rwdImageMaps.min.js"></script>
<script>
$(document).ready(function(e) {
    $('img[usemap]').rwdImageMaps();
});
</script>

このコードが基本形になります。
アップロードした「jquery.rwdImageMaps.min.js」のURLは、それぞれの環境によって変わりますので気をつけてください。

しかし残念ですがWordpressでは上手く機能しません。

考えられる理由
  1. WordPress本体の「jQuery」と干渉する
  2. テーマによっては上手く機能しない
  3. 座標を上手く取得できない
考えられる対処法
  1. WordPressの「jQuery」を読み込まない
  2. 「jQuery」をGoogleのCDNで読み込む
  3. 「$」を「jQuery」に置き換える

ここで一気にハードルがあがってしまいましたね。
結論を言うとWordpressでイメージマッピングのレスポンシブ対応はあきらめましょう。

色々と解説しているサイトがありますが、実際にWordpressに組み込んで機能するか試している人は少ないようです。

ここまで書いてきたのは無駄?
いえいえ、そんなことはありません。

例えばSIRIUSで記事を書く場合。
先程紹介したソースを「head~head」の間に記述すれば、レスポンシブ対応のイメージマッピングが表示できます。

また、Wordpress(動的サイト)とHTML(静的サイト)上手く組み合わせることでWordpressでも利用することが出来るかもしれません。

それでは実際に試してみましょう。

Wordpressでイメージマッピングを使用するサンプル

マッピングサンプル

画像はイラストACからダウンロードした、かなりデフォルメされた関東地図を使います。

  1. それぞれ都市名をクリックしてください
  2. この都市名にジャンプします
  3. ブラウザの幅を変えてみましょう
  4. レスポンシブに対応しているのがわかります

 サンプルサイトはこちら

各都市にジャンプしてきます
東京都
ニューヨーク、ロンドン、パリに並ぶ世界を代表する大都市

 サンプルサイトはこちら

神奈川県
東京よりも洗練されたイメージの大都市「横浜」などを抱える神奈川県

 サンプルサイトはこちら

千葉県
工業都市として発展してきたが、昔から農業や漁業が盛ん。
黒潮海流の影響もあり房総半島などは温暖で住みやすい。

 サンプルサイトに戻る

埼玉県
昔は色々と陰口を言われていたが、現在は「彩の国」として盛んに都市開発が進んでいる。

 サンプルサイトはこちら

茨城県
農業が盛んだが鉄道網が整備されてから東京のベットタウンとして発展。
筑波大学や宇宙航空研究開発機構 JAXAなど日本の頭脳が集結する都市の一面を併せ持つ。

 サンプルサイトはこちら

栃木県
北関東の工業都市として発展。日光東照宮など観光都市としても有名。

 サンプルサイトはこちら

群馬県
伊香保温泉などの温泉街やスキー場など観光都市として発展。数多くの総理大臣を排出している事ははあまり知られていない。

 サンプルサイトはこちら

マップのソースとリンク先の指定方法

どうでしょうか?
しっかりと指定したリンクに飛べましたか?

ここからはページ内リンクの設定方法について紹介していきます。

ページ内リンクの設定方法

同じページ内に移動させることをアンカーリンクと言います。

アンカーリンクを設定するためには、飛ばすリンクとリンク先の2つを設定する必要があります。

サンプルは他ページからアンカーが埋め込まれたリンクに飛ぶ方法になります。

最初に設定するリンク
<a href="#id""><!--ここにテキスト--></a>
移動先アンカーの設定
<a id="id名"><!--ここにテキスト--></a>

これが通常のページ内リンクの形になります。

他ページへのアンカーにジャンプする設定
<a href="URL#id""><!--ここにテキスト--></a>

今度はイメージマッピングのリンクの設定方法について説明します。

イメージマッピングの設定方法
<img src="map-kanto01.jpg" usemap="#ImageMap1" alt="関東地図1" />
<map name="ImageMap1">
  <area shape="rect" coords="430,145,701,270" href="URL#tochigi" alt="栃木県" />
  <area shape="rect" coords="134,249,399,348" href="URL#gunma" alt="群馬県" />
  <area shape="rect" coords="595,369,852,496" href="URL#ibaragi" alt="茨城県" />
  <area shape="rect" coords="293,468,554,573" href="URL#saitama" alt="埼玉県" />
  <area shape="rect" coords="298,589,562,698" href="URL#tokyo" alt="東京都" />
  <area shape="rect" coords="246,732,561,831" href="URL#kanagawa" alt="神奈川県" />
  <area shape="rect" coords="646,601,918,715" href="URL#chiba" alt="千葉県" />
</map>

複数の画像を埋め込む場合は必ず「ImageMap」に番号を付けるようにしましょう。

イメージマップを複数使用する場合
  1. #ImageMap1とImageMap1
  2. #ImageMap2とImageMap2
  3. #ImageMap3とImageMap3

最初の「#」は消さないように注意しながら、2箇所「ImageMap」を書き換える事を忘れないようにしましょう。

番号でなくても構いません。
あなたのお好みでMap名を変えてもらっても大丈夫です。

イメージマップ作成方法まとめ

今回は七転八起。
どうなることかと慌ててしまいましたが、何とかまとまったようです。

アフィリエイト記事を書く時にはイメージマップの作成方法を知っていて損はありません。

今回紹介したサービスは、どんな画像にも適用できます。

アイディア次第でバリエーション豊かな記事構成を考えることができるでしょう。

今回紹介したサービス
  1. 地図のダウンロード「白地図専門店」
  2. 素材ダウンロード「Flame illust」
  3. 素材ダウンロード「イラストAC」
  4. マッピング作成サービス「HTML Imagemap Generator」
  5. レスポンシブに対応したイメージマッピング

また役立ちそうなサービスがありましたら、どんどん紹介していきますのでお楽しみに。

今回も最後まで読んでいただいてありがとうございました。

それでは、さようなら!

あなたも正しい方法でメルマガ始めてみませんか?

前代未聞の超絶価格破壊。こんな価格で会員制サイトが作成できるなんて!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください