Adobe XD #03 アセットとライブラリ

投稿者: | 1月 9, 2021

アセット

アセット(asset)を辞書で引くと「①役に立つもの ②財産、資産」と書いてある。Adobe XDのマニュアルには「素材」と説明されている。ビットマップ(Photoshop)やベクターデータ(Illustrator)、カラーや文字、コンポーネント(ってなに?)などである。

マニュアルによれば、アセットを操作するのはアセットパネルである。だが、そんなものは見当たらない。調べたところ、アセットパネルはライブラリパネルに名前が変わっていた。

パネルを開くと最上部に「ドキュメントアセット」と表示されます。ドキュメントアセットは、ローカルドキュメントで使用している登録済みのアセット一覧です。従来のアセットパネルに相当します。

https://blogs.adobe.com/japan/cc-web-xd-protips-59-new-library-panel/

名称を変えたなら、過去の資料も変更したらんかい!!!!(怒)

Shift+Ctrl+Y で表示と非表示が切り替えられる。

じゃあ、ライブラリってなに???

CCライブラリ

ドキュメントアセットの上位にCCライブラリと表示されている。CCレモンと関係あるのだろうか。こいつも調べてみた。

ライブラリパネル

Creative Cloudライブラリでは、グラフィック、画像、カラー、文字スタイルなどのコンテンツを保存でき、保存したコンテンツはCreative Cloudアカウントに同期されます。Adobe XDからは、Creative Cloudライブラリパネルでその素材にアクセスできます。

https://helpx.adobe.com/jp/xd/how-to/add-assets-from-cc-library-to-xd.html

あ、そう。Creative Cloudね。CCって略してんのね。

Creative Ckoud

確かにCreative Cloud Desktopにもccライブラリと表示されていた。

Creative Cloudライブラリパネルを開くには、ファイルメニューから「CCライブラリを開く」を選択するか(macOS)、端にある設定メニューから「CCライブラリを開く」を選択します(Windows)。

https://helpx.adobe.com/jp/xd/how-to/add-assets-from-cc-library-to-xd.html

つまり、AdobeはアプリをXD、Photoshop、Illustratorが三位一体となって作る仕組みを用意している。これがライブラリということか。

とりあえず今の私には関係ないってことで。

ドキュメントアセット

先の説明では「ドキュメントアセットは、ローカルドキュメントで使用している登録済みのアセット一覧」ということだった。

ドキュメントアセットをクリックする。

ドキュメントアセット

「環境にないフォント」は後回しにするとして、カラー、文字スタイル、コンポーネントの3つがある。

カラー

「カラー」をクリックすると色が現れた。

アセット カラー

色を自分で指定することもできるが、iPhoneで使用しているカラーがアセットに登録されているので、必要な色をここから選べばいい。

便利だ。

文字スタイル

「文字スタイル」をクリックするとフォント一覧のような文字列が現れた。

文字スタイル

文字のフォント、サイズ、行送り、トラッキングが指定されている。フォント、サイズは分かるが行送りとはなにか。

分かりやすく言えば、フォントのトップ間の距離だ。(正確にはベースライン間の距離)フォントサイズが60ptで行送りが70ptならば、フォントとフォントの間に10ptのマージンが空く、と考えて差し支えないだろう。

トラッキングは複数の文字、文字列の感覚を調整する値だ。イラレを使っている人なら分かるだろう。分からなくても、どうと言うことはない。

コンポーネント

「コンポーネント」をクリックするとiOSのコントロールが現れた。

コンポーネント

これをアートボードに配置していけば画面がデザインできる。いやはや便利である。

次はフォントをインストールしよう。