Resumen del proyecto y responsabilidades

Fui responsable del desarrollo front-end general en la creación de la página de aterrizaje de la campaña «Festival de Agradecimiento de Verano O-chūgen» para Auto Race.
Mis principales responsabilidades fueron el diseño e implementación de CSS con Sass (SCSS), la construcción del entorno de desarrollo utilizando `npm scripts` y el marcado HTML.

Pila tecnológica adoptada

En este proyecto, seleccionamos la siguiente pila tecnológica, considerando la eficiencia del desarrollo, la calidad del código y la mantenibilidad futura.

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

Utilizamos estas herramientas para construir un entorno de desarrollo moderno y de alta mantenibilidad.

Diseño e implementación meticulosos

Como página de aterrizaje de campaña, nos centramos en transmitir información precisa a los usuarios objetivo y proporcionar una experiencia fluida, así como en optimizar el proceso de desarrollo.

Construcción de un entorno que maximice la experiencia de desarrollo (DX)

Para mejorar drásticamente la eficiencia del desarrollo, organizamos sistemáticamente los `npm scripts`.

• sass:watch: Detecta automáticamente los cambios en los archivos Sass y los compila instantáneamente a CSS.
• serve: Inicia un servidor local con live-server y permite la verificación de visualización en tiempo real.
• build:css: Ejecuta Autoprefixer para generar CSS para producción.
• prettify: Automatiza el formato de código con Prettier.

Utilizando npm-run-all, hicimos posible que estas tareas se ejecutaran en paralelo y secuencialmente, creando un entorno donde los desarrolladores pudieran concentrarse en la codificación.

Diseño CSS que asegura mantenibilidad y calidad

Adoptamos Sass (SCSS) para escribir CSS. Se eliminó la duplicación de código utilizando variables y mixins.
Además, introdujimos un mecanismo en el que `Autoprefixer` añade automáticamente prefijos de proveedor durante la construcción, basándose en la definición de `browserslist` (`last 2 versions`) en `package.json`. Esto redujo los costos de gestión manual y aseguró la compatibilidad de visualización en los principales navegadores.

Búsqueda de accesibilidad y semántica

Implementamos un marcado HTML semántico riguroso para que todos los usuarios pudieran acceder a la información.

Diseñamos adecuadamente elementos de punto de referencia como header, main, article, section, y niveles de encabezado desde `h1` hasta `h4`. Además, configuramos atributos `alt` en todas las imágenes sin falta, prestando atención a los usuarios que utilizan lectores de pantalla, entre otros.

Consideración del rendimiento y la interfaz de usuario (UI)

Nos enfocamos en los detalles de la interfaz de usuario para no comprometer la experiencia del usuario.
Implementamos un diseño responsivo que optimiza la visualización desde teléfonos inteligentes hasta PC. En particular, para la imagen principal (hero image), utilizamos el elemento `<picture>` para alternar entre `hero-visual-sp.png` y `hero-visual-pc.png` según el ancho del dispositivo, lo que evita la carga de datos de imagen innecesarios y optimiza el rendimiento de la visualización.

Diseño OGP para maximizar el efecto de la campaña

Dada la naturaleza de esta LP, la difusión en redes sociales es extremadamente importante. Por ello, diseñamos e implementamos de manera exhaustiva el OGP (Open Graph Protocol), incluyendo `og:title`, og:image, og:description y twitter:card. Esto se hizo para asegurar que el atractivo de la campaña se transmita de manera precisa cuando se comparta en plataformas como LINE y X (antes Twitter).