---
layout: work.njk
title_zh: Slip-On DIY
title_ja: Slip-On DIY
title_en: Slip-On DIY
year: 2016
cover: /images/2016-slip-on-diy/cover.jpg
materials: HTML5 · WebGL · 移动端 Web 应用
materials_ja: HTML5 · WebGL · モバイル Web アプリ
materials_en: HTML5 · WebGL · mobile web app
description: "An HTML5/WebGL mobile tool for Vans that captures hand-drawn designs on paper and maps them onto a 3D shoe model in real time — draw, scan, wear."
workTags:
- software
- interactive
- commercial
---
<div class="gallery">
<img loading="lazy" src="/images/2016-slip-on-diy/s5.jpg" alt="鞋形纸模板与彩色马克笔">
<img loading="lazy" src="/images/2016-slip-on-diy/s4.jpg" alt="工作坊现场 — 桌面布置">
<img loading="lazy" src="/images/2016-slip-on-diy/s3.jpg" alt="参与者用手机扫描图案">
<img loading="lazy" src="/images/2016-slip-on-diy/s2.jpg" alt="手机中的3D鞋体预览">
<img loading="lazy" src="/images/2016-slip-on-diy/s1.jpg" alt="手绘鞋面设计展示">
</div>
<div lang="zh">
在纸上画一双鞋，用手机拍一下，画就跑到了一双 3D 的 Vans Slip-On 上。
我们为 Vans 做了一个移动端 H5 工具。用户拿到一张印有鞋面展开图的纸模板，用马克笔随便画——涂鸦、图案、写字，画完之后用手机扫描，图案会实时贴合到一双可以旋转、缩放的 3D 鞋模型上。画什么就是什么，立刻能看到穿上脚的效果。
这个工具在 Vans 门店以工作坊的形式落地。一张桌子，一堆彩笔，一张纸，一部手机——流程足够简单，小朋友也能玩。画完还可以分享自己的设计。
入选 GDC15（Graphic Design in China 2015）。
商业项目，客户 Vans。与 [Super Nature Design](https://www.supernaturedesign.com/) 共同完成。
</div>
<div lang="ja">
紙に靴を描いて、スマートフォンで撮る。すると絵が 3D の Vans Slip-On に貼り付く。
Vans のために制作したモバイル H5 ツール。ユーザーは靴の展開図が印刷された紙テンプレートを受け取り、マーカーで自由に描く——落書き、パターン、文字、なんでもいい。描き終えたらスマートフォンでスキャンすると、図案がリアルタイムで回転・ズーム可能な 3D シューズモデルに貼り付けられる。描いたものがそのまま、履いた姿として目の前に現れる。
このツールは Vans 店舗でワークショップとして展開された。テーブル一つ、カラーペンの山、紙一枚、スマートフォン一台——子供でも遊べるシンプルさ。完成したデザインはシェアもできる。
GDC15（Graphic Design in China 2015）入選。
商業プロジェクト、クライアント：Vans。[Super Nature Design](https://www.supernaturedesign.com/) との共同制作。
</div>
<div lang="en">
Draw on a sheet of paper. Scan it with your phone. The drawing wraps itself around a 3D Vans Slip-On.
We built a mobile H5 tool for Vans. Users receive a paper template printed with the shoe's unfolded surface, and draw freely with markers — doodles, patterns, lettering, anything. Once finished, they scan the paper with their phone, and the design maps onto a rotatable, zoomable 3D shoe model in real time. What you draw is what you see, instantly wearable on screen.
The tool was deployed as a workshop in Vans retail stores. One table, a pile of coloured markers, a sheet of paper, a phone — simple enough for kids to jump in. Finished designs could be shared directly from the tool.
Selected for GDC15 (Graphic Design in China 2015).
Commercial project, client: Vans. In collaboration with [Super Nature Design](https://www.supernaturedesign.com/).
</div>
