Adobe Captivate でコンテンツブロックとコンポーネントに余白を追加する

概要

余白を使うことでコンテンツとその境界線の間にスペースが追加されるため、プロジェクトの視覚的なレイアウトと配置を整えることができます。 コンテンツブロックまたはコンポーネントのレベルで適用して、配置や間隔を改善できるため、さらに見やすくなります。

余白の利点

• 要素の周囲に均一な間隔を挿入することで、すっきりとしたプロフェッショナルな見た目になります。 
• インタラクティブな要素の周囲にスペースを増やすことで選択しやすくなるため、ユーザーエクスペリエンスが向上します。

次のような場面で、余白を使用できます。

• サイズの調整：要素の周囲にさらにスペースが必要な場合、余白を追加したり増やしたりすることを検討してください。 スペースを追加することでアクセシビリティを向上できるインタラクティブな要素の場合に特に便利です。 
• 境界線の間隔：余白を設定することで、コンテンツとその境界線の間にスペースを追加できるため、ページ内にある他の要素との配列整えることができます。

このページのトピック：

コンテンツブロックの余白

境界線からコンテンツブロック全体に余白を追加し、異なる表示形式で挙動を確認します。

コンポーネントレベルの余白

画像、テキスト、インタラクティブ要素、カード、ウィジェットオブジェクトなど、コンテンツブロック内の各要素に余白を組み込みます。 コンテンツブロック内のコンポーネントに余白を追加するには、以下の 2 つの方法があります。

均一な余白：4 辺すべてに同時に余白を追加します。

均一でない余白：余白を各辺に個別に追加します。 デフォルトではこのオプションが選択されています。

以下に、テキストブロックの 4 辺すべてに 50 ピクセルの均一な余白を適用した例を示します。

コンポーネントのエッジにカーソルを合わせると、ピンク色のハンドルが表示され、ドラッグして間隔を調整できます。 すべての辺に均一な余白を適用するには、Shift キーを押しながらハンドルをドラッグします。

異なるコンポーネントの余白の例

以下に、寸法が 1366 x 768 ピクセルのプロジェクトに含まれる、さまざまなコンポーネントの余白の例をいくつか示します。

自動レイアウト

「自動レイアウト」を有効にすると、デバイス表示形式全体でコンテンツブロックとコンポーネントの余白が比例的に調整され、値はプロジェクトの寸法に基づいて、デスクトップ、タブレット、モバイルデバイスに応じて設定されます。 詳しくは、Adobe Captivate でプロジェクト寸法を変更する
方法を参照してください。

自動レイアウトが有効になっている場合の動作

「自動レイアウト」が有効になっている場合、余白は異なるデバイス間で比例的に調整され、各表示形式の値が自動的に変更されます。 解像度が 1366 x 768 ピクセルのプロジェクトでは、デスクトップで 50 ピクセルの余白がタブレットでは 28 ピクセルに、モバイルでは 16 ピクセルに縮小され、アスペクト比が維持されます。

「自動レイアウト」が無効になっている場合の動作

以下に、1366 x 768 ピクセルのプロジェクトサイズで、「自動レイアウト」機能が無効になっている場合の例を示します。 この場合、ユーザーは各ビューポートの余白値を手動で追加して、最適な表示体験を得ることができます。

デスクトップビュー（余白 50 ピクセル）：

タブレットビュー（「自動レイアウト」を無効にし、手動で余白を 10 ピクセルに変更）：

モバイルビュー（手動で余白を 20 ピクセルに変更）：