hundred.jp コーポレートサイト、全面リニューアル公開のお知らせ

合同会社HUNDRED（本社：東京都渋谷区／代表：佐藤 諒）は本日、コーポレートサイト hundred.jp を全面リニューアルし、公開しました。旧サイトから完全自作カスタムテーマへ再構築、「常に100歩先へ」という HUNDRED のブランドコピーを技術と体験の両面で体現する新しい情報発信基盤へと生まれ変わっています。本記事では、リニューアルの背景・意図・実装の要点、そして今後の展開についてご紹介します。

なぜ、いま全面リニューアルなのか

HUNDRED は 2023年6月の設立以来、DJ／アカデミー／クラブイベント／クリエイティブ／音楽制作／プロダクトの6事業を並行して育て、シーンの一歩先を鳴らし続けてきました。所属タレントは順調に増え、現在は個人10名＋ユニット1組の合計11名のロースターを抱えています。事業の拡張とタレントの増加に伴い、旧サイトでは 「情報構造の複雑化」「表示速度の低下」「モバイル最適化の不足」「更新運用の煩雑さ」 の4点が徐々に大きな課題として立ち上がっていました。

特に旧サイトは細かなブランド表現の一貫性を維持するには限界があり、また新しいタレントを追加するたびに一から手作業でページを組む必要があるなど、運営効率にも課題が残っていました。今回のリニューアルは、単なる「見た目の刷新」ではなく、事業が拡張し続けても破綻しない アーキテクチャの再設計 を主目的に据えています。

デザインコンセプト：Voyeur Vérité × Ice Cyan

デザインの方向性は「Voyeur Vérité（覗き見のリアリティ）」というコンセプトに設定しました。ドキュメンタリー的な写真の生々しさと、余白で読ませるエディトリアルの間合いを両立させ、雑誌のような余韻を残す構成です。基調カラーは限りなく黒に近い #050505、アクセントには Ice Cyan #6EE7FF を採用し、シーンの温度感と近未来感を同居させました。

タイポグラフィは英字を Inter、日本語を Noto Sans JP、装飾的な見出しには Playfair Display のイタリックを差し込むことで、無機的になりすぎない編集的なリズムを持たせています。ページ全体を通じて文字が「呼吸」するように、余白階層は 24 / 32 / 40 / 60 / 100 の5ステップで統一。読み手のスクロール速度を制御しながら、ブランドの世界観に没入できる情報密度を心がけました。

技術：Three.js による粒子演出と 3D旋回ロゴ

トップページの HERO には Three.js を使った動的粒子背景を実装しています。読み込み直後にロゴが粒子群として結像し、スクロールに応じて霧散して次のセクションへつなぐ——映画の予告編のような一連の演出を組みました。粒子座標は事前に PHP 側で計算し、SEO とパフォーマンスを損なわず、動的表現だけを JS で担う二層構造としています。

タレント詳細ページには、それぞれのアーティストのロゴを Three.js で押し出した 「3D旋回ロゴ」 を配置しました。マウスカーソルの動きに追従して yaw / pitch がわずかに揺れる仕様で、ページに入った瞬間に「空間が生きている」ような感覚を狙っています。ロゴが未登録のタレントには、英字名を canvas テクスチャ化してフォールバック表示する仕組みも組み込み済みです。

タレント11名の個別ページを新規構築

PHILLY / RYO2 / TAISEI / TRID3NT / TSUMI / DOREMI / Tomo / NANAMI / LanN / Soju / Teto——現ロースター全11名（個人10名＋ユニット1組）の個別プロフィールページを新規に構築しました。プロフィール、SNS、ジャンル、出演履歴、所属ユニット（該当者のみ）まで、CMS 上で更新可能な統一テンプレートで管理しています。テンプレート統一により、新しいタレントを迎える際にも数分でページを立ち上げられる運用に到達しました。

謝辞

今回のリニューアルは、所属タレント全員のプロフィール素材協力、そして日々シーンで表現し続けるアーティストたちの熱量があって成立しました。旧サイトから継続してご覧いただいている皆様、そして初めて hundred.jp を訪れる皆様、引き続き HUNDRED をよろしくお願いいたします。

シーンの一歩先を、鳴らし続けます。