厳選・オープン・無料

Boom Supersonic

大胆な写真を駆動する航空宇宙サイト。劇的なダークオーバーレイと正確なタイポグラフィで、超音速のスピードを披露。

01

デザイン DNA

ハイパフォーマンスな航空宇宙エンジニアリングと、現代のミニマリズムの融合。

02

カラー

黒と白を基調とした高コントラストなベースに、強調用に1色の鮮やかな黄を控えめに使用。

03

タイポグラフィ

geometric-sans

• display72px · 700
• h148px · 500
• body16px · 400
• caption12px · 400

すべてのテキストにStyrene A（または同様の幾何学的サンセリフ）を使用 · ディスプレイサイズには、タイトなトレッキングとラインハイトを採用 · 小サイズのテキストとラベルには、広めの文字間隔（1.2px）を使用

04

余白

96px、140pxの大きな垂直スペースを設けた、豊かなパディングがセクション間にドラマチックな余白を生み出します。

05

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

目に見えるボーダーは最小限に。区切りとして、時折、微細な白やグレーのラインを使用。

0 4px 24px rgba(0, 0, 0, 0.3)

06

レイアウト

全幅写真セクションと構造化されたコンテンツグリッドを交互に配置。フィーチャーのハイライトには、分割された2列レイアウトをよく使用。

07

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

インタラクティブ要素の滑らかなhoverトランジション（0.15秒） · スクロールトリガーのリビール用の、より長いtransformアニメーション（0.7秒）

ボタンやリンクの、微細な背景や色のトランジション。 · 色の変化による、即座の視覚的フィードバック。

08

コンポーネント

• button 白い背景に黒いテキスト、シャープな角（4px radius）、hover時にダークボーダーが付くプライマリ「Join Boom」ボタン。セカンダリボタンは、透明な背景に白いボーダーを使用。
• card 画像主体のカードで、目に見えるボーダーはなし。エッジは写真コンテンツによって定義。
• chip ナビゲーションやカテゴリ用の、広めの文字間隔を用いた小サイズの大文字テキストラベル。
• input 微細な下ボーダーを備えた、最小限の入力フィールド。目に見えるコンテナはなし。
• hero ダークオーバーレイ（rgba(0,0,0,0.5)）付きのビューポート全体の写真またはビデオ背景に、中央揃えの大きな白文字のタイポグラフィ、およびスクロールインジケーター。

09

文体と禁止事項

• トーン 自信に満ち、未来志向で、技術的に正確。
• 見出し 『Speed Is Our Superpower』のような、短くインパクトのある、太字で大きなタイプのステートメント。
• CTA 直接的でアクション重視（例：『Join Boom』）。

• 雑然としたレイアウトを使用しない — スクリーンショットでは、要素間に豊かな余白と大きな呼吸スペースが示されています。
• 広範囲な色使いをしない — スクリーンショットでは、白、黒、グレー、そして黄1色という厳格なパレットが示されています。
• プライマリボタンに丸みのある角を使用しない — スクリーンショットでは、最大4px radiusのシャープな角が示されています。
• 小さく詰まったタイポグラフィを使用しない — スクリーンショットでは、タイトなトレッキングを持つ大きく太字のディスプレイテキストが示されています。
• 複雑な背景パターンを使用しない — スクリーンショットでは、純黒の背景または全幅写真が示されています。
• 過度に装飾的なフォントを使用しない — スクリーンショットでは、クリーンで幾何学的なサンセリフのタイポグラフィのみが使用されています。
• 避ける: 遊び心のある、あるいはカジュアルな言葉遣い
• 避ける: 過度な感嘆符の使用
• 避ける: 文脈のない専門用語の説明

10

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

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

11

System Prompt

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