こんにちは、ハヤマです。
今回は、PhotoshopのAdobe Creative Cloudライブラリ（以下、CCライブラリ）を活用した、Webデザインのデータ作りについてご紹介します。
CCライブラリとは
Adobe CCのアカウント全体で共有使用できるデザインエレメントの保存ツールで、プロジェクト単位で管理することができます。
カラー、ブラシ、画像、動画、文字スタイル、段落スタイルなど、よく使う素材にいつでもどこでもアクセス・管理することができ、登録したアセットは、デザインに組み込むことができます。
基本容量は、Creative Cloud 通常メンバーシップ（コンプリートプラン・単体プラン版）であれば100GB、フォトプランの場合は20GBまたは1TB、無償メンバーシップの場合は2GBとなります。
CCライブラリでできること
メンバー同士で共有できる
AdobeCCのアカウントを保有している相手であれば、招待することで作成したライブラリのデータを共有することができます。
他のAdobeアプリ間で共有できる
例えば、Photoshopで作成したデータをAdobe XD上配置するなどの使用が可能なため、複数のAdobeアプリを利用してデザインする方におすすめです。
※ただし、アプリによって利用することができるデータが一部異なります。（「レイヤースタイル」の登録データはPhotoshopでしか使用できない、など）
デザインのデータ管理がしやすくなる
直感的にデザイン制作を行っていると、色やフォント（サイズ・文字間・行間）など、近似のスタイルを増殖させてしまうことがあります。
これにより発生したスタイルのバリエーションは、意図的ではなく偶発的なもの。
デザインのクオリティとしても良くないうえ、この状態でコーディングを開始した場合に、CSSの行数が無駄に増えてしまう上にエンジニアを悩ませてしまう原因にもなります。
「設定したスタイルはライブラリに登録」という認識が共有できれば、スタイルガイドとしても活用でき、
デザインの統一が図りやすくなるほか、コーディングする際にスタイル確認が容易になります。
PhotoshopのCCライブラリで登録できるもの
ここでは、Photoshopで登録できるデータについてご紹介します。
①カラー
文字色や、シェイプの塗り・線で設定したカラーを登録することができます。
②文字スタイル（フォントサイズ・文字間・行間）
テキストに指定した、以下のスタイルを登録することができます。
・フォントファミリー（ウェイト）
・フォントサイズ
・行送り
・トラッキング
・文字色
文字スタイル名にカーソルを当てたりダブルクリックすることで、より詳細な登録内容を確認できます。
③レイヤースタイルの登録
ドロップシャドウやパターンオーバーレイなどのレイヤースタイルも登録することができます。
④グラフィックの登録
写真やラスタライズ画像、シェイプなどを登録できます。
複数のページで使用する画像やアイコンなどを登録しておくと便利です。
補足
各カテゴリーに登録されるデータ名は変更できるので、例えば文字スタイルであれば「h1」「h2」「本文」「注釈文」など、第三者が見ても判断のつくわかりやすい名称にリネームしましょう。特にレイヤースタイルのプレビューはされず、データ名で判断することになると思います。登録の時点で必ず変更しましょう。
さいごに
今回はPhotoshopに絞ってまとめてみましたが、いかがでしたでしょうか。
「わかりやすく綺麗なデータ作り」は、私自身の課題でもあるため、今後もブログを通して掘り下げていければと思います。
