厳選・オープン・無料
Topicals
巨大なタイポグラフィとハイコントラストな写真を用い、科学的裏付けのあるインクルーシブな処方を伝える、大胆でエディトリアルなスキンケアブランド。
beautyskincare
01
デザイン DNA
スキンケア科学的裏付けインクルーシブ大胆エディトリアル
臨床的な有効性と、遊び心、インクルーシブさ、ハイファッションなエディトリアル美学を融合させた、大胆でモダンなスキンケアブランド。
02
カラー
#FF454EAccent
#FFFFFFInk
#131212BG
#F6F6F6BG soft
#818181Muted
rgba(19, 18, 18, 1)Line
深い炭色と鮮やかな白を基調とし、エネルギッシュな焦点となるコーラルレッドのアクセントを加えた高コントラストパレット。
03
タイポグラフィ
geometric-sans · humanist-sans
- display
120px · 700 - heading
42px · 500 - body
14px · 400 - label
12px · 500
巨大なディスプレイテキストと主要見出しには、幾何学的sans-serifを使用します。 · 本文テキストとUI要素には、読みやすさを保つためにヒューマニストsans-serifを使用します。 · 大きなディスプレイテキストには、密接な文字間隔を適用し、インパクトのあるコンパクトな外観を作ります。 · 本文テキストは、14px以上のサイズで、可読性を確保します。
04
余白
4px
8px
10px
12px
16px
20px
24px
30px
48px
64px
UI要素には密接な4pxベースのspacingを、エディトリアルセクションには豊かな余白を組み合わせます。
05
サーフェス (角丸 / 影 / 罫線)
sm · 2px
md · 4px
lg · 8px
pill · 999px
ボーダーは、主に入力フィールドの状態やボタンのエッジを定義するために使用され、通常は1px solid blackです。
06
レイアウト
1440container
12columns
24pxgutter
768 / 1024breakpoints
巨大なタイポグラフィのワードマークと大きな製品写真が支配的な、フルブリードのヒーローセクションに、次に2カラムのエディトリアルセクションが続く構成です。
07
モーションとインタラクション
200msmicro
400mssmall
800msmedium
cubic-bezier(0, 0, 0.2, 1)easing
コンテンツ要素のフェードインアニメーション。 · インタラクティブ要素の滑らかなカラートランジション。 · テキストや背景色の変更に対するlinearトランジション。
ボタンやリンクなどのインタラクティブ要素は、滑らかな0.2秒のlinearトランジションで背景やテキストの色を変更します。 · 背景やボーダーの色の微細な変化が、アクティブ状態を示します。
08
コンポーネント
- button ボタンは、2pxのborder-radius、14pxのsans-serifテキスト、以及は透明な背景（ホバー時にソリッドカラーで塗りつぶされる）を持つ、クリーンでミニマルなデザインです。
- card コンテンツカードは、従来のカードの境界線やシャドウではなく、高品質な写真と豊かな余白に依存します。
- chip 1pxのボーダーと角丸を持つ、小さな大文字のラベルが、タグやセカンダリ情報として使用されます。
- input 入力フィールドは、シンプルな1pxボーダーと2pxのborder-radiusを使用し、クリーンで機能的な外観を維持します。
- hero 暗い背景に対して、巨大なタイポグラフィのワードマークと中央の製品ショットを特徴とする、フルビューポートのヒーローセクションです。
09
文体と禁止事項
- トーン 自信に満ち、インクルーシブで、科学的根拠に基づき、かつ少し遊び心のある。
- 見出し 大胆で大きく、直接的で、単一の単語や短くインパクトのあるフレーズがよく使われます。
- CTA シンプルで行動を促すもので、クリーンなsans-serifフォントと透明なボタンスタイルを使用します。
- 装飾的またはスクリプトフォントを使用しないでください — スクリーンショットでは、クリーンな幾何学的およびヒューマニストsans-serifのフォントが一貫して使用されています。
- ヒーローセクションに明るいまたはカラフルな背景を使用しないでください — スクリーンショットでは、暗い炭色の背景に白いテキストが使われています。
- カードに過剰なシャドウやボーダーを使用しないでください — スクリーンショットでは、重いコンテナのないクリーンな、写真を重視したレイアウトが示されています。
- マルチカラーパレットを使用しないでください — スクリーンショットでは、黒、白、および単一の鮮やかなコーラルアクセントに焦点を当てたパレットが示されています。
- ボタンや入力フィールドに大きく角丸のあるデザインを使用しないでください — スクリーンショットでは、より鋭く洗練された外観のために2pxのborder-radiusが使われています。
- 小さく散らかったレイアウトを使用しないでください — スクリーンショットでは、エディトリアルな雰囲気を生み出すために、巨大なタイポグラフィと豊かな余白が示されています。
- 避ける: 過度に技術的な専門用語、過度に装飾的な要素、または臨床的で無機質な美学は避けてください。
10
パック内の実スクリーンショット
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
これは、大胆な巨大タイポグラフィとハイコントラストな写真を駆使して、モダンでエディトリアルな雰囲気を生み出すプレミアムスキンケアブランドのウェブサイトです。プライマリカラーは深い炭色（#131212）と鮮やかな白（#FFFFFF）で、主要なCTAやインタラクティブ要素には鮮やかなコーラルレッド（#FF454E）のアクセントが使用されています。タイポグラフィは、ディスプレイ用に幾何学的sans-serifを、本文テキストにヒューマニストsans-serifを組み合わせ、大きな見出しには非常に密接な文字間隔を設定しています。主要なデザインルールは以下の通りです：装飾的またはスクリプトフォントは決して使用しない；ヒーローセクションに明るい背景を使用しない；すべてのコンポーネントに2pxのborder-radiusを使用する；余白を豊かにしたハイコントラスト、写真重視のレイアウトを維持する。トーンは自信に満ち、インクルーシブで、科学的根拠に基づいています。
en · zh-CN · zh-TW · ja · ko