Runway は世界を理解し、シミュレートし、対話する「現実世界の知能」を構築しており、そのプロダクトは映像生成を創作の媒体にします。UI は映画的な路線を進み、フルブリードの写真と動画がメインの UI です。abcNormal の 1 書体が見出しから極小ラベルまでを担い、クールなニュートラルグレー（#767d88 一族）にダーク主体のキャンバスを組み合わせます。シャドウはゼロ、極小のボーダーで UI を「不可視」にし、見出しの行高は 1.0 に固定して -0.9 から -1.2px の負のトラッキングを適用します。リッチメディアと AI 動画プロダクトに適しています。
RunwayAI・大規模モデル
プロンプトテンプレート
基本テンプレート
Design a Runway-inspired interface. - Cinematic full-bleed photography and video as primary UI elements; - Single typeface system: abcNormal for everything from display to micro labels; - Dark-dominant palette with cool-toned neutrals (#767d88, #7d848e); - Zero shadows, minimal borders — the interface is intentionally invisible; - Tight display typography (line-height 1.0) with negative tracking (-0.9px to -1.2px). Colors: #000000, #030303, #1a1a1a, #ffffff.
バリエーションプロンプト
📱 モバイル
Design a mobile app with Runway aesthetics. Use Runway color identity with #000000 accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Runway style. Use Runway color identity with #000000 accents. Professional, responsive layout.
📊 ダッシュボード
Design a dashboard with Runway design language. Use Runway color identity with #000000 accents. Data-rich, organized, clear hierarchy.
📄 ランディングページ
Design a landing page with Runway visual identity. Use Runway color identity with #000000 accents. Compelling, conversion-focused.
使用例
Runway アプリ
WebBuild a web app with Runway design language and brand color system.
Runway ダッシュボード
ダッシュボードCreate a dashboard using Runway style with data visualization and modern typography.
✅ 適した用途
- AI
- 動画とクリエイティブ生成ツール
- リッチメディアの作品展示ページ
❌ 適さない用途
- 軽量なフォーム型管理画面
- 紙の雑誌レイアウトのサイト
DESIGN.md ファイル
design.md オープン形式に準拠したデザインシステム記述。コピーまたはダウンロードして AI コーディングツールに渡せます。