Project Overview and Role

This is the official promotional website for 'SORAYAMA Light, Transparency, Reflection -TOKYO-', the largest retrospective exhibition to date by artist Hajime Sorayama. The purpose is to express the artistry of the exhibition on the web and to disseminate event information and attractions to target users both domestically and internationally (Hajime Sorayama fans, art lovers, and general visitors).

In this project, I was responsible for the entire front-end development. I consistently handled everything from HTML structure design, CSS design, and JavaScript interaction implementation to performance tuning.

Technologies Adopted

• HTML5
• CSS3 (Design based on FLOCSS/BEM conventions)
• JavaScript (ES Modules)
• Google Tag Manager (GTM)

Without relying on specific frameworks, I built a lightweight and maintainable front-end environment by combining semantic HTML, modern CSS, and modularized JavaScript.

My Specific Design and Implementation Choices

CSS Design Considering Maintainability and Extensibility

In this project, I strictly applied FLOCSS (or BEM) conventions as a CSS design methodology. Class names are divided by responsibility as follows:

• Project (p-): p-header or p-modal etc., project-specific UI components.
• Component (c-): c-title or c-button etc., minimal UI units reusable across the entire site.
• Layout (l-): l-container etc., components that define the page layout structure.

This design prevented style conflicts and created a robust codebase that can quickly respond to future design changes, as well as additions and modifications of components.

UI/UX Design and Accessibility to Enhance User Experience

To convey the exhibition's worldview, I aimed to achieve both a rich visual experience and usability.

• Opening Animation: I implemented an opening sequence that leverages CSS animations to heighten anticipation upon site visits.
• Semantic HTML: I designed a machine-readable (machine-understandable) structure by appropriately using HTML tags such as <main>, <section>, <nav>.
• WAI-ARIA Compliance: On the hamburger menu button, aria-label="メニューを開く" for example, I ensured accessibility (a11y) by considering screen reader users.
• Interaction: I implemented interactive UI elements, such as a hamburger menu and modal windows, to organize and display complex information, using JavaScript with ES Modules.

Performance Considerations and Image Optimization

As a website dealing with art, visual quality is paramount, but a decrease in display speed due to it is unacceptable. I optimized performance in the following aspects:

• Responsive Images: I fully adopted the <picture> tag to deliver optimal images (standard images and @2x high-resolution images) according to device screen size and resolution, from smartphones to PCs.
• LCP Optimization: To improve LCP (Largest Contentful Paint), which most impacts the perceived speed of a page, I intentionally specified loading="eager" for essential images in the opening sequence, prompting early loading by the browser.
• Scroll Control: To prevent the previously viewed position from being displayed upon page reload, I used inline JavaScript to immediately reset the scroll position to the top, ensuring the site always starts from the intended state (opening).