厳選・オープン・無料

Vitsœ

Dieter Rams のモジュラーデザインと機能的ミニマリズムの原則に基づいた、伝統的な家具ブランドのウェブサイト。

01

デザイン DNA

timeless の抑制が効いた、策されたギャラリーのような製品カタログ。

02

カラー

インタラクティブ性のための単一の機能的ブルーアクセントを用いたモノクロマティック。

03

タイポグラフィ

grotesque-sans

• display40px · 700
• heading32px · 700
• body16px · 400

すべてのテキストレイヤーに Linotype Univers W01 を使用します。 · ディスプレイ用に太いウェイト、本文用に細いウェイトで、厳格なタイポグラフィ階層を維持します。 · 大きなディスプレイサイズでは、文字間隔を狭く保ちます。

04

余白

明確なセクション分離を目的とした、32px と 64px の刻みで制御されたゆとりのある垂直リズム。

05

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

細い、高コントラストなボーダー (1px) または繊細なグレーディバイダー (1px solid #C2C2C2)。

06

レイアウト

12カラムのグリッドベースレイアウトで、フル幅と分割カラムセクションが交互に配置されます。

07

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

コンテンツのレビール用の滑らかなフェードイン。 · インタラクティブ状態用のシンプルなリニア遷移。

インタラクティブなテキスト要素の繊細な不透明度変化。 · テキストリンクとボタンによる直接ナビゲーション。

08

コンポーネント

• button プライマリアクションには矢印付きのテキストベースリンク；クッキー受け入れには黒の塗りつぶしボタン（白テキスト）。
• card 最小限のパディングと明確なタイポグラフィラベルを持つ、画像を前面に出した製品カード。
• input ヘッダーナビゲーションに統合された検索アイコン。
• hero 大胆な製品タイトルと簡潔な機能記述を伴う大フォーマットの画像。

09

文体と禁止事項

• トーン 権威があり、控えめで、非常に機能的。
• 見出し 直接的で宣言的な製品名（例：「606 Universal Shelving System」）。
• CTA 方向矢印を伴う繊細なテキストリンク。

• 装飾的なイラストを使用しないこと。スクリーンショットでは写真と単一の機能的な赤い唇のアイコンが示されています。
• 柔らかいドロップシャドウを使用しないこと。スクリーンショットではフラットでボーダーレスの画像、または細いソリッドなディバイダーが示されています。
• 明るくカラフルなグラデーションを使用しないこと。スクリーンショットでは単一のブルーアクセントを用いたモノクロマティックパレットが示されています。
• 重厚で装飾的なセリフフォントを使用しないこと。スクリーンショットではクリーンで幾何学的なサンセリフが全体に使用されています。
• 雑然としたナビゲーションを使用しないこと。スクリーンショットでは最小限のテキストベースのトップメニューが示されています。
• 角丸のピルボタンを使用しないこと。スクリーンショットでは角張ったボタンとシンプルなテキストリンクが示されています。
• 避ける: 感情的または華やかな言葉遣い。
• 避ける: 感嘆符の過度な使用。
• 避ける: アグレッシブなセールスコピー。
• 避ける: 複雑な専門用語またはバズワード。

10

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

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

11

System Prompt

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