厳選・オープン・無料
Boom Supersonic
大胆な写真を駆動する航空宇宙サイト。劇的なダークオーバーレイと正確なタイポグラフィで、超音速のスピードを披露。
aerospace
01
デザイン DNA
航空宇宙スピード超音速エンジニアリングイノベーション
ハイパフォーマンスな航空宇宙エンジニアリングと、現代のミニマリズムの融合。
02
カラー
#FFF555Accent
#FFFFFFInk
#000000BG
#88898AMuted
rgba(255, 255, 255, 0.2)Line
黒と白を基調とした高コントラストなベースに、強調用に1色の鮮やかな黄を控えめに使用。
03
タイポグラフィ
geometric-sans
- display
72px · 700 - h1
48px · 500 - body
16px · 400 - caption
12px · 400
すべてのテキストにStyrene A(または同様の幾何学的サンセリフ)を使用 · ディスプレイサイズには、タイトなトレッキングとラインハイトを採用 · 小サイズのテキストとラベルには、広めの文字間隔(1.2px)を使用
04
余白
4px
8px
12px
16px
24px
32px
48px
64px
80px
96px
140px
96px、140pxの大きな垂直スペースを設けた、豊かなパディングがセクション間にドラマチックな余白を生み出します。
05
サーフェス (角丸 / 影 / 罫線)
sm · 4px
md · 6px
lg · 8px
pill · 999px
目に見えるボーダーは最小限に。区切りとして、時折、微細な白やグレーのラインを使用。
0 4px 24px rgba(0, 0, 0, 0.3)
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
全幅写真セクションと構造化されたコンテンツグリッドを交互に配置。フィーチャーのハイライトには、分割された2列レイアウトをよく使用。
07
モーションとインタラクション
150msmicro
300mssmall
700msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
インタラクティブ要素の滑らかな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
パック内の実スクリーンショット
桌面首屏(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
Boom Supersonicは、世界で最も速い民間航空機の開発に焦点を当てた航空宇宙会社です。ウェブサイトは、黒(#000000)、白(#FFFFFF)、グレー(#88898A)の高コントラストなパレットを採用し、強調用に1色の鮮やかな黄(#FFF555)を使用。タイポグラフィは、クリーンな幾何学的サンセリフ(Styrene A)で、ヘッドライン用に太字でタイトなトレッキングのディスプレイサイズ、小ラベル用に広めのトレッキングを採用。主な特徴は、ダークオーバーレイ付きの全幅写真背景、豊かなパディング(96pxから140px)、最小限のUI要素です。重要禁止事項:雑然としたレイアウトの使用は避ける、広範囲な色使いは避ける、丸みのあるボタンは使用しない、全体を通して大きく太字のタイポグラフィを維持すること。
en · zh-CN · zh-TW · ja · ko