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

 

この記事の著者

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

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

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

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

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

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

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

お問い合わせ




会社概要

<p>イルカシステム(株)</p>
<img src="http://www.iruka-system.co.jp/wp-content/uploads/2017/01/WS000000.png" alt="会社概要 住所" width="243" height="84" class="alignnone size-full wp-image-49" />
<div class="alert alert-warning">
2017/1/1より、住所変更いたしました。
</div>
<p><span class="label label-success">TEL</span> 03-5843-9168</p>

  • 中小企業 41個の記事

    中小企業様にご提案・開発してきた実績をもとに、システム構築について記載した様々な記事一覧です。

  • 社内システム 39個の記事

    様々な社内システムをご提案・開発してきた実績をもとに、システム構築について記載した様々な記事一覧です。

  • わかりやすさ 30個の記事

    情報システムをわかりやすく使いやすいものにするためのノウハウ、気をつけていることの記事一覧です。

  • UI設計 27個の記事

    UI(ユーザーインターフェース)は、システムの使い勝手を左右します。どんな点に気をつけているか、どんな考えでシステム開発しているかの記事一覧です。

  • 顧客管理 26個の記事

    これまで構築した様々なシステムのうち、顧客管理機能をどのような観点でご提案、開発しているかをまとめた記事一覧です。

  • 受注管理 18個の記事

    これまで構築した様々なシステムのうち、受注情報を管理する機能をどのような観点でご提案、開発しているかをまとめた記事一覧です。

  • ビジネス 18個の記事

  • 業務 16個の記事

  • 要件定義 14個の記事

    要件定義とはどのようなシステムを構築するのかを決める作業です。要件定義において注意し、考えていることをまとめた記事一覧です。

  • クラウド 13個の記事

  • 登録画面 13個の記事

  • 編集画面 12個の記事

  • システム会社 12個の記事

  • 情報共有 11個の記事

  • みえる化 11個の記事

    手作業をシステム化して効率化するだけでなく、それらの情報を集約して簡単に見えるようにし、社員が自律的に動ける組織を作ることが「みえる化」です。

  • 一覧画面 11個の記事

  • 業務用ウェブシステム 10個の記事

  • エクセル 9個の記事

  • コミュニケーション 9個の記事

  • セキュリティ 8個の記事