BrandJapanPicked 2026.09.22

SCRAMBLE LABEL

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

出典: 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

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 を組み合わせると質感を近づけられる

検出された技術:Google FontsLottie

Reproduce

再現するときのポイント

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

再現MDに含まれるもの

CSS変数化したカラートークン / Google Fonts 読み込みタグ / 全9セクションの仕様 / つまずきポイント / Claude Code・Cursor・v0 用の実装プロンプト / 仕上げチェックリスト

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-09-26
10difficulty: 4/5
11estimated_hours: 32
12generator: Katapick
13---
14 
15# SCRAMBLE LABEL — 再現用デザイン仕様書
16 
17> Sのロゴを短冊切りにして、わざと崩してる。渋谷発の音楽レーベルSCRAMBLE LABELの公式サイトは、短冊状にずらしたSエンブレムと規制線風のテープ帯で、黒と白だけの画面にストリートのノイズを持ち込んでいる。
18 
19このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
20そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せる構成になっています（→「7. AI実装プロンプト」）。
21 
22## 1. 見どころ