Resumen y Rol del Proyecto
Este proyecto consistió en la creación de una página de aterrizaje (LP) especial para la campaña 'Festival de Agradecimiento de Principios de Verano' organizada por el sitio de votación en línea de carreras de motos "AutoRace.JP". El objetivo es comunicar el atractivo de una campaña en la que los miembros votantes existentes y nuevos pueden ganar premios de lujo por un valor total de un millón de yenes, y fomentar la participación.
En este proyecto, fui responsable del desarrollo front-end en general. Capté la intención del diseño y completé el diseño e implementación de la interfaz de usuario para maximizar el deseo de participación del usuario.
Pila de Tecnologías Adoptadas
- HTML5
- CSS3
- JavaScript (jQuery)
- Adobe Fonts (Typekit) / Google Fonts
- Google Tag Manager
Se seleccionaron estas tecnologías y se construyó una página de campaña moderna y atractiva, absorbiendo las diferencias de visualización entre navegadores (introducción de destyle.css) .
Diseño e Implementación Detallados
1. UI Responsiva Optimizada para Dispositivos
Dado que se espera que esta campaña sea accedida tanto desde PC como desde teléfonos inteligentes, implementé un diseño responsivo con precisión. Adopté un diseño que muestra la imagen óptima para cada dispositivo, especialmente en las LP donde los elementos visuales son cruciales.
Específicamente, utilizando clases de control de CSS como sp_none / pc_none se logra una experiencia de usuario cómoda y un rendimiento de visualización optimizado, cambiando claramente entre imágenes horizontales de alta resolución para PC y imágenes verticales optimizadas para teléfonos inteligentes (ej: fv.png y fv_s.png) .
2. Visuales y Tipografía para Mayor Atractivo
Para transmitir la atmósfera festiva de la campaña, se adoptaron encabezados de imagen con un alto valor de diseño (h1, h2). En ese momento, se configuró un texto preciso en el atributo alt, lo que permitió un marcado que garantiza el diseño y considera la accesibilidad y el SEO.
Además, se utilizaron Adobe Fonts (Typekit) y Google Fonts en combinación para lograr una tipografía rica que se alinea con la imagen de marca. Esto permite que la información textual funcione también como parte del atractivo visual.
3. Diseño Orientado a la Difusión en Redes Sociales y la Medición de Datos
Para maximizar la visibilidad de la campaña, se configuraron detalladamente las metaetiquetas OGP (Open Graph Protocol) y Twitter Card, pensando en la compartición en redes sociales. Esto contribuye a mejorar la tasa de clics al mostrar imágenes y títulos atractivos cuando se comparte en LINE, X (anteriormente Twitter), etc.
Además, se implementó Google Tag Manager para establecer un entorno que permite la gestión centralizada de etiquetas de análisis de acceso y medición de efectos publicitarios. Esto soporta el ciclo PDCA de la campaña desde el punto de vista técnico.
4. Diseño de UI que Mantiene el Flujo del Usuario
Dentro de la página de la campaña, se incluyen enlaces al sitio existente de AutoRace.JP, como la página de confirmación de información del miembro. Se configuró correctamente target="_blank" en estos enlaces externos para que los usuarios puedan verificar la información relacionada sin salir de la página actual. Se diseñó una experiencia de usuario fluida que no interfiere con el flujo de entrada.
