カスタムデザインオプションを作成

Adobe Captivate のデザインオプションを使用すると、スライド、コンテンツブロック、質問スライド、ウィジェットの様々なコンテンツレイアウトとスタイルを柔軟に作成できます。任意のコンテンツブロックまたはコンテンツブロック内のコンポーネントを選択して、使用可能なデザインオプションのホストを表示します。 Adobe Captivate のデザインオプションについて、詳細を確認してください。

ただし、個人または組織のデザインとレイアウトを実装する必要がある場合は、カスタムデザインオプションを作成できます。この記事では、Adobe Captivate でカスタムデザインオプションを作成、カスタマイズ、再利用または共有する方法について説明します。 CSS グリッドプロパティを使用したレイアウト変更、様々なビューポートに合わせたレイアウトの更新、およびオブジェクトのスタイル設定のカスタマイズについて説明します。

JSON ファイルの必須フィールドを変更
CSS のスタイルとプロパティ

ヒント :

時間を節約するために、既存のデフォルトデザインオプションのコピーを Captivate 内で作成し、それを別の場所（<eLearningAssets>\12.0\）に保存します。

例えば、イメージブロックのカスタムデザインを作成する場合、既定のイメージブロックデザインオプションをコピーし、それをカスタマイズのベースとして使用します。

このフォルダーをパス（C:\Program Files\Adobe\Adobe Captivate\DesignOptions\content_blocks\Image\Single Image Default Design Option）からユーザーの場所 <elearning> にコピー

インストールされているデザインオプションの場所

インストール先：

Windows：C:\Program Files\Adobe\Adobe Captivate\DesignOptions
macOS：/Applications/Adobe Captivate/DesignOptions/

コンテンツブロック、レイアウトスライド、質問スライド、ウィジェット、インタラクティブコンポーネントなど、様々なコンテンツタイプに対してインストールされたデザインオプションフォルダーを検索できます。これらのフォルダーには、独自のデザインを作成するためにコピーおよびカスタマイズできるデザインオプションファイルが含まれています。各フォルダーを開いて、様々な種類のコンテンツブロック、レイアウトスライド、ウィジェット、質問スライド、およびインタラクティブコンポーネントを確認できます。

注意：

JSON ファイルを開いて編集するには、任意のテキスト／HTML エディターを使用できます。フォルダーに次のファイルが含まれていることを確認します：designOption.json、localized.json、Thumbnail.png

カスタムデザインオプションフォルダーを作成

ユーザーはここでデザインオプションの JSON ファイルをアップロードして、外部で作成されたデザインオプションを組み込むことができます。ファイルが追加されると、以降の Captivate 起動時にコンテンツブロックまたはコンポーネントを選択した場合に、ビジュアルプロパティパネルにデザインオプションが表示されます。

e ラーニングアセット内に、カスタムデザインオプション専用の別のフォルダーを作成します。 Captivate は e ラーニングアセットフォルダーからデザインオプションを読み取ることができます。そのため、ここにカスタムデザインを作成することで、デフォルトデザインオプションとカスタムデザインオプションを区別できるようになります。

まだ存在しない場合は、<eLearningAssets>\12.0\ に designOptions という名前のフォルダーを作成します。
- Windows：C:\Users\Public\Documents\Adobe\eLearning Assets\12.0\designOptions
- macOS：/Users/<user>/Documents/Adobe/eLearning Assets/12.0/designOptions/
注意：

インストールされているデザインオプションと区別するため、カスタムデザインオプションのフォルダー名は小文字の「d」で始まります。
e ラーニングアセットフォルダー内のコンテンツブロックまたはスライドレイアウトのタイプごとに、カスタムデザインオプションフォルダーの名前を変更します。
任意のテキストエディターを開き、参照して e ラーニングアセットからカスタムデザインオプションを選択します。ファイルが自動的にエディターに読み込まれます。

デザインオプションファイルの各部の把握について、詳細を確認してください。

JSON ファイルの必須フィールドを変更

デザインオプションは JSON ファイルに存在します。 designOption.json ファイルに移動して、このカスタムデザインの一意の ID を追加します。以下に例を示します。

"designOptionId": "Custom Paragraph style 1"

