マニュアル キャンセル

Animate のカラーパネル

  1. Adobe Animate ユーザーガイド
  2. Animate の概要
    1. Animate の新機能
    2. ビジュアル用語集
    3. Animate の必要システム構成
    4. Animate キーボードショートカット
    5. Animate での複数のファイルタイプの取り扱い
  3. アニメーション
    1. Animate のアニメーションの基本
    2. Animate でフレームとキーフレームを使用する方法
    3. Animate でのフレームアニメーション
    4. Animate でのクラシックトゥイーンアニメーションの操作方法
    5. ブラシツール
    6. モーションガイド
    7. モーショントゥイーンと ActionScript 3.0
    8. モーショントゥイーンアニメーションについて
    9. モーショントゥイーンアニメーション
    10. モーショントゥイーンアニメーションの作成
    11. プロパティキーフレームの使用
    12. トゥイーンを使用した位置のアニメーション化
    13. モーションエディターを使用したモーショントゥイーンの編集
    14. トゥイーンアニメーションのモーションパスの編集
    15. モーショントゥイーンの操作
    16. カスタムイージングの追加
    17. モーションプリセットの作成と適用
    18. アニメーションのトゥイーンスパンの設定
    19. XML ファイルとして保存したモーショントゥイーンの操作
    20. モーショントゥイーンとクラシックトゥイーン
    21. シェイプトゥイーン
    22. Animate のボーンツールアニメーションの使用
    23. Animate でのキャラクターリグの操作
    24. Adobe Animate でのマスクレイヤーの使用
    25. Animate でのシーンの操作
  4. インタラクティブ機能
    1. Animate でのボタンの作成
    2. 他のドキュメントタイプ形式への Animate プロジェクトの変換
    3. Animate での HTML5 Canvas ドキュメントの作成およびパブリッシュ
    4. Animate のコードスニペットを使用したインタラクティブ機能の追加
    5. カスタム HTML5 コンポーネントの作成
    6. HTML5 Canvas でのコンポーネントの使用
    7. カスタムコンポーネントの作成例
    8. カスタムコンポーネントのコードスニペット
    9. ベストプラクティス - Animate を使用した広告
    10. バーチャルリアリティの作成と公開
  5. ワークスペースとワークフロー
    1. ペイントブラシの作成と管理
    2. HTML5 Canvas ドキュメントでの Google フォントの使用
    3. Creative Cloud ライブラリと Adobe Animate の使用
    4. Animate のステージとツールパネルの使用
    5. Animate ワークフローとワークスペース
    6. HTML5 Canvas ドキュメントでの Web フォントの使用
    7. タイムラインと ActionScript
    8. 複数のタイムラインの操作
    9. 環境設定
    10. Animate オーサリングパネルの使用
    11. Animate でのタイムラインレイヤーの作成
    12. モバイルアプリおよびゲームエンジン用アニメーションの書き出し
    13. オブジェクトの移動とコピー
    14. テンプレート
    15. Animate での検索と置換
    16. 取り消し、やり直し、ヒストリーパネル
    17. キーボードショートカット
    18. Animate でのタイムラインの使用
    19. HTML 拡張機能の作成
    20. 画像とアニメーション GIF の最適化オプション
    21. 画像および GIF の書き出し設定
    22. Animate のアセットパネル
  6. マルチメディアとビデオ
    1. Animate のグラフィックオブイジェクトの変形と組み合わせ
    2. Animate でのシンボルインスタンスの作成と操作
    3. 画像トレース
    4. Adobe Animate でのサウンドの使用方法
    5. SVG ファイルの書き出し
    6. Animate で使用するビデオファイルの作成
    7. Animate にビデオを追加する方法
    8. Animate でのオブジェクトの描画および作成
    9. 線とシェイプの変更
    10. Animate CC での線、塗り、グラデーション
    11. Adobe Premiere Pro と After Effects の使用
    12. Animate CC のカラーパネル
    13. Animate で Flash CS6 ファイルを開く
    14. Animate でのクラシックテキストの操作
    15. Animate へのアートワークの挿入
    16. Animate に読み込まれたビットマップ
    17. 3D グラフィック
    18. Animate でのシンボルの操作
    19. Adobe Animate での線とシェイプの描画
    20. Animate でのライブラリの使用
    21. サウンドの書き出し
    22. Animate CC でのオブジェクトの選択
    23. Animate での Illustrator AI ファイルの操作
    24. ブレンドモードの適用
    25. オブジェクトの配置
    26. コマンドメニューを使用したタスクの自動化
    27. 多言語テキスト
    28. Animate でのカメラの使用
    29. グラフィックフィルター
    30. サウンドと ActionScript
    31. 描画の環境設定
    32. ペンツールを使用した描画
  7. プラットフォーム
    1. 他のドキュメントタイプ形式への Animate プロジェクトの変換
    2. カスタムプラットフォームサポート
    3. Animate での HTML5 Canvas ドキュメントの作成およびパブリッシュ
    4. WebGL ドキュメントの作成とパブリッシュ
    5. AIR for iOS 用アプリケーションのパッケージ化
    6. AIR for Android アプリケーションのパブリッシュ
    7. デスクトップ用 Adobe AIR のパブリッシュ
    8. ActionScript パブリッシュ設定
    9. ベストプラクティス - アプリケーションでの ActionScript の整理
    10. Animate での ActionScript の使用
    11. Animate ワークスペースのアクセシビリティ
    12. スクリプトの記述と管理
    13. カスタムプラットフォームサポートの有効化
    14. カスタムプラットフォームサポートの概要
    15. カスタムプラットフォームサポートプラグインの操作
    16. ActionScript 3.0 のデバッグ
    17. カスタムプラットフォームサポートの有効化
  8. 書き出しとパブリッシュ
    1. Animate CC からファイルを書き出す方法
    2. OAM パブリッシング
    3. SVG ファイルの書き出し
    4. Animate によるグラフィックとビデオの書き出し
    5. AS3 ドキュメントのパブリッシュ
    6. モバイルアプリおよびゲームエンジン用アニメーションの書き出し
    7. サウンドの書き出し
    8. ベストプラクティス - モバイルデバイス向けのコンテンツ作成のヒント
    9. ベストプラクティス - ビデオ規則
    10. ベストプラクティス - SWF アプリケーションのオーサリングガイドライン
    11. ベストプラクティス - FLA ファイルの構造化
    12. FLA ファイルを Animate 向けに最適化するベストプラクティス
    13. ActionScript パブリッシュ設定
    14. Animate のパブリッシュ設定の指定
    15. プロジェクターファイルの書き出し
    16. 画像とアニメーション GIF の書き出し
    17. HTML パブリッシュ用テンプレート
    18. Adobe Premiere Pro と After Effects の使用
    19. アニメーションのクイック共有とパブリッシュ
  9. トラブルシューティング
    1. 解決済みの問題
    2. 既知の問題

 

