WordPressの投稿に最適な画像を見つけることは素晴らしいスタートですが、多くの場合それは一方通行です。訪問者は静的な画像を見るだけで、あなたが強調したい重要な詳細を見逃してしまうかもしれません。
これは特に、製品の機能を強調したり、ユーザーをプロセスに誘導しようとしている場合に、イライラする可能性があります。画像がもっと多くのことを行い、積極的に視聴者を引き付けることができたらどうでしょうか？
それがまさにインタラクティブ画像が行うことです。WPBeginnerでいくつかのプラグインをテストした後、コードを必要とせずに誰でも画像にクリック可能なホットスポットを追加できる簡単な方法を見つけました。
このガイドでは、静的な画像を訪問者にとって魅力的でインタラクティブな体験に簡単に変換する方法をご紹介します。
このガイドでは、プロセス全体を順を追って説明します。ここで、学習内容の概要を簡単に説明します。
- インタラクティブ画像とは何ですか？
- 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」フィールドに名前を入力します。
これは、訪問者がホットスポットにマウスカーソルを合わせたときにツールチップとして表示されるため、説明的なものを使用することをお勧めします。
次の画像では、カウントダウンエリアをホットスポットに変え、画像タイトル「カウントダウンタイマー」を追加しました。
それが完了したら、「アクション」ドロップダウンを開き、訪問者がこの領域をクリックしたときに何が起こるかを選択します。「注意を引く」は、リンクを開くか、「詳細情報」ボックスを表示できます。
選択したオプションによって、さまざまな設定が表示されます。たとえば、「URLに移動」を選択した場合、リンクを追加し、新しいタブで開くかどうかを指定する必要があります。
「詳細を表示」を選択した場合、訪問者がホットスポットをクリックしたときに表示される情報を入力する必要があります。
オプションで詳細画像またはURLを追加することもできます。これは情報ボックスに含まれます。
次の画像では、詳細情報ボックスにテキストを追加しました。
詳細画像としてOptinMonsterロゴも追加しました。
ホットスポットの外観に満足したら、「別の領域を追加」ボタンをクリックします。
上記と同じプロセスに従って、クリック可能な領域を設定できるようになりました。
画像にすべてのクリック可能な領域を追加するには、これらの手順を繰り返すだけです。
これが完了したら、ハイライトやその他の情報ボックスの外観をカスタマイズしたい場合があります。たとえば、クリック可能な領域にカーソルを合わせたときに Draw Attention が表示する色を、「ハイライトカラー」設定を使用して変更できます。
また、ハイライトの不透明度と境界線の幅を変更したり、境界線を追加したりすることも、「ハイライトスタイリング」セクションの設定を使用して行うことができます。
その後、「その他の情報ボックスのスタイリング」までスクロールして、ボックスの外観を微調整できます。たとえば、背景色、テキストの色などを変更できます。
Draw Attentionには、インタラクティブ画像に適用できるさまざまなテーマも付属しています。
これらのテーマを確認するには、「カラー配色の適用」ボックスまでスクロールし、ドロップダウンメニューを開くだけです。ライト、ダーク、注意を引くオプションを選択できます。
これらのオプションはすべて非常にわかりやすいので、ウェブサイトで最も見栄えの良い設定を試してみる価値があります。
様々なオプションを試しながら、「変更をプレビュー」をクリックすることで、WordPressウェブサイトでどのように表示されるかを確認できます。
インタラクティブ画像の見栄えと動作に満足したら、「更新」をクリックして変更を保存してください。
「ショートコードをコピー」ブロックのショートコードを使用して、インタラクティブ画像を任意のページ、投稿、またはウィジェット対応領域に追加できるようになりました。
ショートコードの配置方法の詳細については、WordPressでショートコードを追加する方法に関するガイドを参照してください。
インタラクティブ画像を他のWordPressサイトにインポート/エクスポートする方法
同じインタラクティブ画像を複数のウェブサイトで再利用したい場合があります。
例えば、あなたがアフィリエイトマーケターである場合、あなたの製品の1つを宣伝するインタラクティブな画像を作成することができます。そして、そのインタラクティブな画像を、すべてのAmazonアフィリエイトストアやその他のアフィリエイトマーケティングウェブサイト全体で使用できます。
同じ画像をアップロードしてから、すべてのインタラクションを手動で再作成するのは、多くの時間と労力がかかる場合があります。
代わりに、インタラクティブな画像を一度作成し、Draw Attentionのインポート/エクスポート機能を使用することをお勧めします。これにより、同じ画像を数え切れないほどのウェブサイトやオンラインストアで再利用できます。
これを行うには、インタラクティブ画像がある元のサイトと、その画像を使用したい他のすべてのウェブサイトに Draw Attention プラグインをインストールする必要があります。
元のサイトで、注意を引く » インポート / エクスポートに移動し、エクスポートしたい各画像の横にあるチェックボックスをオンにします。
次に、「エクスポートコードを生成」ボタンをクリックします。しばらくすると、Draw Attention がコードを生成します。
別のタブで、他のWordPressブログまたはウェブサイトにログインし、Draw Attention » Import / Exportに移動します。
ここで、エクスポートコードを「Import」ボックスにコピーし、「Import」ボタンをクリックします。
Draw Attention は、画像とそのすべてのインタラクションをインポートし、使用できる状態にします。
インタラクティブ画像を使用したいすべてのウェブサイトで、これらの手順を繰り返すだけです。
インタラクティブ画像に関するよくある質問
WordPressでインタラクティブ画像を追加することについて、よく寄せられる質問への回答を以下に示します。
WordPressでインタラクティブな画像を作成するのに最適なプラグインは何ですか？
初心者には、使いやすくシンプルなインターフェースを備えているため、Draw Attentionプラグインをお勧めします。無料版は必要な基本的な機能をすべて提供しますが、プロ版では複数の画像マップやツールチップの追加スタイリングなど、より高度なオプションが利用可能になります。
インタラクティブ画像はモバイルフレンドリーですか？
はい、Draw Attention プラグインは完全にレスポンシブです。これは、インタラクティブなホットスポットと情報ボックスが、あらゆる画面サイズに合わせて自動的に調整され、モバイルデバイスで優れたユーザーエクスペリエンスを提供するということです。
インタラクティブホットスポットに動画やアニメーションを追加できますか？
「URLに移動」アクションを使用して、YouTubeのようなプラットフォームの動画にホットスポットをリンクしたり、Vimeoにリンクしたりできます。ポップアップに直接動画を埋め込むにはProバージョンが必要な場合がありますが、リンクは簡単な回避策です。アニメーション画像については、WordPressにアニメーションGIFを追加する方法に関するガイドに従うことをお勧めします。
インタラクティブな画像を追加すると、私のウェブサイトの速度が低下しますか？
他のメディアと同様に、インタラクティブ画像はページの重量を増加させます。しかし、Draw Attention プラグインは軽量でコードも優れています。最大の要因は元の画像ファイルのサイズですので、アップロードする前に常に ウェブ用に画像を最適化 することをお勧めします。
この記事が、WordPressでインタラクティブな画像を作成する方法を学ぶのに役立ったことを願っています。また、WordPressで画像フリップボックスのオーバーレイとホバーを作成する方法に関するガイドや、最高のWordPressスライダープラグインの専門家によるおすすめもご覧ください。
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
アンドレア・デイビッドソン
こんにちは
プロにアップグレードしないと、複数の画像を追加できませんか？
ありがとうございます
アンドレア