厳選・オープン・無料
Nestig
温かみとデザイン性を重視した、プレミアムな育児およびキッズ家具。
ConsumerProductPremiumCleanCalm
01
デザイン DNA
育児室プレミアムデザイン温かみ親しみやすさ
現代的で洗練されたデザインを持つ、プレミアムでありながらも親しみやすい雰囲気の育児家具店。
02
カラー
#b3cce8Accent
#0a0a0aInk
#f9f5f2BG
#f8e7e5BG soft
#f3f3f3BG quiet
#535353Muted
rgba(10, 10, 10, 0.1)Line
温かみのあるニュートラルな背景が落ち着いた、親しみやすい雰囲気を作り出し、ダークネイビーとライトブルーのアクセントが明確な焦点を提供します。
03
タイポグラフィ
geometric-serif · humanist-sans
- display
32px · 400 - body
16px · 400 - caption
13px · 400
幾何学的なセリフ書体を大きな見出しに使用し、クラシックなエレガンスを加えます。 · 本文テキストとUI要素にはヒューマニストサンズを使用し、優れた可読性とモダンな印象を実現します。 · 本文テキストには十分な行間(1.5-1.6)を保ち、快適さを高めます。 · サンズセリフテキストに控えめな字間(0.24-0.28px)を設定し、洗練された、息が通るような外観にします。
04
余白
4px
8px
10px
12px
16px
24px
25px
32px
48px
全体を通して一貫した4pxの基本単位が使用され、12pxや25pxといった一般的なパディング値が、バランスの取れた、息が通るリズムを生み出します。
05
サーフェス (角丸 / 影 / 罫線)
sm · 4px
md · 10px
lg · 100px
pill · 999px
1px solid rgba(10, 10, 10, 0.1)
rgba(10, 10, 10, 0.05) 0px 4px 5px 0px · rgba(0, 0, 0, 0.1) 0px 0px 10px 0px
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
フルワイド、24pxギャターの12カラムグリッド。モーダルは、デスクトップで明確な画像・テキストの分割を備えた、センタリングされた固定位置のオーバーレイです。
07
モーションとインタラクション
220msmicro
300mssmall
400msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
モーダルの出現のためのフェードイン/フェードアウト(0.3秒) · インタラクティブな要素のhover状態のための、全プロパティのスムーズな遷移
要素には、hover時に微細なopacityや色の変化が起こり、カーソルがpointerに変わり、インタラクティブであることを示します。 · ボタンやインタラクティブな要素には、明確なカーソル状態と遷移があります。
08
コンポーネント
- button ライトブルー(#b3cce8)などのソリッドカラーフィルと十分なパディングを備えた、ピルシェイプのボタン。親しみやすく、クリックしやすい感覚を実現します。
- card 繊細なドロップシャドウと角丸を持つカード。おそらく製品画像が掲載されます。
- chip 顕著には見えませんが、フィルタリング用の小さな角丸タグが想定されます。
- input 薄いボーダー(10%のopacityの#0a0a0a)とプレースホルダーテキストを持つ角丸の入力フィールド。
- hero 大きな、温かみのあるトーンの製品写真と、ソフトな背景(#f9f5f2)のテキストコンテンツを組み合わせた、分割レイアウトのヒーローセクション。
09
文体と禁止事項
- トーン 温かみがあり、親しみやすく、デザイン意識の高いトーン。美的感覚と品質を重視する保護者に直接語りかけます。
- 見出し 明確で率直です。モーダルに見られるように、強調に幾何学的なセリフ書体がよく使用されます。
- CTA アクション指向でシンプル(例:「参加して当たる」「今すぐ購入」)。角丸のカラフルなボタンで提示されます。
- 純粋な白(#ffffff)を主な背景に使用しない — スクリーンショットでは温かみのあるオフホワイト(#f9f5f2)が使用されています。
- 高彩度の、電気的なアクセントカラーを使用しない — スクリーンショットでは、CTAにソフトなパステルブルー(#b3cce8)が使用されています。
- ボタンや入力フィールドに鋭い直角の角を使用しない — スクリーンショットでは、完全に丸みを帯びたピルシェイプの要素が使用されています。
- 密集した、小さなテキストブロックを使用しない — スクリーンショットでは、可読性のために十分な行間と間隔が確保されています。
- 重く、攻撃的なドロップシャドウを使用しない — スクリーンショットでは、奥行きを出すために繊細でソフトなシャドウが使用されています。
- 完全にモノクロームのパレットを使用しない — スクリーンショットでは、画像やUIに意図的なブルーやピンクのアクセントを加えた、温かみのあるニュートラル色が使用されています。
- 避ける: 過度に技術的な専門用語を避ける
- 避ける: 攻撃的なセールス言語を避ける
- 避ける: 雑然とした、または混沌としたレイアウトを避ける
10
パック内の実スクリーンショット
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
Nestigは、育児およびキッズ家具を扱うプレミアムDTCブランドです。そのビジュアルアイデンティティは、現代的な温かみと洗練されたデザインを融合させています。コアパレットは、温かみのあるオフホワイト背景(#f9f5f2)、深いチャコールテキスト(#0a0a0a)、ソフトブルーアクセント(#b3cce8)を使用しています。タイポグラフィは、見出しに幾何学的なセリフ書体を、本文にクリーンなヒューマニストサンズ(Matter)を組み合わせ、クラシックでありながらも現代的な外観を実現しています。レイアウトはスペースを活用し、グリッドベースで、構造には十分なパディングと微細なシャドウに依存しています。重要なデザインルール:オフホワイトの背景で温かみを維持する、明るいプライマリカラーの代わりにソフトなパステルアクセントを使用する、すべてのインタラクティブな要素が丸みを帯びたピルシェイプのフォームを持つことを確認する。重要な禁忌:純粋な白の背景を使用しない、ボタンに鋭い角を避ける、テキストの密度が豊かな余白圧倒することを決して許さない。
en · zh-CN · zh-TW · ja · ko