# SCRAMBLE LABEL｜ブランドのWebデザイン参考

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

- URL: https://scramblelabel.jp/
- 解説ページ: https://katapick.com/sites/scramble-label
- カテゴリ: ブランド / 地域: 国内（JP）/ 業種: 音楽レーベル
- テイスト: ダーク、モノクロ、大胆なタイポ、グリッド、ストリート、マーキー
- 公開・リニューアル: 2025-10 / Katapick掲載: 2026-09-22 / 最終確認: 2026-09-26
- 再現難易度: 4/5（目安 32 時間）

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

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

## 配色
- #191919 Off Black（背景）
- #000000 Black（カード / テープ帯）
- #ffffff White（テキスト / 白セクション背景）
- #595959 Graphite（サブテキスト）
- #767676 Steel Gray（補足テキスト / 罫線）

## フォント
- 英字見出し・ナビ・本文: Montserrat（代替: Montserrat）
- 和文見出し・本文: Noto Sans JP（代替: Noto Sans JP）

## よくある質問
### SCRAMBLE LABELのサイトのフォントは？
英字に Montserrat、和文に Noto Sans JP が使われています。どちらも Google Fonts で無料で利用できます。ロゴの「SCRA✕BLE」の字形は画像またはロゴデータと思われます。

### SCRAMBLE LABELのような斜めのテープ帯はどう作る？
黒い帯要素に transform: rotate() をかけ、その中で同じテキストを2つ並べて @keyframes で translateX をループさせます。帯を2本逆方向に傾けて重ねると交差した見た目になります。

### どんな業種の参考になる？
音楽レーベル、アーティスト事務所、アパレルやストリート系のブランドなど、モノクロでエッジの効いた世界観を打ち出したいブランドサイトの参考になります。

---
セクション別の構成・モーションの実装方法・AI実装プロンプトを含む「再現用Markdown」は https://katapick.com/sites/scramble-label からダウンロードできます。
出典: Katapick（https://katapick.com）