WordPressでグラフを作る方法｜初心者向けにおすすめプラグインと埋め込み手順を解説

はじめに

WordPressの記事で数値の比較や推移をわかりやすく伝えたいときは、グラフの活用が効果的です。文章や表だけでは把握しにくいデータも、棒グラフや円グラフ、折れ線グラフにすると、読者が短時間で傾向を理解できます。

WordPressでグラフを表示する方法には、プラグインを使う方法、Googleスプレッドシートなどの外部ツールを埋め込む方法、グラフを画像として挿入する方法があります。それぞれ更新のしやすさや表示速度、デザインの自由度が異なるため、用途に合った方法を選ぶことが大切です。

この記事では、WordPressでグラフを作る代表的な方法、おすすめプラグイン、記事への埋め込み手順、見やすくするコツ、表示されない場合の対処法まで初心者向けに解説します。

1. WordPressでグラフを作る方法は主に3つ

WordPressでグラフを作成・表示する方法は、主に次の3つです。

1. グラフ作成プラグインを利用する

2. Googleスプレッドシートなどの外部ツールを埋め込む

3. 画像化したグラフを記事に挿入する

更新頻度が高いグラフにはプラグインや外部ツール、更新頻度が低く表示速度を重視する場合には画像が向いています。

1-1. プラグインでグラフを作成・埋め込みする方法

WordPressのグラフ作成プラグインを利用すると、管理画面からデータを入力し、棒グラフや円グラフ、折れ線グラフなどを作成できます。

完成したグラフは、専用ブロックやショートコードを使って投稿や固定ページに挿入するのが一般的です。HTMLやJavaScriptを自分で記述する必要がないため、プログラミングに慣れていない人でも取り組みやすい方法です。

プラグインによってはCSVのインポート、Googleスプレッドシートとの連携、レスポンシブ表示、アニメーションなどにも対応しています。たとえばVisualizerは、WordPress内でインタラクティブかつレスポンシブなグラフや表を管理・埋め込みできるプラグインとして公開されています。WordPress.org 日本語

1-2. Googleスプレッドシートや外部ツールのグラフを埋め込む方法

Googleスプレッドシートや外部のグラフ作成サービスでグラフを作り、発行された埋め込みコードをWordPressに貼り付ける方法です。

複数人でデータを管理する場合や、Webサイトの運営担当者とは別の人が数値を更新する場合に向いています。元データをGoogleスプレッドシートで管理できるため、WordPressの管理画面を操作せずに更新できる点がメリットです。

Googleスプレッドシートでは、作成したグラフのメニューから「グラフを公開」を選択し、Webサイトやブログ用の埋め込みコードを取得できます。Google ヘルプ

1-3. 画像化したグラフをWordPressに挿入する方法

Excel、Googleスプレッドシート、Canvaなどで作成したグラフをPNGやJPGなどの画像に変換し、WordPressの画像ブロックから挿入する方法です。

通常の画像と同じように扱えるため、表示が安定しやすく、テーマやプラグインとの競合も起こりにくいのが特徴です。JavaScriptを使うグラフより読み込み処理が単純で、デザインを崩さずに掲載できます。

一方で、数値を変更するたびに画像を作り直して差し替えなければなりません。また、画像内の文字がスマートフォンで小さく表示されたり、検索エンジンやスクリーンリーダーにデータの内容が伝わりにくかったりする点には注意が必要です。

1-4. 初心者にはプラグインでの作成がおすすめな理由

WordPress初心者には、グラフ作成プラグインを利用する方法がおすすめです。

データの入力からデザイン調整、記事への埋め込みまで、WordPressの管理画面内で完結しやすいからです。数値を修正したときも、元のグラフを編集すれば、同じショートコードを使用している記事に変更を反映できます。

ただし、必要以上に高機能なプラグインを選ぶと、設定項目が多くなり、操作が難しくなることがあります。最初は、作成したいグラフの種類とデータ入力方法に対応したシンプルなプラグインを選びましょう。

