厳選・オープン・無料

Fablepets

モダンでデザイン志向の高いペットギアのためのプレミアムeコマースプラットフォーム。

01

デザイン DNA

現代的なインテリアにシームレスに統合することに焦点を当てた、モダンな家居ブランド。

02

カラー

ハイコントラストのクリーンなベースに、ソフトなブルーアクセントとプライマリテキスト用のダークネイビーを採用。

03

タイポグラフィ

transitional-serif · geometric-sans

• display64px · 500
• body16px · 400

ヘッドラインやディスプレイテキストにはGelica（セリフ）を使用し、プレミアムでエディトリアルな印象を与えます。 · 本文、ナビゲーション、UI要素にはModerat（サンセリフ）を使用し、読みやすさを確保します。

04

余白

標準の4pxベースグリッドを使用し、縦のリズムに一貫したスケーリングを適用します。

05

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

1px solid rgba(3,14,40,1.0)

0px 4px 8px rgba(0,0,0,0.04) · 0px 0px 2px rgba(0,0,0,0.06) · 0px 0px 1px rgba(0,0,0,0.04)

06

レイアウト

フルワイドのヒーローセクションに続き、製品レイアウトには12カラムグリッドを採用。

07

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

インタラクティブ要素のhoverおよびfocus状態における滑らかなトランジション。

ボタンやリンクの、微細な背景色または不透明度の変化。 · 標準的なトランジションタイミングによる、即座の視覚的フィードバック。

08

コンポーネント

• button 余白を十分に確保した、角丸のソリッドプライマリボタン。
• card ソフトなシャドウ、クリーンなタイポグラフィ、目立つ写真を備えた製品カード。
• chip 「ベストセラー」タグ用のライムグリーンのバッジ。
• input 薄いボーダーを持つクリーンなインプットフィールド。
• hero 高品質な写真と目立つセリフ字体の見出しを備えた、大規模な分割レイアウトヒーロー。

09

文体と禁止事項

• トーン 遊び心がありながらもプレミアムで、ペット生活の喜びとデザインに焦点を当てます。
• 見出し 品質とスタイルを伝える、大きくエレガントなセリフ字体。
• CTA 明確でアクション指向、ハイコントラストで目立つ位置に配置。

• 大きな本文テキストにすべて大文字を使用しない — スクリーンショットでは見出しにタイトルケース、本文に標準ケースを使用しています。
• 鮮やかなネオン色を使用しない — スクリーンショットでは青、緑、ネイビーの控えめなパレットを使用しています。
• 過度に複雑なドロップシャドウを使用しない — スクリーンショットでは非常に微細でソフトなシャドウを使用しています。
• UI要素に幅広でブロック状のボーダーを使用しない — スクリーンショットでは細くクリーンなボーダー、またはボーダーなしを使用しています。
• すべてに太く重いタイポグラフィを使用しない — スクリーンショットではセリフ見出しとサンセリフ本文の間に明確な階層を示しています。
• 混沌としたグリッドレイアウトを使用しない — スクリーンショットでは構造化されたクリーンな12カラム配置を使用しています。
• 避ける: 過度に技術的な専門用語
• 避ける: ごちゃごちゃしたレイアウト
• 避ける: 派手なネオンカラーパレット

10

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

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

11

System Prompt

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