厳選・オープン・無料
Audo Copenhagen
抑制の効いたエディトリアル美学を持つ、温かみのある高級スカンジナビアン家具Eコマースサイト
furnituredesign
01
デザイン DNA
家具スカンジナビアンミニマル温もり丁寧な仕上がり
高級スカンジナビアン家庭用品を厳選されたギャラリー
02
カラー
#929172Accent
#2F2B23Ink
#141414Ink soft
#F5F3EBBG
#FFFFFFBG soft
#817E74Muted
rgba(47,43,35,0.3)Line
アーストーンの低彩度アクセントを加えた暖色の中性色が、落ち着いた高級感のある雰囲気を生み出します
03
タイポグラフィ
transitional-serif · geometric-sans
- display
48px · 400 - heading
28px · 400 - body
14px · 400 - small
12px · 400
ナビゲーションとカテゴリーラベルには大文字の小さめテキストを使用 · ほとんどのテキスト要素にライトウェイト(400)を使用 · ブランド性和ディスプレイにはセリフフォントを用い、エレガンスを表現
04
余白
4px
8px
16px
24px
32px
40px
64px
96px
空間的な印象のために、十分なpaddingを用いた一貫した垂直リズム
05
サーフェス (角丸 / 影 / 罫線)
sm · 2px
md · 4px
lg · 10px
pill · 9999px
マットなアーストーンの、控えめな1pxボーダー。特定のサイドのみに使用されることも多い
0px 4px 5px 0px rgba(47,43,35,0) · 0px 32px 68px 0px rgba(0,0,0,0.3)
06
レイアウト
1440container
12columns
40pxgutter
768 / 1024breakpoints
コンテンツを中央寄せにした、フルワイドの写真ヒーローセクション
07
モーションとインタラクション
200msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.46, 0.45, 0.94)easing
ページ要素のフェードイントランジション · hover状態の滑らかなopacity変化
控えめなopacityの変化や背景色のシフト · ボタンやトグルに対する即座の視覚フィードバック
08
コンポーネント
- button 細いボーダーのアウトラインスタイル、マットなアクセントカラーの塗りつぶしスタイル、大文字の小さめテキスト
- card 大きな写真と十分なホワイトスペースに依存した、ミニマルなスタイリング
- chip 丸みのあるピル形状とアーストーンの塗りつぶしカラーを用いた、シンプルなトグルスイッチ
- input シンプルなアンダーラインまたはミニマルボーダーの入力フィールド。目立つようには配置しない
- hero セリフフォントの中央配置タイポグラフィを用いた、フルビューポートのシネマティックな製品写真
09
文体と禁止事項
- トーン 洗練され、落ち着きがあり、控えめなトーン
- 見出し 製品に焦点を当てた、ライトウェイトのエレガントなセリフフォント
- CTA 大文字のジオメトリックサンセリフ。アウトラインまたはマットな塗りつぶし
- 明るく彩度の高いプライマリカラーを使用しない — スクリーンショットは暖色の中性色(#F5F3EB, #2F2B23)とアーストーンのアクセント(#929172)による抑制されたパレットを示しています
- ウェイトの重い、太いタイポグラフィを使用しない — スクリーンショットのフォントウェイトは主に400(レギュラー)です
- 競合する複数の要素でレイアウトを雑然とさせない — スクリーンショットは大きな画像に焦点を当てた、クリーンで空間的なレイアウトを示しています
- すべての角に0pxのシャープなborder-radiusを使用しない — スクリーンショットは最小限の要素でも控えめな角丸(2.5pxから10px)を使用しています
- 標準的な青いリンクカラーや赤いCTAを使用しない — スクリーンショットはマットなアーストーンやシンプルなブラックテキストでアクションを表現しています
- ナビゲーションメニューを密集させない — スクリーンショットは大文字のナビゲーション項目間に広いspacingを設定しています
- 避ける: 派手な、ハイコントラストなカラー
- 避ける: 丸みのある、遊び心ある形状
- 避ける: ウェイトの重いフォント
- 避ける: 情報が詰め込まれた、雑然としたレイアウト
10
パック内の実スクリーンショット
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
プレミアムなスカンジナビアン家具Eコマースサイトをデザイン。典型的な小売店ではなく、厳選されたエディトリアルギャラリーとしてポジショニング。暖色で抑制されたパレットを使用:クリーム色の背景(#F5F3EB)、ダークアーストーンのインク(#2F2B23)、マットなオリーブアクセント(#929172)。タイポグラフィは、エレガントな見出し用のトランジショナルセリフと、本文用のクリーンなジオメトリックサンセリフをペアリングし、フォントウェイトはライト(400)を維持。重要な注意点:明るく彩度の高いカラーやハイコントラストなアクセントを使用しない。ウェイトの重い、太いタイポグラフィを使用しない。インタフェースを雑然とさせない。十分なホワイトスペースと大型のシネマティックな製品写真を優先。あらゆる箇所にシャープで角のない角を使用しない。インタラクティブ要素に標準的なウェブの青や赤を使用しない。密集した、込み合ったレイアウトを作成しない。
en · zh-CN · zh-TW · ja · ko