厳選・オープン・無料

Baggu

機能的かつ遊び心のあるデイリーバッグや小物のための、モダンなeコマースプラットフォーム。

01

デザイン DNA

明るく整備された小売店で、カラフルで高品質な製品が展示されているイメージ。

02

カラー

温かみのあるニュートラルな背景は、クリーンなギャラリーのようなキャンバスとなり、カラフルな製品写真がビジュアル階層の主役となることを可能にします。

03

タイポグラフィ

grotesque-sans

• display40px · 700
• body16px · 400
• label14px · 700

ナビゲーションリンク、カテゴリラベル、主要なアクションボタンには、すべて大文字を使用します。 · コンパクトでモダンな印象のため、字間をタイトに保ちます。 · セクション見出しには、強い視覚的階層を確保するためにウェイトの高い（700）フォントを優先します。

04

余白

標準の8pxベースグリッドを使用し、主要セクション間にはたっぷりの余白を設け、製品が映える空間を確保します。

05

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

構造要素には1px solid #000000を使用。ボタンはピル型（丸みのある）スタイルで、ソリッドな背景を用います。

0px 32px 68px 0px rgba(0, 0, 0, 0.3)

06

レイアウト

画像ベースのフルワイドヒーローセクションの後に、構造化されたグリッドベースの製品カタログが続きます。

07

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

ホバーステートでの滑らかなカラーおよびトランスフォーム遷移 · カートやナビゲーションの状態変化のためのマイクロインタラクション · 製品ギャラリーのシームレスな画像カルーセル遷移

クリック可能なテキスト要素やボタンに、微細な背景やカラーの遷移を適用します。 · ボタン押下時に即座に視覚的フィードバックを提供。通常は、わずかな色調の変化やスケールダウンです。

08

コンポーネント

• button 漆黒（#000000）のソリッド背景に白（#FFFFFF）の大文字テキスト。非常に丸みのある（ピル型）形状で、最小限のパディング。
• card ニュートラルな背景の上に高品質な製品写真を配置する、クリーンでボーダーレスのレイアウト。
• chip カテゴリナビゲーション用の大文字で太いテキストリンク。字間を大きく取り、背景やボーダーは不可視にします。
• input 最小限のボトムボーダーのみの入力フィールド。黒いアンダーラインと、フローティングプレースホルダーテキスト。
• hero ビューポートの全幅にまたがる、フルブリードの高彩度ライフスタイル写真。

09

文体と禁止事項

• トーン 率直で、フレンドリーかつ、自信を持ってシンプルです。
• 見出し 短く、力強く、非常に描写力のあるコピー。oftenは大文字で表記します。
• CTA アクション指向の、命令形の動詞を使い、高コントラストボタン内で大文字で設定します。

• レイアウトセクションにカラフルで賑やかな背景を使用しない — スクリーンショットでは、一貫したニュートラルなオフホワイト（#F6F4EE）のキャンバスが示されています。
• 見出しにセリフやスクリプトフォントを使用しない — スクリーンショットでは、太字のグロテスクサンススタイルが示されています。
• 小さく繊細なボタンを使用しない — スクリーンショットでは、高コントラストのピル型（丸みのある）黒いボタンが示されています。
• レイアウトに密集したテキストブロックを詰め込まない — スクリーンショットでは、たっぷりの余白と大きなイメージが示されています。
• ダークモードや濃い炭色の背景を使用しない — スクリーンショットでは、主に明るく、温かみのあるニュートラルな背景が示されています。
• 最小限の写真で製品を隠さない — スクリーンショットでは、鮮やかで高彩度の製品写真が主要な焦点となっています。
• 避ける: 過度に華やかまたは専門用語的な表現
• 避ける: 余分な形容詞や最上級の表現
• 避ける: 過度にフォーマルで距離感のある企業言語

10

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

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

11

System Prompt

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