厳選・オープン・無料

The Broad

大胆な赤のアクセントとクリーンなsans-serifタイポグラフィを用いてアートを展示する、ハイコントラストで展示に焦点を当てた美術館サイト。

01

デザイン DNA

大胆なグラフィックサインとゆとりある白い壁を持つ、クリーンでインスティテューショナルなギャラリースペース。

02

カラー

ニュートラルなホワイト/グレーキャンバスに、プライマリブランディングとアクション用の主要な高彩度の赤を使用したハイコントラストの展示デザイン。

03

タイポグラフィ

grotesque-sans

• display36px · 700
• body14px · 400

テキスト変換の大文字表記は、ナビゲーション、ラベル、見出しに多用されます。 · タイポグラフィは、クリーンでインスティテューショナルな外観のために、sans-serifカテゴリ内に厳密に留められます。 · 行の高さは見出しに対してはタイトに、本文テキストに対しては標準に保たれ、可読性が確保されます。

04

余白

一貫した4pxの基本グリッドが適用され、ナビゲーションやインタラクティブ要素には標準的なpaddingが使用されます。

05

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

プライマリボーダーには1px solid #333F48を、時折2pxのアクセントを使用。

rgba(0, 0, 0, 0.06) 0px 13px 20px 0px · rgba(0, 0, 0, 0.26) 0px 3px 16px 0px

06

レイアウト

大きな画像とソリッドカラーテキストブロックを持つ分割ヒーローレイアウトから、コンテンツ用のマルチカラングリッドに移行。

07

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

hover状態に対する標準的なopacityとbox-shadowトランジション。

hover時の微細なトランジション。しばしばbox-shadowまたは軽微なopacityの変化を伴う。 · 複雑なマイクロインタラクションなしの、直接的なナビゲーションまたは状態変更。

08

コンポーネント

• button 大文字表記のテキストとタイトなpaddingを持つソリッドなプライマリボタンと、アウトライン付きのセカンダリボタン。
• card シンプルなテキストキャプションと整列されたステータスインジケーター（例：「展示中」）を持つ、画像多めのカード。
• hero フルワイドのフォトグラフィーブロックと、メッセージを持つハイコントラストのソリッドカラーパネルを特徴とする、大きな分割パネルヒーロー。

09

文体と禁止事項

• トーン インビテーショナルで、明確で、インスティテューショナル。アクセシビリティと情報に焦点。
• 見出し 直接的で大文字、情報的。太みを使用して階層を構築。
• CTA アクション指向で非常に視認性が高い。ソリッドなカラーバックグラウンドまたはハイコントラストのボーダーを使用。

• 装飾的なserifフォントを使用しない — スクリーンショットには厳格なsans-serifのインスティテューショナルスタイルが示されています。
• マットまたはパステルのアクセントカラーを使用しない — スクリーンショットには、単一の主要なアクセントとして鮮やかで高彩度の赤（#D6001C）が示されています。
• 主要コンポーネントに角丸を使用しない — スクリーンショットには、パネルと大きなボタンの鋭く四角いエッジが示されています。
• 重いオーバーレイでアートを隠さない — スクリーンショットには、クリーンで視界を妨げないフォトグラフィーが示されています。
• プライマリナビゲーションに複雑なマルチカラングリッドを使用しない — スクリーンショットには、明確で単一のラインのトップナビゲーションバーが示されています。
• インタラクションに微細な色の変化に依存しない — スクリーンショットには、ハイコントラストのボタンと明確で区別されたセクションが示されています。
• 避ける: 過度にカジュアルで遊び心のある言葉を避ける。
• 避ける: 装飾的なserifフォントを避ける。
• 避ける: アートから目をそらすような複雑なグラデーションや影を避ける。

10

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

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

11

System Prompt

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