Project Overview and Role

This project is a special campaign LP (landing page) to promote voting and entries, commemorating the "Hamamatsu Early Race AutoRace.JP Voting Cup Otomocchi Cup" of autorace. The target audience is existing autorace fans and AutoRace.JP voting members, and the objective was to concisely convey the campaign's appeal and smoothly guide them to the entry button.

In this project, I was responsible for all aspects of front-end development. While accurately reproducing the visual design intent, I designed and implemented solutions to enhance user experience and operational efficiency from a technical perspective.

Technologies Used

• HTML5
• CSS3
• JavaScript (ES6+)
• jQuery
• Destyle.css (Reset CSS)
• Google Tag Manager
• Adobe Fonts / Google Fonts

By adopting jQuery, while ensuring consideration for legacy browsers and rapid DOM manipulation, I combined modern CSS design and performance measures to build a stable and efficient development environment.

My Design and Implementation Philosophy

Device-Agnostic Responsive Design

I implemented a precise responsive design to ensure the campaign's appeal is maximized across all devices, from smartphones to PCs. Specifically, I designed toggle classes like sp_none and pc_none to display different images and line break positions for PC and smartphone, ensuring layouts optimized for each device's screen width and maintaining readability.

Structural Design Considering Semantics and SNS Spreadability

In the site's structural design, I appropriately used HTML5 semantic tags such as section, footer, and figure. This ensured that search engines and assistive technologies could correctly understand the content's context.

Additionally, to enhance the campaign's spreadability, I meticulously configured Open Graph Protocol (OGP) and Twitter Cards metadata. This ensured that the intended thumbnail image and description text were accurately displayed when shared on social media, aiming to improve the click-through rate.

Performance Measures Focused on Display Speed

To prevent user abandonment and provide a comfortable browsing experience, I implemented solutions with page display speed (Core Web Vitals) in mind. Specifically, for loading external Web fonts (Google Fonts, Adobe Fonts), I implemented accelerated DNS resolution using the <link rel="preconnect"> tag and avoided rendering-blocking by specifying CSS display=swap, thereby achieving early text display.

CSS Design for Enhanced Maintainability and Consistency

First, I introduced 'Destyle.css', a modern reset CSS, to absorb differences in default styles across browsers. This established a consistent styling foundation. Furthermore, I designed reusable utility classes such as inner (center-aligned container) and btn_entry (common button) to reduce the amount of CSS code and enhance overall site design consistency and maintainability.