厳選・オープン・無料

Bernerkuhl

エディトリアルでギャラリーのような美学を持つ、ミニマルファッションeコマース。

01

デザイン DNA

ハイエンドファッションギャラリーカタログ。

02

カラー

モノクロームパレット。オフホワイト背景上のハイコントラストなブラックを重視。

03

タイポグラフィ

transitional-serif

• display20px · 400
• body12px · 400

ナビゲーションと主要ラベルには大文字を使用。 · 洗練されたコンパクト感を出すため、タイトな行間を維持。 · 一貫性を保つため、標準ウェイト（400）を全文に使用。

04

余白

セクション間には十分な余白を設け、製品表示にはタイトで構造化されたグリッドを採用。

05

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

入力欄や区切り線には、鋭い1pxの実線ブラックボーダーを使用。

06

レイアウト

デスクトップでは端から端まで画像を表示し、構造化された製品グリッドへ移行する際にクリーンなホワイト背景へ移行。

07

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

スクロール時の滑らかなフェードインと控えめなトランスフォーム。

インタラクティブ要素でカーソルがポインタに変化。控えめな透明度の変化が伴う可能性あり。 · 重いフィードバックアニメーションなしの即時応答。

08

コンポーネント

• button テキストベースのミニマルボタン。多くの場合大文字で、小さな実線四角形インジケーターを伴うこともあります。
• card 高品質な写真に完全に依存するボーダーレスの製品カード。
• chip 製品番号用の、小さく角丸の白いピル-shaped。
• input ボトムボーダーのみのミニマルな入力フィールド。
• hero フルブリードの分割画面画像または単一のスタンドアローン写真。

09

文体と禁止事項

• トーン 洗練され、控えめで、率直。
• 見出し 簡潔で機能的。多くの場合、番号付きシーケンスを採用。
• CTA 大文字、ミニマル、グリッド全体に統合。

• カードやコンテナに角丸を使用しない — スクリーンショットでは鋭い四角い角が示されています。
• 太字のフォントウェイトを使用しない — スクリーンショットでは全テキストでウェイト400が一貫して使用されています。
• 鮮やかなアクセントカラーを使用しない — スクリーンショットでは厳格なモノクロームの黒、白、グレーパレットが示されています。
• UI要素にドロップシャドウを使用しない — スクリーンショットでは完全にフラットなデザインが示されています。
• 本文テキストに複雑なマルチカラムレイアウトを使用しない — スクリーンショットでは非常にシンプルで、多くの場合単一カラムの構造が示されています。
• 標準的なサンセリフフォントを使用しない — スクリーンショットでは全てのタイポグラフィに特徴的なトランジショナルセリフを使用しています。
• 避ける: 派手な色
• 避ける: 遊び心のあるコピー
• 避ける: 密集したテキストブロック
• 避ける: 雑然とした背景

10

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

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

11

System Prompt

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