プロジェクト概要と役割

これは、グッドスマイルカンパニー発の本格ドールブランド「Harmonia bloom」の単独特別展『華と横浜のあのこ展』の開催を告知するために制作した、特設ランディングページ（LP）です。主なターゲットは、既存のブランドファン、ドール愛好家、およびイベント会場（横浜人形の家）への来場を検討している方々です。

私はこのプロジェクトにおいて、フロントエンド開発全般を担当しました。ブランドの持つ繊細な世界観をWeb上で表現しつつ、イベントの魅力を最大限に伝えるための情報設計とUI実装を行いました。

採用した技術スタック

• HTML5
• CSS3 (レスポンシブデザイン)
• JavaScript (jQuery 3.6.0)
• Slick Carousel (スライダーライブラリ)
• Lightbox2 (画像モーダルライブラリ)
• Google Fonts (Webフォント)
• Google Analytics (GA4 / UA)

jQueryをベースに、SlickやLightboxといった信頼性の高いライブラリを組み合わせることで、リッチなインタラクションを要求されるイベントLPの要件に、効率的かつ安定的に応える開発環境を構築しました。

こだわった設計と実装

ブランドの世界観と情報へのアクセシビリティ

ドールの持つ優雅で繊細なイメージをWebサイトに落とし込むため、Webフォント（Lora, Noto Serif JP）を採用し、可読性を保ちつつデザイン性の高いタイポグラフィを実現しました。また、Google Fontsの読み込み時にはpreconnectを指定し、フォント読み込みのパフォーマンスを最適化しています。

あらゆるユーザーが情報にアクセスできるよう、SNSでの拡散力を高めるOGP（Open Graph Protocol）やTwitter Cardのメタデータを詳細に設定し、シェアされた際にもイベントの魅力が正確に伝わるよう配慮しました。

インタラクティブなUI/UXの実装

本プロジェクトはドールというビジュアルが主役のため、その魅力を最大限に伝えるUIにこだわりました。

• Slick Carouselの活用: 「展示内容」や「先行発売」セクションなど、多数の画像を扱う箇所ではSlick Carouselを導入しました。ユーザーがストレスなく多くのドール写真や製品情報を閲覧できるよう、直感的なスライダーUIを実装しました。
• Lightbox2による画像体験: ギャラリー内の画像は、クリックでモーダル表示（拡大表示）するLightbox2を組み込みました。ユーザーはページ遷移することなく、ドールの詳細なビジュアルを確認できます。
• 動的なUIコンポーネント: jQueryを活用し、スマートフォン表示時のハンバーガーメニューや、キャンペーン規約を表示するモーダルウィンドウなど、動的なUIコンポーネントを実装し、快適な操作性を追求しました。

堅牢なCSS設計とレスポンシブ対応

本サイトはイベントLPとして、PCからスマートフォンまで多様なデバイスからのアクセスが想定されます。私は、メディアクエリを駆使したレスポンシブデザインを精密に実装し、どのデバイスでもレイアウトが崩れることなく、最適な情報体験を提供できるように設計しました。

CSSは、モダンなリセットCSSであるdestyle.cssをベースに、.inner（コンテンツ幅制御）や.pc_none（デバイス別表示切替）といった汎用クラスと、セクション固有のIDを組み合わせ、保守性と拡張性を両立させた設計を採用しました。