厳選・オープン・無料

Aather

プレミアムホームフレグランスのための、上品で雑誌スタイルのEコマース体験です。

01

デザイン DNA

バティックキャンドルブランドのための、ハイエンドなエディトリアル広告見開きのようなイメージです。

02

カラー

温かみのある写真トーンと柔らかな砂色のアクセントを用いた、抑制されたモノクロベースです。

03

タイポグラフィ

transitional-serif · humanist-sans

• display56px · 200
• h132px · 200
• body20px · 100
• small13px · 300

すべての大型ディスプレイコピーにはトランジショナル・セリフ体を使用します。 · ナビゲーション、ボタン、機能的なUI要素にはヒューマニスト・サンセリフ体を使用します。 · すべてのテキストで非常に細いフォントウェイト（100-300）を維持します。 · 可読性を高めるため、均一な0.5pxの文字間隔を適用します。

04

余白

要素間に豊かな余白を持つ、空間を活かした非対称レイアウトです。

05

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

控えめなボーダーを使用します。細かい区切りには1px solid rgba(0,0,0,0.5)を使用します。

06

レイアウト

フルブリードのヒーロー画像に続き、単カラムのテキストセクションを配置します。

07

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

ページ読み込み時の穏やかなopacityと位置のフェード。 · テキストリンクの滑らかなhover遷移。

控えめなopacityの変化やアンダーラインの出現です。 · 状態変化による即座の視覚フィードバックです。

08

コンポーネント

• button 1pxのボトムボーダーを持つ、ミニマルなテキストリンクです。
• card 背景やボーダーのない、クリーンな写真カードです。
• chip 小さな大文字サンセリフラベルです。
• input 控えめなボトムボーダーを持つ、クリーンなサンセリフ入力欄です。
• hero 大きなセリフテキストをオーバーレイした、フルブリードの写真ヒーローです。

09

文体と禁止事項

• トーン 詩的で、想起を呼び起こし、落ち着いたトーンです。
• 見出し 雰囲気を醸し出す、想起を呼び起こすセリフ文です。
• CTA ボトムボーダーを持つ、シンプルで直接的なテキストリンクです。

• 本文にボールドウェイトを使用しないでください — スクリーンショットでは非常に細く、軽いウェイト（100-300）が使用されています。
• UI要素に重いドロップシャドウを追加しないでください — スクリーンショットでは完全にフラットなサーフェスが使用されています。
• コンポーネントに角丸を使用しないでください — スクリーンショットでは鋭く、0pxの角を持つエッジが使用されています。
• ダークモードを使用しないでください — スクリーンショットでは主にホワイトと明るい背景が使用されています。
• 彩度の高いアクセントカラーを使用しないでください — スクリーンショットでは落ち着いた、砂色のアクセントが使用されています。
• レイアウトを要素で埋め尽くさないでください — スクリーンショットでは豊かな余白とミニマルな配置が使用されています。
• 避ける: 攻撃的な販売言語
• 避ける: 派手な感嘆符
• 避ける: 密度が高く、重いテキストブロック

10

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

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

11

System Prompt

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