厳選・オープン・無料

Glossier

ミニマルなデザインと遊び心のある温かい写真を融合させた、現代的なダイレクト・トゥ・コンシューマービューティーブランド。

01

デザイン DNA

ピンクを着てアイスコーヒーを飲む、フレンドリーでミニマルなビューティーエディター。

02

カラー

ハイコントラストな黒と白の基盤に、柔らかいウォームニュートラルを加え、写真とピンクの製品アクセントにカラーを依存します。

03

タイポグラフィ

grotesque-sans · monospace

• display130px · 400
• h132px · 500
• body16px · 400
• small12px · 400

ナビゲーションと小さなラベルには全角大文字 · 見出しテキストにはtightな文字間隔 · 本文は可読性のために通常のウェイトを維持

04

余白

標準的な4pxグリッドを使用し、セクション間にはゆったりとしたホワイトスペースを確保。

05

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

ボタンと入力フィールドには1pxの細い黒いボーダーを使用し、角丸はなし。

06

レイアウト

オーバーレイの大きなタイポグラフィを備えた、フルワイドの写真ヒーローセクション。

07

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

モーダルオーバーレイとコンテンツセクションのフェードイントランジション。 · インタラクティブ要素に対する滑らかなfont-sizeとopacityのトランジション。

標準ポインターカーソル。微妙なopacityまたはカラーのトランジションが期待されます。 · 標準的なカーソルフィードバックによる即座の応答。

08

コンポーネント

• button 黒いボーダーと黒いテキストを持つ、アウトライン付きの長方形ボタン。
• card タイポグラフィと写真に依存した、クリーンでボーダーレスなコンテンツブロック。
• chip 目視なし。
• input 1pxのボーダーとプレースホルダーテキストを持つ、シンプルな長方形入力。
• hero 巨大な白のタイポグラフィオーバーレイを持つ、フルブリードのライフスタイル写真。

09

文体と禁止事項

• トーン 遊び心があり、会話的で、親密。
• 見出し 短く、力強い。often小文字または文頭大文字で、少し態度を感じさせる。
• CTA 直接的で、アクション重視で、少しカジュアル（例：'Fetch the look'）。

• 鮮やかなネオンカラーを使用しない — スクリーンショットは黒、白、ソフトピンクのパレットのみを示しています。
• コンポーネントの角を丸めない — スクリーンショットはボタンやモーダルにシャープで四角いエッジを示しています。
• エレベーションにドロップシャドウを使用しない — スクリーンショットはほとんどの要素にフラットでボーダーレスなデザインを示しています。
• セリフ体タイポグラフィを使用しない — スクリーンショットはクリーンで幾何学的なサンセリフフォントの一貫した使用を示しています。
• tightなpaddingで要素を詰め込まない — スクリーンショットはテキストと画像の周囲にゆったりとしたホワイトスペースを示しています。
• 背景に重いグラデーションを使用しない — スクリーンショットはソリッドカラーと写真背景を示しています。
• 避ける: 企業用語
• 避ける: アグレッシブな販売言語
• 避ける: 形式張りすぎる専門用語

10

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

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

11

System Prompt

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