Project Overview and Responsibilities

I was responsible for the entire front-end development of the Autorace 'Summer O-chugen Appreciation Festival' campaign LP.
My main responsibilities included CSS design and implementation using Sass (SCSS), building development environments using `npm scripts`, and HTML markup.

Adopted Technology Stack

For this project, we selected the following technology stack, considering development efficiency, code quality, and future maintainability.

• Sass (SCSS)
• PostCSS (Autoprefixer)
• npm scripts (npm-run-all)
• Prettier
• jQuery
• Adobe Fonts / Google Fonts
• Google Tag Manager (GTM)

Utilizing these tools, we built a modern and highly maintainable development environment.

Meticulous Design and Implementation

As a campaign LP, we focused on accurately conveying information to target users and providing a smooth experience, as well as streamlining the development process.

Building an Environment to Maximize Developer Experience (DX)

To dramatically improve development efficiency, we systematically organized `npm scripts`.

• sass:watch: Automatically detects changes in Sass files and compiles them to CSS instantly.
• serve: Launches a local server with live-server to enable real-time display confirmation.
• build:css: Executes Autoprefixer to generate production-ready CSS.
• prettify: Automates code formatting using Prettier.

By using npm-run-all, these tasks can be processed in parallel or sequentially, creating an environment where developers can concentrate on coding.

CSS Design Ensuring Maintainability and Quality

Sass (SCSS) was adopted for CSS writing. Variables and mixins are utilized to eliminate code duplication.
Furthermore, based on the `browserslist` definition (`last 2 versions`) in `package.json`, we introduced a mechanism where `Autoprefixer` automatically adds vendor prefixes during the build process. This reduces manual management costs while ensuring display compatibility across major browsers.

Pursuit of Accessibility and Semantics

To ensure all users can access information, we thoroughly implemented semantic HTML markup.

header, main, article, section landmark elements, and heading levels from `h1` to `h4` were appropriately designed. Additionally, `alt` attributes were set for all images without omission, considering users who utilize screen readers and similar tools.

Consideration for Performance and UI

We paid close attention to the details of the UI to ensure a seamless user experience.
We implemented responsive design for optimal display from smartphones to PCs. For hero images in particular, we used the `<picture>` element to switch between `hero-visual-sp.png` and `hero-visual-pc.png` depending on the device width, thereby preventing unnecessary image data loading and optimizing display performance.

OGP Design to Maximize Campaign Effectiveness

Given the nature of this LP, social media dissemination is crucial. Therefore, we comprehensively designed and implemented OGP (Open Graph Protocol) elements such as `og:title`, `og:image`, `og:description`, and `twitter:card`. This ensures that when shared on platforms like LINE or X (formerly Twitter), the campaign's appeal is accurately conveyed.