プロモーション用データチャート
体重管理シリアルブランドの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…



