どのような状況においても、データを見栄えよく、そしてわかりやすく提示することには多くの利点があります。ウェブサイトで視覚的なウィジェットを利用することで、有益な原数値（調整や加工をしていない生の数字）や統計データを美しく見せることができます。WordPressサイトの場合は通常、プラグインで機能を拡張して、管理画面内でデータを扱うことになります。
今回は、視覚的ウィジェットについて掘り下げ、種類や利点、用途をご紹介します。記事の後半では、ウィジェットの実装に役立つおすすめWordPressプラグインとWordPressでの使用方法も見ていきます。
視覚的ウィジェットとは
（WordPressサイトを含む）すべてのウェブサイトは、一般に視覚的ウィジェットとテキストウィジェットの2種類で構成されています。テキストウィジェットの見栄えが劣るというわけではありませんが、視覚的ウィジェットを使用することで、より魅力的な形でコンテンツを提供することができます。
視覚的ウィジェットはチャート、グラフ、マップ、プログレスバーなどの動的コンポーネントが代表的で、複雑な情報を一目でわかりやすく提供することで、訪問者とのコミュニケーションが円滑になり、読者がデータをより素早く理解・解釈することができます。またその結果として、ユーザーのエンゲージメントやリテンションの向上にもつながります。
視覚的ウィジェットにはさまざまな種類がりありますが、以下のような共通点があります。
- 動的にデータを示す
- 読者がデータを掘り下げるのに役立つインタラクティブな要素を提供可能
- サイトのデザインを問わずウィジェットをカスタマイズできる
- 表示する情報をリアルタイム更新できるものもある
このような視覚的なウィジェットは、サイトに華やかさを与えるだけでなく、生のデータを視覚化し、相互作用させる重要な役割を担います。
視覚的ウィジェットを活用するメリット
視覚的要素を用いてメッセージを伝えることには多くの利点があり、オンラインマーケティングにおいて特に重要です。
他にも以下のような利点があります。
- データの視覚化の強化─複雑なデータセットが見やすくなり、トレンドやパターンを素早く把握できる。汎用性と適応性も高く、消化しやすい見せ方により情報の提供方法を簡素化することも可能。
- ユーザーエンゲージメントの向上─インタラクティブな要素により、ユーザーの滞在時間や全体的なエンゲージメント指標が向上する。
- プロフェッショナルな美しさ─適切なデザインを作成することで、ウィジェットの視覚的な効果が高まる。洗練された外観はデータプレゼンテーションに優位性をもたらす。
視覚的な情報は、分野を問わずテキストよりも直感的で記憶に残りやすいため、重要なデータやメッセージを伝えるのに効果的。したがって、サイト上でうまく活用したいところです。
視覚的ウィジェットの実装が効果的な状況
とはいえ、視覚的なウィジェットを多用しすぎると、反復的になり飽和状態になりかねません。ここぞという場所に効果的に設置することが重要です。
視覚的なウィジェットを活用できる場面は多数あり、たとえば複雑な概念を単純化して見せるにはうってつけです。また、以下のような状況にも有用です。
- 複雑なデータセットを提示し、大量のデータやデータポイント間の複雑な関係を示す場合
- 時間の経過に伴うトレンドを強調し、異なる期間におけるデータの変化やパターンを示す場合（目標、マイルストーン、成長指標なども）
- 複数の変数を比較して、さまざまなデータカテゴリ間の関係や違いを示す場合
- 特定の場所やデータに空間的な背景が必要になり地理的なデータを示す場合
また、動的なレポートやダッシュボードなど、ユーザーとの対話にも視覚的なウィジェットを利用できます。肝心なのは、データを視覚的に表示することであり、他のアプローチよりもユーザーが理解や関与を深められるかどうかを見極めることです。
一言で言えば、視覚的な要素を用いることでデータがより有益になり理解しやすいものになる場合は、視覚的なウィジェットを利用するのが理にかなっています。
視覚的ウィジェットの種類
視覚的ウィジェットにはさまざまな種類があり、それぞれ適したデータとプレゼンテーションの要件があります（データの表示方法は割愛）。
棒グラフ、円グラフ、折れ線グラフ、面積グラフのような典型的な図表は、データの視覚化に適しており、定番と言えるウィジェットです。
散布図もおそらく一度は見たことがあるでしょう。上記ウィジェットよりもやや複雑ですが、2つの変数の関係を効果的に示すことができます。
マップにはさまざまな形式があります。例えば、比較的ニッチな用途で使用されるヒートマップは、データセットの強度を表示するために色のグラデーションを使用します。また、インタラクティブな世界地図は、場所に基づいたインタラクティブ性を与えたい場合に便利です。
カウンターやプログレスバーは、マイルストーン（プロジェクトや目標の重要な進捗ポイント）達成を示すのに効果的です。たとえば、最終値に向けて動的にカウントする数字カウンターや円形のプログレスバーで達成率を表示するなど。以下のように直線の棒を使用することもできます。
また、画像ギャラリー、Lightbox（画像拡大表示）、スライダーを使用することで、データを複数のスライドで表示したり、オーバーレイを用いたり、ストーリー仕立てで見せたりと、データをより魅力的で理解しやすい形にすることができます。タイムラインやプロセスフローを順序立てて見せるのにも効果的です。例えば、写真撮影のヒントを解説するサイトなどでは、以下のようなビフォーアフター比較ウィジェットがよく使用されています。
上のウィジェットでは、動的なスライダーを使用して2点の写真を比較するもので、スライダーを下にドラッグすると、別の写真が現れます。これはすべてのサイトで有用になるわけではないかもしれませんが、視覚的ウィジェットには、種類に応じて異なる特有の利点や用途があるものです。
視覚的ウィジェットの用途（実例あり）
どの視覚的ウィジェットを使用するかはもちろんですが、どのように（そしてどこで）使用するかも重要です。大きな効果を得るには、適切な用途で使用する必要があります。
また、データの視覚化とは関連しない一般的な状況にも役立つことがあります。以下、実際のウェブサイトをご紹介しながら、ウィジェットの用途を見ていきます。
公式情報
視覚的ウィジェットお決まりの用途は、まず企業の経営指標などを示す場合。消費者や顧客にデータをわかりやすく提示することができます。棒グラフはわかりやすく、長期的な売上傾向を視覚化したり、異なる製品やサービスを比較したりするのに有用です。
例えば、トヨタ自動車の公式サイトでは、以下のように営業収益をわかりやすい棒グラフで提示しています。
このようなデータの視覚化により、CAC（顧客獲得単価）やLTV（顧客生涯価値）のような複雑なビジネス指標の相関関係がわかりやすくなります。積み上げ棒グラフにも同様の効果があります。WordPressのプラグインディレクトリでは、ダウンロードされているバージョンの内訳を積み上げ棒グラフで示しています。
円グラフやドーナツチャートは顧客に関連するデータを表示したい場合に適しており、年齢、国、性別などに応じて情報をセグメント化することができます。Elementorの公式サイトでは、おしゃれで目を引くパーティクルエフェクト（円や点のような小さな要素が動き回る効果）を利用して、同製品のユーザーベースの規模や地域が一目でわかるようになっています。
また、企業のマイルストーンやプロジェクトの進捗を提示する場合にも、視覚的なウィジェットが一役買ってくれます。データの可視化に特化したツールFlourishのサイトでは、同社のブランドロイヤリティに影響を与える歴史を視覚的な年表で紹介しています。
上記のような一般的な用途はECサイトにも適用されますが、ECサイト特有の活用方法もあります。
ECサイトの商品情報
消費者の購買決定は数秒程度と言われており、オンラインストアでは商品情報を素早く的確に伝えることが成功の鍵となります。棒グラフやレーダーチャートを用いた商品比較は、類似商品の特徴や仕様の比較に役立ちますが、それだけではありません。
ウェットスーツブランドのSRFACEは、ウェットスーツの仕様と異なるスタイルを視覚的に見せるために、以下のようなインタラクティブなスタイルガイドを提示しています。
また、ビジネス向けの用途になりますが、チャートやグラフを使って利用者数の傾向をわかりやすく示すこともできます。WordPressのテーマディレクトリではこれを棒グラフで示しています。
視覚的なウィジェットは、テキストを使用する場所であればどこにもで設置可能です。例えば、オンラインストアでは一般にシンプルなテキストで在庫計算を示しているかもしれませんが（赤い文字で「残りわずか」など）、プログレスバーを設置するとより緊急性を演出できるかもしれません。
リアルタイムの指標追跡
指標のリアルタイムの変化を視覚化することでユーザーの関心を引くこともでき、これはチャリティや非営利団体のウェブサイトでよく見られます。
日本国内最大級のクラウドファンディングプラットフォームであるCampfireでは、各キャンペーンにはプログレスバーが表示され、誰もが視覚的に進捗を確認できることで目標金額に近づく高揚感を演出しながら、より多くのユーザーに寄付を促すことができます。
アニメーション化されたカウンターやインフォグラフィックは、製品やサービスがリアルタイムに与えている影響を示すのに効果的です。WordPress.orgのメインサイトには、毎分更新されるコアプラットフォームのダウンロード数を表示する専用ページがあります。
Kinstaのステータスページでは、公式サイトや提供サービスの稼働状況を監視できるを公開しています。
リアルタイムの更新には視覚的な効果はもちろん、このような実用的な用途もあり、特定の指標について常に最新情報を把握したい場合に有用です。
内部分析
パフォーマンス監視の範囲は幅広く、最前線でのKPIの測定戦略や、パーソナライズされた特定の指標などさ多様です。Google アナリティクスは、特定のサイトに関する豊富なデータをわかりやすく魅力的に見せている好例です。
Google Lighthouseの監査アプリであるDeploymentHawkは、さまざまなチャート、グラフ、カウンターなどを使用して数字を計算し、レポートの結果を視覚化します。
Kinstaの専用コントロールパネルMyKinstaと内蔵のアプリケーションパフォーマンス監視（APM）ツールでも、確認が必要な指標に応じてさまざまな視覚化を行なっています。
目標達成には、ゲーミフィケーションを活用できます。タスク管理ツールのTodoistは、基本的な棒グラフや折れ線グラフとタスク完了ごとにもらえるポイント（カルマポイント）を使ってゲーミフィケーションを導入しています。
最後に、非営利団体（NPO）では、時に内部での成果やデータの分析結果を外部に公表する必要があり、この場合「外部向けの見せ方」と「内部でのデータ利用」の両方を考慮しなければなりません。たとえばビル&メリンダ・ゲイツ財団は、内部の理念を元に今後の予測を視覚化して提示しています。
このように視覚化の種類や用途に柔軟性を持たせることで、ウィジェットの適応性を活用することもできます。続いて、WordPressで視覚的なウィジェットを活用する方法を見ていきましょう。
WordPressサイトへの視覚的ウィジェット導入に役立つおすすめプラグイン
冒頭で触れたとおり、WordPressで視覚的なウィジェットを実装するには、プラグインを使用することになります。以下、順不同でおすすめのプラグインをご紹介していきます。
1. Visualizer: Tables and Charts Manager for WordPress
ThemeIsleのVisualizerは、無料で堅実な選択肢になります。さまざまなウィジェットに対応しており、使い方も簡単です。
4種類のチャート、スプレッドシートのようなインターフェースを搭載したデータエディター、豊富なカスタマイズオプションがあり、Google Charts（およびその他のGoogle API）とも統合されています。フル機能プラグインですが、より多くのチャートと編集機能を利用するには、有料版（年間199ドル）が必要になります。
無料版でもベーシックで見栄えの良いウィジェットが用意されているため、高度な要件がなければ無料版でも良さそうです。
2. Data Tables Generator by Supsystic
Data Tables Generatorは、その名の通りテキストのデータテーブルしか作成することはできませんが、有料版にはチャートやグラフを含むより高度な機能が付帯しています。
有料版は投資する価値があり、棒グラフや折れ線グラフ、ドーナツチャート、バブルチャートなど、あらゆる視覚的なウィジェットを利用でき、並び替えとフィルタリングの機能は他の選択肢よりも秀でています。
高いインタラクティブ性、特にデータテーブルやより視覚的なデータ表現が求められるサイトにおすすめです。
チャートやグラフは実装できませんが、生涯ライセンスは89ドルで購入できるため、機能性を考えるとお買い得です。
3. amCharts: Charts and Maps
amChartsの特徴は、外部のコンテンツデリバリネットワーク（CDN）を介してライブラリを配信する点にあります。したがって、このプラグインがチャートを直接生成するのではなく、JavaScriptライブラリをWordPressに接続してチャート作成する仲介役となります。
amChartsの機能は幅広く、高度にカスタマイズ可能ですが、amChartsのインターフェースでウィジェットを作成することになるため、プラットフォームの切り替えが必要になります。
多様な種類のチャートが必要で、サードパーティインターフェースでの作業にも抵抗がない場合は検討してみてください。チャートやグラフを作成するには、有料ライセンス（年間80ドル〜）を購入しなければなりません。
4. Graphina – Elementor Charts and Graphs
Elementorを利用している場合は、すでに視覚的なウィジェットを複数作成できますが、Graphinaを併用することでチャートやグラフの質を上げることができます。
無料プラグインの中で最も多くのチャートとデザインを提供しており、ElementorとDiviと完全に互換性があります。カスタマイズ機能も包括的です。
有料版のGraphinaはさらに強力で、おそらくWordPressサイトで使用できる最も高度なウィジェットプラグインと言えます。このプラグインを利用するにはElementor（またはDivi）が必要になりますが、有料版は49ドルと手頃に購入できるため、この機会にElementorかDiviを利用しても良いかもしれません。
5. wpDataTables
Data Tables Generator同様、これがメインの機能というわけではありませんが、wpDataTablesでも質の高いチャートやグラフを作成することができます。大規模で複雑なデータセットを扱うサイトを管理している場合は検討してみてください。
その名にもある通り、テーブル作成に重きが置かれていますが、Google ChartsとCharts.jsの両方と統合されており、15種類のウィジェットをサポートしています。大規模なデータセットを考慮したソースのインポート機能も充実しており、Excel、XML、CSVファイル、JSON、そして開発者はPHPの配列からもデータを取り込むことができます。
懸念点として、チャートがメインの機能ではないため、チャートの作成方法はやや複雑になります。習得に時間を要する可能性がある他、有料版（年間39ドル〜）はその価格に対して機能性に劣るかもしれません。
6. Ninja Charts
完全無料プラグインであるNinja Chartsは、データ視覚化の初心者におすすめしたい選択肢ですが、その機能性も他のプラグインに引けをとりません。
チャートの種類は豊富で、要件に応じてカスタマイズ可能。インターフェースもシンプルで、同じ開発元が提供するプラグインNinja Tablesと完全統合されています。
特筆すべき点として、データ集計のような基本的な機能がなく、利用者から一部不満の声が上がっていますが、無料で利用できる利点は大きく、さまざまなサイトに役立つはずです。
VisualizerでWordPressに視覚的ウィジェットを実装する方法
プラグインをご紹介したところで、Visualizerを使用してWordPressサイトに視覚的なウィジェットを追加する手順も簡単にご説明します。
Visualizerの使用方法ではなく、あくまでウィジェットの実装方法を見ていきます。以下でご紹介する手順とは異なる可能性がありますが、お好きなプラグインをインストールして有効化し、チャートやグラフを作成してみてください。
Visualizerの場合は、インストールすると以下のような画面が表示されます。
WordPress管理画面のサイドバーには「Visualizer」メニューが出現し、選択するとページ上部に「Add New（新規追加）」があります。
ボタンをクリックしてチャートの種類を選択したら、データを入力します。Visualizerの無料版では手動編集しかできませんが、有料版ではさまざまなツールの統合やインポート機能を利用することができます。
続いてはカスタマイズです。Visualizerにはチャート作成画面にカスタマイズオプションが搭載されており、タイトルの位置、軸ラベル、グリッド線、チャートのサイズや配置などの細かな設定が可能です。
カスタマイズを終えたら、チャートまたはグラフをサイトに埋め込みます。ほとんどのプラグインでは、ショートコードを使用して、設置したい投稿や固定ページにコピー＆ペーストするだけでOKです。
Visualizerの場合は、このためのブロックもサポートしているため非常に便利です。
視覚的ウィジェットの一般的なベストプラクティス
図表を表示する際には、いくつかの点を考慮する必要があります。たとえば、効果的な場所で使用し、決して多用しすぎないこと。他にも、以下のような点に注意してください。
- 配置：画像や動画と同様、コンテンツの流れを妨げないものでなければならない。視覚的なウィジェットは、メディアとコンテンツの間に置かれるのが一般的。
- 読み込み速度：サイトのパフォーマンスに影響を与えるものもあるため、追加後には必ずサイトのパフォーマンスを監視する。
- アクセシビリティ：視力を問わず、すべてのユーザーがウィジェットの恩恵を受けることができるよう、適切なaltテキストを追加し、キーボードでナビゲートできるようにアクセシビリティに配慮する。
サイト速度を低下させる可能性のある要素は多数あるため、パフォーマンスについては特に注意が必要です。ベストプラクティスとしては、可能な限りSVGを使用してください。単純なグラフやアイコンの場合はラスター画像よりもパフォーマンスが高く、スケーラビリティにも優れています。
また、遅延読み込みとキャッシュを利用することで、チャートの読み込みをさまざまな方法で制限することができます。外部ソースからデータを取得する場合は効率的な接続を選んでHTTPリクエストの数を最小限に抑えましょう（制御できるものではないが、自分のサイトのサーバーでデータをホストするのが理想的）。
まとめ
ウェブサイトで視覚的なウィジェットを活用することで、サイト上のテキストデータをより魅力的に提供することができます。チャート、グラフ、インタラクティブなマップのようなウィジェットを効果的に設置することで、複雑な情報をより理解しやすく、記憶に残りやすい形に変換可能です。
WordPressサイトでは、ウィジェットの実装にプラグインを使用します。本記事でご紹介したプラグインの中から、気になったものを試してみてください。VisualizerとGraphinaは特におすすめしたいプラグインですが、適した選択肢はサイトの要件によって異なります。視覚的なウィジェットを賢く実装して、サイトとそのエンゲージメントを改善しましょう。
コメントを残す