DUOLABS
ポートフォリオ

ウェブサービスのデータ可視化

グローバル生活用品企業の韓国法人が公式Webサービスを全面刷新する際、製品とプロモーションのデータを見せるチャート画面を担当しました。刷新の目的は、消費者とブランドをつなぐオンライン窓口を新しく整え、製品・ブランドの情報をはっきり伝えることでした。チャートは数字が正しくても変化が目に入らなければ情報を伝えられないため、データの変化が画面にすぐ表れる表示方法と動きを設計しました。作業は可視化領域の画面と、複数の場所で再利用するチャート部品までです。

Launch
2010
Client
グローバル生活用品企業の韓国法人
Type
データ・可視化

01 / 04

製品・プロモーションのデータをチャートに移したWeb画面

グローバル生活用品企業の公式Webサービス刷新で、製品とプロモーションに関するデータをチャートで見せる画面を実装しました。この会社は多くの生活用品・化粧品ブランドを国内に供給しており、公式Webサービスはそれらのブランドの製品情報を消費者に届ける窓口です。刷新したサイトの目的は製品・ブランドの情報をはっきり伝えることで、チャート画面はその情報をデータで見せる部分を受け持ちました。数字を一つずつ読まなくても、何が大きく何が増えたかが先に見えることをチャートの基準にしました。

製品・プロモーションのデータをチャートに移したWeb画面
02 / 04

一度作って複数の画面で再利用するチャート部品

Webサービスのあちこちで使うチャートと可視化画面を、再利用できる部品として作りました。同じ部品に別のデータを入れると、別の画面でも同じ見た目と動きのチャートが描かれます。刷新の途中でチャートが入る画面が増えても、毎回新しく作る必要はありません。

一度作って複数の画面で再利用するチャート部品
03 / 04

データが変わると画面が追って動くインタラクション

チャートは、データの変化が画面にすぐ表れてこそ情報として読まれます。値が変わったとき、その変化を目で追えるようにチャートが描き直されるよう、インタラクションと表示方法を設計しました。数字で比べなくても、棒と線の動きで先に気づけることを基準にしました。

データが変わると画面が追って動くインタラクション
04 / 04

刷新したサイトのトーンの中に置いた可視化領域

チャート画面は、全面刷新されるWebサービスのほかの画面と同じ品質と表現を備える必要がありました。刷新の流れに合わせて可視化領域の画面品質とコンテンツ表現を整え、製品・ブランドの情報がはっきり伝わるようにしました。この作業は、デジタルエージェンシーが手がけた刷新プロジェクトで可視化領域を受け持った部分参加です。

刷新したサイトのトーンの中に置いた可視化領域

この仕事のポイント

01

製品・プロモーションのデータを見せるWebチャート画面

02

複数の画面で再利用するチャート・可視化部品

03

データの変化がすぐ表れる表示方法と動き

インサイト

ブログをすべて見る