技法

Three column editor layout

ライブラリのうち46フレームがThree column editor layoutに一致し、15ブランドの動画24本にまたがっています。どれも動画そのものから計測したもので、説明文から読み取ったものではありません。つまりこれは、スタイルガイドが説くあるべき姿ではなく、実際にどう使われているかです。

このページにレンダリング画像も機材リストもありません。下にあるのはどれも実際に見に行ける動画の本物の1秒であり、どの数値もサンプルからの推定ではなく実フレームを数えたものです。

フレーム
46
動画
24
ブランド
15
カット間隔の中央値
10.8秒

最も多く撮っているのは

各ブランドがこの切り口にどれだけフレームを出しているかの順です。

Spline 8フレームMidjourney 6フレームFigma 5フレームOFFEO 4フレームD-ID AI Video Platform 3フレームDescript 3フレーム
Figma All the Launches at Config 2024 | Figma at 0:40
FigmaAll the Launches at Config 2024 | Figma
0:40
designmodo Postcards 2 at 0:00
designmodoPostcards 2
0:00
designmodo Postcards 2 at 0:14
designmodoPostcards 2
0:14
Figma Turn code into designs your whole team can edit by connecting Codex t... at 0:19
FigmaTurn code into designs your whole team can edit by connecting Codex t...
0:19
Figma Turn code into designs your whole team can edit by connecting Codex t... at 0:22
FigmaTurn code into designs your whole team can edit by connecting Codex t...
0:22
Spline Introducing Spline V2 - AI Agents, WebGPU and MCP at 0:15
SplineIntroducing Spline V2 - AI Agents, WebGPU and MCP
0:15
Framer Framer for Enterprise: Built for teams who think big and move fast. at 0:01
FramerFramer for Enterprise: Built for teams who think big and move fast.
0:01
Spline Hana: A Canvas for Real-Time Interactive Design at 1:38
SplineHana: A Canvas for Real-Time Interactive Design
1:38
Spline Hana: A Canvas for Real-Time Interactive Design at 1:42
SplineHana: A Canvas for Real-Time Interactive Design
1:42
Spline Hana: A Canvas for Real-Time Interactive Design at 1:46
SplineHana: A Canvas for Real-Time Interactive Design
1:46
Spline Hana: A Canvas for Real-Time Interactive Design at 2:07wide presenter
SplineHana: A Canvas for Real-Time Interactive Design
2:07
Stonly Required Actions with Stonly at 1:04
StonlyRequired Actions with Stonly
1:04
Stonly Required Actions with Stonly at 1:07
StonlyRequired Actions with Stonly
1:07
Spline How to add a 3D Drag & Drop interaction in Spline | Level up your website in just a few clicks at 2:58
SplineHow to add a 3D Drag & Drop interaction in Spline | Level up your website in just a few clicks
2:58
Spline How to add a 3D Drag & Drop interaction in Spline | Level up your website in just a few clicks at 4:18
SplineHow to add a 3D Drag & Drop interaction in Spline | Level up your website in just a few clicks
4:18
Descript What's new in Descript (June 2026) | Telethon recap, tone tags, 11 new effects + DescriptMCP at 0:50
DescriptWhat's new in Descript (June 2026) | Telethon recap, tone tags, 11 new effects + DescriptMCP
0:50
Descript What's new in Descript (June 2026) | Telethon recap, tone tags, 11 new effects + DescriptMCP at 0:54
DescriptWhat's new in Descript (June 2026) | Telethon recap, tone tags, 11 new effects + DescriptMCP
0:54
Cursor Manage a fleet of cloud agents, directly from Cursor. Now with faste... at 0:20
CursorManage a fleet of cloud agents, directly from Cursor. Now with faste...
0:20
Cursor A new visual editor: design directly in your codebase at 1:34
CursorA new visual editor: design directly in your codebase
1:34
Cursor A new visual editor: design directly in your codebase at 1:47
CursorA new visual editor: design directly in your codebase
1:47
Minerva Welcome to Minerva at 0:16
MinervaWelcome to Minerva
0:16
Minerva Welcome to Minerva at 0:19
MinervaWelcome to Minerva
0:19
Minerva Welcome to Minerva at 0:22
MinervaWelcome to Minerva
0:22
OFFEO OFFEO Tutorial | Playful and Vibrant Design at 1:46
OFFEOOFFEO Tutorial | Playful and Vibrant Design
1:46
OFFEO OFFEO Tutorial | Playful and Vibrant Design at 1:58
OFFEOOFFEO Tutorial | Playful and Vibrant Design
1:58
OFFEO OFFEO Tutorial | How to [Brand] Series: NIKE at 1:10wide presenter
OFFEOOFFEO Tutorial | How to [Brand] Series: NIKE
1:10
OFFEO OFFEO Tutorial | How to [Brand] Series: NIKE at 1:30
OFFEOOFFEO Tutorial | How to [Brand] Series: NIKE
1:30
Spline Crafting Interactive 3D for Ecommerce | Spline x Onyx Coffee Lab at 1:30
SplineCrafting Interactive 3D for Ecommerce | Spline x Onyx Coffee Lab
1:30
ARLOOPA Augmented Reality / Virtual Reality Build Cross - Platform AR with ARLOOPA at 0:16
ARLOOPA Augmented Reality / Virtual RealityBuild Cross - Platform AR with ARLOOPA
0:16
ARLOOPA Augmented Reality / Virtual Reality Build Cross - Platform AR with ARLOOPA at 0:19
ARLOOPA Augmented Reality / Virtual RealityBuild Cross - Platform AR with ARLOOPA
0:19
Greg Baugues Cursor 3 minute demo - the most popular AI code editor at 0:46
Greg BauguesCursor 3 minute demo - the most popular AI code editor
0:46
Uizard Autodesigner 1.5 Walkthrough (Try for free) at 1:08
UizardAutodesigner 1.5 Walkthrough (Try for free)
1:08
Uizard Autodesigner 1.5 Walkthrough (Try for free) at 1:28
UizardAutodesigner 1.5 Walkthrough (Try for free)
1:28
Descript Just Hit Record. Descript Does the Rest. at 0:52wide presenter
DescriptJust Hit Record. Descript Does the Rest.
0:52
D-ID AI Video Platform Learn how to create videos with D-ID V4 Expressive avatars at 0:52wide presenter
D-ID AI Video PlatformLearn how to create videos with D-ID V4 Expressive avatars
0:52
D-ID AI Video Platform Learn how to create videos with D-ID V4 Expressive avatars at 0:55wide presenter
D-ID AI Video PlatformLearn how to create videos with D-ID V4 Expressive avatars
0:55
Midjourney We're testing two new features today: our image editor for uploaded i... at 0:58wide presenter
MidjourneyWe're testing two new features today: our image editor for uploaded i...
0:58
Midjourney We're testing two new features today: our image editor for uploaded i... at 1:02wide presenter
MidjourneyWe're testing two new features today: our image editor for uploaded i...
1:02
Midjourney We're testing two new features today: our image editor for uploaded i... at 1:06
MidjourneyWe're testing two new features today: our image editor for uploaded i...
1:06
Midjourney We're testing two new features today: our image editor for uploaded i... at 1:10
MidjourneyWe're testing two new features today: our image editor for uploaded i...
1:10
Midjourney We're testing two new features today: our image editor for uploaded i... at 1:14
MidjourneyWe're testing two new features today: our image editor for uploaded i...
1:14
Midjourney We're testing two new features today: our image editor for uploaded i... at 1:18
MidjourneyWe're testing two new features today: our image editor for uploaded i...
1:18
D-ID AI Video Platform So erstellst du Videos mit den D-ID V4 Expressive Avatars at 0:58wide presenter
D-ID AI Video PlatformSo erstellst du Videos mit den D-ID V4 Expressive Avatars
0:58
Things Inc How to add custom cameras (iPad) at 1:40wide presenter
Things IncHow to add custom cameras (iPad)
1:40
Figma Publish and install skills from the Figma Community at 0:11corner inset
FigmaPublish and install skills from the Figma Community
0:11
Figma Publish and install skills from the Figma Community at 0:59corner inset
FigmaPublish and install skills from the Figma Community
0:59
これで全 46 枚です。

比較できる他の技法

Shallow depth of field 5,289Full bleed output no chrome 3,081Hard cut on beat 3,077Centred wordmark on black 2,355Cursor led reveal 2,333Ui float with drop shadow 2,091Long lens background compression 1,096Text plate left third 814Full bleed ui no chrome 741Long lens compression 601Hard cut to black 595Centred talking head 550Subject on right third 530Generous negative space 481Centred subject 465Full bleed no chrome 430Centred wordmark on white 412Full bleed screen recording 408Wide establishing shot 386Full bleed screen capture 377Medium close up 366Subject on left third 344Centred medium close up 342Presenter pip bottom right 336