データ

データを使用すると、寸法、色、テキストの書式設定を保存できるため、それらを再利用して統一されたデザイン エクスペリエンスを実現できます。変数値が変更されると、この変更は Web サイトで使用されているすべての場所に反映されます。さらに、中央の場所でアクセスできるため、サイトの書式の可視性が向上します。

この講義では、以下のことを学びます。

1. データ要素とは正確には何でしょうか?
2. データ要素を生成、変更、消去するプロセス
3. キャンバスにデータ要素を適用する方法
4. 変数をアイテムから切り離す方法
5. データ要素をクラスターに整理する方法
6. 他の用語を表す用語を効果的に使用する
7. インタラクションにおけるデータ要素の実装

データ要素の定義

データ要素には 3 種類あります。

• 測定データ要素
• 色データ要素
• テキストスタイルのデータ要素

測定データ要素

以下の測定データ要素を指定できます。

• 周囲と内部のスペース - 上、下、左、右
• 配置 — 上、下、左、右
• 展示構成とクイックスタックのための列と行の分離
• 高さと幅の寸法（最小値と最大値も含む）
• グリッドの列と行の比率
• 印刷機能 — フォントサイズ、行間、文字間隔
• 境界の曲率と幅
• フィルターと背景フィルターのヘイズ半径

色データ要素

次の色データ要素を指定できます。

• テキストの色相
• 背景の色合い
• 境界線とテキストの輪郭の色
• グラデーション色相終端

注意： カラー スウォッチはカラー データ要素に移動されました。以前に作成されたスウォッチは、データ要素パネルにあります。

テキストスタイルデータ要素

• フォントcategory

データ要素の作成、変更、消去のプロセス

データ要素を開始するには、 データ要素パネル、 プレス 新しいデータ要素、確立したいデータ要素の種類を選択します（例： 色相, 測定、 または フォントファミリー).

デフォルトのデータ要素タイトルを変更するには、名前の上にマウスを移動し、設定「装備”アイコンをクリックします。

データ要素の内容は、コンテンツをクリックして変更できます。色相データ要素を使用すると、ピッカーから色相を選択できます。測定データ要素を使用すると、数値と単位を選択できます。テキスト スタイル データ要素を使用すると、ドロップダウンからフォント category を選択できます。サイトまたはワークスペースにアップロードされたカスタム フォント (Google および Adobe のものを含む) は、フォント ファミリ データ要素を選択するときにアクセスできます。

データ要素の値が変更されると、 データ要素パネルリンクされたアイテムは自動的に更新されます。

注記： データ要素の名前と値は、 フォーマットパネル. 現在データ要素に関連付けられているセクションにマウスを移動し、「編集「 」アイコンをクリックして、データ要素編集モーダルを開始します。

データ要素の値が データ要素パネル または フォーマットパネルリンクされたアイテムには変更が自動的に反映されます。

データ要素は、 データ要素パネル、名前の上にマウスを移動し、設定「装備”アイコンをクリックします。その後、 消去.

キャンバス上のデータ要素を活用する

データ要素パネルでデータ要素を設定したら、デザイン時にそれらの要素を使用できます。データ要素は、フォーマット パネルとインタラクション パネルで使用できます。

• 応募する 色相 データ要素 — スウォッチの左上隅にある紫色の点をタップします
• 応募する 測定 データ要素 — 測定入力フィールドの左上隅にある紫色の点をタップします
• 実装する フォント データ要素 — 画面の左上隅にある紫色の点をタップします フォント フィールド内の 印刷物 セクション

注意： データ要素がフォーマット パネルで使用される場合、その要素の値は紫色で強調表示されます。

専門家の推奨: また、データ要素を直接組み込むこともできます。 フォーマットパネル項目を選択し、データ要素入力フィールド（スウォッチ、測定入力フィールド、フォントフィールドなど）の左上隅にある紫色の点をタップし、「プラス”アイコンをクリックして、データ要素を設定します。 タイトル そして コンテンツを押して 保存既存のデータ要素に値を関連付けたい場合は、 コンテンツ フィールドをクリックし、リンクする既存の要素を選択します。

アイテムからデータ要素を切り離す方法

色相またはフォントデータ要素をアイテムからリンク解除するには、フォーマットパネルで現在要素にリンクされているコンテンツ（背景色相、フォントなど）を押します。次に、 リンクを解除.

測定データ要素をアイテムからリンク解除するには、フォーマットパネルで現在データ要素にリンクされているコンテンツを選択し、メニューでデータ要素のタイトルを押して、 リンクを解除.

クラスター内のデータ要素の管理

データ要素をクラスターに整理する機能があります。これにより、グループの設計上の選択とシステムについてより深い洞察が得られます。

データ要素をクラスタリングするには、グループタイトル/要素タイトルという構造でタイトルを指定します。たとえば、「Shades」というラベルの付いたクラスタが必要な場合は、「Shades/Scarlet」と「Shades/Sapphire」という2つの要素を作成します。これらは、 データ要素パネル.

要素をクラスターから切り離すには、要素タイトルからグループ タイトル (例: 「Shades」) を削除します。

別名の使用

代替名を使用すると、既存の要素の値を参照する新しい要素を作成できます。その後、関連付けられている要素の1つが変更されると、すべての代替名が自動的に更新されます。代替名を設定するには、「ドット新しい要素の右側にある「 」アイコンをクリックします。参照するために選択できる既存の要素の一覧が表示されます。

注意： 代替名を生成するために使用できるのは、同じ種類の要素のみです (たとえば、色要素は色要素の代替名を作成するために使用できますが、測定要素を指す色要素は使用できません)。

代替名のリンクを解除するには、切り離したい要素の値をタップし、 リンクを解除.

インタラクションにおけるデータ要素の活用

色相、測定、フォントデータ要素をカスタマイズアニメーションに適用できます。カスタムアニメーションの操作を選択するときに、 データ要素の値を設定するこれにより、既存のデータ要素を使用して、インタラクション内のアイテムの色合い、測定値、またはフォント スタイルを変更できます。

アニメーションのデータ要素の値を設定するには、 データ要素の値を設定する > 要素 リストからデータ要素の値を選択します。