カラーモデルとは、デジタルグラフィックでカラーを表現する際の表記法です。カラーモデルには RGB、HSB、CMYK などがあり、それぞれ異なる方法でカラーの定義と分類が行われます。カラーモデルでは、カラーの可視範囲を表すために数値を使用します。カラースペースはカラーモデルの一種で、特定の色域(範囲)を持ちます。例えば、RGB カラーモデルには、Adobe® RGB、sRGB、Apple® RGB など、数種のカラースペースが存在します。これらのカラースペースは、同じ 3 つの軸(R、G、B)を使用してカラーを定義しますが、色域がそれぞれ異なります。

グラフィックのカラーを操作するときは、実際は、ファイル内の数値を調整しています。数値をカラーと見なすことは簡単ですが、このような数値自体は絶対的なカラーを示してるわけではなく、カラーを再現するデバイスのカラースペース内だけで、カラーとしての意味を持ちます。

各デバイスは独自のカラースペースを持ち、その色域内のカラーだけを再現できます。画像を別のデバイスに移動すると、RGB または HSB 値は、デバイス独自のカラースペースに基づいて解釈されるので、画像のカラーが変化する場合があります。例えば、モニターに表示されるすべてのカラーと、デスクトッププリンターの出力を、正確に一致させることはできません。プリンターでは CMYK カラースペースが使用され、モニターでは RGB カラースペースが使用されます。これらは色域が異なります。インクでは再現できても、モニターには表示できないカラーや、モニターでは表示できても、インクを使用して用紙の上には再現できないカラーがあります。

