Webサイトを作成していると画像をクリックしてもらった際、商品購入ページや申し込みフォームに遷移させたいなどの利用用途は意外と多いものです。
本記事では、HTMLで画像をリンクとして設定するための方法と具体的な使い方をサンプルコードを交えてご紹介していきたいと思います。
目次
HTMLで画像をリンクとして利用する用途は？
HTMLで画像をリンクとして利用する用途は多岐に渡ります。
主な用途としては、「Webマーケティングにおけるリンククリック率の増加」「Webページの視認性向上」「Webページの速度改善」などで利用されています。
いくつか代表的なパターンをご紹介しますので、ご自身のWebサイトでも活用出来そうな方法は積極的に試してみてください。
ボタン画像のリンク
最もメジャーな用途としては、ボタン型の画像にリンクを貼ることでユーザーが直感的に操作しやすくする手法です。
一般的なテキストリンクにするよりも、ボタン画像にすることでユーザーがクリックする確率が上がるサイトも多数あります。
うまく特徴的なボタン画像を組み込むことで、ユーザーに興味を持ってもらいやすいUI(ユーザーインターフェース)を作成することにも繋がるため、テキストのみのリンクよりもクリック率の向上が期待出来ます。
広告画像
広告画像をリンクとする方法は、Webマーケティングにおいては基本となっています。
通常のテキストよりも広告画像にすることで、Webページ内で目立たせることが可能となり、クリック率の向上を狙います。
アフィリエイトサイトなどで提供されている広告用リンクにも、ほとんどの場合、「テキスト素材」「画像素材」の2パターンが用意されています。
一方で、最近は広告画像が一般的になりすぎているため、クリックすることを避けるユーザーも多くなっており、使いどころは慎重に検討する必要がありそうです。
縮小画像を実寸大で表示
Webページには縮小した画像を表示しておき、画像をクリックすることで実寸大の画像を表示する方法も、HTMLのリンクを使用することで実現可能です。
無駄に大きな画像ばかりになるとサイト自体が見にくくなることに加えて、ページが重くなってしまうため、縮小画像のリンクを上手く取り入れることで改善を図ることが可能となります。
HTMLで画像をリンクとして設定する方法
HTMLで画像をリンクとして設定するのは、実は簡単に実装することが可能です。
アンカータグの内部にimgタグを設定する
HTMLでリンクを設定する場合「aタグ(アンカータグ)」を利用します。
このアンカータグの内部をテキストではなく、画像を表示するためのimgタグで設定してしまえば、画像をリンクとしてWebサイトに表示することが可能です。
具体的な記述方法は下記のようになります。
<a href="遷移させたいURL"> <img src="画像のパス" alt="テキスト"></a>
imgタグにはalt属性を必ず使用する
画像をリンクとして設定する際のポイントとして、imgタグにはalt属性を必ず付けるように意識しておいてください。
alt属性は何らかの理由により画像を表示出来なかった場合に、Webサイト上に表示される代替文字を設定するための属性です。
画像が表示出来なくても、リンク自体はテキストでクリック出来るようにするため、alt属性は必ず設定するようにしましょう。
HTMLで画像をリンクとして設定するサンプルコード
では上述してきた画像リンクの用途を実際にサンプルコードで確認してみたいと思います。
ボタン画像をリンクとして使用するサンプル
まずは「詳細を見る」ボタンをクリックした際に、詳細ページへ遷移するサンプルコードをご紹介していきます。
index.html
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Image Size Sample</title> <link rel="stylesheet" href="style.css"> </head> <body> <a href="detail.html"><img src="img/sample.jpg" width="100px" height="40px"></a> </body> </html>
detail.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Detail</title> </head> <body> <h2>詳細表示用ページ</h2> </body> </html>
サンプルコードを実行すると下記のように動作させることが可能です。
広告画像をリンクとして使用するサンプル
次に広告画像をリンクとして使用するサンプルコードをご紹介していきたいと思います。
index.html
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Image link Sample</title> <link rel="stylesheet" href="style.css"> </head> <body> <a href="https://potepan.com/" target=”_blank”><img src="img/potepan.png" width="200px" height="100px"></a> </body> </html>
サンプルコードを実行した結果が下記となります。
gif画像のため分かりにくいですが、aタグのtarget属性に「_blank」を設定することで、別タブで指定したWebサイトを表示しています。
縮小画像をリンクとして使用するサンプル
縮小画像をリンクとして使用するサンプルについても合わせてご紹介していきます。
基本的な考え方は別のURLにリンクさせる方法と全く同じで、指定するURLが画像ファイルのパスに変更されるだけです。
index.html
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Image link Sample</title> </head> <body> <a href="img/sample1.jpg" target=”_blank”><img src="img/sample1.jpg" width="200px" height="100px"></a> </body> </html>
サンプルコードを実行した結果が下記となります。
今回のサンプルでは別タブで元画像のサイズを表示するようなコードとなっています。
さいごに：HTMLで画像をリンクとして活用しユーザーの操作性を向上させよう！
本記事では、HTMLで画像をリンクとして表示させる方法について、サンプルコードを交えながらご紹介してきました。
画像をリンクとして使っているWebサイトはかなり多く、Webマーケティングなどにおいてもユーザーのクリック率を上げるために有効な方法として一般的です。
HTMLの実装自体は簡単に行えますので、ぜひご自身で作成するWebサイトでも画像のリンク処理を用いて、マーケティングやユーザビリティの向上に活用してみてください。
