インフォグラフィックの製作の裏側

2016.12.26

01-main05

こんにちは! デザイナーの渡邉です。
12 月も終盤に近づき、年納めが近づいていますね。
皆さんはどんな 2016 年を過ごされましたか?
私は 11 月に KUFU に Join したことが 1 番の出来事に違いないですね。

今回久しぶりのテックブログに、インフォグラフィックに関して書かせていただきました。

※実際のインフォグラフィックはこちらです。

ブログを書いた背景

私にとってインフォグラフィック製作は初めて経験だったので、自分の振り返りと、まだ作られたことのない方の参考になればと思い、グラフィック表現の実際に行ったカイゼン内容をご紹介する形で書いてみることにしました。

これは何のインフォグラフィック?

2016 年 11/18(金)に SmartHR がサービスリリースから 1 周年を迎え、それを記念して公開した SmartHR の 1 年を振り返る内容のものとなっています。

1.構成のカイゼン

冒頭に設けている SmartHR の説明がやや冗長的に感じさせてしまっていたため、カットしてすぐに数字が目に入ってくるようにしました。

02-structure02

2.タイトルのカイゼン

「 1 年」だけでなく、「 SmartHR 」も同様に強調されるようなウェイトの置き方に変更しました。
サービス名がスルーされてしまうことなく、意識してもらえるようなバランスになりました。

03-title

3.イラストのカイゼン

SmartHR で削減してきた時間

before-1

手書き・役所の積み上げイラスト

04-time01-2

before-2

時計の積み上げイラスト

05-time02-2

after

シンプルな棒グラフ

06-time03-2

イラストで表現していたものが、最終的にはシンプルな棒グラフになりました。
初めは「イラスト表現」にとらわれていましたが、本来の目的である「インフォメーションをわかりやすく伝える」ことにフォーカスしブラッシュアップしていきました。

売り上げ成長率のイラスト

07-growth

「成長したこと」だけでなく、「成長の度合い」まで感じ取っていただくために、葉っぱを用いた表現から実際の数値を元にしたイラストに変更しました。

サポート返信までの中央値のイラスト

10-support

SmartHR は 4 名のカスタマーサクセスメンバーでご質問にお答えしています。
もちろん PC チャットでお答えもしておりますが、お電話でお客様の声を聞きながら、ビデオチャットを用いて顔を合わせながら、のご対応まで。
SmartHR サポートチームの強みである「人」の面も感じていただきたく、「なにで」から「誰が」サポートしているか、という表現に変更しました。

4.タイムラインのカイゼン

タイムライン形式を採用

10-timeline

・ 1 年の変化を一つの流れで見せたかったこと
・ 「利用いただいている企業様の数」「追加・カイゼンした機能」「賞を獲得したコンペ実績」を一つの軸に時系列でまとめるため
以上 2 点の目的から、タイムライン形式を採用しました。

棒グラフのカラー

11-timeline-color

当初全体的に SmartHR グリーンのカラーを用いていましたが、全体の要素を入れた後に
「導入企業数 : イエロー」と「機能追加・カイゼン : グリーン」と、直感的に見分けられるようにカラー変更を行いました。

コンペティションロゴのサイズアップ

12-2-timeline-logo

各コンペティションロゴの height で揃えていた部分を、一部サイズアップしました。
吹き出しからはみ出すくらいにサイズアップすることで、実サイズではなく、見た目のサイズ感の統一・余分なホワイトスペースの減少につながりました。

5.アニメーションのカイゼン

before

anime-before02

after

anime-after02

スクロール時した際に背景のストライプ柄のちらつきが目に痛く見えてしまったため、背景をスクロールと連動させず静止状態・上面がスライドするような見た目に変更しました。
実はこちら、公開後に Twitter でシェアしていただいた方からのご意見で、発見するなりその日参加していた TechcCrunchTokyo2016 を弊社エンジニアメンバーと中抜けし、カフェで修正したものです。
大変参考になりました。

Facebook ・ Twitter の反響にひと安心

11 月入社の私にとってこれが初仕事であったため、とてもとてもとても心配していたのですが、
最終的に約 3,000 PV となり、予想よりもずっと多くの方に見ていただくことができ、また Facebook や Twitter では「素晴らしい取り組みですね!」「わかりやすい!」「これで一年はすごい!」など、たくさんのコメントもいただくことができました。
これを見て、たくさんの方々に SmartHR が支えられていることを改めて実感するとともに、「皆様のご期待に応えたい」と素直に感じたことを覚えています。素直にうるっときました。

2017 年もカイゼンしていきます!

公開から約 1 ヶ月経ち、現在はプロダクトに関わる案件がメインとなっています。
次の 2 周年のタイミングでも、デザイン・実績ともに更にブラッシュアップしたものを公開できるよう、今後もカイゼンに努めてまいります。
少し早いですが 2017 年も SmartHR をよろしくお願い致します!

さいごに

KUFU では SmartHR を共に成長させてくれるメンバーを募集しています!
ご興味を持っていただけましたら、ぜひ以下よりご応募ください。

KUFU Inc. / Recruit

atsushi-watanabe

スタンダードなもの・シンプルなものに目がない、UNIQLO と 無印の服ばかり着ているデザイナーです。好きなフォントは、MORISAWA 見出しゴシック。
他の執筆記事はこちら