インタラクティブな画像を作成する方法: WP Draw Attention レビュー
公開: 2023-03-07ユーザーエクスペリエンスを向上させ、コンバージョンを増やしたいですか? これ以上探さない！ インタラクティブな画像は、視聴者を魅了し、サイトを目立たせるための優れたツールです。 この投稿では、インタラクティブな画像を作成する方法を紹介します。
インタラクティブな画像を使用すると、魅力的で魅力的な方法で情報を表示し、コンテンツに明確さとコンテキストを提供できます。 現在、ユーザーはインタラクティブな画像にカーソルを合わせてクリックする傾向があります。これは、各セクションの背後にあるものを発見し、相互作用のさまざまな領域を探索できるため、楽しい体験を提供するためです。
これらのタイプの画像は、特定のアイデアや強調したい重要な情報に視聴者の注意を向けるのに効果的な方法です。特に、大量のコンテンツを整理する必要がある場合に効果的です。
WP Draw Attention を使用したインタラクティブな画像の作成
マップ、スキーム、写真、またはその他の種類の画像を作成する場合でも、Draw Attention プラグインは完璧なソリューションです。 これは、形式を変更せずに任意の画像にクリック可能なセクションを描画し、その相互作用の動作、色、および表示の詳細をカスタマイズできるユーザーフレンドリーなツールです. さらに、Gutenberg ブロックをサポートしているため、投稿、ページ、製品にインタラクティブな画像を簡単に表示できます。
Draw Attention プラグインを使用してインタラクティブな画像を作成するのは簡単です。 画像をアップロードし、クリック可能な領域を作成し、各セクションに関連する情報を入力します。 利用可能なオプションを使用して画像をカスタマイズすれば、準備完了です! ショートコードをコピーするか、Gutenberg ブロックを使用して、インタラクティブな画像を Web サイトに表示します。
Draw Attention はフリーミアム ツールです。 無料版にはすべての機能が含まれていますが、作成できるインタラクティブな画像の数は限られています。 より多くの画像を作成する必要があり、優先的なサポートが必要な場合は、無制限のインタラクティブな画像、クリック可能な領域、および 20 のプリセット カラー スキームを提供するプレミアム バージョンを使用する必要があります。 単一の Web サイト バージョンの価格は 99 米ドルで、無制限のサイトを追加する場合の価格は 149 米ドルです。
結論として、Web サイトを次のレベルに引き上げ、ユニークで魅力的なユーザー エクスペリエンスを提供したい場合は、Draw Attention プラグインが最適です。
WP Draw Attention プラグインの概要
WP Draw Attention は、インタラクティブな画像を作成するための最高のプラグインの 1 つです。 非常に使いやすく、その性能は優れています。
任意の画像 (png、jpg、またはその他の画像形式) をアップロードするだけで、プラグインが画像をインタラクティブにし、クリック可能なセクションを描画できるようにします。 単一の画像操作、色の強調表示、詳細の表示、およびマウスの動作に適用できる幅広いオプションもあります。 画像をエクスポートおよびインポートすることもできます。
画像をインタラクティブにした後、ショートコードを入力してフロントエンドに表示する必要があります。 ショートコードは読み込み時に画像に影響を与えず、インタラクションのみを含みます。
インタラクティブな画像を作成したら、投稿、製品ページ、およびショートコードを追加できるあらゆる場所で使用できます。 また、インタラクティブな画像を表示するカスタマイズされたブロックを提供する Gutenberg ブロックもサポートしています。
価格
Draw Attention はフリーミアム ツールです。 無料版にはすべての機能が含まれていますが、作成できるインタラクティブな画像の数は限られています。 より多くの画像を作成する必要があり、優先的なサポートが必要な場合は、無制限のインタラクティブな画像、クリック可能な領域、および 20 のプリセット カラー スキームを提供するプレミアム バージョンを使用する必要があります。 単一の Web サイト バージョンの価格は 99 米ドルで、無制限のサイトを追加する場合の価格は 149 米ドルです。
要約すると、Draw Attention が提供するプランは次のとおりです。
- 無料
- 単一のウェブサイト: $99
- 1 年間のアップデートとサポート
- 無制限のウェブサイト $149 USD
- 1 年間のアップデートと優先サポート
どちらのプレミアムバージョンにも含まれています
- 無制限のインタラクティブ画像
- 無制限のクリック可能エリア
- 20のプリセットカラースキーム
- カスタム レイアウト オプション (詳細情報ボックスの位置を変更するか、ライトボックスまたはツールチップを使用します)
Draw Attention プラグインを使用してインタラクティブな画像を作成する方法
インタラクティブな画像は、技術的には通常の画像の上に重ねたものです。 このオーバーレイは、背景画像セクションと一致するセクションによって定義されるため、ユーザーがセクションをクリックすると、その特定のセクションに関連するイベントがトリガーされます。
WP Draw Attention プラグインでインタラクティブな画像を作成するには、画像とそれに関連する情報が必要です。
1) 画像をアップロードする
まず、他の画像をアップロードするのと同じ方法で画像を WordPress ギャラリーにアップロードします。 この時点で、それは他のようなイメージです。 Draw Attention > Add Newに移動して、プラグイン ダッシュボード オプションから直接ファイルを追加できます。 
次に、右側のサイドバーにある画像ボックスを使用してメディア ライブラリに画像をアップロードします。
2) 画像との相互作用を作成する
ここで、クリック可能な領域を作成して、ユーザーが操作できるようにする必要があります。 前の手順で行ったのと同じように、もう一度[新規追加]をクリックして、画像の作業を開始します。
これにより、インタラクティブな画像エディター インターフェイスが表示されます。 ここでは、他のカスタマイズの中でも特に、対話動作のスタイルを変更できます。
画像をアップロードするか、メディア ライブラリから画像を選択して、画像を追加します。 タイトルを入力してPublishをクリックします。 下書きとして保存して、画像の編集を開始することもできます。
画像エディタに新しいセクションが表示されます。 ホットスポット エリアセクションでは、画像上に描画してインタラクション ゾーンの定義を開始します。
Draw Attention には、ホットスポットの描画に役立ついくつかのオプションが用意されています。 より正確に画像をズームしたり、多角形、円、または長方形を使用してホットスポットを描画したり、いつでも編集、保存、キャンセルしたりできます。
画像にクリッカブル ゾーンを設定したら、タイトル、説明など、画像に関連する情報を入力する必要があります。
次に、画像のすべてのクリック可能な領域でプロセスを繰り返し、それぞれの詳細を入力します。
利用可能なオプションを使用して、画像上にゾーンを描画します。 これにより、多角形、長方形、または円を描くことができます。 セクションの形状と可能な限り正確に一致させる必要があります。
その後、複数のオプションを使用して画像をカスタマイズできます。
サイドバーでは、クリックまたはホバーし、配色を選択し、情報が表示されるレイアウトを設定することで、インタラクションの動作を変更できます。
3) 画像を表示する
編集が終わったら、最後のステップはインタラクティブな画像をフロントエンドに表示することです。 エディター ページの右側のサイドバーの下部にあるショートコードをコピーして、画像を配置したい場所に貼り付けるだけです。
または、このオプションに慣れている場合は、Gutenberg ブロックを使用できます。 Draw Attention は、ショートコードを必要とせずにインタラクティブな画像を表示する Gutenberg ブロックを提供します。
結論
全体として、Draw Attention は、インタラクティブな画像を作成し、サイトの UX を改善するための優れたプラグインです。 インタラクティブな画像は、ユーザー エンゲージメントを向上させ、サイトを目立たせるのに最適です。
このプラグインは、インタラクティブな画像を作成するための直感的で効率的な方法を提供し、サイトのスタイルに合わせて画像のスタイルを設定できるカスタマイズ オプションの完全なセットが付属しています。 さらに、すべての機能を備えた無料のオプションを提供しているため、何も支払うことなくプラグインをテストできます.
インタラクティブな画像を作成するために、Draw Attention またはその他のプラグインを試しましたか? それはどうしたの？ 以下のコメントでお知らせください！