厳選・オープン・無料

Our Place

温かみのある大地色のトーンと、クリーンでモダンなタイポグラフィ、写真重視のレイアウトを組み合わせたプレミアムDTCキッチンウェアブランド。

01

デザイン DNA

素朴な温かみと現代的でクリーンなラインを融合したプレミアムホームグッズブランド。

02

カラー

温かみのある大地色の中性色が基盤を形成し、CTAにはマットなテラコッタ色のアクセントを配しています。

03

タイポグラフィ

transitional-serif · grotesque-sans

• display48px · 400
• h228px · 600
• body16px · 400
• caption12px · 400

ナビゲーションテキストは大文字、幅広な字間、そして小フォントサイズを使用します。 · 見出しにはプレミアム感を演出する、洗練されたトランジショナルセリフ体を使用します。 · 本文には極めて可読性の高い、ニュートラルなグロテスクサンセリフ体を使用します。

04

余白

4pxの基本ユニットによる一貫したリズムで安定した縦方向のリズムを生み出し、インタラクティブ要素には十分なpaddingを設けています。

05

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

1px solid rgba(53,49,46,0.2)

rgba(0, 0, 0, 0.2) 0px 0px 18px 0px

06

レイアウト

標準的な12カラムグリッドと最大幅コンテナ、中央揃えのコンテンツ、柔軟なスペーシングを採用しています。

07

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

インタラクティブ要素のhover時の不透明度とカラーのトランジション。 · カルーセルなど、複雑なUIステート変化のための滑らかなリニアトランジション。

リンクとボタンに、0.15sのease-in-outの繊細なカラートランジションを適用します。 · インタラクティブ要素には標準のポインターカーソルを使用します。

08

コンポーネント

• button 角がわずかに丸みを帯びた（4px）四角形のソリッドボタン。テキストは大文字。プライマリCTAにはマットなテラコッタ色のアクセントを使用します。
• card 十分な余白とクリーンなタイポグラフィを備えたミニマルなプロダクトカード。
• chip ナビゲーションに使用されるシンプルなテキストリンクまたは小さな大文字タグ。
• input クリーンなボーダーボトムスタイルの入力フィールド、またはシンプルなアウトラインフィールド。
• hero フルワイドの写真ヒーローセクション。オーバーレイされたセリフ体の見出しとプライマリCTAボタンを配置します。

09

文体と禁止事項

• トーン 温かみ、自信、そしてプレミアム感。品質と意識ある暮らしに訴えかけます。
• 見出し クリーンでエレガントなセリフ体の見出し。短く簡潔な場合が多いです。
• CTA 直接的、アクション指向、そして大文字。

• ネオン色や彩度の高い色を使用しないでください。スクリーンショットはマットな大地色のパレットを示しています。
• 強く、重いドロップシャドウを使用しないでください。スクリーンショットは非常に繊細な、あるいはシャドウなしのデザインを示しています。
• 見出しに遊び心のある丸みを帯びたフォントを使用しないでください。スクリーンショットは洗練されたトランジショナルセリフ体を示しています。
• ナビゲーションに全て小文字を使用しないでください。スクリーンショットは広めの字間を取った大文字テキストを示しています。
• 黒と白のコントラストが強く、堅いパレットを使用しないでください。スクリーンショットは温かみのあるオフホワイトとダークグレーを使用しています。
• 複雑で雑然とした背景を使用しないでください。スクリーンショットはクリーンな写真とソリッドカラーに依存しています。
• 避ける: 過度にカジュアルまたはスラングを多用した言葉遣いは避けてください。
• 避ける: 競合する要素を多く詰め込み、インターフェースを雑多にしないでください。

10

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

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

11

System Prompt

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