イラレSVGで書き出したクリッカブルマップをShopifyに反映する方法

こんにちは、Liyです。最近対応したお客様で、「日本地図で各地方の製品の特徴を紹介したい！」というご要望があったので、クリッカブルマップを作成しました。

正直クリッカブルマップを実装するの初めてだったので、色々とブログ記事を参考にしたりして、Shopifyのレスポンシブ機能に沿ったやり方を一つ見つけたので、自分のログを残すのと同時に必要な方の助けになればと思い紹介させていただきます。

---

▼ざっくり手順

ざっくり手順は以下の通り！

1.Illustratorでクリッカブルにするマップの作成

2.SVG形式にダウンロード

3.SVGファイルの書き換え

4.Shoipfyページへの反映

TOPページに反映

▼完成イメージ

---

詳細の手順

STEP1.Illustratorでクリッカブルにするマップの作成

上記の通り、レイヤーをURLリンクを分けたい粒度（今回は各都道府県別と日本地図別）に分けて作成。名前はわかりやすい名前を各レイヤーにつけておくと、後からコードを編集する際にとってもとっても便利なので必ず行っってください。

💡メモ
私の場合、お客様から最初にPDFで画像素材をいただいており、マップのイメージが固まっていたのでちょっと面倒でしたが、初めからSVG素材を探しておくとそんなに手間もかからずに実装できるかと思います。

STEP2.SVG形式にダウンロード

「ファイル」＞「スクリーン用に書き出し」をクリック

形式の設定で「SVG」の縮小、レスポンシブにチェックを入れる

💡メモ
参考にしたブログサイトでは、「縮小のチェックは外しておきましょう」と書かれているのですが、今回の私の作成したSVG画像のサイズがShopifyページに掲載可能なサイズに引っかかってしまったため、「縮小」にチェックを入れて実行したところうまくいきました。

上記の設定を保存して、任意の場所に書き出しを行ってください。

STEP３. SVGファイルの書き換え

SVGファイルのダウンロードが完了したら、テキストエディタ等でファイルを開いてください。（私はMacなのでCotEditorやVisual Studio Codeを利用しています。（今回はVisual Studio Code））

以下のような暗号（笑）が表示されるかと思います。

上記のコード内で、<g>から</g>までがイラレ上で設定したレイヤーごとの区切りになっているので、リンクなど任意のHTMLコードを付け加えます。

※ここでリンクは「 a href=”ファイルパス” 」ではなく「 a xlink:href=”ファイルパス” 」とするのが良いそうです。

今回はマップ上の各都道府県をクリックすると、こちらも各都道府県別に分けたコレクションページに飛ぶように設定したく、以下の通り設定しております。

<g id="HOKKAIDO" class="[任意]"> <a xlink:href="/collections/hokkaido">〜</g>

STEP4：Shoipfyページへの反映

Shopifyページにてコードを入力。

エディタにて想定通りのビジュアルになっているかチェック。

STEP5. TOPページに反映

さて、いよいよラストです。こちらの内容をトップページに反映させましょう。Shopifyのカスタマイズページのセクションに「Page」（日本語対応テーマであれば「ページ」と表示されているかと思います。）がありますので、そちらを追加。対象のページを設定して、公開すれば完了です！

上記のような機能をShopifyに実装したい！越境ECが作りたい等ご要望がございましたら、お気軽に以下メールアドレス宛にご連絡くださいませ♪

Liyプロフィールページリンク⇩

https://coconala.com/users/1148894