Resumen del Proyecto

Este proyecto consistió en la creación de una landing page (LP) especial para la campaña conmemorativa de la celebración de la "Copa Otomochi" en el sitio oficial de votación de carreras de autos "AutoRace.JP". El objetivo era anunciar la celebración de la carrera y fomentar la inscripción y el voto (más de 1.000 yenes) durante el período de campaña para los miembros votantes existentes y nuevos.

En este proyecto, fui responsable del desarrollo frontend en general. Diseñé e implementé la UI/UX para comunicar directamente el atractivo de la campaña a los aficionados a las carreras de autos, que son el público objetivo, y asegurar un flujo de entrada fluido.

Pila de Tecnología Utilizada

• HTML5
• CSS3
• JavaScript (jQuery)
• Diseño Responsivo (Media Queries)
• CSS de Reset (destyle.css)
• Fuentes Web (Google Fonts, Adobe Fonts)
• GTM (Google Tag Manager)

Seleccioné estas tecnologías para construir un entorno de desarrollo moderno y eficiente. En particular, me aseguré de adoptar destyle.css para minimizar las diferencias de visualización entre navegadores y de introducir fuentes web de acuerdo con las regulaciones de diseño.

Diseño e Implementación que Cuidé Especialmente

Diseño Responsivo Compatible con Todos los Dispositivos

El entorno de navegación de los aficionados a las carreras de autos varía ampliamente, desde la consulta de información detallada en PC hasta la inscripción móvil en smartphones. Por lo tanto, tras optimizar la configuración meta viewport, implementé meticulosamente un diseño responsivo utilizando media queries.

Mediante un diseño de clases CSS claro como sp_none y pc_none, se intercambian la información e imágenes a mostrar en PC y smartphones, logrando una cantidad óptima de información y operabilidad en cada dispositivo.

Marcado que Considera la Accesibilidad y el SEO

Para transmitir la información de la campaña de forma precisa, utilicé etiquetas HTML semánticas como h1, h2 y section de manera adecuada para clarificar la estructura del documento. Esto no solo es una consideración esencial para que los motores de búsqueda comprendan correctamente el contenido (medidas SEO), sino también para garantizar la accesibilidad (a11y) a los usuarios que utilizan lectores de pantalla, entre otros.

Además, configuré de forma exhaustiva metadatos OGP como og:title y twitter:card, diseñando el contenido para que el atractivo de la campaña se transmita correctamente al ser compartido (difundido) en redes sociales.

Base Tecnológica para el Soporte de Operación y Medición

En las iniciativas de campaña, la medición de los efectos posteriores a la implementación es crucial. Introduje Google Tag Manager (GTM) para poder responder rápidamente a análisis futuros y a la adición o modificación de etiquetas publicitarias. Esto permitió establecer un sistema operativo en el que el departamento de marketing puede gestionar las etiquetas de medición de forma flexible sin necesidad de editar directamente el HTML.