Animate ドキュメントで使用するカラーを作成する場合は、異なるデバイスですべてのカラーを完全に一致させることは不可能ですが、対象者が使用しているデバイスのグラフィック表示機能を考慮することで優れた結果を達成できることを念頭に置いてください。

Adobe Animate では、RGB または HSB カラーモデルを使用してカラーを適用、作成および変更できます。デフォルトのパレットや作成したパレットを使用して、これから作成するオブジェクト、またはステージ上に既にあるオブジェクトの線や塗りに適用するカラーを選択できます。

シェイプに線カラーを適用するときには、次のような操作がすべて可能です。

  • 単色、グラデーション、またはビットマップをシェイプの塗りに適用する。ビットマップの塗りをシェイプに適用するには、ビットマップを現在のファイルに読み込む必要があります。任意の単色、グラデーション、および線のスタイルと太さを選択する。

  • 塗りを「カラーなし」にして、塗りがなくアウトラインだけのシェイプを作成する。

  • アウトラインを「カラーなし」にして、アウトラインがなく塗りだけのシェイプを作成する。

  • 単色の塗りをテキストに適用する。

カラーパネルを使用すれば、RGB モードと HSB モードで単色やグラデーションの塗りを作成および変更できます。

システムカラーピッカーにアクセスするには、カラーパネル、ツールパネルまたはシェイププロパティインスペクターの「線のカラー」コントロールまたは「塗りのカラー」コントロールで、カラーピッカーアイコン を選択します。

カラーパネル

カラーパネルでは次のように、FLA のカラーパレットを変更し、線および塗りのカラーを変更できます。

  • 色見本パネルを使用して、FLA ファイルのカラーパレットを読み込み、書き出し、削除、または修正する。

  • 16 進モードでカラーを選択する。

  • 複数のカラーを使用してグラデーションを作成する。

  • グラデーションを使用して、2 次元オブジェクトに深度があるように見せるなど、様々なエフェクトを作成する。

カラーパネルには、次のコントロールがあります。

線の色

グラフィックオブジェクトの線または境界のカラーを変更します。

塗りのカラー

塗りのカラーを変更します。塗りは、シェイプを塗りつぶすカラーの領域です。

カラーの種類メニュー

塗りのスタイルを次のように変更します。

なし

塗りを削除します。

単色

単色の塗りのカラーを適用します。

線状グラデーション

線状パスにブレンドするグラデーションを作成します。

放射状グラデーション

中央の焦点から外側に向かって放射状にブレンドするグラデーションを作成します。

ビットマップの塗り

選択した塗り領域に、選択したビットマップイメージを並べて表示します。「ビットマップ」を選択すると、ローカルコンピューター上のビットマップイメージを選択して、ライブラリにそれを追加できます。このビットマップを塗りとして適用できます。外観は、シェイプ内にイメージを繰り返し配置したモザイクタイルパターンのようになります。

HSB

塗りの色相、彩度、明度を変更できます。

RGB

塗りの赤、青、緑(RGB)の濃さを変更します。

アルファ

単色の塗りの透明度を設定するか、グラデーションの塗りに対して現在選択されているスライダーを設定します。アルファ値を 0% にすると、非表示の(透明の)塗りが作成されます。アルファ値を 100% にすると、不透明の塗りが作成されます。

現在のカラースウォッチ

