厳選・オープン・無料

Glob Land

アクセシビリティを重視した、上品なライフスタイル商品のEコマース体験。

01

デザイン DNA

高品質な素材商品を紹介する、プレミアムなデザインジャーナル。

02

カラー

主にモノクロームのパレットで、鮮やかな白とクールなグレーを使用し、機能的なUI要素には1つの大胆なパープルを用いる。

03

タイポグラフィ

humanist-sans

• display32px · 500
• heading18px · 600
• body16px · 400
• small14px · 400
• tiny12px · 400

04

余白

すべてのspacing、padding、レイアウト構造に、一貫した4pxのベースグリッドを使用。

05

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

1px solid rgba(71, 71, 71, 0.1)

shadow-sm: 0 0 5px 0 rgba(25, 27, 30, 0.03) · shadow-lg: 0 4px 40px 0 rgba(25, 27, 30, 0.2)

06

レイアウト

余白をたっぷりと確保した、整ったレイアウト。読みやすさと明確なコンテンツ階層が優先される。

07

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

UI要素のフェードインとフェードアウト · 状態変化のためのsmoothなトランジション · インタラクティブなフィードバックのための微細な動き

ボーダーカラーや背景の不透明度に、繊細な変化を加え、洗練された印象を維持。 · 軽いスケールや不透明度の変化による即座のビジュアルフィードバックに続き、ベース状態へのトランジション。

08

コンポーネント

• button シンプルなピル型ボタンで、薄いボーダーまたはソリッドなパープル背景、テキストは大文字。
• card 柔らかい角丸と精巧な影を持つシンプルなコンテナで、グリッドレイアウトによく使用される。
• chip 細いボーダーを持つ、最小限の長方形要素。主にナビゲーションやフィルターに使用される。
• input 薄いボーダーと角丸を持つ、クリーンなフォームフィールド。機能的な明瞭さに焦点を当てる。
• hero フル幅または大きなフォーマットの画像に、大胆でクリーンなタイポグラフィと単一の明確なcall-to-actionを重ねて表示。

09

文体と禁止事項

• トーン フレンドリーで、親切かつプロフェッショナル。
• 見出し 直接的で明瞭、強調のために標準と太字のウェイトを混合して使用することが多い。
• CTA アクション指向で簡潔、ピル型ボタンの大文字テキストがよく使用される。

• 重いドロップシャドウを使用しない — スクリーンショットでは、奥行きを出すために非常に精巧で低不透明度のシャドウが使用されている。
• 明るく、調和の取れない色を使わない — パレットは白、グレー、そして1つのパープルアクセントに抑制されている。
• 過度に装飾的なフォントを使用しない — タイポグラフィはクリーンで機能的、非常に読みやすい。
• 要素を過剰にしてレイアウトを雑然とさせない — 設計は十分な余白と明確な階層構造を使用している。
• 鋭く攻撃的な角を使わない — 設計は柔らかく角丸（5pxから8px）や完全な丸みのあるピル型を好む。
• アクセシビリティを無視しない — インターフェースには、専用の包括的なアクセシビリティオプションパネルが含まれている。
• 避ける: 過度に専門的な専門用語
• 避ける: 攻撃的または大げさなマーケティング言語
• 避ける: 曖昧または不明確な表現

10

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

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

11

System Prompt

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