『Chartblocks』の 使い方を徹底解説!スタイリッシュな各種グラフが簡単に作れるWEBサービス

当ページのリンクには広告が含まれています。

商品やサービスを比較したり、アンケートや年代別のデーターを伝える際に、文章や箇条書きよりも視覚的にもわかりやすいグラフの活用が有効です。

ExcelやWordでもグラフは作れますが、サイトに設置するとなると手間がかかるし、デザイン的にも限界があり見た目もいまいちパッとしません。

今回は、いろいろなオンラインで使えるグラフ作成ツールがある中で、デザイン的にも優れていて、操作性もよくWEBサイトにも簡単に設置できる『Chartblocks』の登録方法から使い方までを解説していきます。

パーソナルプランは無料で十分使えるので安心してください。

Chartblocksの登録方法

Chartblocks TOPページ

まずChartblocks TOPページにアクセスしましょう。

Chartblocks TOPページ

使用している画像は、Google拡張機能「Google翻訳」で翻訳されたページをキャプチャーしています。

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

Chartblocksの使い方

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

Chartblocksのグラフ設置方法

  1. Chartblocks メニュー
    サイトに設置する前に、「- 100% +」でサイズ調整をしておきましょう。それでは「シェア」から説明します。シェアをクリックしましょう。
  2. Chartblocks シェア
    シェア画面が開きます。埋め込みコードをコピーし、テキストモードにペーストすることでグラフを設置することが出来ます。
  3. Chartblocks SNSシェア
    各SNSクリックで、グラフを投稿することが出来ます。
  4. Chartblocks ダウンロード
    ダウンロードは「PNG」「PDF」「SVS」「EPS」「PS」形式でダウンロードできます。サイトにグラフ画像をアップロードして設置する場合は「PNG」形式でダウンロードしましょう。
  5. Chartblocks 設定
    設定ではクローン(コピー)・削除をすることができます。同様のグラフを作る場合、クローンは使えますね。

シェア:埋め込みコードを設置したグラフ


グラフの棒部分(赤・黄・緑)にマウスオーバーすると詳細データがポップアップ表示されます。PCでご覧の方は確認してみてください。

Chartblocks スマホ表示

スマホで棒部分をタップすると同様に、詳細データーが表示されます。

ちなみにTwitterのツイートを埋め込んでみました。ちなみにグラフをクリックするとこのページが開きます。

なるほどGoogleアドセンス満載のページが開く流れですね..(ΦωΦ)フフフ…

ダウンロード:PNGを設置したグラフ

Chartblocks ダウンロードPNG

PNG形式でダウンロードしたグラフ画像を通常通りメディア追加で設置した例です。

あなたはお気付きですか?埋め込みコード設置のグラフには、右下に「Chartblocks」のクレジットリンクが設置されますが、ダウンロードした画像にはバナーもありません。

Chartblocksのメリット・デメリット

Chartblocks メリット デメリット

Chartblocksのメリット

  • 無料でChartblocksを利用できる。(パーソナルプラン)
  • データーのインポートが可能。
  • いろいろな形式でグラフデーターをダウンロード可能。
  • マウスオーバー(スマホではタップ)でグラフ上の詳細データを表示できる。
  • 各種SNSにグラフデーターを共有できる。

Chartblocksのデメリット

  • 埋め込みコードを使ってサイトにグラフを設置するとクレジットリンクが右下に表示される。
  • SNSでグラフをシェアすると、リンク先で広告ページが表示される。
  • 無料プランではアクティブチャート利用は50個まで。

Chartblocksのメリット・デメリットを説明しましたが、グラフデザインのクウォリティはかなり高いので、あなたに合った利用方法を見つけて有効活用していただければと思います。

俺は、無料パーソナルプラン+PNG形式ダウンロードで利用します。この方法だとアクティブチャート50個の制限はなくなるしね。

おまけ:女性向けサイトに最適な円グラフ作成サービス

HeartRails Graph 円グラフ おすすめ

「HeartRails Graph」は円グラフを作成できるサービスなのですが、わずらわしいアカウント登録の必要もなく、項目と数字を入力するだけで女性らしいやわらかいイメージの円グラフを作成することが出来ます。

HeartRails Graph TOPページ

HeartRails Graph もっと細かく

ここでは詳しく解説しませんが、「もっと細かく」にチェックを入れることで、フォントや色も変更することが出来ます。

HTMLコード取得も可能だし、グラフ上で右クリック>保存でPNG形式でダウンロードもできます。女性向けのサイトを運営している人は、ぜひチェックしてみてください。

恋愛系の悩みサイトなどではかな~り使えそうなデザインですね。

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

アフィリエイト用無料素材集サイト『アフィピク』の無料登録方法|3大特典は是非GETしておいて損なし!
アフィリエイトで使える無料素材提供サイト『アフィピク』がオープンしました。無料なのはもちろん、商用利用OK、わずらわしいクレジット表記も必要ありません。 「アフィピク」無料登
2019-07-08 14:30
ブログ記事で使う画像不足でお悩みの方必見!Flickrを使おう!
文字だけのブログ記事って、読んでいて飽きてしまいますよね。記事の途中に画像を挿入するだけで読者の興味をひき、読み続けてもらう可能性が高まります。
2015-06-09 16:35
今すぐBookmark!写真画像加工編集サイト『バナー工房』
アフィリエイトをする上で画像加工のスキルは持っていたほうがよいですよね。ここでは完全無料で、しかもパソコンにインストールすることもなく、簡単に画像を加工編集できるサイトを紹介します
2013-08-02 13:12

この記事が気に入ったら
いいね ! しよう

この記事を書いた人

コメントを残す

最新の記事