現在選択されているカラーを表示します。タイプメニューからグラデーションの塗り(線状または放射状)を選択すると、「現在のカラースウォッチ」には、作成するグラデーション内のカラーのトランジションが表示されます。

システムカラーピッカー

視覚的にカラーを選択できます。「システムカラーピッカー」をクリックし、十字ポインターをドラッグして、目的のカラーまで移動します。

16 進数

現在のカラーの 16 進数の値が表示されます。16 進値を使ってカラー変更するには、新しい値を入力します。16 進数のカラー値は、カラーを表す 6 桁の英数字の組み合わせです。

流量

線状または放射状グラデーションの範囲の外に対するカラーの適用方法を制御します。

拡張カラー

(デフォルト)グラデーションの終わりを越えた領域に、指定するカラーを適用します。

カラーを反映

鏡の反射効果を使用して、グラデーションカラーでシェイプを塗りつぶします。指定されたグラデーションは、グラデーションの最初から最後まで、次にグラデーションの最後から最初まで(反対の順序)、さらに再び最初から最後までという特定のパターンで繰り返されます。選択したシェイプが塗りつぶされるまで、この動作が繰り返されます。

カラーを繰り返す

選択したシェイプが塗りつぶされるまで、グラデーションの最初から最後までグラデーションが繰り返されます。

 オーバーフローモードは、Adobe Flash Player 8 以降でのみがサポートされます。

リニア RGB

SVG(Scalable Vector Graphics)互換の線状または放射状のグラデーションを作成します。

色見本パネル

色見本では、すべてのドキュメントでカラーの再利用と更新を簡単に行うことができます。色見本からカラーを選択して、タグ付けされた色見本を作成できるようになりました。タグ付けされた色見本を作成し、Animate コンテンツのシェイプとパスに適用した後は、タグ付けされた色見本のカラーを変更すると、そのカラーを使用しているすべてのコンテンツが自動的に更新されます。 

  1. ウィンドウ/カラーをクリックします。

  2. カラーパネルの「色見本」タブで、タグ付けされた色見本に変換するカラーを選択して、パネルの下部にあるタグ付けされた色見本に変換ボタンをクリックします。

  3. タグ付けされたカラーの定義ダイアログボックスで、次を指定します。

    • 新しい色見本の名前
    • 単色、線状グラデーション、放射状グラデーションの選択
    • HSB 値(色相、彩度、明度)または RGB(赤、緑、青)のいずれかを指定したカラー
    タグ付けされたカラーの定義ダイアログボックス

    カラーパネルの「カラー」タブと「色見本」タブ、およびツールパネルに新しいタグ付けされた色見本が表示されます。

    カラー、色見本、ツールパネルに新らしく作成された、タグ付けされた色見本

  4. タグ付けされた色見本を使用するオブジェクトを選択した後、カラーパネルを開くと、カラープロパティを編集するオプションが表示されます。カラープロパティを変更すると、変更はタグ付けされた色見本を使用するステージ上のすべての要素に自動的に反映されます。

  5. 色見本をダブルクリックするか色見本を選択して「編集」をクリックすると、タグ付けされたカラーの定義ダイアログボックスが開いて色見本のカラーを変更できます。 

  6. 色見本のカラーから色見本を使用するシェイプのリンクを解除するには、シェイプを選択して「リンク解除」ボタンをクリックします。シェイプの新しいカラーをカラーパネルから選択できます。

    「リンク解除」オプション

    カラーパネルから別のシェイプのカラーを選択します。

Animate での制作物へのカラー設定

必要なカラーやブレンドがなければ、コンテンツは完成しません。制作物に塗りと線を追加する方法を学習するには、この例の最後にあるチュートリアルをご覧になり、次の手順に従ってください。

  1. プロパティで、カラーパネルをクリックします。

  2. 必要な線のカラーおよび塗りのカラーを選択します。

  3. スウォッチに追加」を選択して、色見本パネルをクリックします。

