厳選・オープン・無料
Numbered Studio
全面的なエディトリアル画像の上にタイポグラフィが浮かぶ、大胆でフォトセントリックなエージェンシーサイト。
AgencyPhotographicPremiumTypographyStudio
01
デザイン DNA
エディトリアルミニマルファッション・フォワードラグジュアリーポートフォリオ
ハイエンドファッション誌の見開きとデザインスタジオのポートフォリオの融合
02
カラー
#FFFFFFInk
#111111BG
rgba(255, 255, 255, 0.2)Line
コンテンツがすべての色の変化を提供する、ハイコントラストのモノクロパレット。
03
タイポグラフィ
didone-serif · grotesque-sans
- display
75px · 400 - heading
55px · 400 - body
15px · 400 - small
13px · 700
04
余白
4px
8px
16px
24px
32px
48px
64px
96px
厳格なグリッドではなく、豊かな余白に依存した、要素の周りの大きなシネマティックなパディング。
05
サーフェス (角丸 / 影 / 罫線)
sm · 0px
md · 0px
lg · 0px
pill · 0px
微細な区切りのための1px solid rgba(255, 255, 255, 0.2)。それ以外は画像のエッジに依存。
06
レイアウト
1columns
768 / 1024breakpoints
中央揃えのテキストオーバーレイを伴う、ビューポート全面の写真ヒーローセクションが縦に積み重ねられる。
07
モーションとインタラクション
220msmicro
400mssmall
800msmedium
cubic-bezier(0.77, 0, 0.175, 1)easing
コンテンツ公開時のスムーズなフェードイントランジション · スクロール時のゆっくりとした背景トランジション
テキストリンク上の微かなカーソル変化や不透明度の変化 · 即時のナビゲーションまたはスクロール。押下時のマイクロアニメーションなし
08
コンポーネント
- button ボタンとして機能する最小限のテキストリンク、大文字、小さなフォント、ハイコントラスト
- card テキストオーバーレイ付きの全面写真パネル
- hero 巨大なセリフフォントのタイポグラフィが画像に直接オーバーレイされた、フルスクリーンの没入型写真
09
文体と禁止事項
- トーン 自信に満ち、控えめで洗練された
- 見出し 注目を集める、大きな宣言的なセリフフォントのステートメント
- CTA 最小限の大文字テキストリンク。通常は「CONTACT」または「VIEW」のみ
- カラフルな背景を使用しない — スクリーンショットではすべてのテキストが写真画像に直接オーバーレイされている
- コンテナに角丸を使用しない — スクリーンショットではシャープで矩形の全面パネルが使用されている
- 小さくぎっしりとしたタイポグラフィを使用しない — スクリーンショットでは巨大なディスプレイタイプがレイアウトを支配している
- テキストにドロップシャドウを追加しない — スクリーンショットでは画像の上にフラットで鮮明な白いテキストがある
- コンテンツにマルチカラムグリッドを使用しない — スクリーンショットでは単一の縦積みフローが使用されている
- 従来のナビゲーションバーに依存しない — スクリーンショットでは最小限のハンバーガーメニューと単離したテキストリンクが使用されている
- 避ける: 派手な色
- 避ける: 雑然としたレイアウト
- 避ける: 標準的なSaaSパターン
- 避ける: 多忙なアニメーション
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 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
これは「Numbered Studio」のプレミアムエージェンシーポートフォリオであり、ハイエンドのクリエイティブおよびテクノロジーパートナーとしてポジショニングしています。ビジュアルDNAは、画像に直接オーバーレイされた巨大なセリフフォントのタイポグラフィを伴う、大きな全面写真セクションが支配的です。カラーパレットは厳格にモノクロで、presentな背景画像に関係なく、すべてのテキストに純白(#FFFFFF)を使用し、サイトのベースは暗い色(#111111)です。タイポグラフィは、ディスプレイ用の表現豊かなセリフフォントと、本文およびナビゲーション用のクリーンなグロテスク・サンズをペアリングしています。重要な禁止事項:従来のナビゲーションバーまたはサイドバーを導入しないこと。インターフェースは意図的にミニマルでシネマティックです。カラフルなUI要素やアクセントカラーを使用しないこと。すべての色の変化は写真画像自体からもたらされる必要があります。コンテナに角丸やドロップシャドウを適用しないこと。サーフェスは画像のエッジと微細な薄いボーダーで厳密に定義されます。
en · zh-CN · zh-TW · ja · ko