Resumen del Proyecto

AutoRace.JP Fui responsable de la producción de la página de destino (LP) para la "Campaña de Carnaval de Puntos de Otoño" de AutoRace.JP. El objetivo de este proyecto era promover la inscripción en la gran campaña de otoño entre los miembros votantes existentes, aumentar el monto de las apuestas y fomentar el registro para la vinculación con LINE. Nos propusimos diseñar la información e implementar la interfaz de usuario de tal manera que los usuarios objetivo pudieran comprender intuitivamente los beneficios y completar la acción (registro) sin dudarlo.

Pila Tecnológica Utilizada

En este proyecto, seleccionamos la siguiente pila tecnológica para construir un entorno de frontend estable y de fácil mantenimiento.

• HTML5
• CSS3
• JavaScript (ES6+)
• jQuery
• Adobe Fonts (fuentes web)

Diseño e Implementación Minuciosos

Para la LP de la campaña, priorizamos la "claridad" y la "ruta hacia la conversión", y nos enfocamos en los siguientes puntos para su diseño e implementación.

1. Diseño CSS con consideraciones de Mantenibilidad y Escalabilidad

Para permitir una rápida reutilización en futuras campañas y facilitar pequeñas modificaciones, introdujimos el concepto BEM (Bloque, Elemento, Modificador) en el diseño CSS. Clasificamos los nombres de las clases con prefijos como "p-" (Proyecto), "c-" (Componente) y "u-" (Utilidad), clarificando así sus respectivos roles y alcances.

Este diseño permitió prevenir conflictos de estilos y mejoró significativamente la legibilidad y mantenibilidad del código.

2. Diseño Responsivo que Equilibra Rendimiento y UI

Implementamos un diseño responsivo preciso para ofrecer una experiencia de visualización óptima en todos los dispositivos, desde smartphones hasta PCs.

Especialmente en los elementos visuales principales y las ilustraciones clave, no nos limitamos a escalar las imágenes, sino que <picture> utilizamos activamente la etiqueta. Esto nos permitió entregar imágenes optimizadas (para PC/para smartphone) según el ancho de pantalla del dispositivo, mejorando la velocidad de visualización (LCP) y la calidad de la interfaz de usuario, especialmente en dispositivos inteligentes.

3. Marcado HTML que Garantiza Accesibilidad y Lógica

Para que los usuarios puedan acceder correctamente a la información, se implementó un marcado HTML semántico riguroso.<header>, <main>, <article>, <section> Se colocaron adecuadamente etiquetas como, para clarificar la estructura del documento.

Además, en secciones donde el usuario necesita entender la información paso a paso, como "Pasos para la vinculación con LINE" y "Condiciones de aplicación", se <ol> (lista ordenada) para asegurar el flujo lógico de la información a nivel de estructura HTML.

4. Diseño de Flujo de Conversión para Maximizar Resultados

Para alcanzar los objetivos de la LP de la campaña (registro y vinculación con LINE), nos enfocamos en un diseño de flujo que incentivara la acción del usuario. Presentamos los beneficios de la campaña (aumento de la probabilidad de ganar, beneficios por vinculación con LINE) de forma visualmente clara y explicamos el flujo de aplicación con diagramas, reduciendo así las barreras psicológicas para el usuario. Los botones de registro se colocaron varias veces en momentos oportunos para que el usuario pudiera actuar de inmediato en el momento en que deseara "registrarse".