厳選・オープン・無料

Barbican

大胆なインスティテューショナル・ブランディングと没入感のあるイベント画像を結合した、世界級のアートセンター・ウェブサイト。

01

デザイン DNA

音楽、演劇、映画の多様なプログラムを提供する、権威ある都心のアートセンター。

02

カラー

バイブレントなシグネチャー・オレンジと深いブラックを基調とした、峻厳なインスティテューショナル・パレット。高インパクトの写真をフレームするためにデザインされています。

03

タイポグラフィ

grotesque-sans

• display56px · 700
• h240px · 700
• body19px · 400
• caption14px · 700

見出しはタイトなトレッキングのヘビーウェイトを使用します。 · 本文テキストは、平均よりやや大きいベースサイズで、非常に高い可読性を持ちます。 · 構造タグには大文字を使用し、控えめに留めます。

04

余白

コンテンツは豊かな垂直スペースで流れ、大きな画像に十分な余裕を与えます。

05

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

1px solid rgba(26, 26, 26, 0.2)

rgba(0, 0, 0, 0.1) 0px 0px 10px 0px · rgba(0, 0, 0, 0.05) 0px 0px 20px 0px inset

06

レイアウト

ドラマ性を出すためにグリッドを崩すフルブリード画像を備えた、強力なセントラル・カラム。

07

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

ボタンやホバー状態などのインタラクティブ・エレメントにおける、繊細なトランジション。 · ビューポートに入る際の、コンテンツセクションの滑らかなフェードまたはスライド。

ボタンやリンクにおける、不透明度や背景色の微細な変化。 · 即座の視覚フィードバック。 often a slight scale reduction or color shift.

08

コンポーネント

• button 角がシャープまたは少し丸みのある、塗りつぶしまたはアウトライン。プライマリ・アクションにはシグネチャー・オレンジを使用します。
• card 最小限のボーダーで目立つ画像を特徴とする、コンテンツ主導のカード。定義にはビジュアル・コンテンツに依存します。
• chip 「CINEMA」などのカテゴリを示す、ハイコントラスト色（オレンジ、グリーン）のソリッドで大文字のタグ。
• input 通常アウトラインまたは微かなボトムボーダーを持つ、最小限のスタイリングのシンプルなテキストフィールド。
• hero 大胆なオーバーレイテキストとプライマリCTAを持つ、フル幅またはほぼフル幅の没入感のある画像。

09

文体と禁止事項

• トーン 権威があり、歓迎的で、文化的に豊か。
• 見出し 直接的で魅力的、芸術的内容を記述的であることが多い。
• CTA 行動を促す明瞭なもの。ユーザーを特定のイベントや情報へと誘導します。

• 色あせたパレットやパステルカラーを使わない — スクリーンショットは高コントラストで鮮やかなオレンジとブラックのテーマを示しています。
• すべての要素に濃いドロップシャドウを適用しない — スクリーンショットは節度を示しており、深みを出すために必要な場所にのみ控えめなシャドウを使用しています。
• すべてのテキストを中央揃えにしない — スクリーンショットは左揃えのテキストブロックを強く好んでいます。
• 装飾的なフォントやスクリプトフォントを使わない — スクリーンショットは厳格でクリーンな、インスティテューショナル・サンセリフのタイポグラフィを示しています。
• 過度に丸みのあるUI要素を使わない — スクリーンショットは主に矩形またはわずかに角丸のコンポーネントを示しています。
• デスクトップで複雑なメガメニューにナビゲーションを隠さない — スクリーンショットは明確でプライマリなナビゲーションバーとドロップダウンインジケーターを示しています。
• 避ける: 会場の威厳を損なう可能性のある、過度にカジュアルな言葉や流行語を避けます。
• 避ける: 雑然としたメッセージを避け、画像に多くのコミュニケーションを担わせます。

10

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

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

11

System Prompt

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