厳選・オープン・無料
Consumedinkey
音楽コラボレーションのための、厳格なコントラストと写真要素を使う、ミニマリストで雰囲気のあるウェブサイト。
EditorialPhotographicMonochromeRestraintCalm
01
デザイン DNA
ミニマリストアヴァンギャルド音楽的抽象的没入感のある
音楽プロジェクトのための、厳しく雰囲気のあるギャラリー展覧会。
02
カラー
#ffffffInk
#000000BG
rgba(0,0,0,1.0)Line
高コントラストのモノクロームパレット。純粋な黒と白を使い、厳しく焦点の絞られた雰囲気を生み出す。
03
タイポグラフィ
humanist-sans
- display
64px · 400 - body
16px · 400
HelveticaLTまたは同様のhumanist-sansを使用。 · フォントウェイトを400に統一。 · すべてのテキストに微細で正のletter-spacingを適用。
04
余白
4px
8px
16px
24px
32px
48px
64px
96px
十分なpaddingと一貫したギャップが、開放的で息のできるレイアウトを生み出す。
05
サーフェス (角丸 / 影 / 罫線)
sm · 0px
md · 0px
lg · 0px
pill · 0px
鋭く硬いエッジ。border-radiusなし。コンテンツが空間に浮遊する。
06
レイアウト
1920container
16pxgutter
768breakpoints
フルブリードのヒーローセクションの後、中央にビジュアル、両側にテキストカラムを持つ暗いコンテンツセクションが続く。
07
モーションとインタラクション
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1.0)easing
すべての要素にグローバルなトランジションプロパティが適用され、インタラクション時の滑らかな状態変化を示唆する。
ポインタカーソルを持つ要素は、おそらくカラーや不透明度の変化で状態が変わる。 · 標準的なポインタクリック動作。
08
コンポーネント
- button シンプルな区切り線（例：「Listen | Buy」）を持つテキストベースのアクション。
- card 未使用。ビジュアルはエッジ_to_エッジの没入感のあるイメージとして提示される。
- chip なし。
- input なし。
- hero テキストをオーバーレイした、フルスクリーンの雰囲気あるモノクローム写真ヒーロー。
09
文体と禁止事項
- トーン 冷静で、抑制が効き、神秘的。
- 見出し シンプルで断定的。アルバムタイトルとアーティスト名を使用。
- CTA 最小限で直接的。パイプ区切り线でアクションを示す。
- 要素にborder-radiusを使わない——スクリーンショットではすべてが完全に角が鋭い。
- 鮮やかなアクセントカラーを導入しない——スクリーンショットは厳格にモノクロームの黒と白のみ。
- 装飾的またはセリフフォントを使わない——スクリーンショットはクリーンで幾何学的なサンセリフ（HelveticaLT）を使用。
- ドロップシャドウやボックスシャドウを追加しない——要素は背景に対してフラットに見える。
- 複雑な背景パターンやグラデーションを使わない——背景は単色またはフルブリードの画像。
- 複数のフォントウェイトを使わない——スクリーンショットでは一貫した均一なウェイト（400）が全体に使用されている。
- 避ける: 感嘆符や過度に熱狂的な言葉遣いを避ける。
- 避ける: 複雑な文や段落を避ける。
- 避ける: 明るく飽和した色を避ける。
- 避ける: 装飾的なフォントや過度なフォントウェイトを避ける。
10
パック内の実スクリーンショット
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
これは音楽コラボレーション『Consumed In Key』のための、ミニマリストで雰囲気のあるウェブサイトです。純粋な黒（#000000）と白（#ffffff）の厳格で高コントラストのモノクロームパレットと、単一の雰囲気あるモノクローム写真要素を使用しています。タイポグラフィはクリーンで幾何学的なhumanist-sans-serif（HelveticaLT）で、一貫した400ウェイトと微細なletter-spacingで設定されています。レイアウトは没入感があり開放的で、十分なpaddingとフルブリードのイメージを活用しています。重要なデザイン制約：1) アクセントカラーなしの絶対的な色の自制を維持。2) すべての要素にゼロのborder-radiusを持つ鋭く硬いエッジを使用。3) タイポグラフィを最小限にし、ウェイトを均一にし、微細にスペーシング。装飾的な要素、複雑なコンポーネント、高エネルギーなインタラクションはすべて回避。目標は、音楽コンテンツを補完する冷静で焦点を絞り神秘的なビジュアル体験を作ることです。
en · zh-CN · zh-TW · ja · ko