厳選・オープン・無料
Theroger
クリーンなタイポグラフィと広大な余白に焦点を当てた、ミニマリストなプレミアムアスリティックフットウェア。
ProductPremiumPhotographicCurationClean
01
デザイン DNA
プレミアムミニマリストクリーンアスリティックライフスタイル
広大な余白を活用し、プレミアム製品が自身の価値を語らせる、ハイエンドのブティックカタログ。
02
カラー
#000000Ink
#222222Ink soft
#ffffffBG
#f7f7f7BG quiet
#666666Muted
rgba(0,0,0,0.10)Line
極度の抑制。モノクロームの基盤に、視覚的な興味をすべて高解像度の写真に依存します。
03
タイポグラフィ
geometric-sans · monospace
- display
50px · 700 - heading
39px · 700 - subheading
24px · 400 - body
16px · 400 - label
12px · 400
大きな表示テキストには Tight で negative な文字間隔を使用し、一体感のあるビジュアルブロックを創出します。 · テキストブロック間には十分な間隔を保ち、空気感のあるプレミアムな雰囲気を維持します。 · monospaced フォントは、技術的な詳細や特定のデザインアクセントにのみ控えめに使用します。
04
余白
4px
8px
16px
24px
32px
48px
64px
96px
厳密な4pxグリッドが基盤構造を提供しますが、実際のレイアウトではリズムの創出に大きな、構造化されていない余白に大きく依存します。
05
サーフェス (角丸 / 影 / 罫線)
sm · 4px
md · 8px
lg · 40px
pill · 999px
ボタンやプログレスインジケーターなどの機能要素にのみ、最小限の1px solidボーダーを使用します。
0px 0px 18px 0px rgba(0, 0, 0, 0.2)
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
セクション間に十分な垂直間隔と、実質的な水平マージンを維持するフレキシブルなグリッドシステム。
07
モーションとインタラクション
220msmicro
400mssmall
800msmedium
cubic-bezier(0.87, 0, 0.13, 1)easing
ボタンや画像のhoverなど、インタラクティブ要素に対するスムーズでhardware-acceleratedなトランジション。 · focusやhover時の微妙なスケールやトランスレーション変換による明確なフィードバックの提供。
インタラクティブ性を示すための、目を引かない背景色の変更や画像の微細なスケール。 · 状態変更による即座のビジュアルフィードバック。often伴随着スムーズなトランジション。
08
コンポーネント
- button ハイコントラストな黒ボタンに白文字。プライマリアクションにはピルシェイプ（40px radius）を、セカンダリアクションには透過アウトラインを多用します。
- card 製品画像とテキストを収めるシンプルでボーダーレスなコンテナ。視覚的なカードではなく、パディングと余白による区切りに依存します。
- chip 目に見えるセクションでは目立って使用されていません。タグがある場合は、シンプルな大文字テキストラベルとなるでしょう。
- input フォーム用の標準テキストインプット。最小限のスタイリングと、subtle なボトムボーダーを使用する可能性が高いです。
- hero 大胆で中央揃えの見出しを備えた、大きなフルワイド写真エリア。志向性のあるトーンを確立します。
09
文体と禁止事項
- トーン 自信があり、控えめで、プレミアム。言語は直接的で、製品の属性に焦点を当て、過度にセールスっぽくならないよう配慮します。
- 見出し 太字、大文字またはタイトルケースの見出しに negative な文字間隔を適用し、強いビジュアルインパクトを創出。
- CTA 直接的でアクション指向。ハイコントラストボタンにシンプルなテキストを使用するのが一般的です。
- グラデーションや複雑な背景を使用しない — スクリーンショットはフラットでモノクロームの白い背景を示しています。
- 装飾的なボーダーや重いシャドウを使用しない — スクリーンショットは、最小限のlevationを持つボーダーレスレイアウトを示しています。
- 多様なフォントカラーを使用しない — スクリーンショットでは、黒のテキストが白地にほぼ排他的に使用されています。
- 小さく窮屈な間隔を使用しない — スクリーンショットでは、すべての要素の周囲に十分な垂直および水平余白が確保されています。
- すべての要素に丸みのある角を使用しない — スクリーンショットでは、製品カードにシャープな角が使用され、プライマリボタンにのみピルシェイプが使用されています。
- 遊び心のある奇妙なタイポグラフィを使用しない — スクリーンショットでは、可読性とプレミアム感を優先した、クリーンで幾何学的な sans-serif フォントが使用されています。
- 避ける: 過度な形容詞
- 避ける: 騒がしいプロモーション言語
- 避ける: 雑然としたレイアウト
10
パック内の実スクリーンショット
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
ポジショニング: ミニマルなデザインと高品質の写真に焦点を当てた、プレミアムなダイレクト・トゥ・コンシューマーのアスリティックフットウェアブランド。主要カラー: 純白（#ffffff）と黒（#000000）による極めてコントラストの高いモノクロームパレット。微妙な背景の区別にはライトグレー（#f7f7f7）を使用。フォントカテゴリ: すべてのプライマリテキストにGeometric sans-serifを使用。monospaceも occasions 使用。重要な禁止事項: グラデーションや装飾的なシャドウは決して使用しない；広大な余白を維持して雑然としたレイアウトを回避する；プレミアムな美学を損なう遊び心のある装飾的なタイポグラフィは決して使用しない。
en · zh-CN · zh-TW · ja · ko