詳細な製品や複雑なアイデアを紹介しようとすると、静的な画像は少し平坦に感じられることがあります。共有したい魅力的なものがあっても、シンプルな写真ですべてを語れるとは限りません。
ページを乱雑にすることなく、訪問者に機能を案内するもっとインタラクティブな方法があればと思うことがよくある。それは、カスタムコードや複雑なプラグインが必要なことのように思えます。
しかし、難しく考える必要はありません。このチュートリアルでは、WordPressにホットスポット画像を追加する方法をご紹介します。
インタラクティブ・イメージ・ホットスポットとは？
ホットスポットイメージは、ツールチップポップアップを表示するクリック可能な領域を持つ静止画像、写真、またはイラストです。ツールチップコンテンツは、画像の特定の側面に関する追加情報をユーザーに提供します。
例えば、ホットスポットを使って、写真に写っているさまざまな商品を識別したり、メニューの料理にラベルをつけたり、あるいはイベントに参加しているさまざまな人のソーシャルメディア・ハンドルを表示したりすることができる。
WordPressサイトに画像ホットスポットを追加することで、よりインタラクティブなサイトにすることができます。訪問者がイメージマップに興味を持つことで、ウェブサイトでの滞在時間が長くなり、直帰率を下げることができます。
さらに、インタラクティブなホットスポット画像を作成することで、ユーザーエクスペリエンスを向上させ、コンバージョン率を高めることができます。
画像のホットスポットがどのようなものかお分かりいただけたと思いますが、いくつか疑問があるのではないでしょうか。ホットスポットの画像はどのように作成するのか、WordPressサイトに追加する最も簡単な方法は？
次はその方法を紹介しよう。
WordPressにインタラクティブ・ホットスポット画像を追加する方法
WordPressサイトに画像ホットスポットを追加するには、いくつかの方法があります。WordPressの画像ホットスポットプラグインを使用したり、Diviのようなホットスポット機能を備えたWordPressテーマを使用したり、HTMLとカスタムCSSを使って自分でコーディングすることもできます。
WordPressサイトにイメージマップホットスポットを追加する最も簡単な方法は、SeedProdのようなページビルダープラグインを使用することです。
SeedProdを選ぶ理由
SeedProdは100万人以上のユーザーを持つ最高のWordPressページビルダーです。コードを書くことなく、ランディングページ、ヘッダー、フッター、サイドバー、テンプレートなど、WordPressのあらゆるレイアウトを作成できます。
Elementorのモジュールと同様に、SeedProdはブロックベースのインターフェイスを持ち、ウェブデザイン要素をドラッグ＆ドロップで配置することができます。これは、カスタムレイアウトを構築する際にリアルタイムで変更を確認できることを意味します。
さらに、SeedProdには専用のホットスポットブロックがあり、数回クリックするだけでユーザーフレンドリーな画像ホットスポットを作成できます。
この強力なWordPressプラグインでできることは他にもあります：
- WordPressをメンテナンスモードにする
- WordPressウィジェットをページ内に追加
- WooCommerceサポートによるカスタムオンラインストアの構築
- デスクトップとモバイルデバイスで特定の要素を表示・非表示する
- 近日公開ページを作成する
- 内蔵の購読者ダッシュボードで新規購読者を管理する
- カスタムWordPressテーマをゼロから作る
- その他いろいろ
このガイドでは、SeedProdを使ってWordPressに画像ホットスポットを追加します。以下の手順に従ってください。
ステップ1.SeedProdのインストールとアクティベート
まず、SeedProdのウェブサイトへ行き、プラグインをダウンロードします。SeedProdには無料版もありますが、このチュートリアルではSeedPod Proを使用します。
料金プランを選択し、プラグインのzipファイルをダウンロードしたら、WordPressウェブサイトにインストールして有効化する必要があります。このステップでヘルプが必要な場合は、WordPressプラグインのインストールに関するガイドを参照してください。
WordPressサイトにSeedProdを追加した後、SeedProd " 設定ページに移動し、製品のライセンスキーを入力します。
キーはSeedProdアカウントダッシュボードのダウンロードセクションにあります。
キーを入力したら、Verify Key ボタンをクリックしてプレミアム機能のロックを解除してください。
ステップ2.WordPressテーマまたはランディングページのテンプレートを選ぶ
ライセンスの設定を確認したら、SeedProdでビルドを始める準備ができました。そのためには、まずどのタイプのレイアウトを作りたいかを決める必要があります。
SeedProdでは、テーマビルダーを使用して、個別のランディングページまたは完全なWordPressウェブサイトを作成することができます。そこから、同じドラッグ＆ドロップエディタでカスタマイズすることができます。
このガイドでは、独立したランディングページを作成します。しかし、この方法がお好みであれば、カスタムWordPressテーマの作成に関するこのガイドに従ってください。
ランディングページのレイアウトを作るので、SeedProd " ランディングページに 向かい、ランディングページのモードセクションをスクロールして、新しいランディングページを追加ボタンをクリックしましょう。
ランディングページテンプレートのライブラリに移動し、あなたのビジネスニーズに最適なデザインを選ぶことができます。各テンプレートは100%モバイル対応で、フィットネス、不動産、デジタルマーケティングなど、様々なユースケースに対応したデザインが用意されています。
適当なものが見つからなくてもご心配なく。テンプレートは隅々までカスタマイズできます。テンプレートにカーソルを合わせてチェックマークアイコンをクリックし、テンプレートを選んでください。
次の画面で、ページに名前とURLを付け、「保存してページの編集を開始する」ボタンをクリックすると、SeedProdのビジュアルエディタが起動します。
ステップ3.ホットスポットWordPressブロックを追加する
SeedProdのページビルダーは操作がとても簡単です。左側のパネルには様々なセクションやブロックが表示され、右側にはライブページプレビューが表示されます。
プレビューのどこかをクリックすると、要素の内容を変更できます。例えば、テキストブロックをクリックすると、ウェルカムメッセージや説明を入力できるパネルが開きます。
また、オプトインフォームブロックでは、フォームフィールドをカスタマイズしたり、送信ボタンの背景色を変更したりすることができます。
画像ホットスポットウィジェットをページに追加する前に、ページの最初の画像のような完璧な場所を見つけましょう。
オレンジ色の枠が表示されるまでブロックにカーソルを合わせ、ゴミ箱アイコンをクリックして削除します。
次に、Advanced blocksパネルからHotspotブロックを見つけ、ページ上のスペースにドラッグします。
次に、ブロック設定を開き、ホットスポットアイコンを追加したい場所に画像を追加します。
パソコンやWordPressのメディアライブラリから写真をアップロードするか、何千ものストック画像から選ぶことができます（SeedProd plusプラン以上で利用可能）。
画像を追加したら、最初のホットスポットを作成できます。
ホットスポットのプレースホルダーを展開し、ホットスポットの説明を入力します。この内容は、ユーザーがホットスポットアイコンをクリックしたりカーソルを置いたりしたときに表示されます。
垂直方向と水平方向のスライダーをドラッグすることで、円形のホットスポットアイコンの位置を変更できます。さらに、アイコンの色とアニメーションを変更して、より目立たせることができます。
さらに、詳細設定を切り替えると、ラベルの選択、リンクの入力、Font Awesomeライブラリからのカスタムアイコンとサイズの選択ができる。
ホットスポットをより人目を引くようにするには、ツールチップセクションを開き、トリガーとアニメーションの設定を選択します。
次に「詳細設定」 タブをクリックすると、タイポグラフィ、テキストの色、スペーシングなど、より多くの書式設定やスタイリング・オプションを選択できます。
画像にさらにホットスポットを追加するには、このステップを何度でも繰り返してください。保存]ボタンをクリックして変更を保存することを忘れないでください。
さあ、思い通りのページになるまでカスタマイズを続けよう。
例えば、アコーディオンブロックを使ってFAQセクションをページに追加したり、ビデオブロックを使ってYouTubeやVimeoのビデオを表示したり、グーグルマップブロックを使って所在地を表示したりすることができます。
ステップ4.設定を行う
それでは、ランディングページのパフォーマンスを高めるために変更できる設定をいくつか見てみましょう。
まず、画面上部にある「接続」タブをクリックすると、あなたのページをお好みのメールマーケティングサービスと統合することができます。
Eメールとの統合により、オプトインフォームから登録した人のEメールアドレスが自動的にリストに追加されます。
次に、ページ設定タブをクリックします。このページでは、一般設定、SEO設定、分析設定、スクリプト設定を管理できます。
例えば、ランディングページの指標とパフォーマンスを監視するために、最高のGoogle AnalyticsプラグインであるMonsterInsightsに接続することができます。
また、カスタムドメイン設定（エリートプラン）を使用すると、複数のWordPressをインストールすることなく、メインウェブサイトとは別のユニークなドメイン名をページに付与することができます。
ステップ5.WordPressでホットスポット画像を公開する
設定が完了したら、ランディングページを公開し、ホットスポット画像をウェブサイトに掲載する準備が整いました。
そのためには、Saveボタンの矢印をクリックし、Publishを選択します。
これで、あなたのページを表示し、画像ホットスポットの動作を確認することができます！
ホットスポットのツールチップを詳しく見てみよう：
WordPressで画像ホットスポットを追加する際のFAQ
ショートコードやカスタムCSS、不要なアドオンを使用せずにWordPressにホットスポット画像を追加する方法がお分かりいただけたと思います。さらに良いことに、SeedProdを使えばインタラクティブな画像ホットスポットを作成するのに数分しかかかりません。
何を待っているんだい？
このチュートリアルを楽しんでいただけたなら、以下のWordPressガイドも気に入っていただけるかもしれません：
お読みいただきありがとうございました！あなたのご意見をぜひお聞かせください。YouTube、X、Facebookで、あなたのビジネスを成長させるために役立つアドバイスやコンテンツを提供していますので、お気軽に会話にご参加ください。
