厳選・オープン・無料

A-COLD-WALL*

インダストリアル・ブータリストのラグジュアリー・ファッションEC

01

デザイン DNA

コンクリート建築とハイファッションの融合

02

カラー

画像主導のアクセントを持つ、高コントラストのモノクローム

03

タイポグラフィ

grotesque-sans

• display56px · 500
• display-sm26px · 500
• body12px · 500
• body-lg16px · 500

すべてのテキスト要素にNeueHaasDisplayを使用 · ほとんどの要素のデフォルトウェイトは500 · ナビゲーションとCTAに大文字変換が多用される · 小さなUIテキストにはタイトなラインハイト（1.16）

04

余白

インダストリアル・ブータリストの美学を反映したタイトな間隔の一貫性

05

サーフェス (角丸 / 影 / 罫線)

0px solid transparent — 目立つボーダーの最小限の使用

rgba(0, 0, 0, 0.3) 0px 0px 24px 0px

06

レイアウト

最小限のUIオーバーレイを持つフルブリードのヒーローイメージ

07

モーションとインタラクション

すべてのインタラクティブ要素にスムーズなトランジション（0.2秒 ease-in-out） · コンテンツ読み込み時の不透明度フェードイン（1秒） · 繊細な背景色のシフト（0.6秒）

繊細な色の反転または不透明度の変化 · ステート変化による即座の視覚的フィードバック

08

コンポーネント

• button 背景やボーダーのない、シンプルな大文字テキストボタン。ホバーステートのみ
• card フルブリードのイメージと最小限のテキストオーバーレイを持つ商品カード
• chip N/A — このデザインではチップは主要コンポーネントではありません
• input ボトムボーダーのみスタイルの最小限のテキストインプット
• hero 大きな、左揃えのタイポグラフィを持つ、フルビューポートのシネマティック写真

09

文体と禁止事項

• トーン ミニマルで、直接的かつ権威的
• 見出し 短く、インパクトのある大文字のフレーズ
• CTA シンプルで命令的なテキスト（例：「今すぐ購入」「閉じる」）

• カードやボタンに角丸を使用しない — スクリーンショットでは鋭く角のあるエッジが示されています
• マルチカラーパレットを使用しない — スクリーンショットでは厳格なモノクロームの黒と白が示されています
• 明るく軽い背景を使用しない — スクリーンショットでは支配的な黒の背景が示されています
• 装飾的またはスクリプトフォントを使用しない — スクリーンショットでは厳格なグロテスク・サンズのタイポグラフィが示されています
• すべてのテキストを中央揃えにしない — スクリーンショットではナビゲーションと見出しに強い左揃えが示されています
• 複雑なボーダーや区切りを使用しない — スクリーンショットでは要素間のクリーンでボーダーレスな区切りが示されています
• 避ける: 装飾的な要素を避ける
• 避ける: 複雑なUIパターンを避ける
• 避ける: 過度なテキストの説明を避ける
• 避ける: 鮮やかで遊び心のあるカラーパレットを避ける
• 避ける: 飾り立てられたタイポグラフィを避ける
• 避ける: 主要コンテナの角丸を避ける

10

パック内の実スクリーンショット

実ページから取得 · 実 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko