2015/10/10

Chart.jsの円グラフを使ってリッチコンテンツを作る

区切り線

chartjs

「コンテンツSEO」と言われるほどに、SEO対策にとって良質なコンテンツ作りが不可欠な時代になってきました。
ではどんなコンテンツを作ればいいのか、と言うと中々教えてくれる人もおらず、ただただ「更新やコンテンツが大事です」と言われるばかりです。
(参加したことはありませんが、初心者向けのSEOセミナーなんかは特にそんなイメージです)
そんなのわかってるからさっさと何を作ればいいのか教えてくれ、というのが僕たちSEOに携わる者の本音でしょう。

というわけで、今回コンテンツ作りの引き出しを増やす意味で、Chart.jsの円グラフを使ったリッチなコンテンツの作り方を紹介したいと思います。

Chart.jsとは?

chart.js
折れ線グラフ、棒グラフ、レーダーチャート、3種類の円グラフ(パイ、ドーナツタイプ、鶏頭図)をJavascriptでカンタンに実装できてしまうライブラリです。
これは画像ではなく、HTMLとCanvasを使って描画されているので、自由にデータの入力を扱え、色の指定やアニメーションなんかも自由に扱えます。

レスポンシブにも対応していて、最近流行りのフラットデザインにも合わせやすい、デザイン性に富んだグラフ作成のツールです。

今回は活用法ということで、詳しい使い方はここでは触れませんので、使い方に関しては以下のサイトを参考にしてください。

Chart.jsを使えば有用なコンテンツを作れる

Chart.jsを使ったコンテンツ例

こちら、Chart.jsの円グラフを使って作ってみたものです。
今回は整骨院を題材としてみました。

この様に、サイト内で扱う題材を数値化することで、ユーザーに対して有益で、且つ信頼性に富んだ情報提供ができます。
単なる画像とは違ってアニメーションで動きをつけているので、視覚的な楽しさも価値観として付与できます。
もちろん、このグラフに対する補足説明文のようなものを入れるのもありです。

Chart.jsのグラフの使いどころ

どれだけ素晴らしいツールも、使いどころが思いつかないといつまで経っても使えないので、SEO対策サイトに多いであろう、中小サービス業のサイトに使えそうなグラフの種類をピックアップしました。

  • サービス・商品の人気ランキング
  • 顧客へのアンケート結果
  • 市場調査結果
  • 統計局や地方自治体の統計データ

サービス・商品の人気ランキング

WEBサイトに載せるグラフ

サービスや商品のランキングは重要ですね。
これが一押し!というのがわかりますし。

顧客へのアンケート結果

アンケート結果 グラフ

アンケート結果というのは、もちろんアンケート内容によるんですが、サービス利用者の年齢層だったり性別だったり。サービスへの好みなんかもいいかもしれません。

市場調査結果

WEBサイトに載せるグラフ

市場調査は、自社で行うというのは中々難しいかもしれませんが、もっと手軽な方法としては関連ニュースを活用する、という手だってあります。
普段から業界に関するニュースに目を通していれば、使えそうなデータを目にする機会が必ずあるはずです。

統計局や地方自治体の統計データ

統計局ホームページ 2015-02-02 19-00-46
統計局や地方自治体のデータを参考にする方法もあります。

引き出しを増やそう

WEBサイトに必要になコンテンツを作るには、製作者側にどれだけ引き出しが多く用意されているかが重要となってきます。
言い換えればそれは、「アイディア」と「実装力」です。
アイディアがなければ発想することもできませんし、実装力がなければ、思いついたとしても実現することができません。
SEO対策に限らず、良いサイト、良いコンテンツを作る際には必ずそれらが求められます。

良い引き出しをたくさん増やしていきましょう。

  • このエントリーをはてなブックマークに追加

区切り線

コメントをどうぞ

メールアドレスが公開されることはありません。