Claude Codeで画像・動画を生成してWebサイトに組み込む方法

Claude Codeで画像や動画を生成するには、MCP経由で外部の生成サービスに接続します。対応モデルを選び、具体的な設定で料金を確認し、承認を待つように指示します。まず静止画を作り、完成した画像の生成IDを動画の開始フレームに指定してから、両方の素材をWebプロジェクトへ保存します。

例として、カフェのトップページを考えます。温かみのある室内写真、ゆっくりしたカメラ移動、その横に読みやすい文章を配置します。ポートフォリオや商品ページにも応用できます。画像、動画、配置場所の対応は、ファイル名と生成IDで明確に残します。

Claude Codeで画像や動画を生成できますか？

Claude Codeは作業の段取りとWebコードの編集を担当します。MCPは外部ツールへの接続を担い、FlyAIghは選んだ画像・動画モデルに生成を依頼して、ジョブと結果を返します。SVGやHTMLを書いたり、アップロードされた画像を理解したりする能力と、写真や動画を生成する能力は別です。

この違いを踏まえて方法を選びます。簡単なアイコン、グラフ、CSSアニメーションならコードだけで足りる場合があります。写真のような場面やカメラの動きを生成するには、対応するメディアモデルを使います。MCPを接続しても、すべてのモデルが同じ入力、長さ、解像度に対応するわけではありません。

生成ツールを接続する

インストールとログインを済ませたClaude Code、および有効なFlyAIgh Basic以上のサブスクリプションが必要です。Starter PackだけではMCPを利用できません。Claude Codeの利用料金とFlyAIghの生成クレジットは別です。FlyAIghの「ツール → MCP」でAPIキーを作成し、必要に応じて日次クレジット上限を設定します。

下のHTTP接続コマンドを自分のターミナルで実行し、プレースホルダーを自分のキーに置き換えます。キーが保存されたクライアント設定は秘密情報として扱い、リポジトリにコミットしたり、Webコードに含めたりしないでください。最新の設定は末尾のFlyAIgh MCPガイドを参照してください。Claude Codeの /mcp で接続を確認できます。claude mcp list でも設定済みサーバーを一覧表示できます。

claude mcp add --transport http flyaigh https://www.flyaigh.com/api/mcp \
  --header "Authorization: Bearer YOUR_FLYAIGH_API_KEY"

生成前にget_balanceとlist_modelsを呼び出すよう指示します。モデル名を推測せず、返されたモデルIDと対応パラメーターを選びます。自分の写真を使う場合はupload_fileを呼び出します。署名付きアップロードURLが返されたら、そこへファイル本体を転送してからfile_idを使います。ローカルパスや任意の画像URLでは、この参照IDを代用できません。

ページ内の用途に合わせて画像を作る

雰囲気を表す言葉だけでなく、ページのレイアウトから考えます。配置場所、縦横比、被写体の位置、余白の必要性を決めます。本例では16:9の画像をメディア領域に置き、見出しは横にHTMLで表示します。文字を個別に編集でき、スマートフォンでも読みやすくなります。

利用できる画像モデルと、選んだ設定の料金を確認します。list_modelsの価格は初期設定での例であり、quoteが今回の具体的なリクエストを見積もります。承認してからgenerate_imageを実行します。モデル、解像度、品質、参照画像を変えると料金も変わる場合があります。

get_jobが完了を返したら、動画化する前に画像を確認します。構図、不要な文字、勝手に追加された物、狭い画面での見え方を点検します。採用した画像のID、プロンプト、モデルを記録します。複数の候補があるときは採用するものを明示し、最新の結果が承認済みだと決めつけないでください。

確認した画像を動画にする

画像を承認したら、i2v対応の動画モデルを選びます。完成した画像の生成IDをfirst_frameに渡します。これにより選んだ画像と動画が結び付きます。似た場面を文章だけで依頼すると、別の場面が生成されます。長さ、解像度、縦横比、音声設定を指定して、生成前に料金を確認します。

動きは画面内容と分けて説明します。カメラはゆっくり前進し、湯気はわずかに動き、カップは静止させます。ページの用途に合う、対応範囲内の短い長さから始めます。落ち着いたトップページ用なら、大きな場面転換を同時に求める必要はありません。開始フレームは生成の手がかりになりますが、物やロゴの全画素を固定するものではありません。

