厳選・オープン・無料

Goodfit Us

タイポグラフィの存在感が強く、抑制的でプレミアムな審美眼を持つ、洗練されたミニマルなeコマースプラットフォーム。

01

デザイン DNA

よくキュレーションされたギャラリーやブティックのショーウィンドウ。

02

カラー

インタラクティブ要素に、鮮やかな青のアクセントカラーを加えた、ハイコントラストなモノクロームベース。

03

タイポグラフィ

geometric-sans

• display24px · 700
• body16px · 400
• body-semibold16px · 600

04

余白

paddingおよびギャップに適用される、一貫した4pxグリッドシステム。

05

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

rgba(21, 21, 35, 0.1)の1px solid、またはコントラスト用の濃いsolidボーダー

rgba(0, 0, 0, 0.06) 0px 6px 18px 0px · rgba(21, 21, 35, 0.2) 0px 2px 4px 0px

06

レイアウト

十分な余白と中央揃えのコンテンツコンテナを持つ、標準的な12カラムグリッド。

07

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

微細なフェードイン · 滑らかな背景トランジション · インタラクティブなホバーステート

インタラクティブ要素上の滑らかなカラー変化または微細なディメンション変化。 · カラーチェンジまたは微細なステートトランジションによる即時フィードバック。

08

コンポーネント

• button ピル型（border-radius: 100px）で、ソリッドなアクセントカラーまたは暗い背景を使用し、ハイコントラストな白文字を特徴とします。
• card 丸みのあるコンテナ（12-20px radius）で、微細なシャドウと明確なボーダーを持ちます。
• chip 小さく丸みのあるラベルまたはタグで、しばしば暗いボーダーを備えます。
• input 微細なボーダーと丸みのある角を持つ、標準的なテキストフィールド。
• hero 印象的な画像と明確なアクションコールを備えた、大型のタイポグラフィディスプレイ。

09

文体と禁止事項

• トーン 自信に満ち、清潔でキュレーションされた。
• 見出し 太字で幾何学的なサンセリフで、トラッキングがタイトでハイコントラスト。
• CTA 直接的で行動を促すスタイルで、しばしばピル型ボタンを使用。

• 複数の競合するアクセントカラーを使用しないこと — スクリーンショットでは、単一の支配的な青のアクセントが示されています。
• 本文テキストにセリフフォントを使用しないこと — スクリーンショットでは、幾何学サンセリフが示されています。
• プライマリボタンに鋭い角の四角形を使用しないこと — スクリーンショットでは、ピル型の丸みのあるボタンが示されています。
• メインコンテンツエリアに過度に暗い、または黒い背景を使用しないこと — スクリーンショットでは、主に白/明るい背景が示されています。
• 複雑で雑然とした背景テクスチャを使用しないこと — スクリーンショットでは、クリーンでフラット、または微細なグラデーション背景が示されています。
• テキストと背景の間の低コントラストを使用しないこと — スクリーンショットでは、明るい背景上のハイコントラストな暗いテキストが示されています。
• 避ける: 雑然としたレイアウト
• 避ける: 過度に複雑なカラーパレット
• 避ける: 不要な装飾要素

10

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

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

11

System Prompt

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