厳選・オープン・無料
Master & Dynamic
Master & Dynamicは、クリーンで画像主導のe-commerceプラットフォームを通じて、抑制の効いたインダストリアルな美学でプレミアムオーディオハードウェアを提示します。
hardwareaudio
01
デザイン DNA
プレミアムインダストリアルオーディオクラフツマンシップミニマリスト
精巧に作られたオーディオハードウェアを展示するハイエンドデザインギャラリー
02
カラー
#4A4A4AInk
#FFFFFFBG
#F2F2F2BG soft
rgba(74, 74, 74, 0.12)Line
高品質な製品写真がビジュアル体験を牽引する、ミニマリストな黒、白、グレーのパレット
03
タイポグラフィ
grotesque-sans · geometric-sans
- display
52px · 400 - heading
41px · 700 - body-lg
20px · 400 - body
18px · 400 - body-sm
16px · 400
ナビゲーションおよびカテゴリラベルは大文字変換 · 全体を通してタイトな文字间距（ネガティブトラッキング） · 単行テキスト要素において行の高さはフォントサイズと一致
04
余白
4px
8px
16px
20px
24px
30px
48px
96px
基本4pxで、主に4倍（16px）、6倍（24px）、12倍（48px）の倍数を使用
05
サーフェス (角丸 / 影 / 罫線)
sm · 4px
md · 7px
lg · 8px
pill · 9999px
1px solid rgba(74, 74, 74, 0.12)
rgba(0, 0, 0, 0.5) 0px 5px 15px 0px
06
レイアウト
1440container
12columns
24pxgutter
768 / 1024breakpoints
中央揃えテキストオーバーレイ付きのフルワイドヒーローイメージ；3カラム機能グリッド；コンテンツに沿ったテキストセクション
07
モーションとインタラクション
150msmicro
200mssmall
300msmedium
ease-in-outeasing
メニューおよびオーバーレイインタラクション用のフェードトランジション · インタラクティブ要素におけるスムーズなカラーおよびbackground-sizeトランジション · 150msタイミングでの微細なhover状態変化
background-color、color、box-shadow、およびボーダーのトランジション（150ms ease-in-out） · 微細なscaleまたはopacityフィードバック
08
コンポーネント
- button ダーク塗りつぶしに白文字、またはダークボーダー付きのアウトラインで、カプセル形状のボタン。テキストは大文字
- card エッジからエッジまでの製品写真を備えたミニマリストカード。画像ベースのカードには明確なボーダーまたはシャドウなし
- chip ボーダーと大文字テキストを備えた小さなカプセル形状のフィルター
- input 微細な下ボーダー付きのクリーンなテキスト入力、最小限のスタイリング
- hero 画像上に左揃えテキストオーバーレイを配置した、フルブリード高品質製品写真
09
文体と禁止事項
- トーン 自信に満ち、プレミアムで簡潔。製品の特性とブランド哲学に焦点を当てる
- 見出し 直接的な製品名とベネフィットステートメント。大文字またはタイトなトラッキングのディスプレイタイポで構成されることが多い
- CTA 「今すぐ購入」「詳しく見る」「続ける」などのシンプルでアクション指向の動詞。カプセル形状のボタンに配置
- 装飾的なセリフを使用しない — スクリーンショットでは、すべてのディスプレイおよびボディテキストにクリーンなグロテスク/ジオメトリックサンセリフシステムが使用されている
- 高彩度のアクセントカラーを使用しない — スクリーンショットでは、黒、白、グレーの厳格なモノクロマティックパレットが使用されている
- カードに重いドロップシャドウやボーダーを使用しない — スクリーンショットでは、最小限の表面処理を施したエッジからエッジまでの製品写真が使用されている
- 丸みを帯びた、遊び心のあるボーダーラディウスを使用しない — スクリーンショットでは、一貫してタイトなラディウス（4-8px）またはカプセル形状（9999px）が使用されている
- 広い文字间距を使用しない — スクリーンショットでは、すべてのテキストサイズにわたってタイトなネガティブトラッキングが使用されている
- テキストでレイアウトを混雑させない — スクリーンショットでは、十分な余白と大きなヒーローイメージがビジュアル階層を支配している
- 複数のフォントウェイトを使用しない — スクリーンショットでは、主に通常ウェイト（400）が使用され、太字（700）の使用は最小限
- 装飾的な背景を使用しない — スクリーンショットでは、フラットな白、黒、またはグレーの背景が使用され、製品写真がビジュアルの興味を生み出している
- 避ける: 技術用語の過剰な使用
- 避ける: 販売的な緊急性を煽る言葉
- 避ける: 装飾的なタイポグラフィ
- 避ける: テキストの背後にある雑然とした背景
- 避ける: 丸みを帯びたフレンドリーな美学
- 避ける: ネオンまたは高彩度のアクセントカラー
10
パック内の実スクリーンショット
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
Master & Dynamicは、クリーンでミニマルなe-commerceデザインを使用するプレミアムオーディオハードウェアブランドです。サイトはモノクロマティックパレット（背景#FFFFFF、テキスト#4A4A4A、ダークセクション#000000）を使用し、アクセントカラーはありません。タイポグラフィはカスタムグロテスクサンセリフで、タイトなネガティブトラッキングと最小限のウェイト変動（主に400）を特徴とします。レイアウトはゆとりがあり、フルブリードの製品写真がビジュアル体験を牽引します。重要な禁止事項：装飾的なセリフは絶対に使用しない、高彩度のアクセントは避ける、製品カードに重いシャドウを絶対に追加しない、広い文字间距を使用せず、テキストでレイアウトを混雑させないこと。システムは克制を優先し、製品イメージに語らせ、インタラクティブ要素には大文字変換とカプセル形状のボタンを使用します。
en · zh-CN · zh-TW · ja · ko