2. WordPressでグラフを作る前に決めておきたいこと

グラフ作成を始める前に、表示形式、データの管理方法、スマートフォン対応などを決めておくと、作業をスムーズに進められます。

2-1. 棒グラフ・円グラフ・折れ線グラフなど目的に合う種類を選ぶ

グラフは、伝えたい内容に合わせて種類を選ぶことが重要です。

棒グラフは、商品別の売上やサービス別の利用者数など、複数項目の大小を比較する場合に適しています。円グラフは、アンケート結果や市場構成比など、全体に対する割合を示す場合に向いています。

折れ線グラフは、月別アクセス数や売上の推移など、時間による変化を表現するのに効果的です。複数の指標を同時に比較したい場合は、棒グラフと折れ線グラフを組み合わせた複合グラフも候補になります。

グラフの種類を増やすことよりも、読者に何を理解してもらいたいかを明確にすることが大切です。

2-2. 手入力・CSV・Excel・Googleスプレッドシートなどデータの管理方法を決める

少量のデータであれば、WordPressの管理画面から直接入力する方法が簡単です。しかし、数十行以上のデータや定期的に更新するデータを扱う場合は、CSV、Excel、Googleスプレッドシートを利用したほうが効率的です。

プラグインを選ぶ際は、次の点を確認しましょう。

• 管理画面から直接入力できるか

• CSVをインポートできるか

• Excelファイルを利用できるか

• Googleスプレッドシートと連携できるか

• 元データの変更を自動反映できるか

M Chartは、表計算ソフトに近いインターフェースでデータセットを管理し、Chart.jsによるグラフをショートコードやブロックで埋め込めます。WordPress.org

2-3. スマホ表示に対応したレスポンシブなグラフにする

パソコンで見やすいグラフでも、スマートフォンでは横幅が足りず、文字や凡例が重なってしまうことがあります。そのため、画面幅に合わせてサイズが変わるレスポンシブ対応のグラフを選ぶことが重要です。

プラグインの説明に「Responsive」「Mobile-Friendly」などの記載があるか確認しましょう。ただし、レスポンシブ対応と記載されていても、データ項目が多すぎると見づらくなります。

スマートフォン向けには、項目数を減らす、凡例を下に配置する、横棒グラフを選ぶなどの工夫が必要です。

2-4. 記事の読みやすさを意識して色・凡例・単位を整理する

グラフの色を増やしすぎると、どの数値が重要なのかわかりにくくなります。基本色を1～3色程度に絞り、注目させたい項目だけ色を変えると効果的です。

軸や数値には「円」「人」「件」「％」などの単位を表示し、凡例には読者が理解しやすい名称を付けます。「A」「B」のような抽象的な名称ではなく、「2025年」「2026年」など、内容が具体的にわかる表記にしましょう。

3. WordPressでグラフを作れるおすすめプラグイン

WordPressには、グラフを作成できるさまざまなプラグインがあります。操作性、データ入力方法、グラフの種類、埋め込み方法を比較して選びましょう。

なお、対応機能や無料版の範囲は更新によって変わることがあります。導入前に、公式配布ページで最終更新日、対応するWordPressのバージョン、利用したい機能の提供状況を確認してください。

3-1. Visualizer：初心者でも使いやすい定番グラフ作成プラグイン

Visualizerは、WordPressの管理画面からグラフや表を作成し、投稿や固定ページに埋め込めるプラグインです。インタラクティブ表示やレスポンシブ表示に対応し、複数種類のグラフを作成できます。WordPress.org

グラフを一覧で管理できるため、複数の記事でデータを可視化したい場合にも便利です。手入力だけでなく、データのインポートを利用したい人にも向いています。

無料版と有料版では利用できるグラフ形式やデータ連携機能が異なる場合があるため、必要な機能がどちらに含まれるかを確認しましょう。

3-2. M Chart：Excel感覚でデータを入力しやすいプラグイン

