厳選・オープン・無料

Studio Dumbar

3Dレンダリングと大胆なビジュアル実験を通じてタイポグラフィの限界を押し広げる、モーション・ファーストのデザイン・エージェンシー・ポートフォリオ。

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

オリジナル: https://studiodumbar.com

📦 パックの中身を見る →

01

デザイン DNA

ExperimentalMotion3DTypographyDesign Studio

タイポグラフィを3Dスカルプチャーとして扱う実験的なモーション・デザインスタジオ。

02

カラー

#FFFFFFInk
#868686Ink soft
#000000BG
rgba(255,255,255,1.0)Line

色彩は、紹介される作品画像からのみ生まれる厳格なモノクローム・パレット。

03

タイポグラフィ

geometric-sans · humanist-sans

ナビゲーションは一貫して20pxのサンセリフ字体を使用。 · ディスプレイ・タイポグラフィは、伝統的なウェブフォントではなく3Dレンダリングされたフォームに依存。 · 階層はウェイトの変化ではなく、スケールとディメンショナル・レンダリングによって達成。

04

余白

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

厳格なグリッド準拠ではなく、ビジュアル構図に焦点を当てた非対称な間隔。

05

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

sm · 0px
md · 0px
lg · 0px
pill · 999px

目立つボーダーは最小限。分離は間隔と構図によって実現。

フラットUI要素用: 0 0 0 rgba(0,0,0,0) · プロジェクト画像内でレンダリングされた複雑な3Dライティング

06

レイアウト

1920container
12columns
24pxgutter
768 / 1024breakpoints

フローティング・ナビゲーションと最小限の構造グリッドの可視性を備えた、フルブリードの没入型レイアウト。

07

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

200msmicro
400mssmall
1000msmedium
cubic-bezier(0.25, 0.1, 0.25, 1.0)easing

状態変化のためのスムーズな背景色遷移。 · プロジェクト・ショーケース間の没入型フルビューポート遷移。 · ヒーローエリア内での3Dオブジェクトの回転と変形。

遷移プロパティによる、微細なカーソル状態の変化とリンクのハイライト。 · プロジェクト詳細ビューへの没入型遷移。

08

コンポーネント

09

文体と禁止事項

10

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

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

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

11

System Prompt

これは3Dレンダリングとタイポグラフィの交差点に位置づけられた、実験的なモーション・デザインスタジオのポートフォリオです。ビジュアル・システムは厳格なモノクローム基盤の上に構築されています：純黒の背景（#000000）、白いテキスト（#FFFFFF）、およびセカンダリ要素用の控えめなグレー（#868686）。タイポグラフィはUI層では最小限で、ナビゲーションに20pxの幾何学サンセリフおよびヒューマニスト・サンセリフカテゴリを使用していますが、実際のディスプレイ・モーメントは3Dレンダリングされたタイポグラフィ・スカルプチャーとして機能し、ヒーロー画像とプロジェクト識別子の両方を担います。レイアウトはフルブリードで没入型であり、伝統的なグリッド構造を捨て、シネマティックな構図を採用しています。重要な制約には以下が含まれます：カラフルなUI要素の使用不可（色はすべて作品から発生）、インターフェース・コンポーネントに濃いドロップシャドウを適用不可、コンテナに角丸を使用不可。モーション・システムはスムーズな1秒の遷移と3Dオブジェクト操作を強調しています。このアプローチにより、ポートフォリオ自体がスタジオのモーション能力を記述するだけでなく、実証するものとなります。

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

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

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

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