厳選・オープン・無料

Winamp

クリーンなデザインと表現力豊かな写真を通じて、アーティストとリスナーをエンパワーメントする、モダナイズされた音楽プラットフォーム。

01

デザイン DNA

ノスタルジックな温かさとコンテンポラリーなクリーンな美学を融合させた、クラシック音楽プレイヤーブランドの現代的再生。

02

カラー

クリーンな白のキャンバスに、ハイコントラストのダークタイポグラフィと、ブランドの活力を示す1つのウォームオレンジアクセントを配置。

03

タイポグラフィ

geometric-sans · humanist-sans · geometric-mono

• display69px · 700
• h234px · 600
• body-lg24px · 400
• body15px · 400
• caption12px · 400

見出しにはタイトなネガティブトラッキングを持つ重量感のあるジオメトリックサンセリフを使用 · 本文には長文読み込みに適した、非常に読みやすいヒューマニストサンセリフを使用 · ナビゲーションとUI要素には、小サイズで通常のウェイトのヒューマニストサンセリフを使用

04

余白

4pxベースグリッドを一貫して使用し、ヒーローセクションでは40pxと56pxの余白を活用した、ゆったりとしたホワイトスペース。

05

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

0 2px 8px rgba(0,0,0,0.04) · 0 8px 24px rgba(0,0,0,0.08)

06

レイアウト

ヒーローセクションは分割レイアウト（テキスト左、オーバーラップするイメージ右）を使用。ナビゲーションはフルワイドで標準的な水平配置。

07

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

ナビゲーションリンクとボタンの微細なホバーステート · 'all'プロパティによるインタラクティブ要素のスムーズなトランジション

インタラクティブ要素のカラーシフトまたは微細な不透明度の変化。 · 標準的なボタンステートによる即時フィードバック。

08

コンポーネント

• button 白背景にダークボーダーを持つ、角丸のアウトラインプライマリーボタン。
• card オーバーラップするボーダーと微細な角丸を持ち、アーティストな表現に使用する、イメージ重視のカード。
• chip 分類用の、明るい背景を持つシンプルな角丸タグ。
• input モーダルダイアログに統合された、微細なボーダーを持つ標準フォームフィールド。
• hero 巨大なタイポグラフィと、傾斜し重なり合うダイナミックなイメージコラージュを特徴とする、大規模分割レイアウト。

09

文体と禁止事項

• トーン プロフェッショナルで、エンパワーメントを促し、少しノスタルジックでありながら、モダンで親しみやすい。
• 見出し 巨大で、ボールドで、ミニマル。タイポグラフィとイメージに重みを委ねる。
• CTA 標準的なボタンのアフォーダンスを備えた、直接的で明確なもの。攻撃的なビジュアルスタイルを避ける。

• ネオン色や非常に彩度の高いバックグラウンドカラーを使用しない — スクリーンショットはクリーンな白の背景（#FFFFFF）を示しています。
• 本文に装飾的なセリフフォントを使用しない — スクリーンショットはクリーンなヒューマニストサンセリフを示しています。
• 雑然として密に詰め込まれたレイアウトを作成しない — スクリーンショットは（例：40px、56pxのような）ゆったりとしたホワイトスペースとパディングを示しています。
• インタラクティブコンポーネントにシャープで四角い角を使用しない — スクリーンショットは（8px、12pxのような）角丸を示しています。
• ダークモードをデフォルトテーマとして使用しない — スクリーンショットはブラックテキストを持つライトモードテーマを示しています。
• 要素に重いドロップシャドウや3D効果を使用しない — スクリーンショットは最小限のボーダーを持つフラットでクリーンなサーフェスを示しています。
• 避ける: 過度に複雑な技術用語
• 避ける: 攻撃的または大げさなマーケティング言語
• 避ける: 雑然としたレイアウト

10

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

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

11

System Prompt

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