BrandJapanPicked 2026.09.22

SCRAMBLE LABEL

ブランドのWebデザイン参考 — 音楽レーベル

サイトを見るscramblelabel.jp

scramblelabel.jp開く ↗

サイトを開く ↗

Editor's note — 編集部の視点

Sのロゴを短冊切りにして、わざと崩してる。

渋谷発の音楽レーベルSCRAMBLE LABELの公式サイトは、短冊状にずらしたSエンブレムと規制線風のテープ帯で、黒と白だけの画面にストリートのノイズを持ち込んでいる。

LunaType & Whitespace

ナビの末尾まで打ったカンマは、ちょっと気取りすぎ。でも崩すのはロゴだけで、本文はMontserratのまま素直に組んでる。騒がしいのに、文字はちゃんと読める。……いいね！！

1巨大なSエンブレムを縦の短冊に切ってずらす。整ったロゴをあえて崩し、レーベルの態度を先に表明する
2ロゴを刷り込んだテープ帯を斜めに交差させて境目に。規制線のような張り詰め方が、章を切り替える合図になる
3色を持つのはテープ縁の虹色とホログラム風ステッカーだけ。モノクロの中で、小さな差し色ほどよく光る

Color

SCRAMBLE LABELの配色

Typography

使用フォントと無料の代替

英字見出し・ナビ・本文

Aa あア

使用: Montserrat
代替: Montserrat

和文見出し・本文

Aa あア

使用: Noto Sans JP
代替: Noto Sans JP

実測タイプスケール1440px幅 · 2026-09-26 計測

見出しKatapick 型14px · 1.14 · 400
小見出しKatapick 型24px · 1 · 700
本文The quick brown fox — 参考を型にする12px · 1.33 · 400

Structure

ページ構成（上から順）

01
ヘッダー
左にエンブレムとロゴ、右に「STATEMENT, RELEASE, ARTISTS, NEWS, CONTACT,」とカンマ区切りのテキストナビ。SPでは MENU ボタンに集約。
02
ヒーロー
縦罫線を敷いた黒地に、上端が切れた複製行を重ねたワードマークを置き、2カラムの短い英文コピーと水平線、短冊状にずらした巨大な S エンブレムを続ける。
03
テープ帯
ロゴと英文を繰り返した黒いテープを斜めに交差させ、ホログラム風の「CULTURAL ASSET」ステッカーを重ねて白いセクションへつなぐ。
04
STATEMENT（SCRAMBLE LABELについて）
白背景に「Hello, We Are」の見出しと、ロゴから書き出す大きめの和文ステートメント、英文の要約と VIEW MORE を配置。
05
NEWS
薄いグレーの巨大なワードマークとステッカーを背景に置き、左にカテゴリ見出し、右に日付とタイトルの一覧を罫線で区切る。
06
OUR RELEASE
黒いカードにジャケット写真、曲名、日付、配信サービスのアイコン、アーティスト選択のピル、「CHECK THE TRACKS.」を並べたリリース一覧。
07
ARTISTS
モノクロのアーティスト写真を、上下に帯の付いたフレームで高さをずらして横に並べる。
08
CONTACT
再びテープ帯を挟み、画面幅いっぱいの「CONTACT」の上に「GET IN TOUCH」のピルボタンとステッカーを重ねる。
09
フッター
お問い合わせの一文、ロゴ、ナビ、SNS アイコン、英文の紹介文を置き、最下部に下端で切れた巨大なワードマークを敷く。

Interaction

アニメーション・インタラクション

ワードマークの上に上端の切れた同じ文字列が見えるため、文字列が縦にロールする切り替え演出と思われる。overflow: hidden の枠内で2行を GSAP で translateY させると再現できる
技術スタックに Lottie があり、短冊状にずれる S エンブレムなどロゴ周りのアニメーションに使われていると思われる。After Effects から Bodymovin で書き出し lottie-web で再生する
斜めのテープ帯は rotate をかけた帯の中で、同じ文字列を CSS の @keyframes で translateX させる無限マーキーで実装できる
ヘッダーは固定表示。ホログラム風ステッカーは conic-gradient と mix-blend-mode を組み合わせると質感を近づけられる

スクロールのコマ撮り300–180000ms

検出された技術:Google FontsLottie

Reproduce

再現するときのポイント

01背景は純黒ではなく #191919 にし、カードやテープ帯に #000000 を使って黒の階調で奥行きを出す
02背景に等間隔の細い縦罫線（repeating-linear-gradient）を敷き、グリッドを見せる
03英字は Montserrat に統一し、見出しの前に「((」「//」などの記号を付けてトーンをそろえる
04色はほぼ白黒に絞り、テープ帯の縁やステッカーだけに虹色のグラデーションを使う

デザイン分析MDに含まれるもの

実測タイプスケール・余白・角丸・ブレークポイント・動きの長さとイージング / コントラスト判定 / カラートークン / 全9セクションの仕様 / AIっぽさを消すルール / Claude Code・Cursor・v0 用の実装プロンプト / Tailwind・tokens.json / 盗作を避ける差し替えリスト

Katapick のデザイン分析MDは何がすごい？ →

scramble-label.katapick.md

1---
2title: "SCRAMBLE LABEL デザイン分析書"
3source: https://scramblelabel.jp/
4katapick: https://katapick.com/sites/scramble-label
5category: ブランド
6region: 国内 (JP)
7tags: [ダーク, モノクロ, 大胆なタイポ, グリッド, ストリート, マーキー]
8launched: 2025-10
9verified: 2026-10-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 4/5
12generator: Katapick
13---
14 
15# SCRAMBLE LABEL — デザイン分析書
16 
17> Sのロゴを短冊切りにして、わざと崩してる。渋谷発の音楽レーベルSCRAMBLE LABELの公式サイトは、短冊状にずらしたSエンブレムと規制線風のテープ帯で、黒と白だけの画面にストリートのノイズを持ち込んでいる。
18 
19このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
20数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
21AIっぽさ（紫のグラデーション、同じ形の3列カードなど）を消すルールと、盗作を避けるための指示も入っています。
22