M Chartは、表計算ソフトに近い画面でデータを入力・管理し、グラフとして表示できるプラグインです。公式説明では、データセットをスプレッドシート形式のインターフェースで管理し、Chart.jsを使って表示できると案内されています。WordPress.org

行と列を見ながら数値を入力できるため、ExcelやGoogleスプレッドシートの操作に慣れている人に向いています。完成したグラフはショートコードまたはブロックで記事に挿入できます。

装飾性よりも、数値を整理しながら正確に入力したい場合に検討しやすいプラグインです。

3-3. iChart：ショートコードで簡単にグラフを埋め込めるプラグイン

iChartは、WordPressの投稿や固定ページの編集画面からグラフを作成し、ショートコードで表示できるプラグインです。Chart.jsを利用したレスポンシブなグラフ作成機能が案内されています。WordPress.org

設定画面でデータや表示形式を指定し、生成されたショートコードを記事に貼り付けることでグラフを表示できます。複雑なデータベース連携を必要とせず、簡単なグラフを素早く掲載したい場合に適しています。

3-4. Chartify：見た目を調整しやすいグラフ作成プラグイン

Chartifyは、WordPress上でグラフを作成し、デザインや表示内容を調整できるプラグインです。初心者向けの操作画面、モバイル対応、ライブプレビューなどが特徴として案内されています。WordPress.org

公開前にグラフの見た目を確認しながら設定できるため、色やラベル、凡例の配置を細かく整えたい人に向いています。Googleスプレッドシートを利用したデータ管理を検討している場合も、対応範囲を確認する価値があります。WordPress.org 日本語

3-5. Ninja Charts：複数種類のチャートを作成できるプラグイン

Ninja Chartsは、インタラクティブでカスタマイズ可能な複数種類のグラフを作成できるプラグインです。公式配布ページでは、さまざまなチャートやグラフを作成できるデータ可視化ツールとして紹介されています。WordPress.org

複数のグラフ形式を比較しながら、記事の内容に合う表示方法を選びたい場合に候補となります。利用前には、作成したいグラフ形式、現在の対応バージョン、サポート状況を確認しましょう。

3-6. WordPressグラフプラグインの比較ポイント

プラグインを選ぶときは、知名度だけで判断せず、次のポイントを比較します。

初心者は、利用したいグラフ形式に対応しており、入力画面と埋め込み方法がわかりやすいプラグインを選ぶと失敗しにくくなります。

4. WordPressでグラフを作成して記事に埋め込む手順

ここでは、一般的なグラフ作成プラグインを使う場合の流れを解説します。管理画面の名称や設定項目は、利用するプラグインによって異なります。

4-1. グラフ作成プラグインをインストールする

WordPressの管理画面にログインし、「プラグイン」から「新規プラグインを追加」を開きます。

検索欄に「Visualizer」「M Chart」「Chartify」など、利用したいプラグイン名を入力してください。目的のプラグインが表示されたら、開発者名や説明を確認したうえで「今すぐインストール」をクリックします。

似た名称のプラグインが表示されることもあるため、アイコンだけで判断しないようにしましょう。

4-2. プラグインを有効化して初期設定を行う

インストールが完了したら「有効化」をクリックします。有効化後、管理画面の左側メニューや「設定」に、グラフ作成用のメニューが追加されます。

初期設定では、デフォルトの色、グラフサイズ、アニメーション、データの読み込み方法などを指定できる場合があります。最初から細かく変更せず、いったん初期設定のままサンプルグラフを作ると操作方法を理解しやすくなります。

4-3. グラフに使うデータを入力・インポートする

新規グラフの作成画面を開き、グラフに表示するデータを登録します。

たとえば月別売上の折れ線グラフを作る場合は、1列目に「1月」「2月」「3月」、2列目に各月の売上を入力します。複数年を比較する場合は、2025年と2026年の列を分けて登録します。

