Project Overview
AutoRace.JP We were responsible for the overall front-end development of a landing page (LP) aimed at announcing and accepting entries for AutoRace.JP's "Autumn Campaign (November)". We aimed for UI/UX design that intuitively conveys the campaign's appeal to target auto race fans and voting members, encouraging smooth entry.
Technology Stack Adopted
- HTML5
- CSS3 (Sass/SCSS)
- JavaScript (ES6+)
- jQuery
- Adobe Fonts (Web Fonts)
- Google Tag Manager (GTM)
We selected these technologies to build a modern and efficient development environment that balances maintainability and performance.
My Dedicated Design and Implementation
CSS Design Considering Maintainability and Scalability
To quickly respond to future campaign developments and changes, we introduced BEM (MindBEM/FLOCSS) concepts into the CSS design. Specifically, class names are clearly separated as follows:
- Project (
p-): Page-specific layouts (e.g.,p-hero,p-courses__item) - Component (
c-): Reusable UI parts across the site (e.g.,c-button,c-card) - Utility (
u-): General-purpose auxiliary styles (e.g.,u-pc-hidden,u-sp-hidden)
This design prevents style conflicts, significantly enhances code readability and reusability, and achieves robust styling.
Device-Optimized Responsive Implementation
To provide an optimal information experience on all devices, from smartphones to PCs, we meticulously implemented mobile-first responsive design.
Especially for the main visual (hero section), the <picture> element was adopted. This efficiently delivers different images optimized for PC and smartphone based on the device's screen width (breakpoint), reducing unnecessary data transfer.
Consideration for User Experience (UX) and Performance
To help users achieve their goal (entry) without hesitation, we effectively placed CTA (Call To Action) buttons at the top and middle of the page, ensuring a clear path to conversion.
Furthermore, to improve the page's initial display speed, the defer attribute was added to <script> tags. This allows JavaScript to load and execute asynchronously without blocking HTML parsing, contributing to an improved perceived speed (Core Web Vitals) for users.
Branding Appeal Through Typography
To visually convey the campaign's reliability and appeal, we introduced web fonts (Adobe Fonts). We implemented typography that accurately reflects the design intent, contributing to an enhanced brand image.
