Project Overview

This project involves building 'K-MUSIC,' an official information portal site for KDDI to introduce Korea's diverse music scene to Japan and support artists' activities. It was designed as a platform to consolidate events, featured articles, and artist information, targeting not only K-POP fans but also a wide range of Korean culture enthusiasts.

In this project, I was responsible for overall front-end development, as well as WordPress design and construction.

Adopted Technology Stack

• CMS: WordPress (Custom Theme Development)
• HTML: HTML5
• CSS: CSS3 (destyle.css)
• JavaScript: jQuery, Slick Carousel, Lightbox2
• Others: Font Awesome, Google Fonts, Google Analytics

I selected these technologies to build a modern and efficient development environment that balances client operability with user convenience.

Design and Implementation I Focused On

WordPress Design Maximizing CMS Flexibility and Operability

Since this site is a portal with frequent information updates, WordPress was chosen as the CMS. Rather than simply using an existing theme, a dedicated custom theme named 'kmusic' was developed from scratch.

Specifically, core site content such as 'Event,' 'Feature,' and 'Artist' were designed and implemented as 'Custom Post Types.' This established a system where clients (site operators) can input and update information directly from an intuitive administration screen without any HTML knowledge.

UI/UX Design to Attractively Display Diverse Content

I focused on dynamic UI so that users can reach their desired articles even from a vast amount of information.

• Introduction of Slick Carousel: Multiple carousel sliders were implemented on the top page. Using the Slick Carousel library, rich and dynamic interfaces were realized for featured articles in the first view, event listings, artist introductions, and more.
• Interactive UI: Leveraging jQuery, interactions such as a hamburger menu for smartphone display and image modal display via Lightbox2 were incorporated to provide a smooth user experience (UX).

Consideration for Performance and Accessibility

To ensure reliability as a media site, the following points were considered during implementation.

1. Semantic HTML: To ensure the site's structure is correctly conveyed to search engines and assistive technologies, <header>, <main>, <nav>, <figure> semantic tags were used appropriately to ensure accessibility (a11y).
2. Responsive Design: In addition to the viewport settings, styles were separated into common.css (common) and top.css (page-specific), and thorough responsive design was implemented to display the optimal layout from mobile to PC.
3. Image Optimization: srcset attributes and sizes attributes were used appropriately to ensure that optimal images are delivered according to the device's screen size. For the main image in the first view, fetchpriority="high" was specified to improve perceived loading speed (Core Web Vitals).

Code Design Considering Maintainability and Scalability

To flexibly accommodate future feature additions and design changes, code maintainability was prioritized. CSS first reset browser differences with destyle.css then components were designed with generic class names such as box_card and btn01. This increased style reusability and achieved efficient development and maintenance.