厳選・オープン・無料

Channel Studio

ハイエンドのプロジェクトケーススタディを紹介する、プレミアムブランド＆ユーザー体験イノベーションスタジオ

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

オリジナル: https://channel.studio

📦 パックの中身を見る →

01

デザイン DNA

ブランドイノベーションユーザー体験デザインスタジオプレミアムエージェンシー

クリエイティブスタジオのためのミニマリスト建築設計図

02

カラー

#CACACAInk
#727272Ink soft
#000000BG
#111111BG soft
rgba(202,202,202,0.2)Line

ダーク背景上のハイコントラスト・タイポグラフィによる、厳格なモノクローム

03

タイポグラフィ

geometric-sans

インパクトを高めるための、ディスプレイ・テキストのタイトな文字間隔 · 洗練され均一な外観のための、400ウェイトの一貫した使用 · 強い垂直軸を生む左揃えのタイポグラフィ

04

余白

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

フルビューポート・セクションを生む、大きなボトム・オフセットを持つ非対称パディング

05

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

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

目に見えるボーダーなし。境界はカラーブロックと大きな画像で定義

06

レイアウト

1440container
12columns
24pxgutter
768 / 1024breakpoints

テキストを含むダーク背景と大規模なプロジェクト画像が交互に現れる、フルブリード・セクション

07

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

250msmicro
500mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing

テキストやナビゲーション要素の滑らかな透明度トランジション · スクロール時のページセクションの連続的な出現

テキストリンクの微妙な色の変化 · 透明度の変化による即時のビジュアルレスポンス

08

コンポーネント

09

文体と禁止事項

10

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

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

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

11

System Prompt

チャネル・スタジオはプレミアムブランド＆ユーザー体験イノベーション・エージェンシーです。ビジュアル・ランゲージは、深い黒背景、鮮やかな白のテキスト、セカンダリ要素の落ち着いたグレーのトーンを用いた厳格なモノクローム・パレットで定義されています。タイポグラフィはクリーンな幾何学的サンセリフカテゴリを使用し、大胆な建築的雰囲気を生むために巨大なスケールでタイトなトラッキングで提示されます。レイアウトは Highly asymmetric で、プロジェクトケーススタディを紹介するためにフルブリード・セクションとオーバーサイズの画像に依存しています。重要な制約には、鮮やかなアクセントカラーの回避、カードやボーダーなどの装飾的なUI要素の削除、豊かなネガティブスペースの維持が含まれます。トランジションは滑らかで控えめにし、派手なアニメーションよりも透明度と微妙な色の変化に焦点を当てる必要があります。

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

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

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

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