Shopifyにホットスポットつき画像を表示できるアプリについて徹底解説｜ご利用ガイド

株式会社UnReact

2026/03/26

はじめに

Shopify は、誰でも簡単にオンラインストアを開設・運営できる EC プラットフォームです。Shopify アプリを追加することで、ストアの機能をさらに拡張できます。

「シンプル画像ホットスポット｜お手軽画像吹き出し」は、商品画像にクリックできるホットスポット（ピン）を設置できるアプリです。お客様がピンをクリックまたはホバーすると、あなたが書いたツールチップが表示されます。PC とモバイルで画像とピン位置を個別設定できるので、どのデバイスでも見やすく表示できます。ピンのデザインはドット・プラス・番号の 3 種類から選べて、ツールチップの表示タイミングも自由に設定可能。コーディング不要で、テーマエディタから簡単に設定できます。

料金

プラン名: Basic Plan
月額: $5.99/月
無料期間: インストールから 7 日間、無料でアプリをお試しいただけます
年払い: 年払いで実質 2 ヶ月分無料でお得にご利用いただけます

アプリストア

シンプル画像ホットスポット｜お手軽画像吹き出し

シンプル画像ホットスポット｜お手軽画像吹き出しのメイン画像

「シンプル画像ホットスポット｜お手軽画像吹き出し」でできること

「シンプル画像ホットスポット｜お手軽画像吹き出し」を使えば、商品画像に最大 5 つのピンを配置できます。お客様がピンをクリックまたはホバーすると、あなたが書いたツールチップが表示されます。商品の特徴や素材の説明など、画像のポイントごとに情報を伝えられるので、お客様が詳細を見つけやすくなります。

シンプル画像ホットスポット｜お手軽画像吹き出しのメイン画像

特徴

商品画像に最大 5 つのクリック可能なホットスポットを設置できます。
PC/モバイルで異なるピン位置を設定できます。
ドット・プラス・番号の 3 種類のピンデザインから選べます。
ホバー・クリック・常時表示の 3 つの表示タイミングを選べます。
ツールチップにリッチテキストコンテンツを追加できます。
コーディング不要でテーマエディタから直接設定できます。

画像にクリック可能なホットスポットを配置できる！

画像上の好きな位置にピンを配置して、お客様がクリックまたはホバーすると説明文が表示されます。商品の特徴や素材のポイントなど、画像の中で伝えたい情報をピンポイントで案内できます。

画像にクリック可能なホットスポットを配置できる

最大で 5 個のピンを設定できる！

1 つの画像に最大 5 つのホットスポットピンを設置できます。それぞれのピンに異なるツールチップ（説明文）を設定できるので、商品の複数の特徴をまとめて紹介できます。

最大で5個のピンを設定できる

ノーコードで見た目をカスタマイズできる！

ピンのデザイン（ドット・プラス・番号）、色、サイズ、ツールチップの背景色や文字色など、テーマエディタからノーコードで自由にカスタマイズできます。ストアのデザインに合わせて統一感のある見た目に仕上げられます。

ノーコードで見た目をカスタマイズできる

1 クリックでテーマに追加できる！

アプリの管理画面から「テーマに追加」をクリックするだけで、テーマエディタが開き、すぐにブロックを設置できます。面倒な設定は不要です。

1クリックでテーマに追加できる

アプリのインストール

以下の手順で「シンプル画像ホットスポット｜お手軽画像吹き出し」をインストールできます。

アプリストアはこちら

プラン名: Basic Plan
月額: $5.99/月
無料期間: インストールから 7 日間、無料でアプリをお試しいただけます
年払い: 年払いで実質 2 ヶ月分無料でお得にご利用いただけます

手順

Shopify 管理画面の左下にある「設定」をクリックします。
「アプリ」をクリックし、画面上部の「Shopify App Store」へ移動します。
検索窓に「シンプル画像ホットスポット」と入力し、表示されたアプリをクリックします。
アプリ詳細画面で「インストール」をクリックします。
権限の確認画面が表示されるので、内容を確認し「インストール」を完了します。インストールが完了すると、アプリの管理画面が表示されます。

アプリブロックをテーマに追加

自動でテーマに追加（1 クリック追加）

アプリの管理画面から、簡単にテーマへブロックを追加できます。

アプリの管理画面を開きます。
「テーマを選択」で追加したいテーマを選び、「テーマに追加」をクリックします。
テーマエディタが開いたら、表示位置や設定を確認して「保存する」をクリックします。

手動でテーマに追加（任意ページに設置したい場合）

商品ページ以外にもブロックを追加したい場合は、以下の手順で手動追加できます。

