厳選・オープン・無料

Caraway

無毒キッチン用品のための、モダンでプレミアムなDTC ECサイト。

01

デザイン DNA

モダンなホームライフに焦点を当てた、プレミアムな無毒キッチン用品ブランド。

02

カラー

大地色で落ち着いたトーンの、控えめなパレット。視覚的なインパクトには高品質な写真に依存します。

03

タイポグラフィ

transitional-serif · humanist-sans

• display56px · 700
• body16px · 400
• small12px · 400

インパクトのある見出しにはトランジショナルセリフ体を、すべての機能的なテキストにはヒューマニストサンス体を使用します。 · 本文テキストの可読性のために、 letterSpacing を 0.4px で統一します。

04

余白

4px の基本グリッドで、UI要素間のギャップを 11px と 8px で統一しています。

05

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

1px solid #1F3438

rgba(0, 0, 0, 0.05) 0px 4px 5px 2px

06

レイアウト

フルブリードのヒーローセクションと交互の背景色を持つ、画像多めのワイドなレイアウト。

07

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

ボタンやリンクのホバー時の繊細なトランジション。 · スムーズなスクロールまたはページトランジション。

インタラクティブ要素の、滑らかな色または不透明度のトランジション。 · 即座の視覚フィードバック。おそらくわずかなスケール変化または色の変化。

08

コンポーネント

• button 丸みを帯びたピル型ボタン（40px）。ソリッドバックグラウントまたはアウトラインを使用します。
• card ミニマルなカード。主に大きく高品質な製品写真またはライフスタイル写真で定義されます。
• chip 状態（例：「NEW」）を表すために使用される、小さく丸みを帯びたバッジ。
• input 両端が丸みを帯び、検索アイコンが統合された、フルワイドの検索バー。
• hero 太いセリフ体タイポグラフィとライフスタイル画像を組み合わせた、分割画面の大きなヒーローセクション。

09

文体と禁止事項

• トーン 自信に満ち、クリーンで、ヘルスとモダンデザインに焦点を当てたライフスタイル志向のトーン。
• 見出し 品質と信頼を伝えるため、太く宣言的なセリフ体フォントを使用。
• CTA 行動を促す明確なスタイル。プロモーション情報を经常に組み込みます。

• ネオンや高彩度のアクセントカラーを使用しない — スクリーンショットでは #5E6C51 や #B3C8E1 のような、落ち着いた大地色のパレットが示されています。
• プライマリボタンに角が鋭い四角を使用しない — スクリーンショットでは 40px の border-radius を持つピル型ボタンが示されています。
• 見出しにアグレッシブな全大文字テキストを使用しない — スクリーンショットでは小文字混じりのセリフ体見出しと、小ラベルのみで大文字が使われています。
• すべてに汎用的なサンスフォントを使用しない — スクリーンショットでは、ディスプレイ見出し用に明確なトランジショナルセリフ体が使われています。
• UIにテキストを詰め込みすぎない — スクリーンショットでは、大きなマージンと明確な視覚的階層を持つ広々としたレイアウトが示されています。
• ダークモードや重い背景パターンを使用しない — スクリーンショットでは、ソリッドまたは非常に控えめなグラデーション背景を持つ、クリーンでライトモードファーストのデザインが示されています。
• 避ける: 専門用語
• 避ける: 過度に技術的な言語
• 避ける: 攻撃的な販売戦術

10

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

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

11

System Prompt

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