厳選・オープン・無料

Telfar

大胆でアクセシブルなラグジュアリーにフォーカスした、ミニマリストで写真重視のファッションECサイト。

01

デザイン DNA

製品が主役となる、清潔でユーティリティアンなブティック

02

カラー

製品写真を際立たせるための、ハイコントラスト・ミニマリズム

03

タイポグラフィ

grotesque-sans

• display56px · 400
• body16px · 400

ほとんどのUI要素には統一されたウェイトを使用 · コンパクトなテキストブロックには適切なline-heightを確保 · ラベルやバッジには大文字を控えめに使用

04

余白

標準的なEC用のスペーシングを用いた、一定の4pxベースグリッド

05

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

カードやインタラクティブ要素には、細い1pxの黒い実線

rgba(0, 0, 0, 0.01) 0px 0px 10px 0px

06

レイアウト

製品ショーケースには非対称のメーソニリーまたは2カラムグリッド

07

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

ホバー状態のための滑らかなスケールトランジション · モーダルやオーバーレイ要素のフェードイン

精妙な不透明度の変化または背景色のトランジション · 最小限のアニメーションによる即座のビジュアルフィードバック

08

コンポーネント

• button 細いボーダーを持つ、ミニマリストなピル型または長方形
• card 製品をグループ化するための、微細なボーダーを持つ清潔な白いカード
• chip シンプルなテキストベースのナビゲーションタブ
• input 明確なラベルを持つ標準テキスト入力
• hero 最小限のオーバーレイテキストを持つ、大判でフルワイドの写真バナー

09

文体と禁止事項

• トーン 自信に満ち、直接的で控えめ
• 見出し 明確で情報的。色や製品タイプを明記することが多い
• CTA 「View All」や「Manage preferences」のような、シンプルで行動を促すテキスト

• 装飾的なグラデーションは使用しない — スクリーンショットでは単色背景のみ
• ドロップシャドウを多用しない — スクリーンショットでは非常に微細なbox-shadowが1つだけ
• 太いタイポグラフィウェイトを使用しない — スクリーンショットではウェイト400が好まれる
• UIに鮮やかなアクセントカラーを使用しない — スクリーンショットでは主要なアクセントカラーが見られない
• あらゆる箇所に角丸を使用しない — スクリーンショットでは主にシャープまたはわずかに角丸のデザイン
• アイコンでUIを雑踏させない — スクリーンショットではヘッダーにミニマリストなアイコンセットが使用されている
• 避ける: 過度なプロモーショナル言語
• 避ける: 装飾的なオーナメント
• 避ける: 派手な色の組み合わせ

10

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

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

11

System Prompt

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