他商品ページのリンクを貼る方法について

Question

以下のURLは弊社が現在楽天で販売しております商品になります。
https://item.rakuten.co.jp/yuharu-shop/adultleg_001/

足用や手用等、それぞれに子供用もあり、全部で８商品あります。
URLは「大人の足用」の商品ページになりますが、サイズチャート（6枚目
画像）から各商品のへリンクを貼り、その商品のページに飛ばせるように
したいと考えています。

その場合の対応としては、
「PC用商品説明文」や、「スマートフォン用商品説明文」で設定している、
サイズチャート（JPEG）を、HTMLで作成するイメージで認識合っていますで
しょうか？
上記の対応を行った場合、スマホのお客様に関しては、下へスクロールした場
合のみ、サイズチャートから他商品をクリックしてリンク先へ飛ぶことが出来る
認識で正しいですか？
（フリックのみのお客様は、RMSの「画像・動画」で設置されたJPEG画像
を見ることになるので、リンク先に飛ばすことは出来ないとの認識で正しい
ですか？）
また、サイズチャートを上記の仕様に変更する作業を委託する場合、デザイ
ナーによりピンキリかと思いますが、ざっくりの費用で相場がどれくらいか分か
りましたら教えて頂けるとたすかります。

Answer

ECマスターズの田中美帆です。

> 足用や手用等、それぞれに子供用もあり、全部で８商品あります。
> URLは「大人の足用」の商品ページになりますが、サイズチャート（6枚目
> 画像）から各商品のへリンクを貼り、その商品のページに飛ばせるように
> したいと考えています。

一枚の画像に、複数のリンク先を設定したい
ということでよろしいでしょうか。

その場合ですと、

> 「PC用商品説明文」や、「スマートフォン用商品説明文」で設定している、
> サイズチャート（JPEG）を、HTMLで作成するイメージで認識合っていますで
> しょうか？

こちらのご認識でお間違いございません。

イメージマップ
https://www.tagindex.com/html_tag/img/img_map.html

と呼ばれるもので、
下記のツールをご利用いただくと、
簡単にHTMLを生成できますので、
ぜひお試しください。

使用ツール：
HTML Imagemap Generator
https://labs.d-s-b.jp/ImagemapGenerator/

使用方法：
クリック範囲を指定いただくことで、
下記のようなHTMLが生成されます。

例：








href="この部分をリンク先に変更"
して、ご利用くださいませ。

参考動画：
https://ec-masters.gyazo.com/3b855b84b1ee2037171f6c3234180154

ただし、スマートフォン用商品説明文は
利用できるHTMLの制限が厳しいため、
残念ながら上記の方法は
ご利用いただけません。

スマートフォンの場合は、
画像一枚につき一つのリンクまでしか
指定できませんので、ご了承くださいませ。

> 上記の対応を行った場合、スマホのお客様に関しては、下へスクロールした場
> 合のみ、サイズチャートから他商品をクリックしてリンク先へ飛ぶことが出来る
> 認識で正しいですか？
> （フリックのみのお客様は、RMSの「画像・動画」で設置されたJPEG画像
> を見ることになるので、リンク先に飛ばすことは出来ないとの認識で正しい
> ですか？）

先述の通り、スマートフォンでは
ご利用いただけません。
楽天の仕様のため、ご理解いただけますと
幸いです。

もしイメージされているものと
相違がございましたら、
恐れ入りますがご指摘くださいませ。

Answer

回答ありがとうございます。
PCのほうは、１つの画像に複数リンクを貼ることで対応可能
であること理解しました。ありがとうございます。

現在スマホのお客様が大半なので、別の方法でもよいので、
他の大きさ・形状のギプスカバーが必要なお客様を、離脱さ
せることなく誘導できればいいなと考えていますが、他に何か
方法はありますでしょうか？
ＨＴＭＬに詳しくないのですが、現在サイズチャートが１枚の
ＪＰＥＧなので１つしかリンクが貼れないとすると、８枚の画
像にして、それが１つのサイズチャートに見えるようにするな
んてことは技術的に難しいのでしょうか？
手段は問いませんのでお客様を誘導するという目的が達成でき
る別手段あれば教えて頂けると助かります。

Answer

ECマスターズの田中美帆です。

> ＨＴＭＬに詳しくないのですが、現在サイズチャートが１枚の
> ＪＰＥＧなので１つしかリンクが貼れないとすると、８枚の画
> 像にして、それが１つのサイズチャートに見えるようにするな
> んてことは技術的に難しいのでしょうか？

tableタグという、表を構成するHTMLを
使用することで、元々の画像に近い表現が
できるかと存じますがいかがでしょうか。

HTMLのフォーマットを作成しましたので、
よろしければお試しください。

参考例：
https://ec-masters.gyazo.com/7a3f7af8b51384fe2e000488594216ef

HTML：
--------------------

























--------------------

画像を個別で書き出してアップロードし、
画像URLと商品ページURLを差し替えて
ご利用くださいませ。

文字数を多く消費するため、
元々の文字数によっては文字数オーバーに
なってしまう可能性がございますので、
ご了承ください。

Answer

回答ありがとうございます。
HTMLの構文まで頂き大変感謝しております。
教えて頂いた方法で対応進めたいと思います。

念のため1点だけ最終確認させて頂きたいのですが、スマホで
横へフリックするお客様に対しては今回の要件を実現する方法
はないと理解しましたが、認識正しいでしょうか？

Answer

ECマスターズの田中美帆です。

GW休暇を挟み、回答が遅れまして
申し訳ございません。

> 念のため1点だけ最終確認させて頂きたいのですが、スマホで
> 横へフリックするお客様に対しては今回の要件を実現する方法
> はないと理解しましたが、認識正しいでしょうか？

はい、ご認識の通りです。
こちらは商品ページ編集画面の
「画像・動画」から設定する箇所で、
リンクは設定できない仕様となっています。

https://ec-masters.gyazo.com/8bbeeec5abe80979a5b2f16abbc69aaa

Answer

回答ありがとうございました！