返された動画ジョブIDを使い、get_jobで進捗を確認します。完成したら最後まで再生し、音声があれば音も確認します。カップの形、輪郭、カメラ移動、最後のフレームを見ます。ジョブが完了しても映像に不具合が残る場合があります。ループ再生するなら、最後から最初へ戻る瞬間の跳びを確認してください。

ファイルを保存してWebサイトに組み込む

採用した画像と完成した動画をダウンロードします。get_jobが返す非公開ファイルのダウンロードリンクは1時間で失効します。必要ならget_jobを再度呼び出して新しいリンクを取得します。一時的な署名付きURLをWebサイトの恒久的な素材URLにしないでください。画像ID、動画ID、プロンプト、モデル、最終ファイル名の対応を残します。

Next.jsではpublic/media内のファイルを/mediaから参照できます。別のフレームワークでは静的ファイル用ディレクトリ、または自分のCDNを使います。例では本当のJPEGファイルhero-poster.jpgと、ブラウザーで再生できるMP4ファイルhero.mp4を想定しています。必要なら形式変換を行います。PNGの拡張子を.jpgに変えるだけでは変換になりません。公開ページにAPIキーや生成呼び出しを含めないでください。

HTML例には標準の再生コントロールと静止画ポスターを設け、利用者が再生を開始します。preload="none"は動画の先読みを避けるための指定ですが、ブラウザーによって動作が異なる場合があります。狭い画面では縦に並び、文章と動画を分けて表示します。React JSXではclassName、playsInlineなどの属性名を使います。

<section class="hero">
  <div>
    <h1>Your page heading</h1>
    <p>Your introduction</p>
  </div>
  <video controls playsinline preload="none"
    poster="/media/hero-poster.jpg"
    width="1280" height="720">
    <source src="/media/hero.mp4" type="video/mp4">
    <a href="/media/hero.mp4">Download video</a>
  </video>
</section>
<style>
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2rem;
    align-items: center;
  }
  .hero video {
    display: block;
    width: 100%;
    height: auto;
  }
  @media (max-width: 48rem) {
    .hero { grid-template-columns: minmax(0, 1fr); }
  }
</style>

修正と費用を管理する

生成ごとに承認し、見積額を残高とキーの上限に照らして確認します。APIキーの日次上限は支出の制限に役立ちますが、修正が無料になるわけではありません。ツール呼び出しで利用できるexpected_creditsは見積額の変化への対策であり、プロジェクト全体の予算ではありません。

送信が成功したか不明な場合は、まず既存ジョブを確認します。24時間以内に同一リクエストで同じidempotency_keyを再利用すると、重複ジョブを防げます。同じキーでパラメーターを変えると競合します。別の仕上がりを求める生成は新規リクエストとなり、クレジットを消費する場合があります。完成した動画が好みに合わないことは、ジョブの失敗とは異なります。

• 接続できない場合は、/mcp、HTTPエンドポイント、APIキー、対象となる有効なサブスクリプションを確認します。
• 参照が拒否された場合は、自分のアカウントで完成した画像、または転送済みのfile_idを使います。i2vではfirst_frameに指定します。
• 素材が表示されなくなった場合は、get_jobで失効したリンクを更新し、ダウンロードしたファイルを安定したパスで公開します。再生成は不要です。
• 再生や切り抜きが不自然な場合は、形式、ネットワーク応答、モバイル表示サイズ、CSSを確認します。coverによる切り抜きは被写体の一部を隠す場合があります。

出典と関連ガイド

能力の区別はAnthropicの公式説明、ツール名と参照方法はFlyAIghの現行MCP実装に基づきます。ページ例には標準のHTML動画の動作を用いています。実行時には最新のモデル設定と見積額を確認してください。

• Claude：画像生成能力の説明
• Claude Code：MCPによるツール接続
• FlyAIgh：MCP設定とツールリファレンス
• MDN：HTMLの動画要素
• FlyAIghで画像を動かす
• 動画向けの参照画像を準備する
• 商品写真から紹介動画を作る