CSVを利用する場合は、文字コードや区切り文字、見出し行の有無を確認してください。数値の中に「円」や「％」が含まれていると、文字列として扱われることがあります。単位はデータ本体ではなく、軸ラベルや表示設定で追加するとトラブルを減らせます。

4-4. 棒グラフ・円グラフ・折れ線グラフなど表示形式を選ぶ

入力したデータに合うグラフ形式を選択します。

項目ごとの数値を比較するなら棒グラフ、全体の構成比を示すなら円グラフ、時系列の変化を示すなら折れ線グラフが基本です。

プレビュー機能がある場合は、複数の形式を切り替えて見やすさを比較しましょう。データに合わない形式を選ぶと、数値自体は正しくても読者に誤解を与える可能性があります。

4-5. タイトル・ラベル・色・凡例を設定する

グラフのタイトルは、「売上推移」のような抽象的な表現ではなく、「2026年1月～6月の月別売上」のように対象期間や指標がわかる名称にします。

縦軸と横軸には、数値の意味と単位を設定してください。複数のデータ系列を表示する場合は、色だけでなく凡例も付けます。

色はサイト全体のデザインと合わせつつ、背景とのコントラストを確保します。重要な系列だけ濃い色にし、それ以外を控えめな色にすると、注目してほしいデータが伝わりやすくなります。

4-6. ショートコードやブロックを使って記事に埋め込む

グラフを保存すると、専用ブロックやショートコードが利用できるようになります。

ショートコードを使う場合は、投稿編集画面で「ショートコード」ブロックを追加し、プラグインが発行したコードを貼り付けます。WordPressのショートコードブロックは、ブロック追加ボタンまたは「/shortcode」の入力から追加できます。WordPress.org

専用ブロックに対応している場合は、ブロック一覧からプラグイン名や「Chart」を検索し、作成済みのグラフを選択します。

4-7. 公開前にPC・スマホ表示を確認する

編集画面で正しく表示されていても、実際のページではテーマのCSSや表示領域の影響を受けることがあります。

公開前にプレビューを開き、パソコン、タブレット、スマートフォンの表示を確認しましょう。特に次の点をチェックしてください。

• グラフが記事の横幅からはみ出していないか

• 軸ラベルや凡例が重なっていないか

• 文字が小さすぎないか

• タップやスクロールを妨げていないか

• グラフの前後に適切な余白があるか

実機でも確認すると、管理画面のプレビューだけでは気づきにくい問題を発見できます。

5. GoogleスプレッドシートのグラフをWordPressに埋め込む方法

Googleスプレッドシートを使えば、WordPressに新しいプラグインを追加せずにグラフを表示できます。

5-1. Googleスプレッドシートでグラフを作成する

Googleスプレッドシートを開き、グラフに利用するデータを入力します。見出しを含むセル範囲を選択し、上部メニューの「挿入」から「グラフ」を選びます。

Googleの公式ヘルプでも、対象セルを選択して「挿入」から「グラフ」を選ぶ手順が案内されています。作成後は、グラフエディタで種類、データ範囲、タイトル、凡例、色などを変更できます。Google ヘルプ

5-2. グラフの公開設定と埋め込みコードを取得する

作成したグラフをクリックし、右上のメニューから「グラフを公開」を選択します。

表示された画面で「埋め込む」を選び、「公開」をクリックしてください。確認画面が表示されたら内容を確認し、生成されたHTMLコードをコピーします。Googleの公式ヘルプでも、公開オプションで「埋め込む」を選び、HTMLコードをWebサイトやブログへ貼り付ける手順が示されています。Google ヘルプ

公開したグラフはインターネット上から閲覧できる状態になるため、個人情報、顧客情報、社外秘の数値を含めないようにしてください。

5-3. WordPressのカスタムHTMLブロックに貼り付ける

WordPressの投稿編集画面を開き、グラフを表示したい位置に「カスタムHTML」ブロックを追加します。

コピーした埋め込みコードを貼り付け、プレビューで表示を確認します。WordPressのカスタムHTMLブロックは、ブロック追加メニューから選択するか、「/html」と入力して追加できます。WordPress.org

