Spotify
夜間ジュークボックス制御室
Spotifyのウェブインターフェースは、濃密でダークなメディアコントロールセンターです。ほぼ黒一色のキャンバスに、鮮やかなアルバムアート、特徴的なグリーンのアクセント、そしてピル型のコントロールが配置されています。タイポグラフィはコンパクトで実用的。カスタムデザインの幾何学的なサンセリフ書体を小さめのサイズで使用し、アルバムアートとアーティスト写真が視覚的な役割の大部分を担っています。レイアウトは固定の2カラムシェル（サイドバー＋メインフィード）で、正方形のアルバムアートと丸いアバターがグリッド状に配置され、幾何学的な書体がリズミカルに交互に表示されます。インターフェースは高さの急激な変化を避け、微妙な表面の差異（#000000のキャンバス上の#121212カード）と、エネルギーを感じさせる大きなグラデーションバナー1つに頼っています。その結果、DJブースのような雰囲気が生まれています。情報が濃密で、音響的に暗く、一目で再生準備が整っているのです。
固定の2列レイアウトで、左側にサイドバー（「ライブラリ」）、右側にレスポンシブなメインコンテンツエリアがあります。上部のバーは全幅の黒いバーで、左側に検索、右側にアカウント操作があります。メインコンテンツは縦方向にスクロールし、横方向にはカードのカルーセルが表示されます。人気の曲は5列の正方形グリッド、人気のアーティストは5列の円形グリッド、人気のアルバム/シングルも同様のパターンで表示されます。セクション間の間隔はコンパクト（32cm）です。下部の広告バナーはビューポートの下部に固定されています。ナビゲーションは上部のバーとサイドバーのみで行われ、メガメニューやパンくずリストはありません。正方形のカード→円形のカード→正方形のカードというリズムが交互に繰り返され、セクション間に幾何学的なコントラストが生まれます。
アルバムカバーとアーティスト写真が主要なビジュアルコンテンツです。カバーは、半径6ピクセルの正方形の断片（アスペクト比1:1）として表示され、編集記事のような鮮明さを持ちながらも、現代的な印象を与える柔らかさも兼ね備えています。アーティスト写真は円形の断片で、顔が識別要素として強調されています。メインインターフェースには、装飾的な写真、ライフスタイル画像、抽象的なグラフィックは一切使用されていません。写真以外の唯一のビジュアル要素は、下部にある紫から青へのグラデーションバナーで、これがブランドカラーの唯一の要素となっています。アイコンはミニマルで、単線、暗い背景に白で表示され、小さく機能的で、決して装飾的ではありません。
パレット
ブランド
- Spotify Green
#1ed760— 緑色は、装飾的なディテールの補助色として、また使用頻度の低い検索クエリを強調するために使用されます。行動喚起のメインカラーとして使用すべきではありません。
中性
- Pure White
#ffffff— 目立たない背景を作り出し、セクションを区切るための、軽い支持面です。行動喚起のメインカラーとして使用すべきではありません。 - Signal Red
#b85850— 赤は装飾的なディテールを引き立てたり、珍しい色を際立たせたりする補助的なアクセントカラーとして機能します。ステータスカラーとしてではなく、あくまで補助的なアクセントカラーとして使用してください。 - Void Black
#000000— ページキャンバス、トップナビゲーションの背景、最深部の表面レイヤー - Carbon
#121212— 段ボール表面、側面パネル、キャンバス上の二次表面層 - Graphite
#1f1f1f— 隆起した表面 - ホバー状態、入力フィールド、選択されたナビゲーション要素。 - Smoke
#292929— アクティブなナビゲーション背景、わずかなバックライト効果。
タイポグラフィ
11～24ピクセル・4段階
- SpotifyMixUI — 交換： Inter · 概要 400, 600, 700 · 本文、ナビゲーション、ボタン、メタデータ、小さなキャプションなど、コンパクトで情報量の多いデザインは、さりげなく、芸術的な要素が際立つように工夫されている。
- SpotifyMixUITitle — 交換： Inter weight 700 · 概要 700 · セクション見出し（「人気曲」、「人気アーティスト」など） - 太字で適度なサイズのフォントを使用することで、カードグリッドを過剰に埋め尽くすことなく見出しを際立たせることができます。
音程と形式
| 目的 | 意味 |
|---|---|
| 密度 | 密集 |
| 基本的なステップ | 8-12px |
| ボタンの半径 | 9999px |
| カード半径 | 6px |
| 影 | ミニマル |
| セクション間 | 32-48px |
AI がSpotifyスタイルであなたのウェブサイトを構築し、
- リンクから商品や投稿を追加してください - Instagram 、 TikTok 、 Facebook 。
- 古いサイトからコンテンツを移行するには、アドレスを指定するだけです。
- 最高のエンジンであるReact （ Next.js ）上で動作するモダンなデザイン。サーバーレンダリングとSEO最適化が標準搭載されています。
- 検索結果のSEO最適化とニューラルネットワークによるレコメンデーションを完全に自動化。
類似のスタイル
- Resend — 紫のネオンカラーの黒いベルベット
- Neon — 夜のサーバー室。完全な暗闇の中、唯一の光源はデータとユーザーの操作だけだ。
- Discord — ゲームの世界はポップアップチャットウィンドウの裏に隠されており、各セクションは独自の照明とキャラクターセットを備えた独立した環境となっている。
- Idle Finance — 深海ターミナルのネオン輝く取引フロアは、薄暗い海軍ターミナルであり、そこに一本の青い光が暗闇を突き抜けている。
- Midjourney — 深海に浮かぶ生物発光端末。知能がASCIIストリームで視覚的に自己生成し、操作系がかすかに光るパターンとして現れる深海世界。
- Netflix — 無限のデジタルシェルフ。漆黒の劇場のような背景に、無限のコンテンツライブラリが提示される、映画のような体験。
- Wope — Wopeは紫色の地平線インターフェースです。暗い天文台のテーブルから、ガラスの下から紫色の光が差し込んでいる様子を想像してみてください。
- basement — 午前3時のがらんとした印刷機――真っ暗な画面に巨大で圧縮されたフォントが広がり、ナビゲーションバーにオレンジ色の光がかすかに灯るだけ。それ以外はすべて白か、幽霊のような灰色だ。
- Ori — 真夜中のサーバー室は、真っ暗な空間に白い光が灯り、スイッチが一つだけ入っている。
- Amaterasu — セレスティアル・ターコイズ・サンクチュアリ
- Stink Studios — 真夜中の映画スタジオ――映写機が唸りを上げ、部屋は暗く、フィルムだけが照らされている。
- Obsidian — 結晶のような知識の宝庫。明快さと集中力を高めるために設計された、透明で多面的なデジタル空間。そこには、光り輝く紫色の脈が、相互作用の場を彩る。