厳選・オープン・無料

Design Museum

写真のインパクトと大胆なタイポグラフィのアイデンティティを優先する、洗練された文化施設のサイトです。

01

デザイン DNA

建築的なギャラリーの入口を、デジタルインターフェースとして翻訳したものです。

02

カラー

建築的なイエローのアクセントと没入感のある写真を使用した、ハイコントラストのモノトーンです。

03

タイポグラフィ

geometric-sans · grotesque-sans

• display50px · 700
• heading30px · 700
• body15px · 400
• small12px · 500

建築的な緊張感を生むために、大きな表示タイプには狭い文字間隔を使用します。 · ナビゲーションやアクションラベルには大文字表記を優先します。 · 明確な階層を確保するために、表示と本文のウェイト間に高いコントラストを維持します。

04

余白

4pxのベースグリッドを使用し、主要コンテンツブロック間には写真が息づけるように豊かなホワイトスペースを設けます。

05

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

UI要素には1px solid blackを、アクティブ状態には2px solidを使用します。

0px 32px 68px 0px rgba(0,0,0,0.3)

06

レイアウト

中央揃えのコンテンツとグリッドベースの情報レイアウトを持つ、フルワイドの写真ヘーローです。

07

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

スクロール時にテキスト要素が段階的にフェードインし、スライドアップします。 · インタラクティブ要素には滑らかなhoverトランジションを使用します。 · ヘーロー画像には微細なパララク効果を適用します。

カラーリバースまたは大胆な背景の変化です。 · わずかなスケーリングや不透明度の変化による、即座の視覚フィードバックです。

08

コンポーネント

• button 角がシャープで大文字テキストを持つ、ハイコントラストのソリッドブロック（黒/白/イエロー）です。
• card シャープなボーダーまたは最小限のパディングで定義されたクリーンなコンテナです。
• chip オプションのボーダーを持つ、シンプルなテキストベースのタグです。
• input クリーンなボーダーと標準のパディングを持つ、ミニマルなフォーム要素です。
• hero 大胆なタイポグラフィのオーバーレイを持つ、大判の写真背景です。

09

文体と禁止事項

• トーン 機関的、権威がありつつも、歓迎的で先進的です。
• 見出し 大胆で簡潔、フレーズが建築的であることが多いです。
• CTA 直接的でアクション导向、強調には大文字を使用することが多いです。

• プライマリボタンの角を丸くしないでください — スクリーンショットではシャープで長方形のボタン形状が示されています。
• テキストに低コントラストカラーを使用しないでください — スクリーンショットでは白や黄の背景にハイコントラストの黒テキストが示されています。
• 装飾的なフォントやセリフフォントを使用しないでください — スクリーンショットではジオメトリックやグロテスクなサンセリフファミリーが示されています。
• 柔らかいパステルのアクセントカラーを使用しないでください — スクリーンショットでは大胆で高彩度のイエローアクセントが示されています。
• 全要素にセンタリングされたナビゲーションを使用しないでください — スクリーンショットでは左揃えのテキストとセンタリングされたハンバーガーメニューが示されています。
• カードに過度なボーダー-radiusを使用しないでください — スクリーンショットではシャープな角または非常に最小限の丸みが示されています。
• 避ける: 装飾的すぎるフォントやスクリプトフォントは避けてください。
• 避ける: 柔らかいパステルカラーパレットは避けてください。
• 避ける: プライマリボタンの角を丸くしないでください。
• 避ける: ホワイトスペース不足の雑然としたレイアウトは避けてください。
• 避ける: 一般的なストックフォトは避けてください。
• 避ける: 重要な情報のための低コントラストのテキストは避けてください。

10

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

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

11

System Prompt

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