HTMLでグラフを表示して説得力を持たせる

公開日:2014/05/26

この記事は、書かれてから 9 年以上経過しており、内容が古い可能性があります。

ドキュメントの説得力を持たせるためには、データ・数字の羅列より、
これを視覚的に訴えるグラフや表を効果的に使うことが有用です。
当初はたいした表現力を持たなかったHTMLも、
現在では以下のようなグラフを表示することもできるようになっています。

Googleで「天気」を検索したときに表示される図表

Yahooファイナンスのドル円チャート

これらの図表の特徴

実際にこれらのページを表示させてみるとおわかりになると思いますが、
どちらもグラフ上でマウスクリックさせたりマウスを動かすと、
そのグラフのその位置の情報が表示されたりします。

Google天気ですと、クリックするとその時間帯が太字になりますし
Yahooファイナンスですと、マウスを動かすとその時間帯の情報がポップアップで表示されます。

技術的な話

こういった「動きのあるグラフ」をHTMLで表示させるためには、
以前はFlash Playerなどのような別のソフトウェアをブラウザにインストールさせる必要がありました。

「Flashなら入れている」という方も多いかもしれませんが
入れていない人にとっては、Flashが使われているページを見ることはできず
そのためウェブサイトの離脱率をあげる大きな要因になっていました。

最近のブラウザでは、冒頭のようなグラフを表現するための機能が
外部のソフトウェアをインストールすることなく使うことができるようになっています。

こういった表現をするのに使われる技術としてSVGとCanvasという2つがあります。
たとえばGoogle天気のグラフはSVGで、
YahooファイナンスのチャートはCanvasで作られているようです。

どちらも優れた描画技術ですが、それぞれ長所短所があります。
SVGは図を拡大しても図が劣化しにくい(ギザギサになりにくい)ですし
Canvasは一度にたくさんの図を表示しても、(SVGに比べ)時間がかかりにくいです。
ただしグラフを表示するという目的についていえば、
どちらを使ってもよいのではないかと思います。

目的はサイトの説得力

どういった技術を使うかはあまり問題ではなく、
こういった状況になっていることを踏まえ、
どのようにサイトの説得力を増すか、が重要なのだと思います。

たとえば社内システムですと、部門別・営業担当者別の受注状況・達成率グラフを
リアルタイムに表示することで、モチベーションに影響を与えるかもしれません。
工事などの進捗状況をグラフ化して公開したり、
研究などの途中成果も自動的にグラフ化するすることもできると思います。

リアルタイムに、動的な情報を自動的にグラフ化して情報共有することが
HTMLとその描画機能を使って、ウェブサイトで実現できますので
アイディア次第といえるのではないでしょうか。


ちなみに、弊社のシステム開発で、グラフの必要があった場合は
今のところ以下のライブラリを用いてグラフを作成しています。
(これはSVGのグラフです)

このページの著者

イルカシステム(株)は、以下のような業務用ウェブシステムのご提案、受託開発、運用を行っております。

  1. 中小企業さま向けの社内向け営業支援、顧客管理、経営数値管理システム

    経営数値をリアルタイムで見える化し、目標達成度を常に把握することができ、顧客へのフォローもスムースになります

  2. 中小企業さま向けの受発注管理、請求入金管理、在庫管理

    御社特有の受発注業務、出荷処理をシステム化することで業容拡大への大きなお手伝いとなります

  3. 医療業界向けの業務改善システム

    ※医療業界向けに、臨床研究の無作為割付自動化のための自社サービス「 ムジンワリ 」をご提供しております。

  4. IoTシステムの開発

詳しくは ご提供サービス を参照してください。

お読みいただきありがとうございました

どのクラウドサービスを使うべきか...

Word、Excelドキュメントを自動生成する方法

こちらもおすすめ

システム化の相談はしてみたけれど...

中小企業のシステム導入に心強い補助金

訪問効果のある近所のお客様を探す顧客管理システムとは

お客様とのつながりを点数化し分析する

お客様との接点を記録することのメリット

顧客管理システムの目的は名簿作成ではない

顧客との接点を増やし売上をあげるシステム

お客様とのやりとりの記録のススメ

遠くのシステム会社が安い金額の提案をしてきたら?

システム会社に社内システムの保守を依頼するには