厳選・オープン・無料

Fillingpieces

プレミアムで控えめな美学を備えた、クリーンでタイポグラフィ重視のECデザイン。

01

デザイン DNA

控えめなエレガンスを重視するプレミアムなストリートウェアブランド。

02

カラー

製品写真を主役にさせる高コントラストのモノクロームパレット。

03

タイポグラフィ

geometric-sans · humanist-sans

• display48px · 500
• body16px · 400
• caption12px · 400

ナビゲーションリンク、ボタン、セカンダリーラベルには大文字を使用します。 · 大きな表示テキストにはtightな字詰めを維持します。 · モダンな印象を維持するために、すべてのUI要素にクリーンなサンセリフ字体を使用します。

04

余白

レイアウト全体で一貫した4pxのベースグリッドを使用し、視覚的な調和を確保します。

05

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

境界線や入力欄の定義には、標準として「1px solid rgba(0,0,0,0.1)」を使用します。

0 4px 6px -1px rgba(0, 0, 0, 0.1) · 0 2px 4px -2px rgba(0, 0, 0, 0.1) · 0 20px 25px -5px rgba(0, 0, 0, 0.1)

06

レイアウト

タブレットとデスクトップのレスポンシブブレークポイントと、最大幅を制限したコンテナを備えた標準的な12カラムグリッドシステム。

07

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

UIの状態変化時の、控えめなフェードインとフェードアウト。 · ボタンやリンクのhoverエフェクトの、スムーズなトランジション。

インタラクティブ要素の、opacityや色の控えめな変化。 · 状態変化を通じた即座の視覚的フィードバック。

08

コンポーネント

• button 角丸のないシンプルな長方形ボタンや、特定のCTA用の完全に丸めたピル型など、大文字テキストを使用することが多いです。
• card 製品画像を主な焦点とし、豊かな余白で区切られた、クリーンでボーダレスなカード。
• chip フィルタリングに使用される場合のある、クリーンなボーダーとシンプルなタイポグラフィを持つミニマルなチップ。
• input 明瞭さに焦点を当てた、繊細なボトムボーダーまたは薄い背景色を持つミニマルな入力フィールド。
• hero テキストオーバーレイを中央揃えまたは左揃えにした、フルワイドで高品質な写真を用いたヒーローセクション。

09

文体と禁止事項

• トーン 自信があり、モダンで控えめ。
• 見出し 直接的で大文字、強調には太字のウェイトをよく使用します。
• CTA シンプルで明確、クリーンなボタンの中に大文字テキストを使用することが多いです。

• 明るく彩度の高い色は使用しない — パレットは黒、白、グレーのみの厳格なモノクロームです。
• ボタンに角丸を使用しない — スクリーンショットでは角がシャープまたはわずかに丸まった長方形ボタンが示されています。
• 装飾的またはスクリプト系のフォントは使用しない — タイポグラフィは一貫してクリーンでサンセリフです。
• UI要素に強めのドロップシャドウを使用しない — シャドウは控えめで、装飾ではなく奥行きを出すために使用されます。
• レイアウトを雑踏にしない — デザインは高級感を生み出すために豊かな余白に依存します。
• 複雑なグラデーションは使用しない — カラースキームはソリッドでフラットです。
• 避ける: 過度に装飾的またはスクリプト系のフォントは避けます。
• 避ける: 明るく、ネオン、または調和のとれていないカラーパレットは避けます。
• 避ける: 競合する要素が多すぎた雑然としたレイアウトは避けます。

10

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

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

11

System Prompt

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