この文書の手順では、画像や Adobe Captivate プロジェクトファイルのサンプルなどのアセットを使用する必要があります。 独自のアセットとサンプルを使用することもできます。 ただし、次の zip ファイルをコンピューターにダウンロードして展開することをお勧めします。
最終更新日 :
2021年4月28日
デバイスおよび画面サイズ間でシームレスに拡大縮小するレスポンシブプロジェクトを、Adobe Captivate で作成します。 レスポンシブプロジェクトを使用して、学習者のために魅力的な学習体験を作成し、学習を興味深くインタラクティブなものにしましょう。 この文書では、Adobe Captivate でレスポンシブプロジェクトを作成してカスタマイズする方法を学習します。
アセットとサンプル
レスポンシブプロジェクトの作成
Adobe Captivate でレスポンシブプロジェクトを作成することから始めましょう。
-
Adobe Captivate のようこそ画面の「新規」タブで、「レスポンシブプロジェクト」を選択し、「作成」をクリックします。
Adobe Captivate は、単一のスライドでレスポンシブプロジェクトを作成します。
Adobe Captivate のレスポンシブプロジェクトでは、スライド上のプレビューバーに、様々な画面サイズまたはデバイスでプロジェクトをすばやく表示するオプションがあります。
-
様々なデバイスでプロジェクトをプレビューするには、ドロップダウンリストで希望の「プレビュー」オプションを選択します。
-
プレビューバーの右側にあるプレビュースライダーを使用すると、現在のスライドのサイズを変更し、コンテンツを動的にプレビューすることができます。
スライダーを左右に動かすと、スライドの内容が画面に合わせて調整されます。
このトピックについて詳しくは、Adobe Captivate でのレスポンシブプロジェクトのデザインを参照してください。
Fluid Box をスライドに追加する
また、Fluid Box レイアウトを使用したレスポンシブプロジェクトも Adobe Captivate 作成できます。異なる画面サイズまたはデバイスでスライドを表示する際に、オブジェクトが期待どおりに動作するように、オブジェクトをスライドに配置します。 Fluid Box は、eラーニングデザイナー向けの使いやすいレイアウトモデルです。子オブジェクトを任意の方向に配置できるほか、表示デバイスに合わせて柔軟に調整できます。
Fluid Box コンテナは、使用可能スペースに合わせてオブジェクトを拡大 、 または縮小し、オーバーフローを防ぎます。 Fluid Box のエレメントは方向に左右されません。オブジェクトは使用可能なスペースに合わせて調整できます。
空のスライドをプロジェクトに追加し、Fluid Box を使ってスライドの応答性を向上させます。この手順の最後のスライドは次のように表示されます。
上記のスライドは、2 つの水平方向の Fluid Box を使用しています。
-
ダウンロードしたファイルフォルダーで、サンプルサブフォルダーに移動し、以下のファイルを開きます。
create-responsive-projects.cptx
注意：このチュートリアルで提供されているプロジェクトファイルのダウンロードは必須ではありません。 ダウンロードしなくても、この手順を行うことができます。 ただし、Adobe Captivate で必ずレスポンシブプロジェクトを作成してください。
-
最初のスライドで フィルムストリップを選択し、ツールバーで「スライド」をクリックして、「空白スライド」を選択します。
まず、現在のスライドに 2 つの水平方向の Fluid Box を追加します。
-
ツールバーで「Fluid Box」をクリックして、「水平方向」を選択します。
-
サブメニューで、2 つ目のボックスを選択して、2 つの Fluid Box を追加します。
Fluid Box をスライドに配置すると、スライド全体に均等な間隔をおいて配置されます。 それらの間のスライダーでボックスのサイズを変更することができます。
-
水平方向のボックスのサイズを変更するには、スライダーを左に動かします。
次に、2 つの垂直方向の Fluid Box を右側の水平方向のボックスに置きます。
-
オブジェクトを右の水平方向のボックスの内側に配置するには、ボックスを選択します。
-
ツールバーで「Fluid Box」をクリックして、「垂直方向」を選択します。
-
サブメニューで、2 つ目のボックスを選択して、2 つの垂直方向の Fluid Box を追加します。
-
スライダーを上に移動して、垂直方向のボックスのサイズを変更します。
-
プレビュースライダーを左右に移動させて、このスライドの応答性をテストします。
または、プレビュードロップダウンリストから様々なデバイスを選択します。
Fluid Box へのオブジェクトの追加
前のセクションでは、スライドに水平および垂直方向の Fluid Box を追加する方法を学習しました。
スライドの Fluid Box にオブジェクトを追加しましょう。
注意：
ロールオーバーオブジェクトは、Fluid Box に追加できません。これらのオブジェクトはモバイルデバイスでは機能しないためです。
この手順の最後のスライドは次のように表示されます。
-
ダウンロードしたファイルフォルダーで、サンプルサブフォルダーに移動し、以下のファイルを開きます。
create-responsive-projects-with-fluid.cptx
注意：このチュートリアルで提供されているプロジェクトファイルのダウンロードは必須ではありません。 ダウンロードしなくても、この手順を行うことができます。 ただし、上記 Fluid Boxをスライドに追加する セクションの初めに表示したスライドと類似したスライドを作成することを推奨します。
-
水平および垂直方向の Fluid Box を含むスライドに移動します。
-
左の水平方向のボックスにテキストキャプションを追加するには、スライドでボックスを選択します。
-
ツールバーで「テキスト」をクリックし、「テキストキャプション」を選択します。
テキストキャプションボックスに次のテキストを入力します。
LUNARSPHERE STUDIOS
プロパティインスペクターを使用してテキストの書式を変更することができます。 プロパティインスペクターを開くには、ツールバーの右端にあるプロパティをクリックします。
-
右下のボックスにテキストキャプションを追加するには、スライドでボックスを選択します。
-
ツールバーで、 「 テキスト」をクリック して 「テキストキャプション」を選択します。
以下のテキストをテキストキャプションにコピー＆ペーストします。
マディソンとロバートは Lunarsphere Studios の学習チームの一員です。 あなたと同じように、毎日彼らは自分のスキルと限界をテストする新しいチャレンジと機会を提示されます。 今日、あなたはマディソンやロバートと同じように旅を始め、Adobe Captivate を初めて使用します。
-
右上の垂直方向のボックスに画像を追加するには、スライドでボックスを選択します。
-
ツールバーの「メディア」をクリックして、「画像」を選択します。
コンピュータから画像ファイルを選択するためのダイアログボックスが表示されます。
-
ダウンロードしたファイルフォルダーで、アセットサブフォルダーに移動します。
-
ファイル lunasphere -studios-team.png を選択して開きます。
画像は、右上の垂直方向の Fluid Box に配置されています。
画像が配置された Fluid Box に収まるように拡大縮小されていることを確認してください。
-
プレビュースライダーを左右に移動させて、このスライドの応答性をテストします。
または、プレビュードロップダウンリストから様々なデバイスを選択します。
今度はコンテンツ付きのスライドがあるので 、 これらのオブジェクトがどのようにデバイスに表示されるかプレビューします。
ツールバーで、 「 プレビュー」をクリック して 「プロジェクト」を選択します。
Fluid Box について詳しくは、Adobe Captivate の Fluid Box を参照してください。
レスポンシブシミュレーションをプロジェクトに追加する
以下のモードで、レスポンシブプロジェクトのシミュレーション手順をキャプチャできます。
- デモ。
- 評価。
- トレーニング。
PowerPoint プレゼンテーションを作成する手順を記録するには、デモモードで短いソフトウェアシミュレーションを挿入します。
-
ダウンロードしたファイルフォルダーで、サンプルサブフォルダーに移動し、以下のファイルを開きます。
create-responsive-projects.cptx
注意：このチュートリアルで提供されているプロジェクトファイルのダウンロードは必須ではありません。 ダウンロードしなくても、この手順を行うことができます。 ただし、Adobe Captivate で必ずレスポンシブプロジェクトを作成してください。
-
ツールバーで「スライド」をクリックし、「ソフトウェアシミュレーション」を選択します。
-
追加スライドを記録ダイアログボックスで、ソフトウェアシミュレーションを挿入したいスライドの前のスライドを選択して、「OK」をクリックします。
-
ダイアログボックスには、デモを記録するオプションがあります。 次のオプションを選択します。
- ドロップダウンリストで「PowerPoint」を選択します。
- モードドロップダウンリストで「デモモード」が選択されていることを確認します。
-
「記録」をクリックします。
カウンタが 1 までカウントダウンした後、PowerPoint アプリケーションが前景に来ます。
-
PowerPoint で以下の手順を実行します。
- ファイルメニューを選択します。
- 「新規」を選択します。
- テーマを選択します。
- ダイアログボックスで、「作成」をクリックします。
-
シミュレーションを終了するには
- Windows では、キーボードで End キーを押します。
- Mac では、上部バーの Adobe Captivate アイコンをクリックします。
シミュレーションが終了すると、Adobe Captivate は再び前景に戻ります。
デモスライドはプロジェクト内に挿入されます。
-
記録したスライドが Captivate プロジェクトに追加されます。 各シミュレーションスライドに青色の長方形が あることを確認します 。 青色の長方形は、シミュレーションのフォーカス領域です。 編集領域にのみ表示され 、 プロジェクトをプレビューまたはパブリッシュすると消えます。 この青い長方形のサイズが、Captivate レスポンスプロジェクトが対応する最小デバイスサイズです。
シミュレーションの各スライドには、青色の枠線ボックスも含まれています。 スライドのこの領域が、最小サイズのデバイスに表示されます。 デフォルトで Adobe Captivate が選択した領域とは異なる領域を表示したい場合は、このボックスをスライドの中で移動できます。
Adobe Captivate のソフトウェアシミュレーションについて詳しくは、ソフトウェアシミュレーションの作成を参照してください。
レスポンシブ シミュレーション をプレビューしましょう。
ツールバーで、 「 プレビュー」をクリック して 「プロジェクト」を選択します。
レスポンシブクイズをプロジェクトに追加する
レスポンシブプロジェクトにクイズスライドを追加すると、Adobe Captivate は Fluid Box を追加してスライド上のコンテンツの応答性を保証 します 。
この動作を試してみるために、〇Ｘ形式の質問がひとつ入った簡単なクイズを作成してみましょう。
-
ダウンロードしたファイルフォルダーで、サンプルサブフォルダーに移動し、以下のファイルを開きます。
create-responsive-projects.cptx
注意：このチュートリアルで提供されているプロジェクトファイルのダウンロードは必須ではありません。 ダウンロードしなくても、この手順を行うことができます。 ただし、Adobe Captivate で必ずレスポンシブプロジェクトを作成してください。
-
ツールバーで「スライド」をクリックして、「質問スライド」を選択します。
-
質問を挿入ダイアログボックスで、「〇Ｘ形式」 チェックボックスを選択し、 「OK」をクリックします。
質問スライドは、概要というタイトルのスライドの後に挿入されます。
また、質問スライドの後に、Adobe Captivate は「クイズ結果」スライドを挿入します。
レスポンシブプロジェクトに質問スライドを追加すると、Adobe Captivate は、質問のすべてのオブジェクトを Fluid Box に入れて、応答性を確保します。
スライドの応答性をすばやく確認できるプレビュースライダーオプションもあります。
-
質問スライドで、テキスト領域に次の質問を入力します（プレースホルダーテキストを上書きします）。
Adobe Captivate ではレスポンシブプロジェクトを作成することはできません。
-
選択肢で、「×」を選択します。
Adobe Captivate のクイズについて詳しくは、クイズの作成を参照してください。
クイズの質問をプレビューして、試してみてください。
ツールバーで「プレビュー」をクリックして、「プロジェクト」を選択します。
非レスポンシブプロジェクトのレスポンシブプロジェクトへの変換
レスポンシブではない Adobe Captivate プロジェクトがある場合、Adobe Captivate はプロジェクトをレスポンシブプロジェクトに変換する簡単な方法を提供しています。
非レスポンシブプロジェクトをレスポンシブプロジェクトに変換してみましょう。
プロジェクトを変換する前に、このプロジェクトの外観をプレビューしましょう。
ツールバーで「プレビュー」をクリックして、「プロジェクト」を選択します。
-
ダウンロードしたファイルフォルダーで、サンプルサブフォルダーに移動し、以下のファイルを開きます。
non-responsive-project.cptx
注意：このチュートリアルで提供されているプロジェクトファイルのダウンロードは必須ではありません。 ダウンロードしなくても、この手順を行うことができます。 ただし、Adobe Captivate で必ずレスポンシブプロジェクトを作成してください。
レスポンシブプロジェクトでスライドの上に表示されるプレビュースライダーが、非レスポンシブプロジェクトでは表示されていません。 これは、プロジェクトがレスポンシブかどうかを確認するのに役立つ視覚的な手がかりです。
-
ファイルメニューで、「レスポンシブとして保存」を選択します。
レスポンシブプロジェクトではすべての Adobe Captivate オブジェクトがサポートされていないため、次のダイアログボックスが表示されます。
-
「サポートされていない項目を表示」をクリックします。
HTML5 トラッカーパネルに、サポートされていないオブジェクトやスライドのリストを表示します。
-
パネルでサポートされていないオブジェクトをクリックして開きます。
オブジェクトを含むスライドに移動します。 また、オブジェクトがスライドで選択されています。
例えば、ユーザーがモバイルデバイスで出力を表示する場合などは、プロジェクトにはロールオーバーオブジェクトを含めないでください。
-
選択したロールオーバーキャプションをスライドから削除します。
オブジェクトが HTML5 トラッカーパネルに表示されなくなったことを確認します。
-
サポートされていないオブジェクトを削除した後、ファイルメニューで、「レスポンシブとして保存」を選択します。
-
ダイアログボックスで、「保存」をクリックします。
-
名前を付けて保存ダイアログボックスで、コンピュータ上のファイルの場所と、新しく変換したレスポンシブプロジェクトのファイル名を選択します。
プレビュースライダーが、変換されたプロジェクトのスライド上に表示されるようになりました。
プロジェクトを変換した後、新しく変換したレスポンシブプロジェクトの外観をプレビューしてみましょう。
ツールバーで「プレビュー」をクリックして、「プロジェクト」を選択します。
