Labs2026Side project · 6 min

旅のしおり · tabi no shioriAn itinerary you can hold.

A nine-day trip to Tokyo, Osaka and Kyoto, planned not as a document but as a cloth-bound booklet lying open on a desk. Pages turn, index tabs move from the right edge to the left as you read, photos flip over for a note, and each city's stamp inks in as you tick off its plans. One HTML file; it works on a phone in a train tunnel.

Role: Designer and builder, solo, with an AI pair-engineer
For: Two travellers, 22–30 November 2026
Built with: One HTML file, no backend · localStorage · four Google fonts
Photos: Wikimedia Commons, CC-licensed, credited on the back of each polaroid

Open the booklet Skip to the decisions

The booklet open on the tickets and title spread

Pages 1–2 of 34

real spreads from the booklet · tap the corners

Why a book

A list is for planning. A book is for going.

The usual trip plan is a shared document: excellent at being edited, bad at being used. On the day it is a wall of text on a small screen, with the one thing you need somewhere in the middle. Japanese school trips come with a shiori, a little booklet with the plan, the rules and the snacks, and the children carry it around all week. I wanted ours to feel like that: a thing you open, not a file you search.

THE DOC

Everything, in order

Dates, addresses, bookings, tips, all in one scroll. Great the week before. On a platform in Shinjuku it is a search problem.

THE APP

Somebody else's shape

Itinerary apps know about flights and hotels. They do not know about the egg sando, the escalator side, or which seat to book for Fuji.

THE BOOKLET

A page per day

Open to today. Tick things off. Read the sticky note in the margin. Turn the page when the day is done.

RuleIf it would not fit on paper, it does not go in.

Make the plan an object.

Objects have a front and a back, a weight, a place you are up to. A booklet gives the trip those things: a cover to open on the plane, tabs that show how much is left, a page that is today. Most of the design decisions below follow from taking the metaphor seriously instead of decorating a list with it.

The object

Scrapbook, not screen.

Everything on the page is something you could hold: tickets, a receipt from the restaurant list, polaroids with the note on the back, washi tape, sticky notes, a hanko stamp. None of it is decoration for its own sake. Each one carries information the trip needs, in the form that information would take on paper.

Two train tickets: the Nozomi shinkansen Tokyo to Shin-Osaka with seat E for Fuji, and the Special Rapid Osaka to Kyoto. — **Tickets**The two train legs as tickets, with the detail that matters printed on them: seat E, Fuji side.

A till receipt titled Where to eat, Tokyo: six places with a one-line description and a price. — **Receipt**Where to eat, as a till receipt. Prices ≈ per person, and it says so.

A polaroid of a bowl of tonkotsu ramen, captioned first ramen! — **Polaroid · tap to flip**The note and the photo credit live on the back, where a note on a photo goes.

The back of the polaroid: Tonkotsu means pork-bone broth, simmered for hours. Slurping is polite here. Photo credit to Wesoree, CC BY-SA 4.0, Wikimedia Commons. — **Polaroid · tap to flip**The note and the photo credit live on the back, where a note on a photo goes.

A red hanko stamp reading Tokyo in kanji. — **Hanko**Each city's stamp. Outlined until you have done its plans, inked when you have.

Coloured index tabs on the edge of the book: Osaka, Kyoto, Tips. — **Index tabs**Tokyo pink, Osaka orange, Kyoto red, tips blue. They move as you read.

A yellow sticky note: Jet lag rule. Stay up until 9pm on day one, no matter what. — **Sticky notes**Advice goes in the margin, in handwriting, one per page. The plan stays the plan.

Day 1, Touchdown: four plan items with times, all ticked and struck through in red. — **The day page**Time, plan, a small italic aside. Ticked items strike through in red.

Reading it

Two pages on a desk, one in your hand.

