Project Overview
This project involved creating a special landing page (LP) for the "Otomocchi Cup" commemorative campaign on AutoRace's official betting site, "AutoRace.JP". The objective was to announce the race event and encourage existing and new betting members to enter and vote (1,000 JPY or more) during the period.
In this project, I was responsible for overall front-end development. I designed and implemented UI/UX to directly convey the campaign's appeal to the target users, AutoRace fans, and ensure a smooth entry flow.
Technologies Adopted
- HTML5
- CSS3
- JavaScript (jQuery)
- Responsive Design (Media Queries)
- Reset CSS (destyle.css)
- Web Fonts (Google Fonts, Adobe Fonts)
- GTM (Google Tag Manager)
I selected these technologies to build a modern and efficient development environment. In particular, I thoroughly adopted destyle.css to minimize display differences across browsers and introduced web fonts in accordance with design regulations.
My Specific Design and Implementation Choices
Responsive Design for All Devices
AutoRace fans' browsing environments vary widely, from detailed information viewing on PCs to on-the-go entry on smartphones. Therefore, after optimizing meta viewport settings, I precisely implemented responsive design using media queries.
sp_none and pc_none clear CSS class design allowed me to switch information and images displayed on PCs and smartphones, achieving optimal information volume and usability on each device.
Markup Considering Accessibility and SEO
To accurately convey campaign information, h1, h2, section semantic HTML tags were used appropriately to clarify the document structure. This is not only for search engines to correctly understand the content (SEO measures) but also an essential consideration for ensuring accessibility (a11y) for users who use screen readers, etc.
Additionally, og:title and twitter:card OGP metadata was comprehensively set to ensure the campaign's appeal is correctly conveyed when shared (spread) on social media.
Technical Foundation Supporting Operations and Measurement
Measuring the effectiveness after implementation is crucial for campaign initiatives. Google Tag Manager (GTM) was introduced to enable quick responses to future analysis and additions/changes of advertising tags. This established an operational system where the marketing department can flexibly manage measurement tags without directly editing the HTML.
