すべてのカテゴリ

こんにちは、Liyです。最近対応したお客様で、「日本地図で各地方の製品の特徴を紹介したい！」というご要望があったので、クリッカブルマップを作成しました。正直クリッカブルマップを実装するの初めてだったので、色々とブログ記事を参考にしたりして、Shopifyのレスポンシブ機能に沿ったやり方を一つ見つけたので、自分のログを残すのと同時に必要な方の助けになればと思い紹介させていただきます。▼ざっくり手順ざっくり手順は以下の通り！1.Illustratorでクリッカブルにするマップの作成2.SVG形式にダウンロード3.SVGファイルの書き換え4.Shoipfyページへの反映TOPページに反映▼完成イメージ詳細の手順STEP1.Illustratorでクリッカブルにするマップの作成上記の通り、レイヤーをURLリンクを分けたい粒度（今回は各都道府県別と日本地図別）に分けて作成。名前はわかりやすい名前を各レイヤーにつけておくと、後からコードを編集する際にとってもとっても便利なので必ず行っってください。💡メモ私の場合、お客様から最初にPDFで画像素材をいただいており、マップのイメージが固まっていたのでちょっと面倒でしたが、初めからSVG素材を探しておくとそんなに手間もかからずに実装できるかと思います。STEP2.SVG形式にダウンロード「ファイル」＞「スクリーン用に書き出し」をクリック形式の設定で「SVG」の縮小、レスポンシブにチェックを入れる💡メモ参考にしたブログサイトでは、「縮小のチェックは外しておきましょう」と書かれているのですが、今回の私の作成したSVG画像のサイズがShopifyページ