厳選・オープン・無料

Hartzlerdairy

大胆なタイポグラフィ、大きな製品写真、ティールとダークグリーンのアクセントを備えたクリーンな白の美学が特徴の、プレミアムな手作り酪農ブランドのウェブサイト。

01

デザイン DNA

大胆で自信に満ちたタイポグラフィと高品質な写真で製品を紹介する、プレミアムな地場酪農ブランド。

02

カラー

ホワイトスペースと製品写真を主要なビジュアルの基盤とする、最小限のカラーパレット。

03

タイポグラフィ

geometric-sans · humanist-sans

• display333px · 900
• display-md290px · 900
• body14px · 400

製品ラベルとナビゲーションには大文字を使用 · 大きなディスプレイタイプにはtightな文字間隔を維持 · ブランド要素とアクセントにはダークグリーンを使用

04

余白

製品が息をするためのゆったりとしたスペーシング

05

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

メインカードには目に見えるボーダーなし

0 4px 20px rgba(0, 0, 0, 0.1)

06

レイアウト

重なる製品写真と大きなバックグラウンドテキストを備えた、フルワイドのヒーローセクション

07

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

インタラクティブ要素への微細なホバートランジション · 製品表示のためのスクロールトリガーアニメーション

インタラクティブ要素の微細な色変化またはスケール · 視覚的フィードバックによる即時応答

08

コンポーネント

• button 角丸で大文字テキストの大きなティールタグ
• card 白背景に微細なドロップシャドウのある製品写真
• chip スクリプトロゴ入りの円形「FEATURED」バッジ
• hero 巨大なバックグラウンドタイポグラフィを備えた、フルビューポートの製品ショーケース

09

文体と禁止事項

• トーン 自信に満ち、プレミアムで、手作り感のある
• 見出し 大胆、大文字、大規模なタイポグラフィ
• CTA 角丸のティールタグとクリーンなサンセリフテキスト

• 細いまたは軽いタイポグラフィは使用しない — スクリーンショットでは全体的に太く重いウェイトが使用されている
• 小さなヒーローテキストは使用しない — スクリーンショットでは巨大な333pxのディスプレイタイプが使用されている
• 暗い背景は使用しない — スクリーンショットでは主に白い背景が使用されている
• 複数のアクセントカラーは使用しない — スクリーンショットでは一貫したティールとダークグリーンが使用されている
• 製品写真を隠さない — スクリーンショットでは製品が中心的な焦点となっている
• 装飾的な要素は使用しない — スクリーンショットではクリーンでミニマルなデザインが使用されている
• 避ける: 雑然としたレイアウトは避ける
• 避ける: 遊び心が過度に強いかカジュアルなタイポグラフィは避ける
• 避ける: 複雑なカラースキームは避ける

10

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

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

11

System Prompt

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