埋め込みコードの横幅が固定されていると、スマートフォンで画面からはみ出すことがあります。その場合は、テーマの追加CSSやHTMLのラッパー要素を使い、最大幅を画面内に収める調整が必要です。

5-4. Googleスプレッドシート埋め込みのメリット・デメリット

Googleスプレッドシートを利用する主なメリットは、データの管理や共同編集がしやすいことです。公開設定によっては、元データの変更を公開内容へ反映できます。自動再公開を停止する設定もGoogleの公開機能に用意されています。Google ヘルプ

一方、次のようなデメリットがあります。

• Google側の読み込みが必要になる

• 外部サービスの仕様変更に影響される

• 埋め込みコードの幅を調整する必要がある

• 公開範囲の設定を誤ると情報が外部に見える

• サイトのデザインと完全に合わせにくい

更新性を重視する場合はGoogleスプレッドシート、デザインやサイト内管理を重視する場合はWordPressプラグインが向いています。

6. WordPressで見やすいグラフを作るコツ

グラフは、掲載するだけで情報が伝わるわけではありません。読者が迷わず読み取れるように、形式や色、説明文を整える必要があります。

6-1. 記事の主張に合うグラフ形式を選ぶ

記事で伝えたい結論を先に決め、その結論を理解しやすいグラフ形式を選びます。

「A商品が最も売れている」と伝えたいなら棒グラフ、「売上が前年より増加している」と伝えたいなら折れ線グラフが適しています。「A商品が全体の半分を占める」と伝えたい場合は、円グラフやドーナツグラフが候補です。

グラフを見た読者に、比較、割合、変化のどれを読み取ってほしいのかを明確にしましょう。

6-2. データの出典や集計条件を明記する

グラフの近くには、データの出典、対象期間、回答者数、集計条件などを記載します。

自社調査の場合は、「自社アンケート」「調査期間」「回答者数」「調査方法」を明記すると、データの信頼性を判断しやすくなります。公的機関や第三者のデータを使う場合は、資料名、公開元、公開年などを示してください。

一部のデータだけを抜き出している場合は、抽出条件も記載します。

6-3. 色を使いすぎず重要な数値を目立たせる

すべての項目に異なる色を使うと、視線が分散してしまいます。基本となる色を統一し、特に伝えたい項目だけアクセントカラーを使用しましょう。

色だけで項目を区別すると、色の違いを認識しにくい読者に情報が伝わらない可能性があります。凡例、模様、線の種類、数値ラベルなども併用してください。

W3Cのアクセシビリティ資料では、グラフの線や背景とのコントラストも重要な要素として扱われています。W3C

6-4. スマホでも読める文字サイズ・余白に調整する

スマートフォンでは、グラフの横幅が大きく縮小されます。軸ラベルや凡例が多い場合、文字が読めなくなることがあります。

項目名を短くする、表示するデータ数を絞る、凡例を下部に移動するなどの調整を行いましょう。横棒グラフは項目名を縦方向に並べられるため、長い名称が多い場合に適しています。

グラフの前後には余白を設け、本文や広告と密着しないようにすると読みやすくなります。

6-5. グラフだけでなく本文でも要点を補足する

グラフを掲載した直後に、読み取れる内容を文章で説明します。

たとえば、「2026年3月の売上は1月と比べて約30％増加しています」のように、注目すべき変化を具体的に示します。読者にグラフの分析をすべて任せるのではなく、記事の結論につながる部分を本文で補足してください。

本文による説明は、画面を視覚的に確認しにくい読者への情報提供にもなります。W3Cではグラフやチャートを複雑な画像として扱い、内容を伝える説明や同等のデータを提供することが推奨されています。W3C+1

7. WordPressでグラフが表示されないときの対処法

グラフが表示されない場合は、埋め込み方法、プラグインの競合、キャッシュ、JavaScriptの順に確認すると原因を特定しやすくなります。

