厳選・オープン・無料
Balenciaga
シネマティックな写真と厳格なUIが、プレミアムでエディトリアルな雰囲気を生み出す、厳格でハイファッションなEコマースプラットフォーム。
fashionluxury
01
デザイン DNA
ハイファッションミニマリストアバンギャルドエディトリアルラグジュアリー
厳格でハイファッションな雑誌の見開きが、没入型のデジタルショッピング体験として実現されたもの。
02
カラー
#000000Ink
#FFFFFFBG
#767676Muted
rgba(0,0,0,1)Line
画像を優先し、厳格で控えめなラグジュアリーな美感を維持する、高コントラストのモノクロームパレット。
03
タイポグラフィ
sans-serif
- display
22px · 700 - heading
14px · 400 - body
12px · 400
すべての主要ナビゲーションとインタラクティブテキストは大文字で設定する必要があります。 · 主要なUIタイポグラフィはグロテスクサンセリフカテゴリで設定する必要があります。 · セクションヘッダーなどの高インパクトのディスプレイテキストには、より広い文字間隔（約0.36px）を使用してください。
04
余白
4px
8px
16px
24px
32px
48px
64px
96px
厳格で均一な4px基本単位がすべての間隔を支配し、正確で構造化されたレイアウトを生み出します。
05
サーフェス (角丸 / 影 / 罫線)
sm · 0px
md · 0px
lg · 0px
pill · 999px
1px solid #000000
rgb(0, 0, 0) 0px 0px 0px 0px · rgb(170, 170, 172) 0px 0px 0px 0px
06
レイアウト
1440container
12columns
16pxgutter
768 / 1024breakpoints
大規模な写真がビューポートを支配し、標準的なUI要素を周縁に押し出す、全幅で没入型のグリッド。
07
モーションとインタラクション
150msmicro
250mssmall
350msmedium
cubic-bezier(0.32, 0, 0.67, 0)easing
モーダルとオーバーレイのトランジションは、350msの持続時間と鋭い cubic-bezier イージングカーブを使用します。 · ボタンのインタラクションは、微細なフィードバックのために速い150msのボックスシャドウまたはカラートランジションに依存します。 · ページレベルの状態変化は、0.25秒の ease-out フェードイン/フェードアウトで示されます。
インタラクティブ要素での微細な不透明度またはボックスシャドウのトランジション。 · 押下時の即座の視覚状態変化。
08
コンポーネント
- button 角が鋭い厳格な長方形で、高コントラストの塗りつぶし（黒）またはアウトライン（黒枠付き白）バリアントが利用可能です。
- card 製品画像用のクリーンでボーダーレスのコンテナで、通常は無地の白い背景を特徴とします。
- input 視覚的なボーダーがなく、プレースホルダーテキストと微細なアンダーラインのみで定義される、ミニマリストなテキスト入力。
- hero ビューポート全体の幅にわたる、フルブリードでシネマティックな画像またはビデオヒーローで、最小限で中央揃えのUIがオーバーレイされます。
09
文体と禁止事項
- トーン 権威があり、厳格で、ミニマリスト。
- 見出し 短く、断定的で、大文字のサンセリフで設定。
- CTA 直接的で命令的で、大文字テキストを使用。
- UI要素に border-radius を使用しない — スクリーンショットは厳格に長方形のボタンとカードを示しています。
- カードやパネルにドロップシャドウを追加しない — スクリーンショットは鋭いボーダーを持つフラットな表面を示しています。
- UIテキストにセリフフォントを使用しない — スクリーンショットはサンセリフタイポグラフィの一貫した使用を示しています。
- 本文に大文字テキストを使用しない — スクリーンショットは大文字がナビゲーションとヘッダーに厳格に使用されていることを示しています。
- UIに複数の色を使用しない — スクリーンショットは厳格な黒、白、グレーのパレットを示しています。
- ボタンに角丸を追加しない — スクリーンショットは鋭く0pxの角を持つボタンを示しています。
- 避ける: フレンドリーまたはカジュアルな言葉遣い
- 避ける: 過度に説明的なテキスト
- 避ける: 角丸または遊び心のある視覚要素
10
パック内の実スクリーンショット
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
Balenciagaは、厳格でモノクロームのUIを使用して、フルブリードのシネマティックな写真がユーザーエクスペリエンスを支配するハイファッションEコマースプラットフォームです。デザインは厳格な黒・白・グレーのカラーパレット（インク #000000、背景 #FFFFFF、控えめな #767676）とクリーンなサンセリフタイポグラフィシステムに依存しています。UI要素は厳格で、角の鋭い長方形ボタンと最小限のボーダーを特徴としています。重要なルール：1) すべてのUI要素で角丸をゼロにし、厳格に長方形を維持すること。2) すべての主要ナビゲーションとヘッダーを大文字にすること。3) カードやパネルにドロップシャドウを決して使用せず、代わりにクリーンなボーダーを使用すること。4) モーダルトランジションに鋭い cubic-bezier(0.32, 0, 0.67, 0) イージングカーブを使用すること。
en · zh-CN · zh-TW · ja · ko