厳選・オープン・無料
Ozero
大胆でカラフルなワークを紹介するフルスタッククラウドデザインスタジオ
StudioPortfolioBold TypographyCurationGallery
01
デザイン DNA
クリエイティブミニマル実験的クラウドデザイン
多様なクライアントワークを展示する現代的なギャラリーウォール
02
カラー
#1B1B1AInk
#FFFFFFBG
rgba(27,27,26,1.0)Line
ホワイトスペースと大胆なプロジェクトイメージを用いたハイコントラストのギャラリーエステティック
03
タイポグラフィ
humanist-sans
- display
106px · 400 - display
88px · 400 - heading
64px · 400 - body
16px · 400
font-size: 64px; line-height: 1.0; letter-spacing: -0.64px · font-size: 106px; line-height: 1.0; letter-spacing: -1.76px · font-family: Inter, Arial, sans-serif
04
余白
4px
8px
10px
12px
16px
20px
24px
32px
60px
64px
プロジェクトコンテナ内の寛びのあるpadding
05
サーフェス (角丸 / 影 / 罫線)
sm · 0px
md · 0px
lg · 0px
pill · 999px
主要コンテナ間の区切りは不可視
06
レイアウト
大きなプロジェクト画像からなる非対称メソングリッド
07
モーションとインタラクション
220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
hover時の透明度フェード · transition: all 0.4s
インタラクティブ要素の透明度変化 · ナビゲーションをトリガー
08
コンポーネント
- button ヘッダー内のテキストのみのナビゲーションリンク
- card 時折テキストオーバーレイを伴う、大きくfull-bleedな画像コンテナ
- chip 不可視
- input 不可視
- hero プロジェクトイメージからなるfull-viewportのメソングリッド
09
文体と禁止事項
- トーン ミニマルで自信に満ちた
- 見出し 巨大でトラッキングのきついディスプレイタイポグラフィ
- CTA クリーンで大文字のテキストリンク
- 装飾的なボーダーを使用しない — スクリーンショットにはクリーンでボーダーレスのレイアウトが示されています
- コンテナにドロップシャドウを使用しない — スクリーンショットにはフラットでイメージベースの構図が示されています
- 小さく密集したグリッドを使用しない — スクリーンショットには大きく広大なプロジェクトイメージが示されています
- セリフフォントを使用しない — スクリーンショットにはsans-serifのInterのみが使用されています
- 全体ページに淡い色やパステルの背景を使用しない — スクリーンショットにはハイコントラストの白/黒が示されています
- 標準的なカードコンポーネントを使用しない — スクリーンショットにはfull-bleedの画像セクションが示されています
- 避ける: 過度なコピー
- 避ける: 装飾的なディテール
- 避ける: 複雑なインターフェース
10
パック内の実スクリーンショット
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(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
Ozeroは、大胆なギャラリースタイルのポートフォリオを特徴とするフルスタッククラウドデザインスタジオのウェブサイトです。レイアウトは、最小限のホワイトスペースを伴う、大きくfull-bleedなプロジェクト画像からなる非対称メソングリッドです。プライマリ背景は白(#FFFFFF)で、テキストは黒(#1B1B1A)です。ナビゲーションは右上に整列した大文字のsans-serifテキストによるシンプルなリンクリストです。タイポグラフィは、巨大なディスプレイサイズでトラッキングをきつくしたhumanist-sans(Inter)です。主要なデザイン要素には、デスクトップ向けの2列レイアウト、コンテナ内の寛びのあるpadding、クリーンでボーダーレスのサーフェスが含まれます。モーションは、滑らかな透明度遷移に限定されます。重要な禁止事項:ドロップシャドウや装飾的なボーダーを追加せず、小さなグリッドを使用せず、セリフフォントを使用しないこと。このサイトは、ビジュアルワークに焦点を当てた、プレミアムでミニマルなクリエイティブポートフォリオを代表しています。
en · zh-CN · zh-TW · ja · ko