Shopify 管理画面で「オンラインストア」→「テーマ」→「カスタマイズ」を開きます。
テーマエディタ上部のプルダウンから、追加したいページに移動します。
「セクションを追加」または「ブロックを追加」をクリックします。
「アプリ」タブから「シンプル画像ホットスポット｜お手軽画像吹き出し」を選んで追加します。
表示を確認し、問題なければ「保存する」をクリックします。

アプリブロックのカスタマイズ

テーマエディタで「シンプル画像ホットスポット｜お手軽画像吹き出し」ブロックを選択すると、右側に設定パネルが表示されます。以下の設定項目を使って、ホットスポットの見た目や動作をカスタマイズできます。

画像設定

画像に関する設定です。PC 用とモバイル用で別々の画像を設定できるので、デバイスに合わせた最適な見せ方が可能です。

設定名	説明
PC 用画像	PC（デスクトップ）で表示する画像を選択します。ホットスポットを配置するベースとなる画像です。
モバイル用画像（未設定時は PC 用画像を使用）	スマートフォンで表示する画像を選択します。未設定の場合は PC 用画像がそのまま使用されます。モバイルでの見え方を調整したい場合に便利です。
画像のアスペクト比	画像の縦横比を設定します。選択肢: 自動（画像の元の比率を維持）/ 正方形 (1:1) / 横長 (4:3) / ワイド (16:9)。ストアのデザインに合わせて選んでください。

画像設定のスキーマ

ホットスポット設定

ホットスポット（ピン）の配置に関する設定です。最大 5 つのホットスポットを設定できます。各ホットスポットには、コンテンツ（ツールチップに表示するテキスト）と、PC 用・モバイル用それぞれの位置を設定します。

ホットスポット 1〜5（共通の設定項目）

各ホットスポットには以下の設定があります。

設定名	説明
ホットスポット N - コンテンツ	ピンをクリック/ホバーしたときに表示されるツールチップの内容です。リッチテキスト（太字、リスト、リンクなど）が使えます。商品の素材説明やポイントの補足に便利です。
ホットスポット N - 横位置 (%)	PC 表示時のピンの横方向の位置をパーセント（0〜100）で指定します。0 が左端、100 が右端です。
ホットスポット N - 縦位置 (%)	PC 表示時のピンの縦方向の位置をパーセント（0〜100）で指定します。0 が上端、100 が下端です。
ホットスポット N - モバイルの横の位置 (%)	モバイル表示時のピンの横方向の位置です。モバイル用画像を設定している場合や、モバイルでの見え方を調整したい場合に使います。
ホットスポット N - モバイルの縦の位置 (%)	モバイル表示時のピンの縦方向の位置です。

ポイント: 横位置と縦位置がどちらも 0 のホットスポットは非表示になります。使わないホットスポットはそのままで OK です。

ホットスポット設定のスキーマ

スタイル設定

ピンやツールチップの見た目に関する設定です。ストアのデザインに合わせてカスタマイズできます。

設定名	説明
ピンのデザイン	ピンの見た目を選択します。選択肢: ドット（丸いドット、パルスアニメーション付き）/ プラス（+ マーク）/ 番号（1, 2, 3... の数字付き）。商品の説明を順序立てて見せたい場合は「番号」がおすすめです。
ツールチップの表示タイミング	ツールチップをどのタイミングで表示するかを選択します。選択肢: ホバー時（マウスを重ねたとき）/ クリック時（クリックしたとき）/ 常に表示（常に見える状態）。PC ユーザーが多い場合は「ホバー時」、モバイルユーザーが多い場合は「クリック時」がおすすめです。
ピンの色	ピンの色を設定します。商品画像の中でピンが目立つ色を選ぶと、お客様が見つけやすくなります。
ピンの大きさ	ピンのサイズを 10〜40px の範囲で設定します。画像のサイズやデザインに合わせて調整してください。
ツールチップの背景色	ツールチップの背景色を設定します。文字が読みやすいように、文字色とのコントラストを意識して選んでください。
ツールチップの文字の色	ツールチップ内のテキストの色を設定します。
ツールチップの文字の大きさ	ツールチップ内のテキストのフォントサイズを 10〜20px の範囲で設定します。

スタイル設定のスキーマ

余白設定

ブロックの上下の余白を調整する設定です。前後のセクションとの間隔を調整したい場合に使います。

設定名	説明
上部余白	ブロック上側の余白を 0〜80px の範囲で設定します。
下部余白	ブロック下側の余白を 0〜80px の範囲で設定します。

余白設定のスキーマ

追加設定（カスタム CSS）

テーマエディタの標準設定では対応できない細かなスタイル調整が必要な場合に、独自の CSS を追加できます。

設定名	説明
追加の CSS	カスタム CSS を入力できます。ブロック内のみに適用されるため、他の要素に影響を与えません。CSS の知識がある方向けの設定です。

追加設定のスキーマ