厳選・オープン・無料
MoMA
アートが息づけることを許す、ミニマルで写真を主役にしたエディトリアルデザイン。
museumculture
01
デザイン DNA
現代アート美術館インスティテューションキュレーション
世界をリードする現代美術館の、クリーンで権威あるインスティテューショナルな声。
02
カラー
#00B7F2Accent
#000000Ink
#767676Ink soft
#FFFFFFBG
#EEEEEEBG soft
rgba(0,0,0,1)Line
ハイコントラストの白黒が、カラフルなフォトグラフィーのための、ギャラリーのような中立的なキャンバスを生み出します。
03
タイポグラフィ
grotesque-sans
- display
56px · 900 - heading
40px · 900 - subhead
30px · 900 - body
18px · 400
すべてのプライマリテキストにMoMA Sans（grotesque-sans）を使用します。 · 大きなディスプレイテキストには、tight negative letter-spacingを適用し、インスティテューショナルな権威を強調します。 · 重みの強い見出しと通常の本文テキストの間に高いコントラストを保ちます。
04
余白
4px
8px
16px
24px
32px
48px
64px
96px
構造化された4pxベースグリッドにより、マルチカラムレイアウトの整合性を確保します。
05
サーフェス (角丸 / 影 / 罫線)
sm · 0px
md · 0px
lg · 0px
pill · 0px
最小限のボーダー。セクション区切りの太い水平線としてのみ使用します。
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
大きなフル幅ヒーローフォトグラフィーと厳格に左揃えのテキストブロックで固定された12カラムグリッドレイアウトです。
07
モーションとインタラクション
220msmicro
300mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1.0)easing
hover状態のための微細なopacity遷移。画像ローディングのためのシンプルなリニア表示。
テキストリンクやインタラクティブ要素は、hover時に色やopacityが変化します。 · 標準的なインタラクティブ状態。ボタンはtransformにより少し下に押し込まれます。
08
コンポーネント
- button 鋭角でハイコントラストな長方形ボタン。プライマリCTAは白文字の黒色ボタンです。
- card 強力なフォトグラフィーと大胆な飾り気のないタイポグラフィに依存するミニマルカード。
- chip 目立っては使用されず、標準的なハイパーリンクに依存します。
- input ボトムボーダーを持つクリーンでミニマルなインプット。
- hero オーバーラップするテキストコンテンツを含む、エッジからエッジまで延びるフルブリードのフォトグラフィックヒーローセクション。
09
文体と禁止事項
- トーン 権威があり、歓迎的で、文化的に重要。
- 見出し 短く、力強く、直接的。（例：「ようこそ」「MoMAでの一日を」）
- CTA アクション重視で親切。（例：「ご来館を計画する」「チケット購入」）
- 角丸を使用しない — スクリーンショットでは、0px半径の鋭角な長方形が示されています。
- ドロップシャドウを使用しない — スクリーンショットでは、フラットでボーダーレスな要素が示されています。
- プライマリコンテンツに暗い背景を使用しない — スクリーンショットでは、支配的な白いキャンバスが示されています。
- 飾り気のあるセリフフォントを使用しない — スクリーンショットでは、厳密なgrotesque-sansタイポグラフィシステムが示されています。
- 複雑なグラデーションを使用しない — スクリーンショットでは、実色フラットな写真背景が示されています。
- カードの周りに太いボーダーを使用しない — スクリーンショットでは、アウトラインのないクリーンな間隔が示されています。
- 避ける: 遊び心のある絵文字を避ける
- 避ける: 過度にカジュアルなスラングを避ける
- 避ける: ドロップシャドウや角丸を避ける
- 避ける: 飾り字体を避ける
10
パック内の実スクリーンショット
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
MoMA.orgは、ニューヨーク近代美術館のデジタルホームであり、ミニマルで権威ある、写真を主役にしたエディトリアルデザインを採用しています。パレットは厳密にハイコントラストで、プライマリ背景はホワイト（#FFFFFF）、テキストはディープブラック（#000000）、チケット販売用の単一の明るいシアンブルーアクセント（#00B7F2）を使用。タイポグラフィは、tight negative letter-spacing（-1.2px for display）を備えた太字の大きなディスプレイ見出しを特徴とする、カスタムgrotesque-sansフォントファミリーで設定。レイアウトは、角丸0px、ドロップシャドウのない、クリーンで飾り気のない12カラムグリッドであり、ギャラリーのような雰囲気を醸成。重要な禁止事項：あらゆる要素に角丸を使用しないこと。見出しに飾り字体やセリフフォントを使用しないこと。ドロップシャドウや複雑なグラデーションを使用しないこと。すべての大きなタイポグラフィにnegative letter-spacingを適用し、インスティテューショナルな雰囲気を確保すること。
en · zh-CN · zh-TW · ja · ko