前回のブログでは
「ブログに入れるグラフは画像形式の方がいいのか、グラフ形式の方がいいのか」
というところを両者のメリットとデメリットを上げていき
SEO対策の観点でいうと「グラフ形式で入れた方が効果は高い」
という結論に至りました！
（前回のブログになります！まずこちらを見た方がいいかもしれません）
「実際にどうグラフを入れればいいの？」
「HTML形式とかわからないんですが？」
という読者の方のために今回は
「画像形式、グラフ形式両方のグラフの入れ方について」伝えていきます！
今回のブログでわかること
- 画像形式でグラフを挿入する方法
- グラフ形式でグラフを埋め込む方法
この2点について解説したいと思います！
画像形式でグラフを作りブログへ挿入する方法
まずは画像形式でグラフを作り、ブログに挿入していきたいと思います！
画像としてグラフを作る方法
方法についてはこの3点が挙げられます！
-
-
必要なデータを入力し、グラフを作成する。
-
スクリーンショットを撮る or 画像としてエクスポート。
-
-
CanvaやAdobe Illustratorなどのデザインツールを使用
-
Python（Matplotlib）を使ってグラフを作成
-
Pythonを使ってグラフを作成し、画像として保存する。
-
上記の3点が挙げられますが簡単にしたいので、
今回は１番目の「ExcelやGoogleスプレッドシートでグラフを作成」で作っていきたいと思います。
まずはグラフを作っていきましょう！
1.Googleスプレッドシートを使ったグラフの作り方
次のグラフ形式でグラフを埋め込む方法でも
Googleスプレッドシートを使っていくので画像形式でグラフを挿入する方法でも
まずはデータからグラフを作ってみましょう！
グラフにしたいデータを選択します
続いて「insert」と書かれたタブをクリックして「Chart」をクリックすると
画像のようなグラフが出力されます！
グラフのスタイルやデザインなどの変更はここでは割愛しますね！
（わからなければコメントで教えていただければ別途ブログで解説します！）
グラフは完成しましたので早速ブログへ挿入していきます！！
2.ブログへの挿入方法
今回は2種類の方法を見ていきましょう！
-
はてなブログの場合
html<img src="https://example.com/graph.png" alt="ChatGPTの収益推移"> -
WordPressの場合
-
メディアライブラリからアップロードし、記事内に挿入。
-
上記2点がありますが、せっかくはてなブログでブログを書いているので
はてなブログ上でグラフを挿入する方法をお伝えしていきます！
まずはその前にグラフを図として保存しましょう！
作成したグラフをクリックして
赤枠で囲ったマークが出てくるのでそれをクリックすると
このようなメニューが出てきますので
「downLoad Chart→PNG image」を選択することでPNG形式としてダウンロードができます！
ダウンロードできればあとはダウンロード先のフォルダから
はてなブログの編集画面へドラッグアンドドロップで挿入できます！
最後に任意の場所を選択して張り付けていきます！
めっちゃ簡単です！
慣れれば1分もかからずにできますのでやりましょう！
このように「実装までの時間がかからないし実装方法が簡単」
というのが、「画像形式でグラフを挿入する方法」の最大のメリットでした！
続いてグラフをHTML形式で埋め込む方法を紹介したいと思います！
HTML形式でグラフを作りブログへ挿入する方法
続いて
グラフをHTML形式で埋め込む方法について
グラフをHTML形式で埋め込む方法について紹介します！
1.Googleスプレッドシートでグラフを作成
こちらは先ほど作成したグラフを使いましょう！
2.グラフを埋め込むことができるように準備する
「ファイル」→「ウェブに公開」→「埋め込み」を選択します
赤枠の通りに選択すれば大丈夫！！
赤枠のHTMLをコピーしてブログ記事に貼り付けしてみると・・・
できた！！！
Googleスプレッドシートを使ったグラフの作成なのですが意外と簡単でした
HTMLは自分で設定する必要はないですし
コピペでできるので簡単でした！
以下の図は実際両方のやり方を試してみて難易度などをまとめた表になります！
結局どちらを選ぶべき？（結論）
| 画像形式（PNG, JPEG, SVG） | グラフ形式（HTML, JavaScript） | |
|---|---|---|
| SEO効果 | 低い | 高い |
| デザイン自由度 | 高い | 普通（CSSでカスタマイズ可能） |
| データ更新のしやすさ | 再生成が必要 | コードの変更だけでOK |
| ページの読み込み速度 | 影響なし | 大量データだと影響あり |
| スマホ対応 | 〇（サイズ調整が必要） | 〇（レスポンシブ対応可能） |
| 実装難易度 | 簡単 | やや難しい |
画像形式が適している場合
-
既存のグラフをスクショして使いたい
-
直感的なデザインが必要
-
SEOをあまり意識しないブログ
以上の3点が当てはまるブログでしたら使ってもいいのかなと感じました
グラフ形式が適している場合は
SEO対策をしていきたいのであればこちらをおすすめしたいです！
しかし、組み合わせるのもありなのかなと思いました。
デザインを凝りたいグラフであれば画像形式にしたり
（実績が何倍になりました！みたいな文言をグラフ中に入れたいなど）
というときにはユーザーの視覚に訴えかけたいというのであれば
画像形式のグラフも付け加えるのが得策ですよね
ブログの目的に合わせて、適切な方法を選んでみてください！
それでは今日もここらへんで終わりにしたいと思います!!
最後まで読んでいただきありがとうございました！
「もう少し詳しくししたい」や「ここはどうなってるの？」などの
ChatGPTの活用の仕方、ChatGPT×副業についてや
SNSの運営方針でお困りでしたら
ぜひコメントなどで教えてください！
「ここはこうした方がいいんじゃないか？」や「ここは違うと思う」
などのアドバイスもむしろ大歓迎ですので気兼ねなく
コメント待ってます！
明日のあなたがより豊かになりますように
これからも体験談や勉強になったところを紹介していきたいと思います！
それではおやすみなさい！！
