Project Overview
AutoRace.JP was responsible for creating the landing page (LP) for the 'Autumn Point Carnival Campaign' for. The purpose of this project was to encourage existing betting members to enter the large autumn campaign, increase betting amounts, and promote LINE account linking registration. We aimed for information design and UI implementation that would allow target users to intuitively understand the benefits and complete the action (entry) without hesitation.
Adopted Technology Stack
In this project, we selected the following technology stack to build a stable and highly maintainable front-end environment.
- HTML5
- CSS3
- JavaScript (ES6+)
- jQuery
- Adobe Fonts (Web Fonts)
Careful Design and Implementation
As a campaign LP, we prioritized 'clarity' and 'conversion paths', and designed and implemented with particular attention to the following points.
1. CSS Design Considering Maintainability and Scalability
To quickly respond to reuse in future campaigns and minor modifications, we introduced the BEM (Block, Element, Modifier) concept into our CSS design. Class names are categorized with prefixes such as 'p- (Project)', 'c- (Component)', and 'u- (Utility)', clarifying their respective roles and scope of influence.
This design prevented style conflicts and significantly enhanced code readability and maintainability.
2. Responsive Design Balancing Performance and UI
We implemented precise responsive design to provide an optimal browsing experience on all devices, from smartphones to PCs.
Especially for hero visuals and main illustrations, instead of simply scaling images, <picture> tags were actively utilized. This allowed us to deliver optimized images (for PC/SP) according to the device screen width, thereby improving display speed (LCP) and UI quality, especially on smart devices.
3. HTML Markup Ensuring Accessibility and Logical Structure
We thoroughly implemented semantic HTML markup to ensure users could access information correctly. <header>, <main>, <article>, <section> tags were appropriately placed to clarify the document structure.
Furthermore, in sections where users needed to understand information step-by-step, such as 'LINE Linking Procedure' and 'Application Requirements', <ol> (ordered list) was used to ensure the logical flow of information at the HTML structure level.
4. Conversion Path Design to Maximize Conversions
To achieve the campaign LP's goals (entry and LINE linking), we focused on designing conversion paths that encourage user action. We visually presented the campaign benefits (increased winning probability, LINE linking rewards) clearly and illustrated the application flow, thereby reducing psychological hurdles for users. Entry buttons were placed multiple times at appropriate timings, ensuring users could take immediate action the moment they felt like 'I want to enter'.
