ウェブサービスのデータ可視化
グローバル生活用品企業の韓国法人が公式Webサービスを全面刷新する際、製品とプロモーションのデータを見せるチャート画面を担当しました。刷新の目的は、消費者とブランドをつなぐオンライン窓口を新しく整え、製品・ブランドの情報をはっきり伝えることでした。チャートは数字が正しくても変化が目に入らなければ情報を伝えられないため、データの変化が画面にすぐ表れる表示方法と動きを設計しました。作業は可視化領域の画面と、複数の場所で再利用するチャート部品までです。
製品・プロモーションのデータをチャートに移したWeb画面
グローバル生活用品企業の公式Webサービス刷新で、製品とプロモーションに関するデータをチャートで見せる画面を実装しました。この会社は多くの生活用品・化粧品ブランドを国内に供給しており、公式Webサービスはそれらのブランドの製品情報を消費者に届ける窓口です。刷新したサイトの目的は製品・ブランドの情報をはっきり伝えることで、チャート画面はその情報をデータで見せる部分を受け持ちました。数字を一つずつ読まなくても、何が大きく何が増えたかが先に見えることをチャートの基準にしました。

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

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

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

この仕事のポイント
製品・プロモーションのデータを見せるWebチャート画面
複数の画面で再利用するチャート・可視化部品
データの変化がすぐ表れる表示方法と動き
インサイト
GA4 client_storage: 'none'은 정말 쿠키를 막을까?
두 달 전 이 블로그에 「GA4 쿠키 없이 쓰기」라는 글을 썼습니다. clientstorage: 'none' 으로 쿠키 저장을 끄고, 자체 분석이 쓰던 익명 ID 를 clientid 로 넘기면 쿠키 0개로 GA4 를 쓸 수 있다는 내…
GA4 Measurement Protocol: gtag.js 없이 서버에서 이벤트 보내기
랜딩 페이지의 전송량을 파일 단위로 쪼개 보다가, 가장 큰 파일이 우리 코드가 아니라는 것을 알았습니다. Google Analytics 의 gtag.js 였고, 방문 한 번에 176KB 를 받고 있었습니다. 페이지 전체가 1,094K…
중소 제조업 AI 도입 순서: DX를 먼저 끝내야 할까?
공장을 가진 중소·중견 제조기업 16만여 곳 가운데 스마트공장을 도입한 곳은 19.5%입니다. 회사가 작을수록 이 비율은 더 떨어집니다. 중소벤처기업부가 2025년 4월에 낸 제1차 스마트제조혁신 실태조사 결과입니다. 그림: 기업 규…
Next.js loading.tsx와 404: 버튼이 화면보다 먼저 살아나게 하기
관리 화면 왼쪽 위에 사이드바를 접고 펴는 ☰ 버튼이 있습니다. 폭 하나 바꾸는 버튼인데, 대시보드에서 누르면 2초 넘게 아무 반응이 없었습니다. 레이아웃만 바꾸는 일이 왜 이렇게 오래 걸리는지부터 들여다봤습니다. Next.js 16…



