プロジェクト概要
世界最大級のレゲエ専門レコード店・レーベルである「Dub Store Records」の公式ECサイト新規立ち上げプロジェクトです。ジャマイカ音楽の歴史とカルチャーを体現する重厚なブランディングから、世界中のレコード愛好家（ディガー）がストレスなく商品を探せるECサイトとしての情報設計まで、ディレクションおよびUI/UXデザインを担当。バックエンドとの分業体制のもと、洗練されたデザイン制作とコーディング実装を担当しました。
基本情報
サイト名：Dub Store Records
URL：https://www.dubstorerecords.com/
担当領域
Webディレクター / UI・UXデザイナー / フロントエンドエンジニア
（要件定義・ディレクション / 全体UI・UXデザイン / HTML・CSSコーディング）
※バックエンド・ECシステムの実装は別チームへの引き継ぎ・連携にて対応
プロジェクトの目的と課題
-
ブランド価値の視覚化: 「本物のジャマイカ音楽を伝える」というレーベルの持つ歴史的な重厚感や権威性を、デジタル上でノイズなく表現すること。
-
ディガー（探求者）のためのUI構築: 膨大なカタログの中から、ユーザーが直感的にレコードのジャケットアートを視認し、目的の音源へスムーズに辿り着ける高い一覧性と検索性を持たせること。
-
分業を見据えたフロントエンド設計: 多言語対応（En/JP）や商品絞り込み（フィルター）など、複雑なECシステムをバックエンドエンジニアがスムーズに実装できるよう、汎用性と拡張性の高いクリーンなコード構造でコーディングを行うこと。
施策とこだわったポイント
1. レコードジャケットを「アート」として際立たせるダークUIとグリッド設計
商品一覧（Catalog）ページにおいて、最もこだわったのは「商品（レコードジャケット）自身が主役になること」です。あえてサイト全体の背景を漆黒のダークトーンに設定し、UIの装飾や枠線を極限まで削ぎ落としました。これにより、色鮮やかなジャケットデザインが暗闇に浮かび上がるように際立ち、音楽を深く愛するユーザーがレコード屋でディグる時のような、視覚的な高揚感と圧倒的な一覧性を実現しています。
2. 歴史とカルチャーへの没入感を生む、モノトーンのヴィジュアル構築
TOPページやAbout usページでは、ジャマイカ音楽のルーツを感じさせるモノクロのヴィンテージ写真を画面全体（フルブリード）に配置。そこにクラシカルなセリフ体（明朝体）のタイポグラフィを組み合わせることで、世界的な専門レーベルにふさわしい「重厚感」と「本物感」を表現しました。単なるECサイトではなく、カルチャーをアーカイブするメディアとしての空気感を作り上げています。
3. ミニマリズムを極めたUIパーツと、緻密なフロントエンド実装
ナビゲーションメニューは左サイドへコンパクトに固定し、Contactページのフォームには透過と極細のラインのみを用いるなど、コンテンツの邪魔をしないミニマルで洗練されたUIを徹底しました。フロントエンドの実装においては、レスポンシブ対応はもちろん、多言語切り替えのトグルや商品フィルターの挙動など、バックエンド開発者がシステム（動的処理）を組み込みやすい正確で無駄のないコーディングを行い、スムーズなプロジェクト進行と高品質なリリースを実現しました。
成果・評価
レーベルの美学を体現する、グローバルスタンダードなEC基盤の完成
音楽の歴史を伝える美しい世界観と、レコードコレクターが求めるストイックな検索性（UI）を融合させました。デザインの上流工程から、バックエンド連携を見据えたフロントエンド実装までをシームレスに手掛け、世界中のユーザーに向けてレーベルの魅力を発信する、美しく機能的なグローバルECサイトの基盤を作り上げました。
