推广活动数据图表
在一个体重管理谷物品牌的网页推广活动中,我们开发了把参与者输入的记录以图表呈现的界面。活动在网页上提供互动内容,让消费者自行追踪并查看饮食与体重变化。在参与型活动中,图表是参与者确认自身变化的地方,因此我们专注于让体重变化、目标和进度一眼可读。工作内容是实现随数据而反应的图表界面。
参与者输入即刻绘出的个人记录图
同一品牌在多个国家推出的体重管理活动网站,在个人饮食计划、购物清单和运动建议之外,还设有让参与者查看自身成果的记录界面。在体重管理活动网站上,参与者亲自输入并查看自己的饮食与体重变化。我们实现了把参与者输入的信息和活动数据以图表呈现的界面。用图表代替数字列表,让记录逐渐累积的样子先映入眼帘。

一次读懂体重变化、目标与进度的构成
活动图表界面同时展示体重变化、目标和进度三项内容。参与者在一个界面里就能确认体重如何变化、目标在哪里、现在走到了哪一步。由于这是帮助体重管理的品牌活动,图表处理的数值也正是参与者自己的体重与目标。

以随数据而动的图表取代固定图片
活动图表不是静态图片,而是做成随数据反应的互动界面。参与者的记录一变,图表就在同一界面上随之重新绘制。预先画好的图片无法呈现每位参与者各不相同的记录。

兼顾活动风格与数字可读性的平衡
活动图表位于营销用网页内容之中,因此必须遵循品牌活动的风格。我们构成界面时,让图表与周边内容自然衔接,在信息传达与视觉呈现之间取得平衡。这项工作是数字代理公司所执行活动的一部分,在此积累的图表经验后来延续到了同一品牌的移动应用开发。

项目亮点
根据参与者输入记录绘制的网页图表
体重变化、目标与进度集于一屏
以随数据而动的互动界面取代固定图片
洞察
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…



