はじめまして、おれめが(@oremega)です。
この記事は Design Tools Advent Calendar 2018 の19日目の記事です。
これまでの仕事でグラフを作ることが多かったのでそこで得た知見を書いていきます。

現在、SmartHRという会社でデザイナーをしていますが、前職では5年ほどソーシャルメディアマーケティングを行っている事業会社でソーシャルメディアの可視化ツールとしてグラフが載っているダッシュボードをよく作っていました。

当時からチームメンバー（プロジェクトマネージャー、エンジニア、デザイナー）と素早くプロトタイプを揉みながらブラッシュアップしていく
プロトタイピング中心の開発プロセスができていたので見た目のデザインを作り込むことよりもまずは形にすることでチームの認識のズレをなくしユーザーはちゃんと使えるか？というところに集中することができました。

そのなかでグラフも同様に細かく作りこむよりもグラフで何を伝えるかを大事していたので色や要素だけを揃えて最終的な確認はコーディングでしていました。

ほとんどの場合、複雑なグラフを使うこともなかったのでグラフに必要な要素を洗い出してそこから使うプラグインを選んでいました。そうなると使うプラグインにデザイン表現も依存するので見た目のデザインを作り込みすぎてチームメンバーの期待値コントロールがしずらくなるため Sketch でグラフを作るということはあまりしていませんでした。

ただ、ここにグラフが入るよ。では納得してもらえないし本物（ぽい）データで見れないとプロトタイプとしては弱かったりもするので簡易的にグラフを作り、Sketch に貼り付ける方法をとっていました。

1.プラグインを実装して使う

一応ちょっとはコードも書けるマンなので最終のグラフ表現の雰囲気まで掴むときは実際のプラグインで作ってしまいキャプチャをとって Sketch に貼り付けていました。

chart.js

C3.js

D3.js

highcharts

自分で実装ができないとなかなか頼みづらかったもしますが、できる方はこちらのほうが逆に簡単だったりするのでおすすめです。

2. Google スプレッドシートを使う

僕のイチオシは Google スプレッドシートになります。
元々表計算アプリなのでダミーデータが作りやすくグラフの種類や要素は豊富に揃っているし、色の変更も簡単にできるのでお手軽です。
しかも、かなり綺麗に作れるわりには Google スプレッドシート感がわかったりもするのでプロトタイプとして本番のデザインだと思われないあたりが適していると思っています。

特殊なことは何もしていませんが、作業風景を動画に撮ったので載せておきます。やっていることは、

1.ダミーデータを用意する。
2.グラフにする。
3.グラフの種類を変更。
4.グラフのスタイル（タイトル、凡例の位置、データソースの表示）

3.Sketchプラグインを駆使して作る

一応プラグインで作ることも可能なんですが、見た目は綺麗に作れるのですが、グラフなのに目盛りがついていなかったり凡例が、無かったりするのであくまで雰囲気かなと思っています。（ Sketch で書き足すことは当然できますが、なるべくグラフの部分は正確性をだしたかったりもするのであまりやりません。）

Chart

x軸、y軸までは出ないので確認したい内容次第では使っても良いかな？と思います。グラフの種類が複数あるので良いですが、線グラフ以外は有料ですが、$10/年なので破格ですね。　

まとめ

大事なのはあくまでプロトタイピングとしてユーザーに何を伝えなきゃいけないかを伝えることにあるのでなんのデータを誰に見てもらってどんな示唆がでたらいいのか？一番伝わるグラフの種類は何か？ユーザーは本当に想定している結果を得られるかを検証できていたら
デザインのスタイルは決めて実際のコーディングで確認するという方法が一番スマートなんじゃないかと考えています。

ただしあくまで事業会社の中だけのやってきた話なので、受託制作で理解が得られなかったり関わっているメンバーによっても考え方が違うとコミュニケーションがうまく取れなかったりもすると思いますすが、このようなやり方もあるということを覚えておいてどこかで使う機会があれば幸いです。