Resumen y Rol del Proyecto

Este proyecto es una página de campaña especial (Landing Page) diseñada para promover la votación y las inscripciones, conmemorando la celebración de las 'Hamamatsu Early Races AutoRace.JP Copa de Votación Otomocchi Cup' de AutoRace.El público objetivo son los fans existentes de AutoRace y AutoRace.JP miembros de votación, y su objetivo es comunicar de manera concisa el atractivo de la campaña y guiar sin problemas a los usuarios al botón de inscripción.

En este proyecto, fui responsable del desarrollo front-end en general. Realicé el diseño e implementación para mejorar la experiencia del usuario y la eficiencia operativa desde una perspectiva técnica, reproduciendo con precisión la intención del diseño visual.

Pila Tecnológica Adoptada

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

Al adoptar jQuery, se construyó un entorno de desarrollo estable y eficiente, combinando un diseño CSS moderno y medidas de rendimiento, al mismo tiempo que se consideraba la compatibilidad con navegadores antiguos y se lograba una manipulación rápida del DOM.

Diseño e Implementación que Cuidé Especialmente

Diseño Responsivo Independiente del Dispositivo

Se implementó un diseño responsivo preciso para asegurar que el atractivo de la campaña se transmita al máximo en todos los dispositivos, desde smartphones hasta PCs. En particular, se diseñaron clases de alternancia como sp_none y pc_none, y se optimizó la visualización de imágenes y posiciones de salto de línea para PC y smartphones, asegurando un diseño y legibilidad óptimos para el ancho de pantalla de cada dispositivo.

Diseño Estructural Considerando la Semántica y la Difusión en Redes Sociales

En el diseño estructural del sitio, se utilizaron adecuadamente etiquetas semánticas de HTML5 como section, footer y figure. Esto se hizo para asegurar que los motores de búsqueda y las tecnologías de asistencia pudieran comprender correctamente el contexto del contenido.

Además, para aumentar la difusión de la campaña, se configuraron detalladamente los metadatos de OGP (Open Graph Protocol) y Twitter Cards. Se controló la visualización precisa de la imagen en miniatura y la descripción intencionadas al compartir en redes sociales, con el objetivo de mejorar la tasa de clics.

Medidas de Rendimiento Centradas en la Velocidad de Visualización

Para prevenir el abandono de usuarios y ofrecer una experiencia de navegación cómoda, se implementaron medidas centradas en la velocidad de visualización de la página (Core Web Vitals). Específicamente, en la carga de fuentes web (Google Fonts, Adobe Fonts), que son recursos externos, se implementó la aceleración de la resolución DNS mediante la etiqueta <link rel="preconnect"> y la prevención del bloqueo de renderizado mediante la especificación display=swap en CSS, logrando así una visualización temprana del texto.

Diseño CSS que Mejora la Mantenibilidad y la Consistencia

Primero, se introdujo 'Destyle.css', un moderno CSS de restablecimiento, para absorber las diferencias en los estilos predeterminados entre navegadores, estableciendo una base de estilo consistente. Además, se diseñaron clases de utilidad reutilizables como inner (contenedor centrado) y btn_entry (botón común), reduciendo la cantidad de código CSS y mejorando la uniformidad del diseño y la mantenibilidad de todo el sitio.