さようならイラレ。RAWGraphsを使ったら、グラフ作成の速度が爆上がりした件
こんにちは、サービスデザイン部のムニエルとオタチェです。
GMOメディアでは、新卒1・2年目のデザイナーが、決算説明資料の作成に携わっています。
毎回、資料作成効率化のためのアップデートを1つ以上行っているのですが、
今回は、特に時間がかかっているグラフ作成の効率化を検討しました。
その中で私たちが見つけたおすすめツールの紹介と、その活用方法について共有させていただければと思います！
結論から言うと
今回見つけたオンラインツールの「RAWGraphs」はグラフ作成用の補助ツールとして利用し、細かいデザイン調整に関しては、アウトラインを扱えるFigmaやIllustratorを引き続き使っていきたいと考えています。
土台：RAWGraphs
デザイン調整：FigmaもしくはIllustrator
なぜやるのか
今までは、Illustratorを使ってグラフ作成を行っていましたが、以下の理由で見直しをしました。
- 決算説明資料を通し、株主へGMOメディアをよりアピールできるようにするため
- 資料作成時のデザイナーと他職種との共同作業をより行いやすくするため
- デザイナーとして、新しいツールのキャッチアップのため
見つけてしまった神ツール「RAWGraphs」！！
RAWGraphsは、誰でも手軽に複雑なデータを視覚的に表現できるようにすることを目的として開発された、データ可視化オンラインツールです。
Excelだけではなく、コンマ区切りのリスト、Googleドキュメントなどのデータからコピー&ペーストだけでグラフを作成できます。
棒グラフや円グラフはもちろん、バブルチャート、散布図、ガントチャート、ボックスプロットなど29種類のグラフを作成できるので、高度なグラフを作成したい人にもおすすめできるものとなっています！
プログラミングできれば、すでに用意されたグラフから選択するだけではなく、カスタマイズ性の高いチャートも開発できます。
RAWGraphs で作業してみて、どう？
テストとして、決算説明資料に必要な3つのグラフをRAWGraphsで作ってみました。
- 営業費用推移
- 今回作成する中でも、積み上げ棒グラフの部類でかなり複雑なグラフです。
- キレイパス掲載チケット数推移
- こちらはシンプルな棒グラフです。あらゆる資料の中で、もっとも作る頻度が高そうなグラフスタイルですね。
- 従業員内訳
- こちらは円グラフです。今回の決算説明資料では従業員比を出すために使いました！
実際に作ってみて
営業費用推移（一番左）
RAWGraphs内のチュートリアルにそいながらグラフを作成しましたが、躓いてしまうポイントが2つありました。
ポイント①
積み上げ棒グラフ最上部のブロックは白く、枠が必要となります。Illustratorだと直接枠を付けることができますが、RAWGraphsだと白では全く見えなくなってしまいます。そこで、見やすくするため明るいグレーに変更し対応しました。
ポイント②
スプレッドシートのデータは並び方によって、そのまま使用した際、RAWGraphs側で正確に読み取ることができません。その場合は改めてデータの整理をする必要があります。
キレイパス掲載チケット数推移（真ん中）
特に問題がなくスムーズにできました！
従業員内訳（一番右）
こちらもスムーズにできました！
ここめっちゃ良い！
RAWGraphsの強みだと思った点は以下の通りです。
- 時間が大幅に節約できる！過去の作業で一番時間がかかるのはデータ入力でしたが、RAWGraphsを使うと直接コピー&ペーストすることができるので、一瞬でグラフの形が出来上がります！入力ミスが起こらない！
- カスタマイズできる！グラフのサイズ、margin（図全体と軸の間）やpadding（棒の間）が全部ツール内で調整できるので、制作の自由度が非常に高いです。
- svgで書き出すことができる！色調整や軸の様式などの微調整はFigmaやIllustratorで作業できますので、拡張性は無限大ですね。
- 29種類のグラフが無料で作れる！強い！！！これで決算説明資料に全て必要であるグラフはRAWGraphsだけで完結できます！
期待したい点
軸名の問題
RAWGraphsで軸名の入力は必須項目になります。。従って、もし元々のデータに軸名がついてなかったら最初の1行のデータが軸名になってしまいます。
データをコピー&ペーストするとき、デフォルトで1行目が軸名になってしまうので、自分で軸名を用意しなければなりません。そこまで手間がかかる作業ではないですが、少しだけ面倒です…
順番の問題
シートから直接コピー&ペーストすることができるのはやっぱり強いですね。
以下のような形で入れるとしたら、想定どおりなのですが…
何か、おかしいところがありませんか？
そうなんです、12月は全部同じ年の3月の前に移動してしまっています。
これは日本語が「月」として認識されていないことが原因のようです…棒の順番はドラッグして移動ができないので、作業工数が増えてしまいます。
解決法として、月の数字前に「0」を足すと、順番がちゃんと揃ってくれます。
縦軸数値の幅(間隔)が変えられない問題
marginは、調整可能なのに数値同士の間隔が変えられない！！！（何度も確認した涙）
RAWGraphsで作成したグラフは、縦軸同士の間隔が小刻みなので、スッキリした印象を持たせるために、もう少しだけ間隔をもたせたいです。
ここはFigmaで調節してあげましょう！
決算説明資料でのRAWGraphsの役割
ムニエルとオタチェは、決算説明資料でのRAWGraphsの役割を次のように考えることにしました！
繰り返しになりますが、
RAWGraphsはグラフ作成用の補助ツールとして利用し、細かいデザイン調整に関しては、svgを扱えるFigmaやIllustratorを引き続き使っていきたいと考えています。
どちみちRAWGraphsが超時短の神ツールであることは間違えないんですけどね！（笑）
土台：RAWGraphs
デザイン調整：FigmaもしくはIllustrator
最後に
「いや、さよならイラレって言いつつまだ使うんかい！」って怒られそうな気もしていますが、今回はこの辺で！皆様のグラフ作成の効率が上がるために、一役買える記事になれれば幸いです！では！