厳選・オープン・無料

McLaren

F1チームおよびスーパーカーメーカーのデジタルプレゼンス。ドラマチックな写真と外科的精度によって定義される。

01

デザイン DNA

全コンポーネントが最適化され、全表面に目的がある高性能マシン。

02

カラー

モノクローム基盤（黒/白）に、1つの攻撃的なブランドオレンジがアクセントとして加わる。

03

タイポグラフィ

geometric-sans

• display56px · 500
• heading25px · 400
• body16px · 400
• caption12px · 400

すべてのナビゲーションとセクション見出しは大文字で設定。 · 大文字テキスト要素の文字間隔を拡大（2px）。 · 基本フォントサイズは16px、一貫した行高1.5（24px）。

04

余白

一貫した8pxグリッドと、インタラクティブ要素に対する寛大なパディング（12px-26px）。

05

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

1px solid rgb(229, 231, 235)。微妙な区切りやフォーカス状態に使用。

rgba(0, 0, 0, 0.08) 0px 4px 12px 0px

06

レイアウト

フルビューポートのヒーロー画像に、コンテンツを下部にオーバーレイ。

07

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

インタラクティブ要素のホバー時、微細なtransformトランジション。 · 状態遷移時の滑らかなカラーおよびbackground-colorトランジション。

カラー遷移やトランスフォームによる微細なビジュアルフィードバック。 · 標準的なカーソルポインタ指示による即座の応答。

08

コンポーネント

• button フラットな長方形ブロック。ソリッドなブランドオレンジ背景と大文字の黒テキスト。
• card 最小限、または不在。フル幅のフォトグラフィック構成を優先。
• chip シンプルなテキストベースのナビゲーションリンクとアンダーラインインジケーター。
• input このヒーローフォーカスのセクションでは目立たない。
• hero シネマティックな端から端への写真に、下部にダークからライトへのグラデーションオーバーレイ。

09

文体と禁止事項

• トーン 権威的、洗練され、パフォーマンスを重視。
• 見出し 太字、大文字、簡潔。ダーク背景に対してハイコントラントをよく使う。
• CTA 直接的で機能的。ブランドカラーのソリッドブロックと大文字テキストを使用。

• 角丸は使用しない — スクリーンショットでは鋭角な長方形のボタンとUI要素が示されている。
• アクセントカラーを複数使用しない — スクリーンショットでは、1つのオレンジアクセントを伴う厳格なモノクロームパレットが示されている。
• ナビゲーションに小文字は使用しない — スクリーンショットではすべてのメニュー項目が大文字で設定されている。
• 装飾的、あるいはスクリプトフォントは使用しない — スクリーンショットではクリーンな幾何学的サンセリフタイポグラフィが示されている。
• ヒーローエリアにテキストを散らかさない — スクリーンショットでは、最小限の、適切に配置されたテキストを伴う大きなフォトグラフィック領域が示されている。
• プライマリ要素にドロップシャドウは使用しない — スクリーンショットではフラットデザインが示されており、データ内の1つの微細なシャドウのみ。
• 避ける: 遊び心のある、あるいはおちゃらけた言葉遣い
• 避ける: 角丸や柔らかい形状
• 避ける: 雑然とした、またはごちゃ混ぜのレイアウト

10

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

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

11

System Prompt

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