厳選・オープン・無料

Metalab

ハイコントラストのエディトリアルタイポグラフィと、抽象的な光沢のある3Dビジュアルを融合した、プレミアムデザインエージェンシーのサイト。

01

デザイン DNA

ハイエンドデザインスタジオのデジタルポートフォリオ。

02

カラー

ドラマチックな映像が主役となるよう、ハイコントラストのモノトーンをベースに、繊細なグレーをアクセントとして用いる。

03

タイポグラフィ

didone-serif · grotesque-sans

• display88px · 240
• body16px · 400

04

余白

モジュラースペーシングに、24pxのpaddingとgapを一貫して使用。

05

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

1px solid rgba(255, 255, 255, 0.1)

06

レイアウト

フローティングするナビゲーション要素を備えた、非対称なエディトリアルレイアウト。

07

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

hover時の微妙な不透明度の遷移 · 滑らかな背景色の変化

ナビゲーション要素に対する微妙な不透明度の変化。 · 標準的なリンクナビゲーション。

08

コンポーネント

• button 半透明の暗い背景に明るいテキストを持つ、ピル型のナビゲーションアイテム。
• card N/A
• chip ナビゲーションリンク（例：Midjourney、Uber）用の、半透明の暗いピル。
• input N/A
• hero 大規模でハイコントラストのセリフヘッドラインを、複雑な3D抽象背景の上に配置した、全ビューポートの没入型セクション。補足説明テキストを含む。

09

文体と禁止事項

• トーン 自信に満ち、権威があり、簡潔。
• 見出し 大きく、エレガントで、ミニマル。
• CTA ナビゲーション構造に統合された、控えめなもの。

• 明るく彩度の高いアクセントカラーを使用しない — スクリーンショットは厳格なモノクロパレットを示している。
• 表示用に丸みのある幾何学的sans-serifフォントを使用しない — スクリーンショットはヘッドライン用の鋭くハイコントラストのセリフを示している。
• 密な、グリッド重視のレイアウトを作成しない — スクリーンショットは開放的で非対称な構図を示している。
• ボタンに不透明な塗りつぶし背景色を使用しない — スクリーンショットは半透明の暗いピルを示している。
• UI要素に大きなドロップシャドウや3Dの押し出し効果を使用しない — スクリーンショットはフラットで半透明のサーフェスを示している。
• 標準的なトップ配置のナビゲーションバーを使用しない — スクリーンショットは左上隅のフローティングメニューピルを示している。
• 避ける: 雑然としたインターフェース
• 避ける: 派手またはプライマリカラーのアクセント
• 避ける: 過度に専門的な専門用語

10

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

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

11

System Prompt

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