7-1. ショートコードや埋め込みコードが正しく貼れているか確認する

ショートコードの一部が欠けていないか、余計な空白や記号が入っていないかを確認します。

ショートコードは段落ブロックではなく、ショートコードブロックに貼り付けます。GoogleスプレッドシートなどのHTMLコードは、コードブロックではなくカスタムHTMLブロックに貼り付けてください。

ビジュアル編集とHTML編集を切り替えた際に、コードの一部が自動変換されていないかも確認しましょう。

7-2. プラグインやテーマとの相性を確認する

一時的にほかのプラグインを停止し、グラフが表示されるか確認します。特定のプラグインを停止したときに表示される場合は、JavaScriptやCSSが競合している可能性があります。

本番サイトで直接停止するのが不安な場合は、バックアップを作成したうえで、ステージング環境を利用してください。

テーマの影響を調べる場合も、検証用環境でWordPressの標準テーマへ一時的に変更し、表示結果を比較します。

7-3. キャッシュ系プラグインの影響を確認する

ページキャッシュやJavaScriptの最適化機能によって、グラフのスクリプトが正しい順序で読み込まれないことがあります。

キャッシュを削除してページを再読み込みし、改善するか確認してください。改善しない場合は、JavaScriptの遅延読み込み、結合、圧縮などの設定を一時的に無効にします。

特定のスクリプトを最適化の対象外に設定できる場合は、グラフプラグインが使用するファイルを除外することで解決することがあります。

7-4. JavaScriptエラーや読み込み設定を確認する

多くの動的なグラフはJavaScriptを利用しています。ブラウザの開発者ツールを開き、「Console」にエラーが表示されていないか確認してください。

「not defined」「failed to load」「blocked」などのエラーがある場合は、必要なファイルが読み込まれていない、読み込み順が変わっている、セキュリティ設定で遮断されている可能性があります。

原因を判断できない場合は、エラーメッセージ、使用中のテーマ、プラグイン一覧、問題が発生するページを記録し、プラグインの公式サポートへ相談します。

7-5. スマホだけ崩れる場合の確認ポイント

スマートフォンだけで崩れる場合は、グラフや埋め込みコードに固定幅が設定されていないか確認します。

width="600"のような固定値が指定されている場合は、画面幅よりグラフが大きくなることがあります。プラグインのレスポンシブ設定を有効にし、必要に応じて最大幅を100％に調整します。

凡例や項目名が重なっている場合は、文字サイズを小さくするだけでなく、項目数を減らす、グラフ形式を変更する、スマートフォン向けに別のグラフを用意するといった対応も検討しましょう。

8. WordPressでグラフを作るときの注意点

WordPressでグラフを運用するときは、表示速度、セキュリティ、データの権利、アクセシビリティにも注意が必要です。

8-1. プラグインを入れすぎると表示速度に影響する

グラフプラグインの中には、複数のJavaScriptやCSSファイルを読み込むものがあります。利用していない機能のファイルまで全ページで読み込まれると、サイトの表示速度に影響する可能性があります。

似た機能のグラフプラグインを複数導入せず、基本的には1つに絞りましょう。不要になったプラグインは、無効化するだけでなく、再利用しない場合は削除します。

8-2. 更新が止まっているプラグインは避ける

長期間更新されていないプラグインは、現在のWordPressやPHPで正常に動作しない可能性があります。

インストール前に、最終更新日、対応バージョン、評価、サポートフォーラムの状況を確認してください。WordPress公式ディレクトリでは、各プラグインの説明やテスト済みバージョンなどを確認できます。WordPress.org

更新前にはバックアップを作成し、更新後にグラフの表示や管理画面の操作を確認しましょう。

8-3. データの正確性と著作権に注意する

グラフの見た目が整っていても、元データが間違っていれば記事の信頼性を損ないます。入力ミス、集計範囲、単位、期間を公開前に確認してください。

