プロジェクト概要
このプロジェクトは、KDDIが韓国の多様な音楽シーンを日本に紹介し、アーティストの活動をサポートするための公式情報ポータルサイト「K-MUSIC」の構築です。K-POPファンだけでなく、幅広い韓国カルチャーのファンをターゲットに、イベント、特集記事、アーティスト情報を集約するプラットフォームとして設計しました。
私はこのプロジェクトにおいて、フロントエンド開発全般、およびWordPressの設計・構築を担当しました。
採用した技術スタック
- CMS: WordPress (カスタムテーマ開発)
- HTML: HTML5
- CSS: CSS3 (destyle.css)
- JavaScript: jQuery, Slick Carousel, Lightbox2
- その他: Font Awesome, Google Fonts, Google Analytics
これらの技術を選定し、クライアントの運用性とユーザーの利便性を両立する、モダンで効率的な開発環境を構築しました。
私がこだわった設計と実装
CMSの柔軟性と運用性を最大化するWordPress設計
本サイトは情報更新が頻繁に行われるポータルサイトであるため、CMSとしてWordPressを選定しました。単なる既存テーマの利用ではなく、「kmusic」という専用のカスタムテーマをゼロから開発しました。
特に、「Event」「Feature」「Artist」といったサイトの核となるコンテンツを、それぞれ「カスタム投稿タイプ」として設計・実装しました。これにより、クライアント（サイト運用担当者）がHTMLの知識を一切必要とせず、直感的な管理画面から情報を入稿・更新できる体制を確立しました。
多彩なコンテンツを魅力的に見せるUI/UX設計
ユーザーが膨大な情報の中からでも目的の記事にたどり着けるよう、動的なUIにこだわりました。
- Slick Carouselの導入: トップページには複数のカルーセルスライダーを実装しました。ファーストビューの特集記事、イベント一覧、アーティスト紹介など、Slick Carouselライブラリを用いて、リッチで動きのあるインターフェースを実現しました。
- インタラクティブなUI: jQueryを活用し、スマートフォン表示時のハンバーガーメニューや、Lightbox2による画像モーダル表示など、スムーズなユーザー体験（UX）を提供するためのインタラクションを組み込みました。
パフォーマンスとアクセシビリティへの配慮
メディアサイトとしての信頼性を担保するため、以下の点に配慮して実装しました。
- セマンティックHTML: サイトの構造が検索エンジンや支援技術に正しく伝わるよう、
<header>,<main>,<nav>,<figure>といったセマンティックタグを適切に使用し、アクセシビリティ（a11y）を確保しました。 - レスポンシブデザイン:
viewportの設定はもちろん、common.css（共通）とtop.css（ページ固有）にスタイルを分離し、モバイルからPCまで最適なレイアウトで表示されるレスポンシブ対応を徹底しました。 - 画像最適化:
srcset属性とsizes属性を適切に用い、デバイスの画面サイズに応じた最適な画像が配信されるよう設定しました。ファーストビューのメイン画像にはfetchpriority="high"を指定し、体感表示速度（Core Web Vitals）の向上を図りました。
保守性と拡張性を考慮したコード設計
将来的な機能追加やデザイン変更に柔軟に対応できるよう、コードの保守性を重視しました。CSSは destyle.css でブラウザ間の差異をリセットした上で、box_card や btn01 といった汎用的なクラス名でコンポーネントを設計しました。これにより、スタイルの再利用性を高め、効率的な開発とメンテナンスを実現しています。
