厳選・オープン・無料

Fableandmane

アーティザナルフレグランス製品向けの、クリーンでプレミアムなEコマースインターフェース。

01

デザイン DNA

ミニマルでハイエンドな薬局の棚

02

カラー

暖色系オフホワイト背景に、高コントラストのモノクロームテキストと、主要アクション用の単一高彩度赤アクセント。

03

タイポグラフィ

transitional-serif · geometric-sans

• display72px · 800
• headline56px · 700
• body16px · 400

表現力が高く、インパクトのある見出しにはトランジショナルセリフ体を使用。 · すべての機能的テキストおよび本文にはジオメトリックサンセリフ体を使用。

04

余白

一貫した4px基本単位。プレミアムで散らかりのない印象を保つため、広めの余白を採用。

05

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

1px solid rgba(0,0,0,0.1)

rgba(0, 0, 0, 0.25) 0px 4px 20px 0px · rgba(0, 0, 0, 0.05) 0px -4px 10px 0px

06

レイアウト

商品に焦点を当てる中央揃え単一カラムレイアウト。水平方向に広いpaddingを確保。

07

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

モーダルやページ要素に対する滑らかなフェードイントランジション。 · インタラクティブ要素の微細なホバーステート変形。

ボタンやリンクの背景色または不透明度の微細な変化。 · トランスフォームや不透明度の変化による即時フィードバック。

08

コンポーネント

• button 高彩度赤背景の白テキストを持つピル-shaped主要ボタン。ダークテキストのアウトライン付きセカンダリボタン。
• card 微細なボーダーやソフトシャドウ、角丸（24px）を持つクリーンな商品カード。
• chip N/A - 分析対象のモーダル/ヒーローステートでは顕著に見当たらない。
• input N/A - 分析対象のモーダル/ヒーローステートでは顕著に見当たらない。
• hero 片側に大型タイポグラフィ、反対側に商品画像を配置する分割レイアウト。

09

文体と禁止事項

• トーン 洗練され、 Sophisticatedで、親しみやすい。
• 見出し 大胆で表現力のあるセリフ体の見出し。狭い字間設定。
• CTA 直接的で行動を促す動詞を使用した、ピル-shapedボタン。

• ネオン色や過度に彩度の高い色を使用しない — スクリーンショットは暖色系オフホワイト背景（#FFF5EC）に単一の赤アクセント。
• 純粋にモノスペースや手書きフォントを使用しない — スクリーンショットはジオメトリックサンセリフおよびトランジショナルセリフ体カテゴリを使用。
• 到处に鋭い直角を使用しない — スクリーンショットはコンポーネントに大きな24pxボーダー半径を採用。
• UIに情報を詰め込みすぎない — スクリーンショットは広いスペーシングとクリーンなレイアウトを維持。
• 明るい白（#FFFFFF）を主要背景として使用しない — スクリーンショットは一貫して暖色系クリームトーンを使用。
• 本文に細く読みにくいウェイトのフォントを使用しない — スクリーンショットは可読性のために通常の400ウェイトを使用。
• 避ける: 雑然としたインターフェース
• 避ける: 過度に遊び心のある、またはカジュアルな言葉遣い
• 避ける: 刺激的で高彩度のカラーパレット

10

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

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

11

System Prompt

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