厳選・オープン・無料

Loewe

大判の写真とミニマルなクロームを組み合わせ、製品ストーリーテリングを高めるプレミアムファッションハウスのサイト。

01

デザイン DNA

ハイファッション誌の見開きページが、現実のものとなったようなイメージです。

02

カラー

豊かな写真画像を際立たせるための、ドライな黒と白をベースにしたカラースキーム。一点の大胆なシアンアクセントが加わります。

03

タイポグラフィ

geometric-sans

• display120px · 400
• heading22px · 400
• body14px · 400
• caption13px · 400

すべての主要な見出しとUI要素にはAvusを使用します。 · 各级间の余白を豊かにとり、厳密なタイポグラフィ階層を維持します。 · 本文にはRegularまたはMediumのウェイトを使用し、Boldは使用しません。

04

余白

コンテンツブロックの周囲に呼吸空間を生み出すため、一貫した4pxのベースグリッドと、水平方向には24pxなど、豊かなパディングを採用します。

05

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

最小限で、必要に応じて細かな区切りには1pxのsolid黒線を使用します。

06

レイアウト

大判の画像が支配的な、フルブリードのマガジンスタイルレイアウト。豊かな余白と、固定されたトップナビゲーションバーを備えます。

07

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

コンテンツ露出のための滑らかなopacityトランジション。 · ナビゲーションメニューとオーバーレイのための繊細なtransformアニメーション。 · コンテンツセクション展開のためのflex-basisトランジション。

サイトの洗練された雰囲気を保ちつつ、繊細なopacityの変化やビジュアルな露出を行います。 · 滑らかなトランジションと状態変化を伴い、しばしばより多くのテキストや新しいビューを表示します。

08

コンポーネント

• button 最小限で、コンテナではなくタイポグラフィと余白に頼り、しばしばテキストと三角アイコン（▸）のみで構成されます。
• card コンテンツは、下部にクリーンなタイポグラフィを伴う大判のフルワイド画像として提示され、拡張されたカードとして機能します。
• input ボーダーのみのシンプルなテキストフィールドで、背景やコンテナは表示されません。
• hero 巨大なフルビューポートの写真ヒーローで、オーバーサイズの太字タイポグラフィが画像上に直接重ねられます。

09

文体と禁止事項

• トーン 自信に満ち、洗練され、やや詩的です。
• 見出し 直接的で宣言的、しばしば想起を呼び起こすような、大判でクリーンなタイポグラフィを使用します。
• CTA 目立つボタンではなく、テキストリンクの隣に小さな三角アイコン（▸）を使用する、繊細でインテグレートされたスタイルです。

• ドロップシャドウは使用しない — スクリーンショットはフラットでクリーンなレイアウトを示しています。
• コンテナに角丸は使用しない — スクリーンショットはシャープで半径ゼロのエッジを示しています。
• 本文に太字ウェイトは使用しない — スクリーンショットはRegularウェイトのテキストを示しています。
• 複雑なグラデーションは使用しない — スクリーンショットは単色とクリーンな写真を示しています。
• 主要なアクションに幅広い塗りつぶしボタンスタイルは使用しない — スクリーンショットはミニマルなテキストリンクを示しています。
• テキストの複数カラムでレイアウトを詰め込みすぎない — スクリーンショットは豊かな余白を示しています。
• 避ける: 不要なUI要素や装飾的なグラフィックでインタフェースを雑踏させない。
• 避ける: 重いドロップシャドウや複雑なグラデーションを使用しない。
• 避ける: 不自然で突発的なアニメーションを使用しない。

10

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

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

11

System Prompt

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