Adobe XDの『ライブラリ』と『ドキュメントアセット』の特徴と共有方法の違いを整理する【CCライブラリ徹底解説】
この記事はAdobe XD アドベントカレンダー 2020の21日目の記事です。
本来は4日目に書く予定だったのですが、調べていくうちに「これは無理だ…」となって伸ばしたのち、遅れに遅れてやっと完成までこぎつけました。
記念すべき？初のnote投稿となります。
ここ数年、『積極的にアウトプットを行う』というのを年初の抱負としているのですが、気づけば今年もあと少しで終了。あわてて「何かアウトプットしなければ…！」とクリスマスに乗じて筆を取った次第です。
さて、Adobe XDは毎月のように新機能が追加される進化の速いツールですが、先日のXD34で『強化されたCCライブラリの統合』というアップデートが行われました。
ちょっとだけ前のアップデートにはなりますが、具体的にはドキュメントアセットの共有などができるようになりました。
「ほう、なるほどね〜、そりゃ便利だ！」
と、思った方はこの記事は読む必要はなさそうです。
私はいまいちピンと来ないまま使っている状態だったので、それぞれの機能をこの機会に整理しておきたいと思います。
Adobe XDのCCライブラリとドキュメントアセットの特徴と共有方法の違いが知りたいという方は参考にしてみてください。
・・・
【前提知識】 『ライブラリ』と『アセット』という単語の意味
具体的な説明に入る前に、この記事で出てくる『ライブラリ』と『アセット』という、2つの単語が持つ一般的な意味を説明しておいたほうが後々の理解が早いと思うので、まずはこれらの単語について説明しておきます。
★ ライブラリ（library）
図書館、図書室、(個人の)書庫、書斎、読書室、蔵書、文庫、(映画・レコードなどの)コレクション、貸本屋、(収集した映画・レコードなどを貸し出す)ライブラリー
引用元：https://ejje.weblio.jp/content/library
これは馴染みのある英語ですね。日本語だと『図書館』という意味です。
★ アセット（asset）
資産、(個人・会社の)財産、有利なもの、利点、強み
引用元：https://ejje.weblio.jp/content/asset
こちらは英語としてはあまり馴染みが無いかもしれませんが、Adobeのアプリケーションを使っていると時折目にします。（Photoshopの画像アセットの生成など）日本人に馴染みのある言葉だと『パーツ』と言い換えても良いかもしれません。
また、後から出てくるのですが、『エレメント』もほぼ同じ意味ととらえてしまっても良いと思います。ただし『エレメント』が共通素材として登録する前の状態のパーツであるのに対して、『アセット』は共通素材として登録した後の状態のパーツという違いがあります。（多分）
先ほどのライブラリが『図書館』だとすると、アセットは『本』という事になり、図書館の中にたくさん本が所蔵されているようなイメージです。
ここまでは単純な英単語の説明です。
・・・
CCライブラリとは？
ここからはAdobe用語である『CCライブラリ』について説明していくのですが、ここで早くも上で説明した単語の比喩表現を覆させていただきます…。
先ほどライブラリの事を『図書館』と説明しましたが、CCライブラリの説明をする際、ライブラリが図書館という説明だとイメージがしづらいので、次のように変更させてください。
ライブラリを本棚に格下げ（？）して、CCライブラリを全体のまとまりである大きな図書館としました。CCライブラリ（図書館）の中にライブラリ（本棚）がいくつかあって、その中に本（アセット）が入っている、というイメージです。
・CCライブラリ：図書館
・ライブラリ：本棚
・アセット：本
CCライブラリについて書かれた文章などを読むと、CCライブラリとライブラリは同義として使われている印象もありますが、この記事内では説明箇所を明確に区別する為に、CCライブラリの中にあるグループの事をライブラリと呼ぶ事とします。
このイメージを保ったまま『CCライブラリ』について説明していきます。
★ CCライブラリ
Creative Cloud ライブラリを使用すると、デザインエレメントをまとめ、特定のプロジェクト、クライアント、またはチームが、Creative Cloud アプリケーションの中で使用することができます。ライブラリを使用することで、ユーザーとユーザーのグループは、Photoshop と Illustrator での初期画像の作成から、XD での web サイトのインタラクションのモックアップ、InDesign での印刷物の作成まで、ライフサイクル全体を通じてプロジェクトの同じ要素に確実にアクセスできます。
引用元：Creative Cloud ライブラリの概要
横文字が多くて一読するだけだとなかなか頭に入ってこないのですが、端的に言えば、CCライブラリというのは色々なパーツをまとめて入れておく事ができる入れ物のようなものです。
さらにこのCCライブラリが、同一アプリケーションのドキュメント間（A.psd⇔B.psd）、異なるアプリケーション間（A.psd⇔C.xd）での橋渡し役を果たし、CCライブラリに入れられたアセットはどのアプリケーションからでも利用できるようになります。
このように、各アプリケーションはCCライブラリの中にあるライブラリに入っているアセットを自由に利用できます。
また、ライブラリを共有する事で、異なるユーザー間（Aさん⇔Bさん）でのアセットの使用も可能になります。
ここで抑えておきたいのは、CCライブラリ（図書館）全体を共有するわけではなく、CCライブラリの中の一部であるライブラリ（本棚）ごとに共有権限を設定できるという事です。
CCライブラリについてはspicagraphさんのコチラの記事↓がわかりやすいです。
・・・
ドキュメントアセットとは？
次はドキュメントアセットについてです。
『ドキュメントアセット』という名前からして、特定のアプリケーションに依存しない汎用的な機能のようにも感じますが、ドキュメントアセットはXD専用の機能になります。（XD以外のアプリケーションからはアセットを利用する事はできますが、エレメントを追加する事はできません）
また、『ドキュメントアセット』という独立した名称を与えられてはいますが、実際は先程のライブラリと同様、CCライブラリに内包されたライブラリの仲間になります。（現にライブラリパネルの中にあります）
ドキュメントアセットの機能としては、その名の通りXDドキュメント内で登録されたカラー・文字スタイル・コンポーネントなどアセットを管理するものとなります。
ドキュメント内で登録されたというのがキモで、言い換えればドキュメントに紐付いたXD専用のライブラリと言っても良さそうです。
XD専用なので、前述したとおり他アプリケーションからドキュメントアセットにエレメントを登録する事はできません。また、ドキュメントに紐付いている為、同じXDであってもAのドキュメントからはBのドキュメントアセットにエレメントを登録する事はできません。
逆に他アプリケーションや別のXDドキュメントからドキュメントアセットを利用する事は可能です。
という事で、ここまでの説明をひとまずまとめておきます。
★CCライブラリの特徴
・他アプリケーションからは独立した『CCライブラリ』という機能
・どのアプリケーションからでもエレメント登録可能
・どのアプリケーションからでもアセット利用可能
・様々なタイプのアセットが登録できる
★ドキュメントアセットの特徴
・XDに付随した機能（XD専用ライブラリと言い換えてもOK）
・XDの同一ドキュメントからのみエレメント登録可能
・他アプリケーションや別のXDドキュメントからはエレメント登録不可
・どのアプリケーションからでもアセット利用可能
・アセットは3つのタイプ（カラー・文字スタイル・コンポーネント）のみが登録可能
ここまでは大丈夫でしょうか？
なるべく説明を柔らかい感じにしたかったので、イラストを多様して説明してきましたが、なんとなくイメージができたら、図書館のくだりはここまでで忘れてもらってOKです。
既に若干ややこしくなる兆しが見えてきておりますが、この後もできるだけ細かく説明していきますので、ゆっくり読み進めてください。
・・・
【余談】『CCライブラリ』と『ドキュメントアセット』がごちゃごちゃになっちゃった…!?
ここから『CCライブラリ』と『ドキュメントアセット』それぞれの違いを更に深堀りしていこうと思うのですが、その前に今回なぜ私が『CCライブラリ』と『ドキュメントアセット』を比較しようと思ったのか、それについて簡単に説明しておきたいと思います。
その理由の一つが、今回CCライブラリがライブラリパネルに統合され、ドキュメントアセットと同じ並びになった事で、ライブラリとドキュメントアセットがパッと見、同じ扱いになった為です。（細かく言うとドキュメントアセットがCCライブラリに統合され、CCライブラリがライブラリパネルに移動したと言った方が良いかもしれないのですが、ややこしくなるので置いておきましょう）
そして『ドキュメントアセット』『ライブラリ』それぞれの詳細を表示させた時のアセットの並びも似ています。（というかほぼ同じ）
これ、別に今回のアップデートで管理可能なアセット項目が変わったわけではなく、今まで表示されるパネルが違う事から無意識に違うものと認識していたものが、単に同じパネルに統合されただけです。
最初にお伝えしたとおり、ドキュメントアセットもライブラリの一つであり、これはこれで間違っていはいないと思うんです。
ただ、元々これらの違いをちゃんと認識していればなんて事は無いのかもしれないのですが、私の場合はちゃんと意識して使い分けができていなかったので、今回のインターフェース変更により、なんかよくわからなくなっちゃった…という感じです。
更にややこしいのがドキュメントアセットを公開した時で、XDのドキュメント名とライブラリ名が同名の場合、他アプリケーションなどから見るとCCライブラリには同じ名前が2つ並ぶ事になります。
元からCCライブラリは同名のライブラリを作れちゃうんですが、意図的に同じ名前のライブラリを作るという事は無いと思います。ただ上記のようにドキュメントアセットとライブラリの場合は、意図せず名前が被ってしまう事はありえそうです。（XDのファイル名を『プロジェクトA.xd』としていて、同一プロジェクトのPhotoshopなどからリンクさせる為のライブラリ名を『プロジェクトA』とした場合等）
また、カラーと文字スタイルについては『ドキュメントアセット』『ライブラリ』どちらにも登録できるので、ドキュメントアセットに登録しようと思ったらライブラリの方に登録してた、とか…。
「ややこしい事になっちゃったな…！」と思いましたが、Adobeとしてはアセット系は全てCCライブラリに統一していきたいという意図が透けて読み取れます。（逆に今までアセットがCCライブラリと別の場所に表示されていたのがAdobe的には気持ち悪かったのかな？と）
AdobeのシニアデザイナーであるKelly Hurlburtさんが書かれた以下の記事を読むと、デザインシステムを構築する上での様々な運用パターンを検討した結果の今である、という事がわかります。
こちらの記事もかなり長いのですが、興味がある方は読んでみてください。英語ですが、Googleで翻訳すれば問題なく読めます。（ただし共有をちゃんと理解していないと読み解くのが難しい…）
記事の最後の方に今後の展望として「これからもどんどん変えていくよ〜」みたいな事が書いてあるので、これもまた変わる可能性はありそうです。
・・・
CCライブラリに登録されたアセットは編集可能か？
さて、話を元に戻しまして、ここからは『ライブラリ』と『ドキュメントアセット』それぞれにエレメントを登録後、登録されたアセットが後から編集できるのかを見ていきたいと思います。
ライブラリには様々なタイプのアセットが登録できるのですが、ここではXDでよく使われるであろうカラー・文字スタイル・グラフィックの3つのタイプについて、ドキュメントアセットと比較していきます。
一覧でザッと見ていきます。
ライブラリのグラフィックが編集できるかどうかは登録元のアプリケーションによって変わります。XDからもグラフィックを登録する事はできますが、編集ができない為、後から編集したい場合はドキュメントアセットを使用する事になります。
そしてライブラリのカラーはXDからは編集できないのですが、Photoshop / Illustratorからは編集可能です。XDをメインで触っている場合、この部分はなかなか気づきにくいかもしれません。
他アプリケーションから編集できるのであれば、XDでも後々のアップデートで編集可能になるような気もしてます。（XDはCMYKが扱えないから難しいのかも）
・・・
CCライブラリに登録したアセットをドキュメント上に配置するとどうなる？
次に、登録したアセットをドキュメント上に配置した時の挙動について見ていきます。
以下の表の見方としては、一番左の列がアセットのタイプで、その隣の列から順番に右に読み進めてください。一番右の列で最終的にドキュメントにどのように配置されるかという事が書かれています。（例えば①のカラーであれば「ライブラリにカラーを適用した場合、ドキュメントアセットにリンクとして追加されてからドキュメント上に適用される」となります）
まずはライブラリからアセットを配置した場合。
次にドキュメントアセットからアセットを配置した場合。
最後に別のドキュメントから登録したアセットを配置した場合。
ごちゃごちゃと書いてあって一見複雑に見えますが、まとめると次の4つのパターンにほぼ集約されます。
1. ドキュメントアセットにリンクとして追加されてからドキュメント上に適用されるパターン（上記図表①、②、⑧、⑨、⑩）
ライブラリからカラーや文字スタイルをドキュメント上のオブジェクトに適用すると、自動的にドキュメントアセットにリンクとして追加されてからオブジェクトに適用されます。
元となるライブラリのアセットを編集すると、リンクされたドキュメントアセットに更新通知が来ます。更新アイコンをクリックすると最新の状態が反映されます。
ドキュメントアセットを介してリンクさせる事で、確実に変更箇所を共同作業者へ伝える事ができます。
2. リンクとしてドキュメント上に配置するパターン（上記図表③-1）
IllustratorやPhotoshopからグラフィックを追加した場合は、『リンクを配置』か『コピーを配置』のどちらかを選ぶ事ができます。リンクとして配置する場合は、アセットをそのままドラッグします。（コピーの場合は[option + ドラッグ）
グラフィックの場合は、ドキュメントアセットに追加されずにそのままリンクされるので、CCライブラリのアセットを元のアプリケーションで編集し保存すると、更新通知など無く自動的に最新の状態が反映されます。
PhotoshopやIllustratorなどで素材を作り込む時は、この方法を使う事が多いと思います。
ただし前述したとおり変更の通知などはされない為、共同作業の際は別の方法で更新した旨を伝えた方が確実です。
3. コピーとしてドキュメント上に配置するパターン（上記図表③-2、④）
IllustratorやPhotoshopで『コピーを配置』を選択した場合、もしくはXDからグラフィックを追加した場合は、オブジェクトがコピーとして配置されます。
XDからグラフィックを追加した場合、[option] + ドラッグでリンクアイコンが表示される為、リンクとしての配置が可能な様にも思いますが、実際はコピーとして配置されます。
コピーで配置した場合は、CCライブラリのアセットを編集してもドキュメント側のオブジェクトは変更されません。（そもそもXDでCCライブラリに追加したアセットは後から編集できません）
その為、この方法はよく使う素材を登録しておいて、そこから都度コピーして配置して編集するような素材集的な使い方をするのに適していると言えそうです。
4. インスタンスとしてドキュメント上に配置するパターン（上記図表⑤、⑥、⑦）
自ドキュメント上で登録したアセット（ドキュメントアセット）を自ドキュメントに配置すると、どのタイプのアセットも全てインスタンスとして配置されます。（コンポーネント以外のコピーされたものを『インスタンス』と言って良いのかは、ちょっと自信がありません…）
ドキュメントアセットから編集（コンポーネントについてはマスターを編集）すると、それぞれのインスタンスがリアルタイムに反映されます。
ここまでのまとめ：登録したアセットをドキュメント上に配置するとどうなる？
これらの配置方法をよく見比べてみると、『ライブラリからアセットを配置した場合』と『別のドキュメントから登録したアセットを配置した場合』の挙動がほぼ同じだという事に気づきます。
この事からも、ドキュメントアセットも別のドキュメントから見れば、あくまでもライブラリの中の一つであるという事がわかります。
・・・
CCライブラリの共有について
今までの説明で既にお腹いっぱいだと思うのですが、もう少し説明したい事があります。というか実はこれが本丸だったりします。
共同作業で他のメンバーと一緒に作業を進めたい時、同じソースから素材を使う事ができれば便利ですよね。さらにCCライブラリのアセットをリンクで配置すれば、修正が必要になった場合でも共有メンバー側での修正後のアセット反映も容易になります。
CCライブラリの共有については『ライブラリ』『ドキュメントアセット』それぞれで挙動が変わってきます。
『ライブラリ』については以前から共有できたのですが、『ドキュメントアセット』を単体で共有する方法はありませんでした。（クラウドドキュメントとして保存すれば、アセットをユーザー間で共有する事はできたのですが、マスターコンポーネントが含まれる元ファイルごと共有する必要があり、意図しない編集・破壊などが起きる可能性がゼロではありませんでした）
それが冒頭にも書いたとおりXD34で『強化されたCCライブラリの統合』というアップデートが行わた事で、ドキュメントアセット単体での共有ができるようになったのです。
共有する際に設定できる権限は、ライブラリ、ドキュメントアセットともに『編集可能』と『閲覧のみ』の2種類です。
★編集可能
共有者は、ライブラリのコンテンツを表示、編集、名前変更、移動および削除することができます。
★閲覧のみ
ライブラリのコンテンツの表示と、それらにコメントすることのみが共有者に許可されます。
引用元：Creative Cloud ライブラリおよびフォルダーで共同作業する
言葉で表すと単純ではあるのですが、『編集可能』は本当に編集可能で『閲覧のみ』だと閲覧しかできないのか。実際に共有方法を適用してみて、それぞれの共有方法と共有権限による違いについてまとめていきたいと思います。
■ ライブラリの共有
まずは以前から存在しているライブラリの共有から見ていきます。
ライブラリを共有するには、ライブラリパネルのライブラリを開いた状態で【ライブラリに招待】アイコンをクリックします。
『ライブラリに招待』ウィンドウが開くので、メールアドレスを追加して共有メンバーを招待します。このウィンドウ上で共有メンバーに対する2つの共有権限（閲覧のみ or 編集可能）を設定します。
それぞれの共有権限を設定した場合の共有メンバーから見た挙動を確認してみます。
★共有権限を変更する際のTips
ちなみに共有の権限を変更する場合、相手側のライブラリパネルに共有権限が反映されるまでちょっと時間がかかります。（というか自動で更新される仕様ではないのかも？）そんな時はカラーをダブルクリックするなどして、ライブラリパネルを触る事で更新を促す事ができます。
【閲覧のみ】だと閲覧（利用）しかできません。これは事前に確認した説明と同じなので想定通りですね。ただ同じ文章内に書いてあった「それらにコメントすることのみが共有者に許可されます。」のコメントの方法がわかりませんでした。（【編集可能】だとアセットを右クリックして『説明を追加』からコメントを追加する事ができます）
もしどなたか【閲覧のみ】権限でのコメントの方法を知っていたら教えてください。
【編集可能】については、事前に確認したところによると「ライブラリのコンテンツを表示、編集、名前変更、移動および削除することができます」と書いてあったので「色々編集できるんだろうな〜」と思いきや、できない事も結構あります。
ただしこれはライブラリの仕様によるもので、所有者であっても文字とXDから追加したグラフィックについては後から編集する事はできません。（前項の『CCライブラリに登録されたアセットは編集可能か？』を見直してみてください）
■ ドキュメントアセットの共有
次にドキュメントアセットの共有について見ていきます。
ドキュメントアセットを共有するには、ライブラリパネルのドキュメントアセットを開いた状態で【ライブラリとして公開】アイコンをクリックします。
【公開】ボタンをクリックします。
ドキュメントをクラウドドキュメントとして保存していない場合は、この時点でクラウドドキュメントとしての保存を促されます。
クラウドドキュメントとして保存したら、『ライブラリに招待』ウィンドウが開くので、メールアドレスを追加して共有メンバーを招待します。こちらも共有メンバーに対して選択できる権限は『閲覧のみ』と『編集可能』の2種類です。
先程と同様、共有メンバーから見た挙動を確認してみましょう。
はい、編集については全く何もできません。
【編集可能】という言葉だけ聞くと編集ができそうに思いますが、ドキュメントアセットを共有するだけだと編集はできず、【閲覧のみ】との違いはメンバーの招待ができるか否かのみです。ここはなんとなくで使っていると勘違いしやすい部分だと思います。
これだけの違いで一体何をどう使い分けすれば良いのか…私には利用シーンが思い浮かばないのですが、業務などで「使い分けしてるよ〜」という方がいれば教えてください。
ちなみに【編集可能】権限には右クリックメニューで【ソースドキュメントを開く】という項目が表示されていますが、これを選ぶと以下のようなエラーが出ます。
これはドキュメントアセットのマスターとなるアセットがドキュメントと紐付いている為で、マスターアセットの編集をするためにはクラウドドキュメントへの招待が必須となります。つまり、ドキュメントアセットのみの共有で、共有メンバーにアセットを編集してもらう事は不可能という事です。
・・・
【補足】クラウドドキュメントについて
上でもちょっと出てきましたが、クラウドドキュメントというのはAdobeのクラウド上にファイルを保存する新しい保存形式で、クラウドドキュメントで保存する事により、バージョン管理や共同作業などの新しい機能が利用可能になります。
このクラウドドキュメントとドキュメントアセットの関係は、共有時の設定にも影響してくるのですが、そこを今回の記事に含めてしまうと収集がつかなくなりそうなので、今回は割愛しています。
とりあえずドキュメントアセットを共有メンバーに編集してもらいたい場合はクラウドドキュメントに共有メンバーを招待する、と覚えておけばOKです。
・・・
長々と説明してきなしたが、これらの共有についてを一覧表にまとめると下記のようになります。（表中には参考として所有者も含めています）
この表をじっくり見てみると【編集可能】となっていても実は編集できないアセットがあったり、ライブラリとドキュメントアセットは同じパネル内にまとめられているにも関わらず、共有時の挙動については結構な差がある事に気づきます。
その為、同じライブラリパネル内だからといって直感的に触るのではなく、しっかりと「今はライブラリを触っている」「今はドキュメントアセットを使っている」と認識しながら使ったほうが良さそうです。
ライブラリパネルを整理するアイディア
では見た目がとっても似ている『ライブラリ』と『ドキュメントアセット』をどうやってわかりやすく整理していくかというと、今の所CCライブラリにはグループ分けする機能などは無い為、名前で工夫していくしかありません。
ライブラリは汎用的な素材集としての使い方をする場合（よく使うアイコンなどをまとめる等）と、特定のプロジェクトのみで使う場合（Adobe Stockから候補となる画像をバンバン入れいていく等）の2種類の使い方が思い浮かびます。ドキュメントアセットについては素材集的な使い方をする場合もありますが、とりあえずはドキュメントアセットだという事がわかれば良さそうです。
★CCライブラリ上で名前で区別したい3つのパターン
・素材集的なライブラリ
・プロジェクト固有のライブラリ
・XDのドキュメントアセット
これら3つを名前で区別できるようにします。
具体的には接頭辞をつけていきます。名前はわかりやすく統一できればなんでも良いのですが、私は以下のようにしています。
ドキュメントアセットについては、ファイル名がそのままドキュメントアセットの名前になるので、ファイル名に接頭辞として『xd_』をつけておけば良いと思います。
むかしむかし、DTPでEPSという汎用的な画像形式がありまして（今もあるかも…）、フォトショとイラレでどちらも拡張子が『.eps』でした。
それだとどちらのアプリケーションで作ったものかわからないので、フォトショは『ph_』、イラレは『il_』とファイル名の頭に付ける…みたいな事をやっていた名残で『xd_』とつけてます。
上の例ではプロジェクトに付随するライブラリの接頭辞を『10_』としましたが、仕事で使うものは『10_』、プライベートなものは『20_』など自分でルールを作って運用すればOKだと思います。
これで見た目上のグルーピングは一応行われたので、中身をしっかり確認せずともライブラリなのかドキュメントアセットなのかが把握しやすくなりました。
めでたしめでたし…
まとめ：Adobe XDの『ライブラリ』と『ドキュメントアセット』の特徴と共有方法の違いを整理する【CCライブラリ徹底解説】
という事で、この記事ではCCライブラリの『ライブラリ』と『ドキュメントアセット』について長々と説明してきました。
当初想像していた記事の5倍くらいの分量になってしまったのですが、ここまでたどり着いてくれた方は果たしてどの程度いるのか…。
今回説明した内容はあくまでも『CCライブラリ』の機能として、それぞれどのような挙動になるのかをまとめたものに過ぎず、実際の具体的な運用方法については言及していません。
実務としてはそちらの方が大事なので、機会があればそれらの利用シーンや運用方法についてもまとめてみたいと思います。（共有については自分自身、他メンバーとの共同作業という事をあまりやった事が無いので、実際の利用シーンが想像しづらいのです…）
CCライブラリを利用した共同作業の事例や有用な記事などを知っていたら、教えてもらえると嬉しいです。
おそらくこれらの挙動を全て把握して使い分けるというのはなかなか厳しい気がするので、できる事ベースで考えるよりも「◯◯したい」という目的を持って、それを実現するにはどうすれば良いのか試行錯誤しながら運用フローを確立していくというのが良さそうです。
Gitなど、ある程度フローが確立されているシステムの分野に対して、デザインの共同作業についてはまだ発展途上の段階だと思うので、これから出てくるであろうデザイン手法についても引き続き目を光らせていきたいと思います。
ここまで読んでいただきありがとうございました。