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

2014年5月26日

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

これらの図表の特徴


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

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

技術的な話


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

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

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

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

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

目的はサイトの説得力


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

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

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

* * *

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

Elycharts

 

お問い合わせ

本記事(HTMLでグラフを表示して説得力を持たせる)にかかわること、 中小企業様さま向けの社内向け業務ウェブシステムにかかわることなど ご相談、ご質問などがありましたら何なりとお問い合わせください。





captcha

この記事の著者

イルカシステム(株) イルカシステム株式会社

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

1.中小企業さま向けの社内向け業務ウェブシステム(営業支援、顧客管理、受注管理、請求入金管理、在庫管理、経営数値管理など)

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

※業務ウェブシステムの開発を効率化するための自社サービス「イルカベーカリー」をご提供しております。
※医療業界向けに、臨床研究の無作為割付自動化のための自社サービス「ムジンワリ」をご提供しております。

お問合せはお気軽に、こちらからどうぞ! → イルカシステム株式会社へ問合せ

著者:イルカシステム株式会社