マニュアル キャンセル

Adobe Captivate プロジェクトに Web オブジェクトを追加

  1. Captivate ユーザーガイド
  2. Captivate の紹介
    1. Adobe Captivate の新機能
    2. Adobe Captivate の必要システム構成
    3. Adobe Captivate アップデート
      1. Adobe Captivate(12.5 アップデート)リリースノート
      2. Adobe Captivate(12.4 アップデート)リリースノート
      3. Adobe Captivate(12.3 アップデート)リリースノート
      4. Adobe Captivate(12.2 アップデート)リリースノート
      5. Adobe Captivate(12.1 アップデート)リリースノート
    4. Adobe Captivate のダウンロード
    5. よくある質問
  3. スライドを追加
    1. Adobe Captivate のスライドナビゲーター
    2. 会話スライドの追加
    3. Adobe Captivate プロジェクトへのキャラクターの追加
    4. スライド上の背景画像を編集
    5. コンテンツブロックとコンポーネントに余白を追加
    6. 長いスクロールプロジェクトの作成
  4. Adobe Captivate のデザインオプション
    1. デザインオプションとは
    2. デザインオプションのパーツ
    3. カスタムデザインオプションを作成する
    4. カスタムデザインオプションを修正する
    5. カスタムデザインオプションを書き出す
    6. カスタムデザインオプションを読み込む
  5. テキストブロックを追加
    1. プロジェクトにテキストを追加
    2. プロジェクトに Adobe Fonts を追加する
  6. メディアブロックを追加
    1. プロジェクトに画像を追加
    2. プロジェクトにビデオを追加
    3. 引用を追加
    4. プロジェクトに SVG を追加
    5. プロジェクトに web オブジェクトを追加する
  7. インタラクティブなコンポーネント
    1. ボタンの追加
    2. 入力フィールドを追加
    3. ラジオボタングループを追加
    4. ドロップダウンの追加
    5. チェックボックスを追加
  8. ブランディングブロックを追加
    1. プロジェクトにヘッダーを追加する
    2. プロジェクトにフッターを追加する
  9. ウィジェット
    1. カードを追加
    2. タブを追加
    3. 証明書の追加
    4. カルーセルの追加
    5. ホットスポットの追加
    6. ドラッグ&ドロップを追加
    7. タイムラインを追加
    8. クリックして表示を追加
    9. アコーディオンを追加する
  10. クイズを作成
    1. 多肢選択問題を追加
    2. 正誤形式の質問を追加
    3. 列を一致させる質問を追加
    4. 短い答えの問題を追加
    5. 順序問題を追加
    6. 質問プールとランダム質問スライドを追加
    7. 質問を CSV 形式で読み込む
  11. プロジェクトに音声を追加
    1. 音声を追加
    2. クローズドキャプションを追加する
  12. インタラクション
    1. プロジェクトにインタラクションを追加
    2. オーバーレイを使用したインタラクティブビデオの作成
    3. スライドレベルのインタラクションの作成
    4. オブジェクトレベルのインタラクションの作成
  13. アニメーション
    1. プロジェクトにアニメーションを追加
  14. アクセシビリティ
    1. プロジェクトのアクセシビリティを高める
  15. タイムラインのカスタマイズ
    1. Adobe Captivate のタイムラインパネル
  16. 目次および再生バーのカスタマイズ
    1. Adobe Captivate の目次
  17. プロジェクトプロパティを編集
    1. Adobe Captivate の変数
    2. 環境設定
    3. プロジェクト寸法
    4. テーマ
  18. シミュレーションプロジェクトの作成
    1. シミュレーション
  19. プロジェクトのプレビュー
    1. プレビュー
  20. レビュー用にプロジェクトを共有する
    1. レビュー用の共有
    2. レビュー用にプロジェクトを共有する際の FAQ とトラブルシューティングのガイド   
  21. プロジェクトのパブリッシュ
    1. プロジェクトをパブリッシュする
  22. Adobe Captivate でプロジェクトをアップグレードする
    1. プロジェクトを最新バージョンにアップグレードする 