警告 :

他のカスタムデザインオプションと区別するために、固有の ID を「designOptionID」に割り当てます。
designOption.json ファイルで、「isDefault」の値が false に設定されていることを確認してください。これは、インストールされているデザインオプションと競合しないようにするためです。これは必須の手順です。
localized.json ファイルを編集して、名前フィールドと説明フィールドの値を更新します。この名前は、ビジュアルプロパティパネルで Captivate 内のカスタムデザインのサムネイルにカーソルを合わせると、そのツールチップとして表示されます。

"en-US": {

"name": "Paragraph Default Design Option",

"description": "Default design option For Paragraph"

},
カスタムデザインオプションのサムネイルを更新します。この画像をカスタムデザインオプションフォルダーに保存し、新規サムネイル PNG ファイルの名前を変更します。サムネイルのサイズは最大で 130 x 78 px です。

注意：

designOption.json ファイルのサムネイル名は、必ずテキストエディターを使用して更新してください。

デザインオプション JSON ファイルでサムネイル名を更新

CSS のスタイルとプロパティ

Adobe Captivate では CSS（カスケーディングスタイルシート）プロパティがサポートされているので、デザインオプションをカスタマイズするために、事前に定義された変数を簡単に変更できます。この機能により、デザインプロセスが簡素化され、ブランドやプロジェクトのテーマに合わせて、視覚的に魅力的なプロ仕様の e ラーニングプロジェクトを作成できます。

CSS プロパティは、HTML 要素と XML 要素の外観と動作を制御します。色、フォント、レイアウト、間隔などを正確に制御できるため、目的のスタイルに合わせてデザインを調整できます。

カスタムプロパティ

Captivate には、行と列によるグリッドベースのレイアウトシステムを使用する CSS カスタムプロパティが組み込まれており、レスポンシブデザインの作成に最適です。これらは、ビジュアルプロパティパネルに表示されるすべてのプロパティです。これらのプロパティは、デザインオプションファイルからも変更できます。

カスタムスタイル

designOptions.json ファイル内の customStyles セクションは、CSS スタイルプロパティを定義します。このセクションを使用して独自のデザイン要素を作成し、e ラーニングプロジェクトを柔軟かつ自由にパーソナライズできます。

カスタムスタイルでは、すべての CSS プロパティがサポートされます。ハイフンで区切られた CSS 属性の代わりに camelCase 形式を使用します。
例：flex-direction の代わりに flexDirection を使用します。
CSS プロパティは、デバイスの画面サイズに基づいて適用することもできます。

制限事項

デザインオプションを使用してコンテンツをスタイル設定およびレイアウトする場合は、次の制約が適用されます。

外観のカスタマイズ：
- コンテンツ要素の外観（色、フォントなど）は、テーマプリセットを使用することでのみ変更できます。ハードコードされた値は避ける必要があります。
- ビジュアルプロパティがカスタムプロパティでサポートされている場合は、カスタムスタイルに含めないでください。含めると、値がハードコードされ、プロパティパネルで変更できなくなります。
- ただし、マージンなどのプロパティは、JSON ファイルで customStyles キーを使用して追加できます。
親コンテナー：
- コンテナーまたは要素の親は変更できません。
非表示コンテナー：
- ボタンなどの非表示コンテナー（Captivate では選択不可）は、customStyles の子ノードとして渡す必要があります。
- これらのコンテナーは customProperties をサポートしていないため、オブジェクトタグをキーとして含める必要があります。子ノード customStyles の例をガイダンスとして参照してください。
ユーザーインターフェイスコンポーネント（UIC）：
- ラジオボタンやドロップダウンなどの UIC のプロパティは、今後のバージョンで利用できるようになります。現在、UIC では固定されたデザインオプションのセットがサポートされています。
- これらのコンポーネントがコンテンツブロックの一部である場合は、コンテンツブロック全体をスタイル設定できます。作成者は、外部のデザインオプションファイルを使用して、デザインオプションのモジュール構造（上記を参照）を利用できます。

これらの制限を理解することで、プラットフォームの制約に準拠しながら、コンテンツを効果的にデザインし、スタイルを設定できます。

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

新規ユーザーの場合