We’ve rounded up the handy tools our technical directors have made

A Chrome extension that makes it easy to generate a sitemap. It crawls the site you’re viewing and outputs a list of its pages. Paste the output into a spreadsheet or Excel, and you can build a sitemap quickly and easily.

A tool to assist with capturing sites. Its auto-scroll, with customizable speed and easing, is handy. You can also choose to show or hide the cursor, so it’s very useful when capturing a site. We use it in video production, starting with the introduction videos we make when a site launches.

An extension that adds the following feature to the online screenshot service gyazo: it skips the page shown after you capture and displays the image URL directly. When sharing, sending the image URL directly — rather than the gyazo page URL — shortens the time to display and is appreciated.

A handy tool that lets you easily grasp the environment info of a client or team member. Instead of “tell me your OS/browser,” you can say “copy and paste the results from this URL” and comprehensively grasp the other person’s environment.

🔗 A logo-free version with a network speed test included.

*Click the link above to download it and install it in the environment of your choice.

A dedicated modeling tool and object-placement tool developed for building the Yamauchi No.10 Family Office site. On this project, we created 274 kinds of objects in total and laid them out on the stage using the object-placement tool.

▼ Modeling tool
We built objects by stacking pixels one by one while viewing each face, moving back and forth between screens showing the side, top, front, and 3D views. We then adjusted the pixels frame by frame on the finished objects to animate them.

▼ Object-placement tool
We placed the finished objects one by one. Considering the overall flow and the sense of scale of each object, we composed layouts for PC and SP separately.

For the PERFECT DAYS site, we made three dedicated tools — tools indispensable for expressing the film’s world view on the site.

▼ Typography tool
The strokes traced with the dedicated tool are saved as color information — red = start point, green = end point — and turned into a sprite sheet, recording the outline and stroke information of every character in a single image. With this tool, we achieved the effect of a novel’s characters being drawn in the correct stroke order and coming apart one stroke at a time.

▼ Mixer tool
We made a tool to set the linkage between text and sound, and finely tuned it together with musician Reo Sato. As a result, 117 ambient sounds are mixed in naturally according to your position in the novel you’re reading. (In some scenes, more than 10 tracks overlap.)

▼ Kerning tool
We developed a tool for kerning implemented pages directly in the browser. It operates with the same shortcuts as Adobe Illustrator and allows several people to work at once. On the PERFECT DAYS site, we finely adjusted not only headings and UI but the body text as well.
This tool has been useful in other projects too, and we used it to kern the AYANA BALI site.

For the AYANA BALI site, we developed tools to efficiently manage an enormous amount of content — over 800 pages across four languages.

▼ Spreadsheet CMS
We developed a CMS that generates pages from Google Sheets/Drive. All text and images can be managed in a spreadsheet, and on top of the familiar usability, it makes full use of the sheet’s native features — simultaneous multi-user editing, cell-level comments, edit history, and more.

▼ Bulk image-replacement tool
To efficiently reflect the roughly 1,200 images used on the website into the CMS, we developed a Figma plugin. Where you’d normally replace every image one by one, this handy tool replaces them all at once with a single button. It’s been updated so it can be used generically on other projects, and has become a tool that sees heavy use in-house.

◉ Plugin features
Bulk-replace before/after retouched images by matching file names
Bulk-generate export frames from the design data
- Fixing the issue of frame sizes ending up as decimals by rounding to integers
- Adding extra margin for parallax
- Automatically setting the export scale according to where the image is used and the device

For the KUBOTA FUTURE CUBE site, we developed a dedicated tool to realize its distinctive 3D space.

▼ Cube-creation tool
A tool that lets you place finely parted-out illustrations in 3D space to build a cube. You can try the tool via the link below. Saving is disabled, so feel free to play around however you like.

*Operating from a PC is recommended.

◉ Controls
Basic cube shortcuts
- wheel → zoom
- drag → orbit the camera
- shift + drag → pan
- shift + 0 → reset camera
- shift + alt + drag → move horizontally and vertically
Shortcuts on the in-cube mesh-creation screen
- hold shift and select vertices → multi-select
- select an edge and cmd + click to add a vertex
- hold alt and click a vertex → delete