厳選・オープン・無料

Rijksmuseum

インパクトの大きい写真と太いタイポグラフィックブランドで、クラシックアートを紹介するプレミアムな文化遺産サイト。

01

デザイン DNA

格式ある国立美術館の入り口。

02

カラー

単一のウォームアクセントを持つハイコントラストのモノクローム。ビジュアルの豊かさは写真オーバーレイに依存。

03

タイポグラフィ

humanist-sans

• display120px · 700
• headline24px · 700
• body17px · 400

ナビゲーションとセクションラベルには大文字を使用 · 見出しとプライマリアクションには太字ウェイトを使用

04

余白

コンテナ内のパディングを十分に設け、写真に息をつかせる。

05

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

最小限。フォーム要素には通常1px solidのボーダー、または控えめな区切り線を使用。

06

レイアウト

オーバーレイタイポグラフィを持つフルブリードのヒーローセクションから、構造化されたコンテンツグリッドへと移行。

07

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

hover時の微細なbackground-sizeトランジション · コンテンツ読み込み時のフェードイン/アウト · インタラクティブな状態変化のためのスムーズなカラートランジション

background-colorトランジションとわずかなbackground-sizeスケーリング。 · 即座のビジュアルフィードバック。

08

コンポーネント

• button 大文字テキストのソリッドブロックカラー。角はシャープまたはわずかに丸める。
• card 画像重視。テキストは写真に直接オーバーレイ。
• chip ソリッド背景の小文字大文字のタグ。
• input 最小限のアンダーラインまたは薄いボーダーフィールド。
• hero 大規模なタイポグラフィックブランドをオーバーレイした、大規模なフル幅写真。

09

文体と禁止事項

• トーン 権威があり、エレガントで、かつ歓迎的。
• 見出し 直截的でインパクトがあり、 often 大文字を使用。
• CTA アクション重視、大文字、そして非常に目立つ。

• 遊び心のあるフォントや丸みのあるフォントを使用しない — スクリーンショットは構造化されたヒューマニストサンセリフを示している。
• マルチカラーパレットを使用しない — スクリーンショットは白、黒、単一のオレンジアクセントという抑制されたパレットを示している。
• 装飾的なボーダーや複雑なシャドウを使用しない — スクリーンショットはフラットでクリーンなサーフェススタイルを示している。
• 小さく詰まったタイポグラフィを使用しない — スクリーンショットは十分な間隔を設けた大きく読みやすいタイポグラフィを示している。
• 抽象的なパターンを使用しない — スクリーンショットは主要なビジュアル要素として高品質の写真画像を示している。
• ナビゲーションに小文字を使用しない — スクリーンショットは大文字のナビゲーションリンクを示している。
• 避ける: スラング
• 避ける: 過度にカジュアルな表現
• 避ける: 複雑な学術用語

10

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

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

11

System Prompt

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