1.CCライブラリとは
CCライブラリとは、adobeが提供をしているデザインアセットを管理する機能です。CCライブラリを使用することで、画像や、色、テキストスタイルなどをCCライブラリに登録することで、どこからでもよく使う素材にアクセス管理することができます。
例えば従来では、図1のようにイラストレーターやフォトショップで書き出したデータをXDで読み込み配置していましたが、CCライブラリを使用することで、XDのCCライブラリから配置することができ、またai、psdファイルとリンクしているため、ファイルの編集を行なうと、XDで配置したオブジェクトも変更内容が同期されます。(図1)
※対応アプリケーションは、Adobeの主要なアプリで使用することが出来ます。
![](/ckeditor_assets/pictures/2912/original_%E3%82%A2%E3%83%BC%E3%83%88%E3%83%9C%E3%83%BC%E3%83%89_%E2%80%93_1.png)
2.IllustratorでCCライブラリに登録する。
イラストレーターでCCライブラリに登録する方法を解説します。
イラストレーターでは、コピー&ペーストでXDに貼り付けることが出来ますが、データ変更の可能性が高い場合は、CCライブラリに登録しておくとリンクされているので、便利になります。
登録を行なうにはイラストレーターを起動します。Creative Cloud ライブラリパネルを開くには、ウィンドウ>ライブラリをクリックします。(図2)
![](/ckeditor_assets/pictures/2914/original_%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88_2019-10-10_15.43.22.png)
CCライブラリのライブラリパネルの概要は、以下のようになります。(図3)
![](/ckeditor_assets/pictures/2915/original_Artboard_Copy_43.png)
イラストレーターのCCライブラリに登録を行なうには、ライブラリパネルにオブジェクトをドラッグ&ドロップします。(図4)
または、オブジェクトを選択し、ライブラリパネル追加アイコンをクリックし、ドロップダウンメニューからグラフィックを選択します。
※文字やカラーの場合は、「テキスト」や、「塗り」を選択しましょう。
![](/ckeditor_assets/pictures/2913/original_%E7%94%BB%E9%9D%A2%E5%8F%8E%E9%8C%B2_2019-10-10_15.41.18.2019-10-10_15_41_55.gif)
3.PhotoshopでCCライブラリに登録する。
PhotoshopでCCライブラリを追加する方法はいくつかの方法がありますが、今回はpsdファイルを書き出し、CCライブラリに登録する方法を解説します。
フォトショップを起動し、ウィンドウ>CCライブラリをクリックします。(図5)
![](/ckeditor_assets/pictures/2916/original_%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88_2019-10-10_16.21.16.png)
CCライブラリのライブラリパネルの概要は、以下のようになります。(図6)
![](/ckeditor_assets/pictures/2918/original_a.png)
フォトショップのCCライブラリにpsdファイルをドラッグ&ドロップします。(図7)
![](/ckeditor_assets/pictures/2917/original_%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88_2019-10-10_16.19.39.png)
4.XDで画像(外部アセット)の配置、編集
イラストレーターとフォトショップでのCCライブラリの追加方法については理解出来たでしょうか。
次はCCライブラリに登録したアセットをXDで配置、編集をします。
XDを起動し、ファイル>CCライブラリを開くをクリックします。(図8)
![](/ckeditor_assets/pictures/2919/original_%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88_2019-10-10_16.38.06.png)
CCライブラリから配置を行いたいグラフィックやテキスト等をドラッグ&ドロップし、配置します。(図9)
![](/ckeditor_assets/pictures/2920/original_%E7%94%BB%E9%9D%A2%E5%8F%8E%E9%8C%B2_2019-10-10_16.39.14.2019-10-10_16_43_00.gif)
編集を行いたい場合は、CCライブラリから編集を行いたいオブジェクトを、選択右クリックし編集をクリックします。(図10)
![](/ckeditor_assets/pictures/2921/original_%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88_2019-10-10_16.41.00.png)
編集をクリックすると、作成したアプリケーションが起動し編集を行うことが出来ます。このとき注意したいのは、CCライブラリに登録したときのファイルではなく、別ファイルになっているところです。変更後、保存するとXDで配置したオブジェクトを同期されます。(図11)
![](/ckeditor_assets/pictures/2922/original_%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88_2019-10-10_16.46.29.png)