厳選・オープン・無料

Ganni

大胆なタイポグラフィとインパクトの高い写真を特徴とするプレミアムファッションeコマースプラットフォーム。

01

デザイン DNA

大胆でミニマリストなファッションエディトリアル

02

カラー

中立的なキャンバスが、鮮やかな写真にビジュアルエネルギーを引き渡す。

03

タイポグラフィ

grotesque-sans

• display26px · 500
• body16px · 400
• small14px · 400
• micro12px · 400

ナビゲーションとカテゴリラベルは通常、大文字を使用。 · 見出しは混合ケースまたは大文字で、文字間隔を詰めます。 · 本文コピーは標準的な文法ケースを使用。

04

余白

柔軟な4pxベースグリッドが、一貫した内部コンポーネントのパディングとレイアウトギャップを駆動。

05

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

標準的なインタラクティブ要素には、塗りつぶしの1px黒いボーダーを使用。

rgba(0, 0, 0, 0.4) 0px 4px 8px 0px

06

レイアウト

フルブリード写真からマルチカラム商品レイアウトに適応する流動的なグリッドシステム。

07

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

標準的なUI状態変化のための、滑らかな0.15秒ease-inトランジション。 · 大きな要素の動きのための、0.8秒cubic-bezierトランジション。

状態変化は、微細な背景やテキストカラートランジションで示されます。 · インタラクティブ要素に対する標準的なポインタインタラクション。

08

コンポーネント

• button 角丸のない、ハイコントラストな塗りつぶしブロック（通常、黒い背景に白いテキスト）。
• card 優勢な画像と最小限のテキスト情報を備えた、商品ディスプレイ用のクリーンで構造化されたレイアウト。
• input ボーダーで定義されたミニマリストな長方形フィールド。
• hero フルブリードの写真イメージと、大きなタイポグラフィ、目立つCTAの組み合わせ。

09

文体と禁止事項

• トーン 直接的、簡潔、そして自信に満ちた。
• 見出し 短く、鋭く、特定の大文字表記でスタイリッシュであることが多い。
• CTA 明確かつ緊迫感があり、頻繁に全角大文字テキストを使用。

• ボタンに柔らかく丸みのある角を使用しない — スクリーンショットでは鋭く四角形のUI要素が示されています。
• 単一の強いアクセントカラーに依存しない — スクリーンショットでは、写真主導の主にモノクロームのパレットが示されています。
• 細いまたはスクリプト系のタイポグラフィを使用しない — スクリーンショットでは、大胆で固体のサンセリフ書体が示されています。
• 過度のボーダーでレイアウトを雑踏させない — スクリーンショットでは、要素を定義するクリーンな空白が示されています。
• ナビゲーションに低コントラストなテキストを使用しない — スクリーンショットでは、明るい背景に鮮明な黒いテキストが示されています。
• 標準的なUI要素に装飾的なドロップシャドウを使用しない — スクリーンショットでは、フラットでクリーンな美学が示されています。
• 避ける: 過度に装飾的なフォント
• 避ける: セカンダリカラーの多用
• 避ける: 複雑なUIパターン

10

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

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

11

System Prompt

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