厳選・オープン・無料

Clay

グローバルなブランディングおよびUXデザインエージェンシーのポートフォリオ。

EditorialCleanProductCalmRestraint
Clay のスクリーンショット
↓ デザインシステムをダウンロード (17 MB)OpenDesign で開く

オリジナル: https://clay.global

📦 パックの中身を見る →

01

デザイン DNA

ブランディングUXエージェンシーグローバルデザインクリエイティブ

ハイエンドなポートフォリオワークを紹介するプレミアムデザインエージェンシー。

02

カラー

#06070AInk
#666C7AInk soft
#FFFFFFBG
#EFEDEEBG soft
#F3F4F6BG quiet
#B2B8C2Muted
rgba(6,7,10,1.0)Line

モノクロのインク・オン・ホワイトを基調とし、細やかなウォームグレーの背景グラデーションと落ち着いたグレーのUI要素を組み合わせる。

03

タイポグラフィ

geometric-sans

04

余白

4px
8px
16px
24px
32px
48px
64px
96px

標準の4pxベースグリッドを採用し、ヒーローセクションには十分な余白を設け、コンテンツコンテナには一貫したpaddingを確保する。

05

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

sm · 4px
md · 8px
lg · 12px
pill · 999px

最小限の1px solidライン、主にボーダーレスのカードを採用し、目立つピル形のContactボタンを配置。

0 4px 24px rgba(6,7,10,0.08)

06

レイアウト

1280container
12columns
24pxgutter
768 / 1024breakpoints

ヒーローでは非対称な分割レイアウト（テキストを左、3Dグラフィックを右）を採用し、その下に大きな画像ベースのケーススタディカードをグリッドで配置。

07

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

150msmicro
650mssmall
900msmedium
cubic-bezier(0.16, 1, 0.3, 1)easing

ページ読み込み時の滑らかなopacityフェード · scrollに伴う穏やかなtransform · ナビゲーションリンクのhoverカラートランジション

ナビゲーションリンクの細やかなカラートランジション（0.15s）。 · インタラクティブ要素にcursor pointerを即座に適用。

08

コンポーネント

09

文体と禁止事項

10

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

Clay — 桌面首屏（hero）
桌面首屏（hero）
Clay — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Clay — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Clay — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Clay — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Clay — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Clay — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Clay — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Clay — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Clay — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Clay — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Clay — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Clay — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Clay — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Clay — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Clay — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Clay — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Clay — 移动首屏
移动首屏

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

11

System Prompt

グローバルなブランディングおよびUXデザインエージェンシーのプレミアムウェブサイトをデザイン。純白（#FFFFFF）と深いインク色（#06070A）を中心にモノクロパレットを採用し、細やかなウォームグレーの背景（#EFEDEE）と落ち着いたグレーのUI要素（#666C7A）を組み合わせる。タイポグラフィはクリーンな幾何学的サンセリフを2つのウェイトで使用：大きなディスプレイヘッドラインには太い740ウェイト、本文には中程度の500ウェイトを採用し、両方とも字間を密接に詰める。レイアウトは十分な余白、非対称な分割ヒーローセクション、そして大きなボーダーレスで画像重視のケーススタディカードを特徴とする。主要なインタラクション要素（例：プライマリCTA）はブラックのピル形ボタンを使用。重要な制約：すべての装飾的なセリフ体フォントを避け、高彩度のアクセントカラーは決して使用せず、滑らかなcubic-bezierトランジションを用いた抑制的で洗練された美学を維持する。

このセンスを AI エージェントへ

この設計の機械可読な仕様——カラー・タイポ・モーションまで——をそのまま AI エージェントに渡せます。

OpenDesign スキル ↗ · このパック（エージェント用） ↗

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