お声掛けありがとうございます。
コンペの内容がイレギュラーですので、サンプル程度のご提案になりますがご覧ください。
まずHTMLでチャートを見せる場合、次のような方法があります。
1. イラストレータで作成し、画像で見せる。・・・画像をより精細にしたい場合は svgというフォーマットを用いますが、これはIE9以降でないと対応しません。
2. Flashで作成・・・Flashはセキュリティの問題で利用は縮小しています。モバイルでは表示できないケースが多い。
3. javascript などで表示・・・プログラムの作成が難しい
上記２については現在のWEBの状況を鑑みてNGとし、１はすべて手動で作成するため、非常に手間がかかります。３が先進的ですが、プログラムは１から作成せず、こちらのような既成品を利用するなら現実的です。
http://gojs.net/latest/samples/index.html
たくさんサンプルがありますので、内容にあったものを選んで使います。
たとえばこちらを選んだとします。
http://gojs.net/latest/samples/flowchart.html
ドラッグしたり、ボックスをダブルクリックして文字を入れて見てください。
これを使ってサンプルの１つを作ってみました。
http://gel-extra.tv/test/chart/chart1.html
＊そのスクリーンショットも添付します。
既成のプログラムですので、自由度に限界はありますが、むしろその限界は、デザインのレギュレーションとなります。コロコロ色を変えたり、バラバラにならず、統一性の基準となって良いと言えます。
＊現在はサンプルですので左上にコピーライト表記が入りますが、プログラムを購入されるとこれは取れます。
────────────
このように、手動で作成する手間を軽減しながら、修正や利用を簡単にする javascriptの利用が最もよいのではないでしょうか。
しかしながら、いただいたサンプルのチャートのように、表現に統一感のないものは考えものです。もう少し、フォーマットや言い回しを整備してからHTML化するのが望ましいと思います。
当コンペではここまでの提案とさせてください。
実際の制作において、多数のチャートを１の方法で作成するとコストもかかると思います。３のような javascriptのプログラムを使った半手動の方法であれば、貴社内でチャートを作成され、できたスクリプトを貼りこんでいくことで、チャートはいくらでも増やせます。このような方法で制作されてはいかがでしょうか。
ご検討よろしくお願いいたします。
