Project Overview and Responsibilities

I was responsible for developing the special website for the "Kanjou Discovery Tour," a large-scale collaboration project with Kizuna AI commemorating the 100th anniversary of JR East's Yamanote Line circular operation.

The objective of this project was to promote real-world experiences at 15 Yamanote Line stations through a stamp rally event, maximizing event attendance and recognition. The target audience ranged widely, from Yamanote Line users to Kizuna AI fans.

In this project, I was responsible for all aspects of front-end development (design, implementation, testing, and environment setup).

Adopted Technology Stack

For this project, we prioritized a fast development experience, performance, and maintainability, selecting the following technology stack:

• Build Tool: Vite
• Language: TypeScript (strict mode)
• Styling: Sass (SCSS)
• CSS Architecture: BEM notation (l-, c-, p- prefix convention)
• Testing: Vitest (unit testing), Playwright (E2E testing)
• Code Quality: ESLint, Prettier
• Library: a11y-dialog (accessible modal implementation)
• Development Environment: Docker (docker-compose)

By selecting these technologies, we built a modern, efficient, and robust development environment.

My Committed Design and Implementation

1. Rich Animations Expressing the Project's Worldview

In this project, implementing animations to draw users into the project's worldview was the highest priority.

• Opening Animation: The opening sequence, which defines the first impression upon site visit, was precisely controlled using CSS and TypeScript. The flow from the pink background to the logo appearance and the unfolding of a white overlay was smoothly implemented to maintain the brand image.
• FV (First View): As the main visual to capture user attention, an animation was implemented where a group of Kizuna AI illustrations rotated in a circular motion. Prioritizing performance, GPU acceleration using the transform property was leveraged to maintain smooth 60fps rendering.
• Scroll Experience: We also focused on scroll-linked animations. In the concept section, a parallax effect (fixed background) was introduced, and for PC viewing, inertia scrolling was implemented to achieve a high-quality and comfortable user experience.

2. CSS Architecture Considering Maintainability and Scalability

As a large-scale campaign site, a robust CSS design capable of withstanding future updates and operations was essential.

• BEM-based Design: For the SCSS design, BEM notation was used as the base.
• Prefix Convention: A unique prefix convention (l- (Layout), c- (Component), p- (Project)) was introduced, linking file roles (foundation, core, layout, component, project) with class names.
• Separation of Concerns: This design clarified the scope of style impact, prevented unintended style conflicts or breakdowns, and ensured high maintainability and reusability.

3. Accessibility (a11y) for All Users

As a JR East project, ensuring that all users could access information was a mandatory requirement. We thoroughly ensured Web accessibility (a11y).

• Semantic HTML: Appropriate HTML tags (main, section, h2, etc.) were used to clarify the document structure.
• Accessible Modals: The a11y-dialog library was chosen for the modal displaying creator information. This provided full support for keyboard operations (closing with Esc key, focus trap) and screen reader announcements (aria-hidden, role="dialog").
• Motion Consideration: We also implemented a consideration to detect the user's OS settings (prefers-reduced-motion) and suppress animations.

4. Quality Assurance and Development Environment

To consistently deliver high-quality products, we also focused on establishing testing and development environments.

• Test Automation: We introduced unit tests with Vitest and E2E tests with Playwright (e.g., verifying modal opening/closing and page transitions) to establish a system for automatically detecting feature regressions.
• Code Quality Maintenance: Static analysis and formatting using ESLint (TypeScript) and Prettier were introduced to ensure code consistency in team development.
• Containerization: Both development and production environments were built with Docker containers, eliminating issues caused by differences in developers' environments.

5. Performance Optimization

As an image-heavy site, display speed directly impacts user experience. We thoroughly implemented the srcset attribute for all images, switching between high-resolution images for Retina displays (2x) and standard images according to the device. This reduced unnecessary data transfer while providing a clear visual experience.