
商品やサービスを比較したり、アンケートや年代別のデーターを伝える際に、文章や箇条書きよりも視覚的にもわかりやすいグラフの活用が有効です。
ExcelやWordでもグラフは作れますが、サイトに設置するとなると手間がかかるし、デザイン的にも限界があり見た目もいまいちパッとしません。
今回は、いろいろなオンラインで使えるグラフ作成ツールがある中で、デザイン的にも優れていて、操作性もよくWEBサイトにも簡単に設置できる『Chartblocks』の登録方法から使い方までを解説していきます。

この記事の目次
Chartblocksの登録方法
まずChartblocks TOPページにアクセスしましょう。
「始めてみる」ボタンをクリックします。
メールアドレス+パスワードの記入で登録できます。またFacebook、Google、Twitterのいづれかのアカウントでサインアップすることで登録も可能です。
料金プラン一覧が表示されます。有料のプロ・エリートになるとチャートを保存できる個数が増えますが、無料のパーソナルプランでも十分使えます。
これで登録は完了です。「チャートを作成する」ボタンをクリックして次に進みましょう。







Chartblocksの使い方
グラフ作成管理画面が開きます。「データセット」の「データ」をクリックします。
Excelの枠のような画面が開きます。ここにデータを直接入力することが出来ます。
データの入力に不慣れな方は、右サイドバー内にある「サンプルデーターセット」のいずれかをクリックしましょう。
サンプルのデータが表示されました。1列目にソーシャルの種類、1行目に年代が記載されています。このデータを修正して使っても構いませんし、新たにデータを入力してもOKです。
右上の「データーセット」にグラフのタイトルを記載し、「次へ」をクリックします。
チャートタイプ選択画面に切り替わります。好きな種類を選択してください。ここでは棒グラフを選択してみます。また種類はあとでも変更可能です。
ここでデーター画面が開きます。右上「次へ」をクリックします。
グラフテンプレート一覧が開きます。好きなデザインを選択しましょう。
選んだデザインが反映されました。「カスタマイズ」で変更も可能です。確認してOKであれば「終わり」をクリックしましょう。
これでグラフは保存されました。
一度保存してからでも、左メニューでグラフのデザインを変更したり、グラフタイトルを変えたりすることもできます。







Chartblocksのグラフ設置方法
サイトに設置する前に、「- 100% +」でサイズ調整をしておきましょう。それでは「シェア」から説明します。シェアをクリックしましょう。
シェア画面が開きます。埋め込みコードをコピーし、テキストモードにペーストすることでグラフを設置することが出来ます。
各SNSクリックで、グラフを投稿することが出来ます。
ダウンロードは「PNG」「PDF」「SVS」「EPS」「PS」形式でダウンロードできます。サイトにグラフ画像をアップロードして設置する場合は「PNG」形式でダウンロードしましょう。
設定ではクローン(コピー)・削除をすることができます。同様のグラフを作る場合、クローンは使えますね。
シェア:埋め込みコードを設置したグラフ
グラフの棒部分(赤・黄・緑)にマウスオーバーすると詳細データがポップアップ表示されます。PCでご覧の方は確認してみてください。
スマホで棒部分をタップすると同様に、詳細データーが表示されます。
https://t.co/cXfNwFcUnc @chartblocksさんから
— 未来派野郎hiro (@miraihayarou) August 30, 2019
ちなみにTwitterのツイートを埋め込んでみました。ちなみにグラフをクリックするとこのページが開きます。







ダウンロード:PNGを設置したグラフ
PNG形式でダウンロードしたグラフ画像を通常通りメディア追加で設置した例です。
あなたはお気付きですか?埋め込みコード設置のグラフには、右下に「Chartblocks」のクレジットリンクが設置されますが、ダウンロードした画像にはバナーもありません。
Chartblocksのメリット・デメリット
Chartblocksのメリット
- 無料でChartblocksを利用できる。(パーソナルプラン)
- データーのインポートが可能。
- いろいろな形式でグラフデーターをダウンロード可能。
- マウスオーバー(スマホではタップ)でグラフ上の詳細データを表示できる。
- 各種SNSにグラフデーターを共有できる。
Chartblocksのデメリット
- 埋め込みコードを使ってサイトにグラフを設置するとクレジットリンクが右下に表示される。
- SNSでグラフをシェアすると、リンク先で広告ページが表示される。
- 無料プランではアクティブチャート利用は50個まで。
Chartblocksのメリット・デメリットを説明しましたが、グラフデザインのクウォリティはかなり高いので、あなたに合った利用方法を見つけて有効活用していただければと思います。







おまけ:女性向けサイトに最適な円グラフ作成サービス
「HeartRails Graph」は円グラフを作成できるサービスなのですが、わずらわしいアカウント登録の必要もなく、項目と数字を入力するだけで女性らしいやわらかいイメージの円グラフを作成することが出来ます。
ここでは詳しく解説しませんが、「もっと細かく」にチェックを入れることで、フォントや色も変更することが出来ます。
HTMLコード取得も可能だし、グラフ上で右クリック>保存でPNG形式でダウンロードもできます。女性向けのサイトを運営している人は、ぜひチェックしてみてください。







よく読まれている関連記事





