This is the website of “Yamauchi No.10 Family Office”, established by the Yamauchi family, Nintendo’s founding family. The concept of the website is a road movie of the Yamauchi family.
There are times of peace and tranquility, but there are also times when things go wrong, as if a storm is coming. There are ups and downs. Nevertheless, the Yamauchi family is determined to overcome them with challenge, originality, and a playful spirit, the spirit that has been passed down over generations. This is why every generation can always be unique and bold in its actions. As the founding family of the world-famous video game maker Nintendo, it is an obligation to never forget to pass their wisdom and wealth to the future children of the world. Such are the intentions of the Yamauchi family and the family office that is being conveyed throughout the website. The Yamauchi family and their family office is without a doubt the embodiment of "DREAM. LEAP. LIVE”.
The Yamauchi family and their family office is without a doubt the embodiment of "DREAM. LEAP. LIVE”.
Design
Design System - Everything on the surface is composed of multiples of 4px. We designed the text and objects (voxels) to fit within this minimum grid unit, and expressed these in three dimensions. The objects were made out in four cube sizes (8px, 16px, 32px, and 64px), and the pixel world was created using only the red, yellow, green, blue, and gray that was adopted from the logo.
Story setting - We divided the objects into four major stages: spring, summer, autumn, and winter, and then decided on the range within each stage. We started by roughly deciding the layout of each stage: a grassland area, a futuristic city area, sea, a cityscape of Kyoto, and so on. What was important here was to express the gradual, and at the same time sudden changes, such as the peaceful and calm blocks and the stormy blocks, to keep in mind the concept of how there are always ups and downs in life.
Development
Modeling Tools -The designed objects were produced with a custom tool made specifically for this site. This tool creates voxel objects and animations. The object is created by moving the cubes back and forth between the screens that display the sides, top, front, and rendered view. The animation is done by adjusting individual pixels of the completed object for each frame. In a way, the animation process is similar to hand-drawn animation. A total of 274 types of objects were created.
Placement Tool - The objects created with the modeling tool are placed one by one with the custom placement tool created for this site. The objects are laid out individually for both PC and smartphone while considering the overall flow, size and density of the objects. This is quite a time-consuming process because of the separate configurations. This site was created by repeating these processes over and over.
Views modes - Thanks to the semantic nature of the base HTML, we were able to implement the ability to switch between isometric and simple views with ease. There was no difficulty in implementing the simple view. (The direct access method to the simple view is not disclosed).
We were able to implement the ability to switch between isometric and simple views with ease.
Technology
Creative Team
- logo design: Yuko Nagano
- creative direction: Jeong-ho Im ( mount inc. )
- art direction, planning, design: Masahiro Yonemichi( mount inc. )
- animation, design: Andreas Bryant Wutuh ( mount inc. )
- technical direction, planning, development: Takeshiro Umetsu ( mount inc. )
- copywriting: Junpei Watanabe ( watanabejunpeisha Inc. )
- english: Shinsuke Kuriyama ( Wordsberg Inc. )
- sound design: Kenji Yoshida ( daji studio )
- translation: Zal Heiwa Sethna ( Soli Consultants, Inc. )
- project management: Ko Yoshida ( mount inc. )
- project management: Go Kakizaki ( mount inc. )
About mount inc.
mount - a creative agency based in Tokyo, Japan. Covering mainly website planning and production. With the goal of creating "universally effective work", we create "something that is good, intuitive, and moving".
Twitter: @mount_inc