Captivate プロジェクトに Web オブジェクトを追加する方法について説明します。

概要

Web オブジェクトを使用すると、HTML5 メディア、ビデオ、Web ページ、ストリーミングリンク、PDF などの外部コンテンツを直接スライドに埋め込むことができます。 この機能により、インタラクティブ性が向上し、サードパーティのリソースを統合できます。 Web オブジェクトは、URL、埋め込みコード、またはアップロード済みの PDF を使用して追加できるため、コンテンツを柔軟に取り込むことができます。 外観は完全にカスタマイズ可能で、キャプション、字幕、インタラクティブボタンを含めるオプションがあり、まとまりのある魅力的なユーザーエクスペリエンスを実現できます。

このページのトピック:

スライドに Web オブジェクトを追加

Adobe Captivate で Web オブジェクトを追加するには、3 つの方法があります。Web ページの URL を追加するか、ビデオまたはストリーミングリンク用の埋め込みコードを挿入するか、またはシステムから PDF をアップロードします。

  1. 左側のツールバーで「メディアブロックを追加」を選択します。

  2. 「Web オブジェクト」を選択します。

    スライドに Web オブジェクトを追加

  3. ビジュアルプロパティパネルで、コンテンツブロックに含める Web オブジェクトの数を選択します。1 つのスライドにつき 2 つまで指定できます。

  4. 「コンポーネント」セクションを使用して、キャプション、字幕、カード、ボタンなどのコンポーネントを追加します。

    • キャプション / 字幕:コンテンツブロック内にテキストプレースホルダーを追加します。 
    • カード:Web オブジェクトの周囲にカードを追加し、コンテナとして機能させます。 
    • ボタン:Web オブジェクトの表示と非表示、インタラクションとアニメーションの追加に使用できます。 
    Web オブジェクトにコンポーネントを追加

Web オブジェクトソースを追加

Web オブジェクトプレースホルダーを選択し、「コンテンツ」セクションのソースオプションを表示して Web オブジェクトを追加します。

Web オブジェクトソース

 URL を Web オブジェクトとして追加

「コンテンツ」セクションの「URL」オプションを選択して、Web ページまたはオンラインビデオをスライドに表示し、URL をコピーしてアドレスフィールドに貼り付けます。

Web オブジェクトの URL を追加

 Web オブジェクトのプレビューがコンテンツブロック内に表示されます。 

埋め込みコードを Web オブジェクトとして追加

埋め込みコードとは、外部プラットフォームが提供する HTML または JavaScript のスニペットです。このスニペットを使用すると、ビデオ、インタラクティブ要素、ウィジェットなどのマルチメディアコンテンツをプロジェクトに組み込むことができます。

埋め込みコードを使用すると、ストリーミングサーバーからのビデオを含めることができるほか、オブジェクトのサイズ、レイアウト、外観をより細かく制御できます。

  1. 「埋め込みコード」オプションを選択します。

  2. 埋め込みコードを YouTube、Vimeo、または任意のビデオストリーミングプラットフォームからコピーして貼り付けます。

    YouTube ビデオの埋め込みコードの例を以下に示します。

    <iframe width="560" height="315" src="https://www.youtube.com/embed/pydJXGFsQ3A?si=Xn7kPDoNG9UduYX8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

    埋め込みコードを貼り付けると、プレビューがスライドに表示されます。

    YouTube の埋め込みコード

    Web オブジェクトコンテンツブロックの領域全体を利用するには、iframe の埋め込みコードを編集します。 コードを調整して、widthheight の属性を「100%」に設定します。 例:width="100%" height="100%"。 これにより、Web オブジェクトが使用可能な領域を完全に占有します。

    埋め込みコード

PDF を Web オブジェクトとして追加

