厳選・オープン・無料
Sneakinpeace
ラグジュアリースニーカーキャンペーンやエディトリアルコンテンツをキュレーションするプレミアムストリーミングプラットフォーム。
PremiumEditorialPhotographicCurationMobile UI
01
デザイン DNA
ラグジュアリースニーカーカルチャーエディトリアルストリーミングプレミアム
ハイエンドスニーカーやファッションキャンペーンのためのライブマガジンチャンネル。
02
カラー
#D41515Accent
#3D3D3DInk
#767676Ink soft
#F0EEEDBG
#FFFFFFBG soft
#808080A6BG quiet
#E0E0E0Muted
rgba(61, 61, 61, 1)Line
フルブリードの写真や動画コンテンツを主役とする、温みのあるグレーとオフホワイトを用いた控えめな中立パレット。機能的な赤アクセントで固定。
03
タイポグラフィ
transitional-serif · neo-grotesque-sans
- display
36px · 400 - body
14px · 400 - caption
12px · 500
04
余白
4px
8px
12px
16px
20px
24px
30px
48px
64px
96px
厳格な垂直グリッドよりも、オーバーレイカードやナビゲーション要素内のパディングを優先する柔軟なスペーシング。
05
サーフェス (角丸 / 影 / 罫線)
sm · 4px
md · 6px
lg · 26px
pill · 999px
動画背景からフローティング要素を分離するために、繊細なボーダーと柔らかいボックスシャドウを使用。
0px 1px 6px -1px rgba(0, 0, 0, 0.08) · 0px 1px 1px -1px rgba(0, 0, 0, 0.08)
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
コンテンツやナビゲーションのためのフローティングオーバーレイパネルを備えた、フルブリードメディアキャンバス。
07
モーションとインタラクション
150msmicro
220mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
コンテンツのフェードインのための、滑らかな透過度トランジション。 · インタラクティブなナビゲーションリンクの、繊細なhover状態。
ナビゲーションリンクやボタンの、繊細な透過度の変化。 · インタラクティブ要素には標準のポインターカーソル、選択可能なコンテンツにはテキストカーソル。
08
コンポーネント
- button ピルシェイプのステータスバッジ(例:LIVE)とメディア制御用の小さなアイコンボタン。
- card 動画の詳細や商品リストを含む、柔らかいシャドウと角丸のフローティングパネル。
- chip 商品リストに添付された、小さく丸みのあるカテゴリタグ(例:Womens, Mens)。
- input 視覚的なボーダーのない、ミニマルなテキストベースのナビゲーションと検索入力。
- hero 説明テキストをオーバーレイする、フルスクリーンの動画または写真背景。
09
文体と禁止事項
- トーン 洗練され、キュレーションされた、エディトリアル志向のトーン。
- 見出し ラグジュアリーファッション雑誌を想起させる、大胆でエレガントなセリフフォントによるキャンペーンタイトル。
- CTA 控えめで機能的な、テキストベースのナビゲーションとアクションリンク。
- 重厚な装飾要素を使用しない — スクリーンショットはミニマリストで機能的なUIオーバーレイを示しています。
- メイン見出しにサンセリフを使用しない — スクリーンショットは特集タイトルにエレガントなトランジショナル・セリフを使用しています。
- 明るく彩度の高い背景色を使用しない — スクリーンショットは中立的なグレー(#F0EEED)とホワイトを示しています。
- アグレッシブなドロップシャドウを使用しない — スクリーンショットは深度に対して非常に繊細で柔らかいボックスシャドウを示しています。
- 密集したテキストでレイアウトを散らかさない — スクリーンショットは寛裕な余白と集中したコンテンツブロックを示しています。
- プライマリ要素に鋭い四角い角を使用しない — スクリーンショットは角丸(4pxから6px)の一貫した使用を示しています。
- 避ける: 写真コンテンツと馴染まない、明るいネオンカラー。
- 避ける: ビジュアルメディアから注意をそらす、重厚で飾り気のあるフォント。
- 避ける: フルスクリーンの動画体験と競合する、密集したごちゃごちゃしたレイアウト。
10
パック内の実スクリーンショット
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
ラグジュアリースニーカーキャンペーンやファッションコンテンツのための、プレミアムでエディトリアルなストリーミングプラットフォームをデザイン。ミニマリストでギャラリーのような美学で、フルブリードの動画や写真背景に、フローティングする機能的なUIオーバーレイを備える。プライマリパレットは中立的なグレー(#F0EEED, #FFFFFF)とダークテキスト(#3D3D3D)で構成し、ライブステータス用の単一の機能的な赤(#D41515)アクセントを加える。タイポグラフィは、表示見出しにエレガントなトランジショナル・セリフ、本文とメタデータにクリーンなネオ・グロテスク・サンスを使用。重要な制約:重厚な装飾要素を避け、決してネオンや高彩度の背景色を使用せず、ビジュアルメディアが焦点となるよう寛裕な余白を維持する。UIは機能的で控えめに保つ。
en · zh-CN · zh-TW · ja · ko