厳選・オープン・無料

Nomad

実用性と洗練された美学に根ざした、ハイエンドテックアクセサリーのためのプレミアムeコマース体験。

01

デザイン DNA

Appleスタイルの製品販売に、頑丈で旅行志向の工夫を加えたもの。

02

カラー

高コントラストのモノクロームベースに、写真を主役とし、主要なブランドアクセントカラーは使用しません。

03

タイポグラフィ

grotesque-sans · inconsolata

• display56px · 700
• heading24px · 700
• body16px · 400
• caption14px · 400
• overline12px · 700

04

余白

4px刻みのリニアなスペーシングスケールを採用し、大規模レイアウトには適度に余裕を持って使用します。

05

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

1px solid rgba(0, 0, 0, 1.0)

0px 6px 6px -3px rgba(0, 0, 0, 0.06) · 0px 0px 0px 1px rgba(0, 0, 0, 0.06) · 0px 0px 0px 1px inset rgba(0, 0, 0, 0.1)

06

レイアウト

フルワイドの画像ヒーロー、中央揃えの引用セクション、製品カードグリッドの順で構成。

07

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

オーバーレイやモーダルのフェードイン/アウト（不透明度 0.2s） · インタラクティブ要素のスムーズなホバートランジション（0.15s）

ボタンやリンクに、控えめな不透明度や色の変化を適用。 · 標準的なボタンステートによる即座の視覚フィードバック。

08

コンポーネント

• button 角丸ピル型またはソフトカーブのボタン。高コントラストの塗りつぶし、またはシンプルなテキストリンクを採用。
• card 角丸の製品カード。控えめなインセットシャドウまたはドロップシャドウを適用し、グリッドまたは画像背景を配置することが多い。
• chip プライマリビューポートには確認できません。
• input ソフトな角丸とインセットシャドウを持つ標準フォームフィールド。
• hero フルブリードの写真画像に、ダークグラデーションオーバーレイと、大きな、字間を詰めたサンセリフ typography を配置。

09

文体と禁止事項

• トーン 自信に満ち、プレミアムで、実用性に焦点を当てたもの。
• 見出し ミニマリストで、大きな、字間を詰めたサンセリフの定言。
• CTA 直接的で明確、行動を促すもの。

• 明るいプライマリアクセントカラーを使用しない — スクリーンショットは、支配的な色相のない厳格なモノクロームパレットを示しています。
• 主要な見出しに装飾的なセリフ字体を使用しない — スクリーンショットは、表示テキストに太く字間の詰まったグロテスクサンセリフを示しています。
• 主要なUI要素に柔らかい円形のボーダーラジウスを適用しない — スクリーンショットは、角張った角とピル型ボタンの組み合わせを示しています。
• 重厚でカラフルなドロップシャドウを使用しない — スクリーンショットは、非常に控えめでほぼ見えないドロップシャドウまたはインセットアウトラインを示しています。
• すべての本文を中央揃えにしない — スクリーンショットは、ヒーローテキストは中央揃えですが、それ以外の本文は標準の左揃えであることを示しています。
• 主要テキストに細く軽いウェイトを使用しない — スクリーンショットは、主に通常（400）と太字（700）のウェイトを示しています。
• 避ける: 過度にカジュアルで遊び心のある言葉を避ける。
• 避ける: 複雑なグラデーションや装飾的な flourish を避ける。
• 避ける: 低コントラストのテキストを避ける。
• 避ける: 煩雑なUIや過度なUI装飾を避ける。
• 避ける: 支配的な明るいアクセントカラーの使用を避ける。
• 避ける: 主要な見出しに装飾的なセリフ字体を使用しない。

10

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

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

11

System Prompt

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