Animate での制作物へのカラーの適用方法

Adobe Capture CC などの外部アプリケーションでカラーを作成および使用し、CC ライブラリでカラーを共有する方法については、このビデオをご覧ください。

カラーパレット

それぞれの Animate ファイルには独自のカラーパレットがあります。このパレットは Animate ドキュメントに格納されます。Animate では、ファイルのパレットは、「塗りのカラー」と「線のカラー」コントロール、および色見本パネルの中で、色見本として表示されます。デフォルトのカラーパレットは、216 色の Web セーフカラーのパレットです。現在のカラーパレットにカラーを追加するには、カラーパネルを使用します。Animate ファイル間および Animate と他のアプリケーションの間で、単色およびグラデーションの両方のカラーパレットを読み込んだり書き出したりすることができます。

デフォルトのパレットおよび Web セーフパレット

現在のパレットをデフォルトパレットとして保存したり、ファイルに対して定義されたデフォルトパレットを使って現在のパレットを置き換えたりすることができます。また、Web セーフパレットをロードして、現在のパレットと置き換えることもできます。

  • デフォルトパレットをロードまたは保存するには、色見本パネルの右上隅のメニューから、次のいずれかを選択します。

    デフォルトカラーをロード:

    現在のパレットがデフォルトのパレットに置換されます。

    デフォルトとして保存:

    現在のカラーパレットをデフォルトのパレットとして保存します。新しいデフォルトパレットは、新規ファイルの作成時に使用されます。

  • Web セーフの 216 色パレットをロードするには、色見本パネルの右上隅のメニューで「Web 216 色」を選択します.
  1. 色見本パネルの右上隅のメニューで、「カラーで並べ替え」を選択します。

カラーの整理と再利用

色見本パネルでは、フォルダーとカラーパレットを使用して、カラーとカラーパレットを階層構造で整理できます。

フォルダーの作成

デフォルトでは、すべてのカラーはデフォルトの色見本フォルダー内に配置されます。既存のカラーは、色見本パネルを使用してフォルダー内に配置できます。新しいフォルダーを作成するには、次のようにします。

  1. Animate で、ウィンドウ色見本を選択します。

  2. 色見本パネルで、 ボタンをクリックします。
  3. 色見本フォルダーの分かりやすい名前を入力します。

フォルダー、カラーパレットまたは色見本を選択し、フライアウトメニューから「重複するフォルダー」を選択して、フォルダーを作成することもできます。

カラーパレットの作成(色見本グループ)

カラーパレットは、コンテンツのカラーテーマを表す色見本(カラー)のグループです。カラーパレットをフォルダー内に作成して、色見本を追加することができます。カラーパレットを作成するには、次のようにします。

  1. Animate で、ウィンドウ色見本を選択します。

  2. 色見本パネルで任意のフォルダーを選択し、 ボタンをクリックして空のパレットを作成します。
  3. 既存のカラーをドラッグするか、 ボタンをクリックして色見本をカラーパレットに追加することができます。

フォルダー、カラーパレットまたは色見本を選択し、フライアウトメニューから「重複するパレット」を選択して、カラーパレットを作成することもできます。

カラーの作成またはカラーパレットへのカラーの追加

色見本を作成したり、カラーパレットに既存の色見本を追加することができます。色見本を作成するには、次のようにします。

  1. Animate で、ウィンドウ/色見本を選択します。

  2. 色見本パネルでフォルダー内の任意のカラーパレットを選択し、 ボタンをクリックして色見本を作成します。カラーパネルで現在選択されている塗りのカラーを使用して、新しい色見本が作成されます。既存の色見本を選択して、 ボタンをクリックし、パレット内の色見本を複製することもできます。