第三者が作成したグラフ画像を無断で転載することは避けます。公開されている統計データから自分でグラフを作る場合も、提供元の利用規約やライセンスを確認し、必要な出典を記載しましょう。

8-4. アクセシビリティを意識して代替テキストや説明文を入れる

画像としてグラフを掲載する場合は、代替テキストを設定します。WordPressの画像設定には、アクセシビリティのための代替テキスト入力欄が用意されています。WordPress.org+1

ただし、複雑なグラフの内容を短い代替テキストだけで説明するのは困難です。「2026年の月別売上を示す折れ線グラフ」と簡潔に説明したうえで、グラフの近くに主要な数値や結論を文章で記載しましょう。

重要なデータの場合は、同じ内容を確認できる表を併記する方法も有効です。W3Cの資料でも、グラフと同等の情報をデータ表で提供する考え方が示されています。W3C+1

9. WordPressのグラフ作成に関するよくある質問

9-1. WordPressでグラフを作るのにプラグインは必要？

プラグインは必須ではありません。

Googleスプレッドシートのグラフを埋め込む方法や、Excelなどで作成したグラフを画像として挿入する方法もあります。ただし、WordPress内でグラフを作成・更新したい場合は、プラグインを使う方法が便利です。

更新頻度、デザイン、管理担当者、表示速度を考慮して選びましょう。

9-2. 無料で使えるWordPressグラフプラグインはある？

WordPress公式プラグインディレクトリでは、Visualizer、M Chart、iChart、Chartify、Ninja Chartsなどを確認できます。WordPress.org+4WordPress.org 日本語+4WordPress.org+4

無料版でも基本的なグラフを作成できるものがありますが、データの自動同期、特定のグラフ形式、高度なデザイン設定などは有料版限定の場合があります。

導入前に、無料版で利用できる機能と有料機能を確認してください。

9-3. ExcelのデータをWordPressのグラフに使える？

利用できます。

ExcelのデータをCSV形式で保存し、CSVインポートに対応したプラグインへ読み込む方法が一般的です。プラグインによってはExcelファイルを直接扱える場合もあります。

インポート前に、セル結合や複雑な数式を整理し、1行目に見出し、2行目以降にデータを配置すると読み込みやすくなります。数値に単位や注釈を直接含めず、可能な限り単純な表形式に整えましょう。

9-4. GoogleスプレッドシートのグラフはWordPressに埋め込める？

埋め込めます。

Googleスプレッドシートでグラフを作成し、「グラフを公開」から埋め込みコードを取得します。そのコードをWordPressのカスタムHTMLブロックに貼り付ければ表示できます。Google ヘルプ+1

ただし、グラフを公開すると外部から閲覧できる状態になるため、機密情報を含むデータには使用しないでください。

9-5. WordPressのグラフをスマホ対応にするには？

レスポンシブ対応のプラグインを選び、公開前にスマートフォン表示を確認します。

グラフが横にはみ出す場合は、固定幅の設定を見直してください。項目名や凡例が重なる場合は、データ数を減らす、文字を短くする、凡例の位置を変更する、横棒グラフへ切り替えるなどの方法があります。

埋め込み型のグラフでは、グラフ本体だけでなく、グラフを囲む要素の横幅設定も確認しましょう。

まとめ

WordPressでグラフを作る方法は、プラグインを利用する方法、Googleスプレッドシートなどの外部ツールを埋め込む方法、画像として挿入する方法の3つに分けられます。

初心者がWordPress内でグラフを作成・更新したい場合は、専用プラグインの利用が便利です。VisualizerやM Chart、iChart、Chartify、Ninja Chartsなどを比較し、必要なグラフ形式、データ入力方法、スマートフォン対応、埋め込み方法に合うものを選びましょう。

グラフを掲載するときは、見た目だけでなく、データの出典、単位、集計条件、本文による補足説明も重要です。公開前にパソコンとスマートフォンの両方で表示を確認し、読者が短時間で内容を理解できるグラフに仕上げてください。