厳選・オープン・無料

SFMOMA

世界クラスの現代アート博物館のための、写真を主役にした大胆なエディトリアルデザイン。

01

デザイン DNA

現代アートギャラリーのデジタルフロア。大規模な写真と大胆なタイポグラフィを重視し、実際のギャラリーエクスペリエンスを想起させる。

02

カラー

白を基調とし深みのある墨色のインクを使用した抑制の効いたコントラストの高いパレット。鮮やかな赤色のアクセントは、インタラクティブおよび会員制の要素に厳密に限定して使用する。

03

タイポグラフィ

geometric-sans · humanist-sans

• display32px · 500
• body16px · 400
• caption14px · 400
• overline12px · 400

見出しには、ウェイトが重くリーディングの詰まったディスプレイサンセリフを使用。 · 本文には、可読性の高いヒューマニストサンセリフを使用。 · ラベルやタグは、一貫して大文字で字間を空けたスタイルとする。

04

余白

豊かな垂直方向の余白。主要コンテンツブロックには120pxの大きなtopパディングを設け、開放感と実際のギャラリースペース感を演出する。

05

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

1px solid rgba(45, 48, 51, 1.0)

rgba(68, 73, 76, 0.2) 0px 3px 15px 0px

06

レイアウト

プライマリコンテンツには、ビューポートの全幅にまたがる大規模なイメージを使用したシングルカラムのフル幅レイアウトを採用。

07

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

インタラクティブ要素のtransformおよびbox-shadowに滑らかなトランジションを適用（0.4s）。 · 状態変化には一般的な0.2sのトランジションを使用。

インタラクティブ要素の色の変化や微細な変形。ポインターカーソルで示される。 · 標準的なリンク動作による即座のレスポンス。

08

コンポーネント

• button 鮮やかな赤色のアクセントカラーを持つゴーストボタンまたはテキストリンク。ポインターカーソルを標準とする。
• card 大きなフル幅画像と、その後に続くテキストブロックで構成されるコンテンツブロック。目立つボーダーや背景コンテナは使用しない。
• chip タグやカテゴリとして使用される大文字のテキストラベル。
• input 有効になるまで入力フィールドは表示されない、検索アイコントリガー。
• hero 大規模で半透明の白のディスプレイタイポグラフィをオーバーレイした、フルブリードの写真ヒーロー。

09

文体と禁止事項

• トーン 公共性があり、権威的でありながら、親しみやすくアクセシブルなトーン。
• 見出し 大胆、簡潔、パンチのあるコピー。 Often, display weights を使用して即座に注意を引く。
• CTA 行動を促す明確なコピー。通常、'会員登録' や 'チケット' などの標準的な動詞を使用。

• コンテナや画像に角丸を使用しない — スクリーンショットでは鋭い四角いエッジが示されている。
• ドロップキャップや飾りフォントを使用しない — スクリーンショットではクリーンでモダンなディスプレイサンセリフが使用されている。
• 赤色のアクセントカラーを過剰に使用しない — スクリーンショットでは、プライマリナビゲーションとインタラクティブ要素に厳密に限定されている。
• 密集したマルチカラムテキストレイアウトを使用しない — スクリーンショットでは、豊かな余白とシングルカラムの読書パスに依存している。
• 影やボーダーを持つ複雑カードスタイルを使用しない — スクリーンショットでは、ボーダレスで画像を前面に出したブロックが使用されている。
• ダークモードやダークな背景を使用しない — スクリーンショットでは、明るく白を基調としたインターフェースが示されている。
• 避ける: 過度にカジュアルな言葉遣い
• 避ける: ごちゃごちゃしたテキストブロック
• 避ける: 一般的なストックフォト

10

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

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

11

System Prompt

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