WordPressでインタラクティブ画像を作成する方法（簡単な方法）

WordPressの投稿に最適な画像を見つけるのは素晴らしいスタートですが、標準的な画像はしばしば限定的です。訪問者はビジュアルを見ますが、あなたが強調したい重要な詳細を見逃す可能性があります。

特定の機能を強調したり、プロセスをユーザーにガイドしようとしている場合、これはイライラする可能性があります。インタラクティブ画像は、クリック可能なホットスポットやツールチップを追加できるようにすることで、これを解決します。

いくつかのプラグインをテストした後、誰でもコードなしでこれらの機能を追加できる方法を見つけました。このガイドでは、WordPressでインタラクティブ画像を簡単に作成する方法を紹介します。

このガイドでは、プロセス全体を順を追って説明します。ここで、学習内容の概要を簡単に説明します。

インタラクティブ画像とは何ですか？
WordPressコンテンツにインタラクティブな画像を追加する方法
インタラクティブ画像を他のWordPressサイトにインポート/エクスポートする方法
インタラクティブ画像に関するよくある質問
追加リソース

インタラクティブ画像とは何ですか？

インタラクティブな画像には、ホットスポット領域、ハイライト、リンク、クリック可能なボタン、色、視聴覚コンテンツなどを追加できます。

WordPressウェブサイトにアップロードする標準的な画像よりも、はるかに魅力的です。

インタラクティブ画像は、訪問者の注意を特定の機能やコンテンツに引きつけ、追加情報を示すことができます。

例えば、訪問者がグラフの特定のバーにカーソルを合わせたときにポップアップを表示することができます。

このインタラクションは、訪問者が画像をより詳細に探索することを奨励し、ページに長く滞在させるのに役立ちます。また、よりインタラクティブで興味深い体験を作成し、WordPressでのページビューを増やし、直帰率を減らすことができます。

インタラクティブ画像は、訪問者に次に取るべき手順を示すこともできます。たとえば、サイトの他の部分へのリンクを追加したり、コールトゥアクションボタンを表示したりできます。

WordPressサイトでインタラクティブ画像を作成する方法を見てみましょう。

注意：代わりにウェブサイトにアニメーション画像を追加したい場合は、WordPressでアニメーションGIFを追加する方法に関するステップバイステップガイドに従ってください。

WordPressコンテンツにインタラクティブな画像を追加する方法

クリック可能な領域やインタラクティブなホットスポットを追加する最も簡単で初心者向けの方法は、Draw Attentionを使用することです。このプラグインを使用すると、ユーザーが画像と対話したときに「詳細情報」ポップアップを表示するか、新しいURLを開くことができます。

注意：このガイドでは、プラグインの無料バージョンを使用します。ただし、WP Draw Attentionのプロバージョンを自由に利用してください。これにより、より多くのレイアウトオプション、無制限のカラーテーマ、高度なツールチップ機能にアクセスできます。

最初に行う必要があるのは、Draw Attentionプラグインをインストールして有効化することです。WordPressプラグインのインストール方法に関するステップバイステップガイドを参照してください。

有効化したら、WordPressダッシュボードの注意を引く » 画像の編集に移動します。これにより、さまざまなインタラクションを作成し、それらを画像にクリック可能な領域として追加できる画面が表示されます。

まず、インタラクティブ画像のタイトルを入力します。

これは、WordPressウェブサイトの画像に隣接して表示されます。たとえば、次の画像では、「OptinMonster Features」というタイトルを使用しています。

専門家のアドバイス: このサンプル画像には、WPBeginnerで実際に使用しているOptinMonsterの機能が示されています。これは、ポップアップ、スライドインフォーム、その他のキャンペーンを作成して、メーリングリストを増やし、コンバージョンを向上させるのに役立ちます。

これは市場で最も強力なコンバージョン最適化ソフトウェアです。当社の完全なOptinMonsterレビューで、その機能について詳しく知ることができます。

タイトルを入力した後、「画像」セクションまでスクロールし、使用したい画像を選択します。

メディアライブラリから画像を選択するか、新しい画像をアップロードできます。

画像を選択した後、「ホットスポットエリア」セクションまでスクロールすると、色やリンクの追加、クリック可能なエリアの作成などができます。

このプラグインはデフォルトでクリック可能な領域1を作成するので、このセクションを展開するにはクリックしてください。

開始するには、インタラクティブにしたい領域をハイライトする必要があります。

Draw Attention には、ハイライトに使用できるいくつかの異なる形状がありますので、使用したい形状をクリックするだけです。次の画像では、長方形を選択しました。

次に、画像のホットスポットとして使用したい領域をドラッグしてハイライトします。

「Draw Attention」に、このクリック可能な領域の新しい設定が表示されます。まず、「Title」フィールドに名前を入力します。

これは、訪問者がホットスポットにマウスカーソルを合わせたときにツールチップとして表示されるため、説明的なものを使用することをお勧めします。

次の画像では、カウントダウン領域をホットスポットに変え、画像タイトル「Countdown Timer」を追加しました。

それが完了したら、「アクション」ドロップダウンを開き、訪問者がこの領域をクリックしたときに何が起こるかを選択します。「注意を引く」は、リンクを開くか、「詳細情報」ボックスを表示できます。

選択したオプションによって異なる設定が表示されます。たとえば、「URLに移動」を選択した場合は、リンクを追加し、新しいタブで開くかどうかを指定する必要があります。

「詳細を表示」を選択した場合、訪問者がホットスポットをクリックしたときに表示される情報を入力する必要があります。