Adobe Captivate で PDF を Web オブジェクトとして埋め込むと、ガイドやワークシートなどの補足資料をスライド内で直接提供して、e ラーニングの効果を高めることができます。 

  1. システムから PDF ファイルを参照するには、「システム」オプションを選択してから、 アイコンを選択します。 プロジェクトをパブリッシュすると、PDF がプロジェクトファイルにコピーされます。

    Web オブジェクトとしての PDF

  2. 右上隅の「プレビュー」を選択して、実行時に様々なデバイスビューで PDF がどのように表示されるかを確認します。 プレビュー中に、検索、スクロール、注釈、ファイルの保存などの主要な機能をテストします。

    プレビュー時の PDF

Web オブジェクトをカスタマイズ

  1. 「外観」セクションで、Web オブジェクトコンテンツブロックの外観をカスタマイズします。 背景色を調整し、境界線を追加し、シャドウを適用して、視覚的な魅力を高めます。

    Web オブジェクトの外観をカスタマイズ

  2. 「整列および間隔」セクションでは、スライダーを使用したり、コンテンツと境界線の間にパディングを追加したりして、コンテンツ幅を調整できます。 Adobe Captivate でのパディングと自動レイアウトについて、詳細を確認してください。

    Web オブジェクトの整列および間隔を追加

  3. Web オブジェクトの周囲にカードを追加します。 「カード」オプションを「コンポーネント」から選択し、「カード」セクションを展開してカードの外観を変更します。

    Web オブジェクトカード

  4. 「キャプション」または「字幕」のテキストコンポーネントを選択して、外観をカスタマイズします。 テキストカラーの調整、ハイライトまたはシャドウの適用、箇条書きまたは番号の追加、プリセットパネルからのスタイルの選択を行うことができます。

    Web オブジェクトのテキストをカスタマイズ

  5. 「ボタン」コンポーネントを選択して、デザインをカスタマイズしたり、パディングを追加したりします。 シェイプ、テキスト、アイコン、色、境界線を変更したり、シャドウを追加したりして、パーソナライズされた外観を実現できます。

    Web オブジェクトのボタンをカスタマイズ

e ラーニングプロジェクトで Web オブジェクトを使用する場合のベストプラクティス 

ビデオや外部メディアへのリンクなどの埋め込みコンテンツを e ラーニングプロジェクト内でスムーズかつ安全に実行できるように、以下のベストプラクティスをお勧めします。 

  • HTTPS を使用:常に HTTPS を使用して、安全で暗号化された接続でユーザーデータを保護し、最新のブラウザーとの互換性を確保します。  
  • クリックジャッキングを確認:クリックジャッキングは安全性を脅かすため、Captivate では別の Web サイトへのリダイレクトはサポートしません。 
  • ブラウザーの互換性を確認:埋め込まれたコンテンツを様々なブラウザー間でテストして、すべてのユーザーに対して正しく表示され、機能することを確認します。 
  • 法的情報ならびにブロックされていないコンテンツを確認:埋め込みメディアに信頼できる法的なソースを使用し、リンクが引き続き機能し、関連する地域でアクセスできることを定期的に確認します。 
  • CORS への準拠を確保:外部リソースが CORS(クロスオリジンリソース共有)をサポートしていることを確認し、オリジンが異なる埋め込みコンテンツに対してブラウザーの制限が適用されないようにします。 
  • デバイスの互換性をテスト:埋め込みコンテンツがタブレットやモバイルデバイスで応答可能であり、画面サイズを問わずシームレスに操作できることを確認します。 
  • スクリプトブロックを確認:スクリプトブロックを有効にしてコンテンツをテストし、重要なコンテンツがブロックされた場合はチームと協力してフォールバックを実装します。 

ヘルプをすばやく簡単に入手

新規ユーザーの場合

Adobe MAX 2025

Adobe MAX Japan
クリエイターの祭典

2025 年 2 月 13 日
東京ビッグサイト