Runway for web designとは？Replit連携で何が起きたか
まとめ
Runway for web designとは？Replit連携で何が起きたか
- Runway for web designは、Runwayが発表したWebデザイン向けの仕組み
- RunwayをReplitに接続し、プロジェクト内で画像・動画・アセットを直接生成できるようにする
- 初期アイデアから完成サイトまでを一貫して扱うことを狙う
- 接続にはMCP（Model Context Protocol）を使用。AIエージェントが外部ツールやサービスと接続するための共通規格
- 発表の主語はあくまでRunway。Xで告知されたからといって「Xが発表」ではない
- 公式スレッドでは「Introducing Runway for web design」として、Replitに接続してプロジェクト内で画像・動画・アセットを生成すると説明
- 制作と素材生成が別ツールに分かれている状態の不便を解消し、実務に効く話
室谷代表取締役Runway for web designは、Runwayが発表したWebデザイン向けの仕組みで、RunwayをReplitに接続してプロジェクト内で画像・動画・アセットを直接生成できるようにするものです。初期アイデアから完成サイトまでを一貫して扱うことを狙っています。
テキトー教師DotAI 認定講師名前だけ聞くと「RunwayがWebデザインのテンプレートでも出したの？」と思っちゃいますよね。でも中身はそうじゃなくて、接続の話なんですよ。
室谷代表取締役そうなんですよね。接続にはMCP（Model Context Protocol）を使います。
MCPは、AIエージェントが外部ツールやサービスと接続するための共通規格で、対応するアプリ側から外部サービスの機能を呼び出せる仕組みです。
MCPは、AIエージェントが外部ツールやサービスと接続するための共通規格で、対応するアプリ側から外部サービスの機能を呼び出せる仕組みです。
テキトー教師DotAI 認定講師発表の主語はあくまでRunwayです。Xで告知されたからといって「Xが発表」ではないので、そこは整理しておきたいところです。
室谷代表取締役Runwayの公式スレッドでは「Introducing Runway for web design」として、Replitに接続してプロジェクト内で画像・動画・アセットを生成する、と説明されています。MYUUUでも制作と素材生成が別ツールに分かれている状態はずっと不便だったので、これはかなり実務に効く話です。
テキトー教師DotAI 認定講師講座でも「動画は別ツールで作って、サイトは別の場所で組んで」という分断の話はよく出ます。受講生さんが一番詰まるのが、まさにこの行き来なんですよね。
Runway MCPでできること——ReplitやChatGPT内で画像・動画を直接生成
Runway MCPでできること
対応エージェントから直接利用
ChatGPT、Claude.ai / Claude Desktop、Grok Bot、Muse、Cursor、ReplitなどからRunwayの生成機能を使える
4つの主な用途
商品写真1枚からCM作成／画像と動画の生成／リンクからマーケティング動画作成／対話形式の広告作成
利用可能なモデル
Gen-4.5、Seedance 2.5、GPT Image 2、Kling 3.0、Veo 3.1、Nano Banana Pro、Gen-4 Image、Gen-4 Turbo
成果物の保存先
Runwayライブラリに保存され、Runwayアプリと同じシステムでチームの制作ワークフローにも使える
室谷代表取締役ここが今回の核心です。Runway MCPは、Runwayの生成機能を、ChatGPT・Claude・Grok Bot・Cursor・Replitなど対応エージェントから直接使えるようにするものです。
テキトー教師DotAI 認定講師公式ページに載っている接続先を整理するとこうです。
- ChatGPT
- Claude.ai / Claude Desktop
- Grok Bot
- Muse
- Cursor
- Replit
室谷代表取締役つまり「すでに作業している場所から」高品質な画像・動画を生成できる、というのが売りなんですよね。会話を離れずに生成できる点を訴求しています。
テキトー教師DotAI 認定講師具体的に何ができるかというと、公式ページでは大きく4つに分けて紹介されています。
- 商品写真1枚から完成したコマーシャルを作る（同じキッチン・同じ照明で全ショットを撮る）
- 画像と動画を生成する（アイデア出し、商品写真のリスタイル、初期コンセプトの映像化）
- リンクからマーケティング動画を作る（商品URLを渡して動画化）
- 対話形式の広告を作る（セリフを書いてキャラクター主導の商品広告に）
室谷代表取締役商品サイト向けにヒーロー動画を生成して、そのままショッピングサイトまで作る、という例も公式ページに載っています。これは制作の流れがひとつの会話に乗るということです。
テキトー教師DotAI 認定講師使えるモデルも公式ページに列挙されています。Gen-4.5、Seedance 2.5、GPT Image 2、Kling 3.0、Veo 3.1、Nano Banana Pro、Gen-4 Image、Gen-4 Turboです。
室谷代表取締役エージェントがモデルを選んでくれる場合もあれば、こちらから特定のモデルを指定することもできる、と公式のFAQに書かれています。ここは制作の意図によって使い分けたいところです。
テキトー教師DotAI 認定講師生成物はどうなるんでしたっけ。
室谷代表取締役成果物はRunwayライブラリに保存されます。Runway MCPはRunwayアプリと同じシステムを使っているので、チームの制作ワークフローにも使える、と公式FAQに記載されています。
Runway MCPの使い方・始め方——Replit/ChatGPTへの接続手順
Runway MCPの接続手順(ChatGPTの場合)
- 01Pluginsを開くchatgpt.com/plugins でRunwayを検索
- 02Install PluginをクリックSign in with Runwayでサインイン
- 03「@Runway」に言及任意のチャットで作りたいものを説明する
室谷代表取締役設定は数分で完了するとされています。ChatGPTの場合の手順は公式ページにこう書かれています。
テキトー教師DotAI 認定講師箇条書きで整理するとこうです。
- ChatGPTのPluginsを開く（chatgpt.com/plugins でRunwayを検索）
- Install Pluginをクリックし、Sign in with Runwayでサインイン
- 任意のチャットで「@Runway」に言及して、作りたいものを説明する
室谷代表取締役APIキーは不要です。ChatGPT・Grok Bot・Cursorではプラグインを追加してサインインするだけ。
それ以外のエージェントでは、エージェント設定にRunway MCPのURLを追加して、Runwayアプリのアカウントでサインインする、と公式FAQに書かれています。
それ以外のエージェントでは、エージェント設定にRunway MCPのURLを追加して、Runwayアプリのアカウントでサインインする、と公式FAQに書かれています。
テキトー教師DotAI 認定講師受講生さんからよく出る「APIキーの管理が面倒」という声を考えると、ここは大きいですよね。
室谷代表取締役実際の指示の出し方も公式ページに例がたくさん載っています。たとえばマキネッタの商品写真から「青い炎に乗せて、水を入れて、粉を入れて、猫が眺めて、コーヒーがガラスドームに上がっていって、最後に注いで朝の光の中でカップに」という一連のコマーシャルを、同じキッチン・同じ照明で作る、といったプロンプトです。
テキトー教師DotAI 認定講師商品ページのURLを渡して「このヘッドホンの30秒のフォトリアルなテック広告を作って」という使い方も紹介されています。URLから動画まで行けるのは、ECをやっている人には刺さりますね。
室谷代表取締役こういう「会話の中で完結する」タイプのツールは、使い方の型を知っているかどうかで差が出ます。以前ChatGPT for Excelの使い方完全ガイドでも書きましたが、プロンプトの型を持っておくと立ち上がりが全然違うんですよね。
料金と提供範囲——Runwayのクレジット課金、日本から使えるか・いつから
室谷代表取締役料金はどうなるのか。ここは公式FAQに明記されています。
MCPでの生成はRunwayアプリと同じくRunwayのクレジットで課金され、コストはモデルや解像度などの設定によって変わります。管理はすべてRunwayアカウントから行う、という形です。
MCPでの生成はRunwayアプリと同じくRunwayのクレジットで課金され、コストはモデルや解像度などの設定によって変わります。管理はすべてRunwayアカウントから行う、という形です。
テキトー教師DotAI 認定講師つまり「MCP経由だから別料金」ではなく、Runwayのクレジットの範囲で使うということですね。
室谷代表取締役そのとおりです。企業向けには、10/31までの申込で2か月分の利用が無料になる案内が公式ページに出ています。
テキトー教師DotAI 認定講師日本から使えるか、いつから使えるかについては、現時点では明らかにされていません。公式ページで確認できるのは、ChatGPTのアプリディレクトリで「Now in the ChatGPT app directory」として案内されている点です。
室谷代表取締役ここは憶測で書かないほうがいいところですね。提供範囲の詳細は公式の続報を待つしかないです。
テキトー教師DotAI 認定講師なぜ今この連携なのか——動画生成がなかったChatGPTとReplitの事情
室谷代表取締役ここが背景として面白いんですよ。公式FAQによると、ChatGPTは単体ではテキストと静止画までで、動画は生成できません。
加えてOpenAIは2026年にSoraを終了したため、チャット内で動画を作る標準的な手段が存在しない状態だった、と説明されています。
加えてOpenAIは2026年にSoraを終了したため、チャット内で動画を作る標準的な手段が存在しない状態だった、と説明されています。
テキトー教師DotAI 認定講師なるほど。だから「Runwayを足せばチャット内で動画まで行ける」という訴求になるわけですね。
室谷代表取締役もう一方のReplit側も事情があります。Replitには「Animated Videos」という機能があるのですが、これはReactベースのプログラム的なモーショングラフィックスです。
Replitの公式ドキュメントには「これはRunwayやSoraのようなAI生成動画ではない」と明記されています。
Replitの公式ドキュメントには「これはRunwayやSoraのようなAI生成動画ではない」と明記されています。
テキトー教師DotAI 認定講師つまりReplitは自前のAnimated Videosを持ちつつ、MCP経由でRunwayの生成機能も取り込む立場なんですね。
室谷代表取締役そういうことです。ReplitのAnimated Videosはテキストオーバーレイやトランジション、AI生成画像などを含められるプログラム的なアニメーションで、無料プランを含むすべてのビルダーが使えます。
MP4で720pまたは1080p、30fpsまたは60fpsで書き出せて、サーバーサイドでレンダリングされる、と公式ドキュメントに書かれています。
MP4で720pまたは1080p、30fpsまたは60fpsで書き出せて、サーバーサイドでレンダリングされる、と公式ドキュメントに書かれています。
テキトー教師DotAI 認定講師すみ分けとしては、動きの制御が欲しいときはAnimated Videos、フォトリアルな映像素材が欲しいときはRunway、という整理になりそうですね。
室谷代表取締役資料が示しているのは「制作の分断」という不便です。動画や画像の生成は別ツール、サイト制作は別環境。
これを「すでに作業している場所から」に寄せるのが今回の狙いなんですよね。
これを「すでに作業している場所から」に寄せるのが今回の狙いなんですよね。
制作現場はどう変わる？商品写真1枚からCMまでを作るワークフロー例
室谷代表取締役公式ページの例をなぞると、ワークフローはこうなります。まず商品写真を1枚用意します。
テキトー教師DotAI 認定講師そこから「同じキッチン、同じ照明で全ショット」という条件を付けて、コマーシャル一式を生成する。公式ページのマキネッタの例がまさにこれです。
室谷代表取締役次に、商品ページのURLを渡してマーケティング動画を作る。公式ページにはヘッドホン、ランニングシューズ、シリアル、チョコレートバー、ネックレス、時計、ゲームコンソールなど、多数のプロンプト例が並んでいます。
テキトー教師DotAI 認定講師さらに、その生成物をサイトに載せるところまで一続きにできる。公式ページには「このジュエリー商品のヒーロー動画を生成して、ショッピングサイトを作って」という例があります。
室谷代表取締役整理すると、こういう流れです。
- 商品写真または商品URLをエージェントに渡す
- @Runwayに言及して、欲しい映像・画像を説明する
- 生成物はRunwayライブラリに保存される
- そのままサイトのヒーロー動画や商品画像として組み込む
テキトー教師DotAI 認定講師これまでは、素材を作る人とサイトを組む人が別で、素材の受け渡しでロスが出ていました。それが同じ会話の中で完結するとなると、小規模チームほど恩恵が大きいです。
室谷代表取締役ただ、いきなり全部を置き換えるというより、まずは「ヒーロー動画だけRunwayで作る」くらいから始めるのが現実的です。MYUUUでも新しいツールは小さく試してから広げるようにしています。
テキトー教師DotAI 認定講師講座で言っている「まず1機能を自分の手で通してみる」という進め方が、ここでもそのまま当てはまりますね。
よくある質問
室谷代表取締役ここからは公式FAQに沿って、よく聞かれる点を整理していきます。
テキトー教師DotAI 認定講師まず、どのエージェントから接続できるのか。公式FAQでは、ChatGPT、Claude.ai、Claude Desktop、Grok Bot、Cursor、Replit、そのほかMCP（Model Context Protocol）に対応したアプリで使えるとされています。
室谷代表取締役ChatGPTは単体で動画を生成できるのか、という点も公式FAQに答えがあります。単体ではできない。
テキストと静止画までで、OpenAIが2026年にSoraを終了したため、チャット内で動画を作る標準的な手段がない状態です。Runwayを追加すれば、@Runwayに言及してショットを説明し、同じ会話の中で完成したクリップが返ってくる、と説明されています。
テキストと静止画までで、OpenAIが2026年にSoraを終了したため、チャット内で動画を作る標準的な手段がない状態です。Runwayを追加すれば、@Runwayに言及してショットを説明し、同じ会話の中で完成したクリップが返ってくる、と説明されています。
テキトー教師DotAI 認定講師モデルは選べるのか。公式FAQでは、Seedance 2.5、Kling、Gen-4.5、Veo、GPT Image 2、Nano Banana Proなどから、Runwayアカウントのプランに応じて使えるとされています。
エージェントが選ぶことも、特定のモデルを指定することもできます。
エージェントが選ぶことも、特定のモデルを指定することもできます。
室谷代表取締役課金はどうなるのか。MCPでの生成はRunwayアプリと同じくRunwayのクレジットを使い、コストはモデル・解像度・その他の設定に依存します。
管理はRunwayアカウントから行います。
管理はRunwayアカウントから行います。
テキトー教師DotAI 認定講師APIキーは必要か。不要です。
ChatGPT、Grok Bot、Cursorではプラグインを追加してサインイン。それ以外のエージェントではRunway MCPのURLをエージェント設定に追加して、Runwayアプリのアカウントでサインインします。
ChatGPT、Grok Bot、Cursorではプラグインを追加してサインイン。それ以外のエージェントではRunway MCPのURLをエージェント設定に追加して、Runwayアプリのアカウントでサインインします。
室谷代表取締役チームの制作で使えるのか。公式FAQでは、Runway MCPはRunwayアプリと同じシステムを使い、生成物はほかの作業物と一緒にRunwayライブラリに保存されるとされています。
テキトー教師DotAI 認定講師日本から使えるのか、いつから提供されるのかは、現時点では明らかにされていません。ここは公式の続報を待ちましょう。
室谷代表取締役動画編集のスキルがなくても、という話と混同されがちですが、ReplitのAnimated Videosはプログラム的なモーショングラフィックスで、RunwayのAI生成動画とは別物です。この区別は押さえておきたいところです。
テキトー教師DotAI 認定講師制作の入口がひとつにまとまっていく流れは、講座で扱う受講生さんの制作フローにもじわじわ効いてきそうです。
