- Captivate ユーザーガイド
- Captivate の紹介
- Adobe Captivate の新機能
- Adobe Captivate の必要システム構成
- Adobe Captivate アップデート
- Adobe Captivate のダウンロード
- よくある質問
- Adobe Captivate 機能の URL アクセスを設定する
- スライドを追加
- Adobe Captivate のデザインオプション
- テキストブロックを追加
- メディアブロックを追加
- インタラクティブなコンポーネント
- ブランディングブロックを追加
- ウィジェット
- クイズを作成
- プロジェクトに音声を追加
- インタラクション
- アニメーション
- アクセシビリティ
- タイムラインのカスタマイズ
- 目次および再生バーのカスタマイズ
- プロジェクトプロパティを編集
- シミュレーションプロジェクトの作成
- プロジェクトのプレビュー
- レビュー用にプロジェクトを共有する
- プロジェクトのパブリッシュ
- Adobe Captivate でプロジェクトをアップグレードする
概要
余白を使うことでコンテンツとその境界線の間にスペースが追加されるため、プロジェクトの視覚的なレイアウトと配置を整えることができます。 コンテンツブロックまたはコンポーネントのレベルで適用して、配置や間隔を改善できるため、さらに見やすくなります。
余白の利点
- 要素の周囲に均一な間隔を挿入することで、すっきりとしたプロフェッショナルな見た目になります。
- インタラクティブな要素の周囲にスペースを増やすことで選択しやすくなるため、ユーザーエクスペリエンスが向上します。
次のような場面で、余白を使用できます。
- サイズの調整：要素の周囲にさらにスペースが必要な場合、余白を追加したり増やしたりすることを検討してください。 スペースを追加することでアクセシビリティを向上できるインタラクティブな要素の場合に特に便利です。
- 境界線の間隔：余白を設定することで、コンテンツとその境界線の間にスペースを追加できるため、ページ内にある他の要素との配列整えることができます。
このページのトピック：
-
右側のツールバーから「ビジュアルプロパティ」を選択し、「整列と間隔」セクションを展開して、余白値を表示します。
コンテンツブロックの余白 コンテンツブロックの余白 -
「コンテンツ幅」スライダーを使用して、コンテンツブロックの水平方向の間隔を左側または右側から変更します。 スライダーを使用して、希望する間隔のパーセンテージを指定します。 幅を調整すると、余白の値が自動的に更新され、変更内容が反映されます。
-
「自動レイアウト」を有効にして、すべてのデバイスの表示形式で比率を保持したままコンテンツの幅を調整するか、無効にして手動で調整します。 詳しくは、異なる表示形式に対応する自動レイアウトについて参照してください。
「自動レイアウト」を無効にする場合は、すべての辺の余白値を設定でき、表示形式のコンテンツの幅を個別に調整することが可能です。 1 つの表示形式のコンテンツ幅を追加しても、他の表示形式にはその変更内容が反映されません。
「自動レイアウト」が無効になっているタブレットビューのコンテンツブロックの余白 「自動レイアウト」が無効になっているタブレットビューのコンテンツブロックの余白 注意：プロジェクトの幅が固定されるため、コンテンツブロックの水平方向の余白は、パーセンテージで設定されます。 縦方向の余白は、長いスクロールコンテンツに対応するために、ピクセル単位で定義されます。
以下に、テキストブロックの 4 辺すべてに 50 ピクセルの均一な余白を適用した例を示します。
コンポーネントのエッジにカーソルを合わせると、ピンク色のハンドルが表示され、ドラッグして間隔を調整できます。 すべての辺に均一な余白を適用するには、Shift キーを押しながらハンドルをドラッグします。
任意のテキストブロックに余白を追加して、コンテンツとその境界線の間にスペースを作成します。 テキストコンポーネント（タイトル、字幕、本文）ごとに、ピンク色のハンドルを使用してキャンバスに直接ドラッグし、余白を追加します。 または、テキストコンポーネントを選択し、「ビジュアルプロパティ」の「整列と間隔」セクションに余白の値を入力します。
この例は、本文コンポーネント内の複数列のテキストブロックに余白を追加する（具体的には下部に 100 ピクセルの余白を適用する）方法を示しています。
画像を選択し、画像の境界線の近くにあるピンク色のハンドルをドラッグします。 または、「ビジュアルプロパティ」メニューの「整列と間隔」セクションに余白の値を入力することもできます。
この例では、画像コンテナの境界線から 60 ピクセルの下部の余白を示しています。
ウィジェット、カード、文字、質問スライドの画像など、画像グリッド内にある画像に余白を追加しますが、背景画像に余白を追加することはできません。
これは、インタラクティブなボタンコンポーネント内に余白を追加する例です。 ボタンコンポーネントを追加し、そのコンテンツブロック内のボタンを選択します。 ピンク色のハンドルを使用してドラッグして間隔を追加するか、「整列と間隔」セクションに余白の値を入力します。
「ラジオグループ」および「ドロップダウン」のインタラクティブコンポーネントは、余白をサポートしていません。
見出しのテキスト、字幕、画像、カード、アイコンなど、ウィジェット内の任意のコンポーネントに余白を追加します。 この例のフリップカードウィジェットでは、ウィジェット内の任意のコンポーネントを選択し、ピンク色のハンドルを使用して余白を調整できます。
または、コンポーネントを選択して、「ビジュアルプロパティ」の「整列と間隔」から余白を追加します。 この例では、カード内のフリップアイコンに 30 ピクセルの余白が追加されています。 同様に、各カード内の任意のテキストや画像を選択し、その境界線に余白を追加できます。
テキスト、画像、インタラクティブボタンを含む、質問スライド上のすべてのコンポーネントに余白を組み込みます。 質問スライドの選択肢間にスペースを追加すると、選択しやすくなり、質問の全体的な美観が向上します。 これは、画像オプションの内側に余白を追加した多肢選択問題の例です。
自動レイアウト
「自動レイアウト」を有効にすると、デバイス表示形式全体でコンテンツブロックとコンポーネントの余白が比例的に調整され、値はプロジェクトの寸法に基づいて、デスクトップ、タブレット、モバイルデバイスに応じて設定されます。 詳しくは、Adobe Captivate でプロジェクト寸法を変更する
方法を参照してください。
自動レイアウトが有効になっている場合の動作
「自動レイアウト」が有効になっている場合、余白は異なるデバイス間で比例的に調整され、各表示形式の値が自動的に変更されます。 解像度が 1366 x 768 ピクセルのプロジェクトでは、デスクトップで 50 ピクセルの余白がタブレットでは 28 ピクセルに、モバイルでは 16 ピクセルに縮小され、アスペクト比が維持されます。
「自動レイアウト」が無効になっている場合の動作
以下に、1366 x 768 ピクセルのプロジェクトサイズで、「自動レイアウト」機能が無効になっている場合の例を示します。 この場合、ユーザーは各ビューポートの余白値を手動で追加して、最適な表示体験を得ることができます。
デスクトップビュー（余白 50 ピクセル）：
タブレットビュー（「自動レイアウト」を無効にし、手動で余白を 10 ピクセルに変更）：
モバイルビュー（手動で余白を 20 ピクセルに変更）：
