厳選・オープン・無料

Vitra

シネマティックな画像と自制心のあるミニマリズムを通じてハイエンドデザインを紹介する、プレミアムモダン家具ブランド。

01

デザイン DNA

製品ショーケースとエディトリアルストーリーテリングを融合させ、ウェブに導入されたプレミアム建築カタログ。

02

カラー

視覚的な興味を高めるためにハイコントラストの写真に依存する、厳格なモノクロームパレット。

03

タイポグラフィ

geometric-sans

• display56px · 500
• headline40px · 500
• body17px · 500
• small15px · 500
• micro13px · 500

全体的にジオメトリックサンセリフを使用 · プライマリテキストはウェイト500を維持 · 小さなラベルには大文字のトラッキングを使用 · 十分な行高で左揃えの段落

04

余白

8pxの基本単位と、64px〜96pxの広めのセクション間隔。

05

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

明るいグレーの細い1px実線ボーダーで繊細な区切りを形成し、ドロップシャドウなし。

06

レイアウト

中央揃えテキストを伴うフルブリードヒーロー画像に続き、緊密な2カラム製品グリッド。

07

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

テキストオーバーレイのための滑らかなフェードイン · インタラクティブ要素のためのリニアカラートランジション

テキストとアイコンのミュートグレーへの微妙な色の変化。 · 最小限のマイクロインタラクションによる即時応答。

08

コンポーネント

• button 薄いボーダー、大文字ラベル、広めのpaddingを持つ、テキストのみまたはアウトラインのボタン。
• card ボーダーや背景なしで、画像を主体とし、下部に中央揃えテキストキャプションを持つカード。
• chip 該当なし
• input 薄いボトムボーダーを持つミニマルな検索入力。
• hero 縦横中央に配置されたテキストオーバーレイを持つ、フルビューポートのシネマティック写真。

09

文体と禁止事項

• トーン 権威があり、洗練され、先見の明がある。
• 見出し 短く、インパクトのある製品名または概念的な質問。
• CTA 「今すぐ発見する」や「詳細を見る」のような、直接的で行動を促す表現。

• ドロップシャドウを使用しない — スクリーンショットは写真の奥行きに依存したフラットデザインを示しています。
• ボタンやカードに丸みのある角を使用しない — スクリーンショットは鋭く四角いエッジを示しています。
• 明るいアクセントカラーを使用しない — スクリーンショットは厳格なモノクロームパレットを示しています。
• 本文に太字のフォントウェイトを使用しない — スクリーンショットはすべてのテキストにミディアムウェイト（500）を使用しています。
• 密なテキストブロックを使用しない — スクリーンショットは広い行高と段落間隔を示しています。
• 装飾的なボーダーを使用しない — スクリーンショットは機能的な細い1pxラインのみを使用しています。
• 避ける: カジュアルな言葉や絵文字の使用を避ける
• 避ける: テキスト過多で視覚階層を雑踏にさせない
• 避ける: 明るく鮮やかなアクセントカラーの使用を避ける

10

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

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

11

System Prompt

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