フォルダー、カラーパレットまたは色見本を選択し、フライアウトメニューから「重複する色見本」を選択して、色見本を作成することもできます。

  1. 色見本パネルの右上隅のメニューから、次のいずれかを選択します。
    • 読み込んだカラーを現在のパレットに加えるには、「カラーの追加」を選択します。

    • 現在のパレットを読み込んだカラーと置き換えるには、「カラーの置換」を選択します。

  2. 目的のファイルを見つけて選択し、「OK」をクリックします。
  1. 色見本パネルの右上隅のメニューで「カラーの保存」を選択して、カラーパレットの名前を入力します。
  2. 「ファイルの種類」(Windows)または「フォーマット」(Mac OS)では、「Animate カラーセット」または「カラーテーブル」を選択し、「保存」をクリックします。

単色の作成または編集

カラーパネルを使用すれば、どのようなカラーでも作成することができます。ステージ上でオブジェクトが選択されている場合、カラーパネルで行うカラーの修正内容は、その選択オブジェクトに適用されます。カラーは RGB または HSB で選択できます。あるいは、パネルを拡張して 16 進モードを使用するこもとできます。また、アルファ値を指定して、カラーの透明度を定義することもできます。加えて、既存のカラーパレットからカラーを選択することも可能です。

カラーパネルを拡張すると、カラーバーの代わりにカラースペースを大きく表示し、現在および以前のカラーを示す分割された色見本や、すべてのカラーモードの明度を修正する「明度」スライダーを表示することができます。

  1. 既存のアートワークにカラーを適用するには、ステージでオブジェクトを選択して、ウィンドウ/カラーを選択します。

  2. 「線のカラー」または「塗りのカラー」アイコンをクリックして、どちらの属性を修正するかを指定します。

     カラーコントロールではなくアイコンをクリックすると、カラーピッカーが開きます。

  3. 手順 3 で「塗り」アイコンを選択した場合は、タイプメニューで「カラー」が選択されていることを確認してください。

  4. ステージ上でオブジェクトが選択されている場合、カラーパネルで行うカラーの修正内容は、その選択オブジェクトに適用されます。次のいずれかの操作を行います。

    • カラーを選択するには、カラーパネルのカラースペースの中をクリックします。カラーの明度を調整するには、「明度」スライダーをドラッグします。

       白と黒以外のカラーを作成するには、明度スライダーが最大または最小のどちらにも設定されていないことを確認してください。

    • カラー値ボックスに値を入力します。RGB 表示の場合は赤、緑、青の値を、HSB 表示の場合は色調、彩度、明度の値を、16 進数表示の場合は 16 進値を入力します。透明度を指定するには、アルファ値を入力します。0 を入力すると完全な透明になり、100 を入力すると完全な不透明になります。

    • デフォルトのカラー設定(黒の線と白の塗り)に戻るには、白黒ボタン をクリックします。

    • 塗りと線のカラーを入れ替えるには、カラーの入れ替えボタン をクリックします。

    • 色なしを塗りまたは線に適用するには、カラーなしボタン をクリックします。

       既存のオブジェクトの線または塗りに「カラーなし」を適用することはできません。代わりに、既存の線または塗りを選択してそれを削除してください。

    • 「線のカラー」または「塗りのカラー」のコントロールをクリックして、カラーを選択します。

  5. 新しいカラーを現在のドキュメントの色見本リストに追加するには、右上隅のメニューから「色見本を追加」を選択します。

カラーの複製、削除、およびクリア

パレット内のカラーの複製、個々のカラーの削除、またはパレットのすべてのカラーのクリアを実行します。

  • カラーを複製または削除するには、ウィンドウ/色見本を選択し、複製または削除の対象となるカラーをクリックして、パネルメニューから「色見本の複製」または「色見本の削除」を選択します。色見本を複製すると、バケツツールが表示されます。選択したカラーを複製するには、バケツのある色見本パネルの何もない領域をクリックします。

  • カラーパレットからすべてのカラーをクリアするには、パネルメニューで「カラーの削除」を選択します。黒と白を除くすべてのカラーがパレットから削除されます。

 Adobe

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

新規ユーザーの場合

Adobe MAX 2025

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

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

Adobe MAX 2025

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

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