オプションで詳細画像またはURLを追加することもできます。これは情報ボックスに含まれます。

次の画像では、詳細情報ボックスにテキストを追加しました。

OptinMonsterのロゴも詳細画像として追加しました。

ホットスポットの外観に満足したら、「別の領域を追加」ボタンをクリックします。

上記と同じプロセスに従って、クリック可能な領域を設定できるようになりました。

画像にすべてのクリック可能な領域を追加するには、これらの手順を繰り返すだけです。

これが完了したら、ハイライトやその他の情報ボックスの外観をカスタマイズしたい場合があります。たとえば、クリック可能な領域にカーソルを合わせたときに Draw Attention が表示する色を、「ハイライトカラー」設定を使用して変更できます。

「ハイライトスタイリング」セクションの設定を使用して、ハイライトの不透明度と境界線の幅を変更したり、境界線を追加したりすることもできます。

その後、「その他の情報ボックスのスタイリング」までスクロールして、ボックスの外観を微調整できます。たとえば、背景色、テキストの色などを変更できます。

Draw Attentionには、インタラクティブ画像に適用できるさまざまなテーマも付属しています。

これらのテーマを確認するには、「カラー配色の適用」ボックスまでスクロールし、ドロップダウンメニューを開くだけです。ライト、ダーク、注意を引くオプションを選択できます。

これらのオプションはすべて非常にわかりやすいので、ウェブサイトで最も見栄えの良い設定を試してみる価値があります。

様々なオプションを試しながら、「変更をプレビュー」をクリックすることで、WordPressウェブサイトでどのように表示されるかを確認できます。

インタラクティブ画像の見栄えと動作に満足したら、「更新」をクリックして変更を保存してください。

これで、インタラクティブ画像を任意のページまたは投稿に追加できます。WordPressコンテンツエディターの「インタラクティブ画像」ブロックを使用するか、「ショートコードをコピー」ブロックでショートコードを使用してこれを行うことができます。

ショートコードの配置方法の詳細については、WordPressにショートコードを追加する方法に関するガイドをご覧ください。

インタラクティブ画像を他のWordPressサイトにインポート/エクスポートする方法

同じインタラクティブ画像を複数のウェブサイトで再利用したい場合があります。

たとえば、アフィリエイトマーケターであれば、製品を宣伝するインタラクティブ画像を作成するかもしれません。その後、同じインタラクティブ画像をすべてのAmazonアフィリエイトストアやその他のアフィリエイトマーケティングウェブサイトで使用できます。

同じ画像をアップロードしてから、すべてのインタラクションを手動で再作成するのは、多くの時間と労力がかかる場合があります。

代わりに、インタラクティブ画像を一度作成し、Draw Attentionのインポート/エクスポート機能を使用することをお勧めします。これにより、同じ画像を複数のウェブサイトやオンラインストアで再利用できます。

これを行うには、インタラクティブ画像がある元のサイトと、その画像を使用したい他のすべてのウェブサイトに Draw Attention プラグインをインストールする必要があります。

元のサイトで、注意を引く » インポート / エクスポートに移動し、エクスポートしたい各画像の横にあるチェックボックスをオンにします。

次に、「エクスポートコードを生成」ボタンをクリックします。しばらくすると、Draw Attention がコードを生成します。

別のタブで、他のWordPressブログまたはウェブサイトにログインし、Draw Attention » Import / Exportに移動します。

ここで、エクスポートコードを「Import」ボックスにコピーし、「Import」ボタンをクリックします。

Draw Attention は、画像とそのすべてのインタラクションをインポートし、使用できる状態にします。

インタラクティブ画像を使用したいすべてのウェブサイトで、これらの手順を繰り返すだけです。

インタラクティブ画像に関するよくある質問

WordPressでインタラクティブ画像を追加することについて、よく寄せられる質問への回答を以下に示します。

WordPressでインタラクティブな画像を作成するのに最適なプラグインは何ですか？

初心者には、使いやすくシンプルなインターフェースを備えているため、Draw Attentionプラグインをお勧めします。無料版は必要な基本的な機能をすべて提供しますが、プロ版では複数の画像マップやツールチップの追加スタイリングなど、より高度なオプションが利用可能になります。

インタラクティブ画像はモバイルフレンドリーですか？

はい、Draw Attention プラグインは完全にレスポンシブです。これは、インタラクティブなホットスポットと情報ボックスが、あらゆる画面サイズに合わせて自動的に調整され、モバイルデバイスで優れたユーザーエクスペリエンスを提供するということです。

インタラクティブホットスポットに動画やアニメーションを追加できますか？

ホットスポットをYouTubeなどのプラットフォームの動画にリンクするには、「URLに移動」アクションを使用できます。ポップアップでの直接の動画埋め込みにはプロバージョンが必要な場合がありますが、リンクは簡単な回避策です。アニメーション画像については、WordPressにアニメーションGIFを追加する方法に関するガイドに従うことをお勧めします。

インタラクティブな画像を追加すると、私のウェブサイトの速度が低下しますか？

他のメディアと同様に、インタラクティブ画像はページの重量に追加されます。ただし、Draw Attentionプラグインは軽量でよくコーディングされています。最大の要因は元の画像ファイルのサイズなので、アップロードする前に常にウェブ用に画像を最適化することをお勧めします。

追加リソース

この記事が、WordPress でインタラクティブ画像を作成する方法を学ぶのに役立ったことを願っています。これらの追加リソースも参照することをお勧めします。

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。