厳選・オープン・無料

Cooper Hewitt

重厚なタイポグラフィと没入感のあるイメージを用いて展示やプログラムを提示する、大胆で機関的なデザイン博物館サイト。

01

デザイン DNA

大胆なタイポグラフィと没入感のある写真を用いてデザインの卓越性を紹介する、文化的アンカーポイントとしての名望あるデザイン博物館。

02

カラー

象徴的な鮮やかなオレンジのアクセントを持つ、高コントラストの機関的パレット。

03

タイポグラフィ

grotesque-sans

• display40px · 500
• body18px · 400

すべてのプライマリテキストは大文字です。 · 見出しには tight な line-height を使用します。

04

余白

厳格なグリッドシステム内で、余裕のあるpaddingとmargin。

05

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

1px solid rgba(255,255,255,0.5)

rgb(255, 255, 255) 5px 0px 0px 0px · rgb(255, 255, 255) -5px 0px 0px 0px

06

レイアウト

フルワイドの写真ヒーローセクションの後に、マルチカラムグリッドが続く構成。

07

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

hover時の色とborder-colorのトランジション。 · シンプルなカルーセルスライディングアニメーション。

テキストリンクとボーダーの色のトランジション。 · インタラクティブ要素には標準のポインターカーソル。

08

コンポーネント

• button 大胆な大文字テキストリンク。色付き背景（紫、青）に白文字のものもある。
• card フルブリードの写真ブロックに、大きな白背景のテキストラベル。
• chip 小さな円形のカルーセルインジケーター（オレンジ/グレー）。
• input テキストとアイコンを持つミニマルな検索バー。
• hero フルワイドのシネマティックな画像に、大きく白背景のヘッドラインオーバーレイ。

09

文体と禁止事項

• トーン 機関的で権威がありながらも、アクセシブルで魅力的なトーン。
• 見出し 大胆、大文字、サンセリフ。写真背景上に表示されることが多い。
• CTA 直接的でアクション志向。強調にはオレンジが頻繁に使用される。

• プライマリナビゲーションに小文字を使用しない — スクリーンショットではメニューアイテムが全て大文字、太字テキストである。
• 複雑なグラデーション背景を使用しない — スクリーンショットではヘッダーが純粋な黒背景である。
• 重量感のあるイメージなしで広く開放的なレイアウトを使用しない — スクリーンショットではフルワイドの写真ヒーローとタイトなグリッドが示されている。
• 細く繊細なタイポグラフィを使用しない — スクリーンショットでは表示テキストに重厚で太字の grotesque-sans フォントが使用されている。
• 白背景のテキストオーバーレイを避けない — スクリーンショットでは忙しい写真の上に白い長方形のヘッドラインが配置されている。
• 落ち着いたモノクロメインのパレットを使用しない — スクリーンショットでは鮮やかなオレンジアクセントを持つ高コントラストの黒と白の配色が示されている。
• 避ける: 筆記体フォント
• 避ける: 落ち着いたパステルカラーパレット
• 避ける: 低コントラストのテキスト

10

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

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

11

System Prompt

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