厳選・オープン・無料

Bitofdenim

アップサイクルドデニム製品のための、ミニマルでエディトリアルスタイルのeコマースサイト。

01

デザイン DNA

ハイエンドファッションのエディトリアル誌

02

カラー

タイポグラフィとイメージに焦点を当てた、高コントラストの無彩色パレット

03

タイポグラフィ

didone-serif · monospace

• display280px · 700
• heading28px · 300
• body14px · 400

すべてのUIと本文テキストにSpace Monoを使用 · ヒーローのブランド名にはMeno Display Condensedを使用 · ナビゲーションテキストはクリーンに、大文字または文頭大文字で統一

04

余白

ゆとりのあるホワイトスペースとパディング

05

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

1px solid #1A0A0E

06

レイアウト

非対称レイアウトとゆとりのあるネガティブスペースを持つフルワイズヒーロー

07

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

透明度フェード · 画像スライドショー

微妙な透明度の変化 · 即座の応答

08

コンポーネント

• button 大文字テキストを含む、ミニマルなアウトライン付き長方形
• card 目に見えるカードはなく、製品画像は直接提示される
• input シンプルなアウトライン付きテキスト入力
• hero スタジオ写真と組み合わされた大きなタイポグラフィ

09

文体と禁止事項

• トーン 静かで自信のある、エディトリアルなトーン
• 見出し 「No Denim Left Behind」のような短く影響力のあるフレーズ
• CTA 「Shop All」や「OK!」のようなシンプルで機能的な表現

• グラデーションを使用しない — スクリーンショットはフラットで単色の背景を示している
• コンテナに角丸を使用しない — スクリーンショットはシャープで長方形のエッジを示している
• ドロップシャドウを使用しない — スクリーンショットはエレベーション効果のない要素を示している
• 明るいアクセントカラーを使用しない — スクリーンショットは厳密に単色のパレットを示している
• ナビゲーションにサンセリフを使用しない — スクリーンショットはモノスペースフォントを示している
• レイアウトを雑然とさせない — スクリーンショットはゆとりのあるネガティブスペースと最小限の要素を示している
• 避ける: 過度な形容詞
• 避ける: 大げさまたは攻撃的な言葉
• 避ける: 雑然としたインターフェース

10

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

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

11

System Prompt

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