← All activity records

FACTUAL ACTIVITY RECORD · An activity record based on work that took place

Rebuilding a three-page site across 12 screens

Aligning Japanese and English desktop and mobile views in one visual source while retaining the design system

Activity period:

Purpose

Once the initial site structure and page inputs were fixed, sample screens based on the old page structure needed to be replaced rather than incrementally repaired. The aim was to retain the existing design system while reflecting only current wording and publication boundaries.

The work sought one physical design aligning navigation, AI-persona disclosure, legal pages, interaction states, responsive behavior, and an accessibility baseline across Japanese and English desktop and mobile views.

Implementation

The old sample was preserved as a separate artifact, and the current master rebuilt Home, Privacy, and Terms from scratch in Japanese and English for desktop and mobile, totaling 12 screens. Eighteen reusable components from the existing system were retained, with eight shared components added for the header, footer, navigation, locale, and AI-persona disclosure.

  • The Home mobile menu was limited to three in-page destinations, while Privacy and Terms remained footer-only.
  • Legal mobile screens used a dedicated header without a menu, clearly separating locale switching from the current route.
  • Unverified calls to action, a contact call to action, additional legal routes, and individual product destinations were not added.

AI Talent profiles placed photo, Name, Role, and Role Value in cards, using at least 15px body text and content-responsive card and text areas. Forty instances across Japanese and English desktop and mobile views shared the same minimum and wrapping conditions, while disclosure remained earlier in reading order than the people shown.

Mobile interaction used the same × close cue in both languages and documented accessible naming, expanded state, controlled content, Escape and activation close, focus return, and keyboard order in a specification frame. Focus used 3px cues and targets were at least 44×44px, with legal locale links at 88×44px and legal headers at 390×72px.

  • Privacy and Terms were placed in link frames at least 44px high in every mobile footer.
  • All 12 legal-link instances gained a visible 2px bottom border and explicit route label as a non-color cue.
  • The Japanese desktop About Wiroh heading was adjusted to remove a one-character widow and remain on one line.

Layout checks covered all 12 screens and the accessibility specification frame, while 480 text nodes were compared with current site input. Every screen was exported to PNG through the official export interface. Long Home mobile frames preserved their full proportions within the 8192px limit, leaving the physical design as the exact-size source.

Twelve screens expanded from three pages across locales and viewports

Rendering diagram…

What was confirmed

Verification results

No layout problems were detected across 12 Japanese and English desktop and mobile screens for Home, Privacy, and Terms or the shared specification frame.

All 40 AI Talent profile instances used Role Value text at least 15px and content-responsive card and text areas, with no visible clipping.

Mobile headers, locale controls, and footer legal links met 44px minimum targets, 3px focus cues, keyboard order, and a non-color 2px border cue.

A check of 480 text nodes found no product names, calls to action, or additional routes absent from current input, and Home navigation contained only three canonical links per language.

At the cutoff, the physical design, backup, and 12 evidence exports had been applied to the target. Implementation, production data flows, photo rights and provenance, locale and legal judgments, deployment, and publication remained unverified.

Basis for completion

The visual-design scope was complete when 12 screens, shared components, responsive, interaction, and accessibility specifications, and 12 exports were available, passed layout, text, target-geometry, focus, and non-color-cue checks, and were applied to the target.