On a laptop the book lies open: two pages per spread, a leaf that turns in 3D when you tap a corner, and the index tabs on the fore-edge. On a phone it becomes a single page, same tabs, same turn, with a swipe. The arrow keys work too. The point of all the mechanics is one feeling: you know where you are in the trip without reading anything.

A page caught mid-turn, the leaf curving over the spine. — Mid-turn. The leaf is a real element rotating around the spine, shaded as it passes.

Tabs migrateSection tabs start on the right edge. As you pass a section its tab moves to the left edge, so the thickness on each side is how far you are through the trip.

Corners curlHover a bottom corner and it lifts, the way you would test a page before turning it. Tap to turn. The ribbon bookmark follows the open spread.

Tap a dayThe title page has the nine days as a strip, coloured by city. Tap one and the book turns to it.

Fits a phoneOne page at a time, the same tabs down the right, pages that scroll inside themselves when a day is long. Safe-area aware, so the cloth reaches the notch.

The booklet on a phone: the pink cloth cover with Japan and Open the book. — Phone · cover

The booklet on a phone: the Tokyo section page with the hanko and a polaroid of the Scramble. — Phone · Tokyo

Ticking it off

Progress you can see across the room.

This is where the behaviour design lives. A plan you can tick is a plan you look at, and a stamp that inks in when a city is done is a small, silly reward that works. Tick the plans below; the Tokyo hanko fills as you go. In the booklet this state is saved on the device, so the stamps are still there the next morning.

NOV

Sun · 日

day 1 of 9 · Tokyo

Touchdown

arrLand in Tokyo and take the train to Shinjuku.Add Suica to your phone wallet before the flight.
6pmKonbini run: egg sando, onigiri, and a hot can of milk tea.
7pmDinner in Omoide Yokocho, the smoky yakitori alley by the station.Stalls have about 6 seats. Point at what the person next to you is eating.
9pmNightcap in Golden Gai, 200 tiny bars in six lanes.Some charge a ¥500–1,000 seat fee. Look for "no cover" signs.

our notes

Jet lag ruleStay up until 9pm on day one, no matter what.

Stamp rally スタンプ

EACH CITY'S HANKO INKS IN AS WE TICK OFF ITS PLANS

東京TOKYO0 / 4

大阪OSAKA0 / 11

京都KYOTO0 / 15

—sleeps to go

The countdown is live: it counts sleeps to 22 November, switches to "day x of 9" during the trip, and says おかえり, welcome home, after. Small things, but they make the booklet feel like it knows what day it is.

Decisions

Six notes in the margin.

The rules I kept while making it, written the way the booklet writes its own advice.

One file, no backendTicks and notes save to the device. Nothing to sign into, nothing to go down, and it opens from the home screen with no signal.WHY · it has to work in a train tunnel

Phone first, desk secondThe two-page spread is the nice version. The single page is the one that gets used, so every page was laid out at phone width first.WHY · the desk is at home, the trip is not

Credit on the backThe photos are other people's, CC-licensed from Wikimedia Commons. Each credit is on the back of its own polaroid, not buried in a footer.WHY · a credit should be where the photo is

"Maybe" is allowedUncertain plans stay in, marked as a maybe on a green note, instead of being cut to make the plan look decided.WHY · a plan that lies is worse than a plan with gaps

Advice in the margin, never in the planThe plan is times and places. Tips (escalator side, bag rules, deer manners) are sticky notes beside it, so the day stays scannable.WHY · you read the plan ten times, the tip once

Say what the numbers arePrices are marked ≈ per person, may vary. Train times say about. The booklet never pretends to know more than it does.WHY · trust is the whole product

Differently

What I'd change with hindsight.

I'd have built the phone page first and the spread second, instead of the other way round. The spread was the image in my head; the phone is what we will hold, and the single-page layout needed more rework than it should have.

I'd have left room for after the trip: a place for our own photos to replace the Commons ones, so the booklet becomes the album.

And I'd keep the rule that made it good: if it would not fit on paper, it does not go in.