厳選・オープン・無料

Tella

プロフェッショナルなチームとクリエイターワークフローのためにデザインされた、オールインワンのスクリーンレコーダーおよびビデオエディタ。

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

オリジナル: https://www.tella.com

📦 パックの中身を見る →

01

デザイン DNA

スクリーンレコーダービデオ編集チームコミュニケーションプロフェッショナルオールインワン

プロフェッショナルな機能性と親しみやすいデザインを兼ね備えた、洗練されたモダンなビデオ制作ツール。

02

カラー

#5E51F8Accent
#0F172AInk
#64748BInk soft
#FFFFFFBG
#F1F5F9BG soft
#F8FAFCBG quiet
#94A3B8Muted
rgba(226, 232, 240, 1)Line

単一の鮮やかな紫のアクセントで注意とアクションを誘導する、クリーンなスレートパレット。

03

タイポグラフィ

grotesque-sans · humanist-sans · monospace

大きなディスプレイサイズでは、 tightened negative tracking を使用 · 本文テキストは、可読性を確保するために一貫した450のウェイトを維持 · 機能と利点を分離するための明確なタイポグラフィ階層を使用

04

余白

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

コンポーネント間のパディングを緊密で予測可能にするための、一貫した4pxグリッドシステム。

05

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

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

1px solid rgba(226, 232, 240, 1)

0px 1px 2px 0px rgba(0, 0, 0, 0.05) · 0px 4px 16px 0px rgba(0, 0, 0, 0.06) · 0px 8px 32px 4px rgba(0, 0, 0, 0.15)

06

レイアウト

1280container
12columns
24pxgutter
768 / 1024breakpoints

ヒーローセクションを強調するための、十分な余白を備えたセンタリングされたカラムレイアウト。

07

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

150msmicro
300mssmall
600msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

インタラクティブ要素上の0.15秒の滑らかな色と背景トランジション · UIの状態変化に伴う精巧な不透明度トランジション

インタラクティブ性を示すために、ボタンやリンク上に精巧な背景または色の変化。 · 微小なスケールまたは不透明度の変化による、即座のビジュアルフィードバック。

08

コンポーネント

09

文体と禁止事項

10

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

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

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

11

System Prompt

Tellaは、スクリーンレコービングとビデオ編集を専門とするプロフェッショナルなSaaS製品で、チームとコンテンツクリエイターをターゲットとしています。デザインは、単一の鮮やかな紫のアクセントカラー（#5E51F8）をキーコール・トゥ・アクションに使用した、クリーンな白とスレートのパレット（#FFFFFF, #F1F5F9, #0F172A）を採用しています。タイポグラフィは、高い可読性のためにクリーンでモダンなヒューマニストおよびグロテスクサンセリフ系に依存しています。主要な注意点：雑然としたレイアウトの回避、過度に装飾的なフォントの不使用、そして高級感とツール中心の雰囲気を維持するための十分な余白の重要性を決して無視しないこと。全体的なトーンはプロフェッショナルで率直、使いやすさを強調しています。

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

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

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

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