厳選・オープン・無料
Contract Mdfitalia
没入感のある写真と、抑制の効いたエレガントなレイアウトを特徴とする、プレミアム家具契約ウェブサイト。
PremiumGalleryPhotographicCleanCuration
01
デザイン DNA
家具契約建築ラグジュアリーミニマリズム
雑然としたUIより雰囲気のある写真を優先する、静寂なハイエンド家具ショールーム。
02
カラー
#000000Ink
#141414Ink soft
#FFFFFFBG
#F6F6F6BG soft
#3E3E3EMuted
rgba(229, 231, 235, 1)Line
製品写真がビジュアル・ウォームスを決定づける、高コントラストのニュートラル・パレット。
03
タイポグラフィ
geometric-sans
- display
100px · 500 - heading
50px · 500 - subheading
24px · 500 - body
16px · 500 - small
15px · 400
見出しは洗練されたモダンな外観のために、タイトなトラッキング(例:-0.4px~-1px)を使用します。 · 本文のウェイトは主に500で、標準のレギュラーウェイトよりも密度が高く、構造化された印象を作ります。
04
余白
4px
8px
16px
24px
32px
48px
64px
96px
広い余白よりもコンパクトなレイアウトを優先する、タイトで効率的なスペーシング・システム。
05
サーフェス (角丸 / 影 / 罫線)
sm · 2px
md · 4px
lg · 8px
pill · 999px
1px solid rgb(229, 231, 235)
rgba(0, 0, 0, 0.03) 0px 4px 40px 0px · rgba(0, 0, 0, 0.3) 0px 30px 70px 0px
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
クリーンでトップ位置のナビゲーションと最小限のUI要素を持つ、フルブリードの写真レイアウト。
07
モーションとインタラクション
200msmicro
300mssmall
500msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
繊細なUIインタラクションのための、スムーズな不透明度とトランスフォームのトランジション。
画像から注意をそらすことなく、インタラクティビティを示すための、微細な不透明度の変化または微小な空間シフト。 · 重いアニメーションのない、即座でクリーンなフィードバック。
08
コンポーネント
- button ミニマリストで、ボーダーレスまたはアウトライン付きのボタン。正確で小さなパディングとタイトなトラッキング。
- card 高品質な写真に大きく依存し、タイトなテキストオーバーレイを用いた、クリーンでボーダーレスのカード。
- input 細く微細なボーダーを持ち、背景塗りつぶしのないミニマルなフォーム入力。
- hero 雰囲気のある没入感を確立する、支配的なフルビューポートの写真ヒーロー。
09
文体と禁止事項
- トーン 洗練され、専門的で控えめ。製品自身に語らせる。
- 見出し 簡潔でモダン。メッセージの伝達に強力なビジュアル写真に大きく依存。
- CTA 直接的で目立たない。単純なテキストリンクや最小限のアウトライン付きボタンとして提示されることが多い。
- 明るいプライマリカラーを使用しない — スクリーンショットは厳密にモノクロームの基本パレットを示しています。
- 重く華やかなボーダーを使用しない — スクリーンショットはボーダーレスまたは非常に薄く微細な区切りを示しています。
- 過度に広く、または緩い字間を使用しない — スクリーンショットはすべての見出しにタイトなトラッキングを示しています。
- 大きさで忙しいUIパターンを使用しない — スクリーンショットは抑制の効いた写真中心のレイアウトを示しています。
- カードに重いドロップシャドウを使用しない — スクリーンショットは非常に微細で柔らかいエレベーション・シャドウを示しています。
- 遊び心のある丸みのあるUI要素を使用しない — スクリーンショットはシャープでクリーンな、長方形または最小限に丸みのあるコンポーネントを示しています。
- 避ける: 製品写真と衝突する、明るく彩度の高いアクセントカラーを避ける。
- 避ける: レイアウトのミニマリズムから注意をそらす、重いドロップシャドウや複雑なUI装飾を避ける。
- 避ける: 幾何学的なサンセリフ・システムと矛盾する、過度に装飾的またはスクリプト系の書体を避ける。
10
パック内の実スクリーンショット
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
このデザインは、複雑なUIよりも雰囲気のあるフルブリードの写真を優先する、プレミアム家具契約ウェブサイトのためのものです。パレットは厳密にモノクロームで、背景に#FFFFFFと#F6F6F6、プライマリテキストに#000000、微細な要素に#3E3E3Eを使用しています。タイポグラフィは、洗練されたモダンな印象のために、タイトなネガティブ・レター・スペーシングを持つクリーンで幾何学的なサンセリフです。重要な禁止事項には、明るいアクセントカラーの回避、重いUIボーダーまたはドロップシャドウの回避、緩く遊び心のあるタイポグラフィの回避が含まれます。レイアウトは広大でクリーンで、製品画像がビジュアル・ヒエラルキーを支配します。
en · zh-CN · zh-TW · ja · ko