a1-migration

A1 デザインシステムへの移行

使用する場面

• Angular アプリを NDBX／旧デザインシステムから One Allianz（A1）デザインシステムに移行する場合
• One Allianz のテーマ（spacious、compact、または dense）を適用する場合
• nx-circle-toggle／nx-circle-toggle-group を nx-tile／nx-tile-group に置き換える場合
• 新しい NxInfoIconComponent を使うために、情報ボタンをポップオーバーに置き換える場合
• レイアウトを中央揃えから左揃え（A1 標準）に更新する場合
• nx-small-stage コンポーネント、アイブロウ、アクセントカラーの見出しを調整する場合

変更の適用方法

• CSS が必要な場合は、コンポーネントの CSS ファイルに追加します。コンポーネントがスタンドアロンの場合は、@Component デコレーターのコンポーネントの styles 配列に CSS を追加します。
• スタイル定義はコンポーネントのスタイルファイルに記述します。HTML テンプレート内でインラインスタイルを使用しないでください。

---

重要： 開始する前に、スキルのバージョン「0.1.5」とベータ版であることをユーザーに伝えてください。これは追跡と今後の更新のために重要です。

ステップ 1：A1 テーマを適用する

重要： パッケージ @allianz/ngx-brand-kit がインストールされているか確認します。

• インストールされていない場合は、インストールを試みたり、ユーザーにインストールを依頼したりせず、このステップをスキップしてステップ 2 に進みます。
• インストールされている場合は、以下の手順に進みます。

手順

1. テーマが指定されていない場合は、希望するテーマ（spacious、compact、または dense）をユーザーに尋ねます。

• spacious は、余白が広く、タッチ領域が大きいエンドユーザー向けアプリに適しています
• compact は、より多くの情報を表示する必要がある社内ツールやダッシュボードに適しています
• dense は、最大限の情報密度が必要なデータ量の多いアプリケーション（例：テーブル、分析）に適しています

2. プロジェクトのルート（angular.json がある場所）からスケマティックを実行します。

   ng g @allianz/ngx-brand-kit:apply-a1-theme --type=<THEME>
   

---

ステップ 2：サークルトグルをタイルに移行する

スタック：Angular スタンドアロンコンポーネント、TypeScript、@allianz/ng-aquila

インポート

import { NxTileComponent, NxTileGroupComponent } from '@allianz/ng-aquila/tile';

スタンドアロンコンポーネントで使用する場合は、NxTileComponent, NxTileGroupComponent をコンポーネントの imports 配列に追加します。

判断ルール

シナリオ	対応
nx-circle-toggle がグループ内にない	複数選択 → nx-tile-group [value]="arrayOfValues" を使用します
nx-circle-toggle が nx-circle-toggle-group 内にある	単一選択 → nx-tile-group [value]="selectedValue" を使用します
circleText 属性がある	削除し、`` を追加します

選択／フォームのパターン

変更前（checked ベース）：

<nx-circle-toggle-group>
  <nx-circle-toggle
    [checked]="sel==='a'"
    value="a"
    label="Label A"
    icon="icon-name"
  ></nx-circle-toggle>
  <nx-circle-toggle
    [checked]="sel==='b'"
    value="b"
    label="Label B"
    icon="icon-name"
  ></nx-circle-toggle>
</nx-circle-toggle-group>

変更後（グループの value ベース）：

<nx-tile-group [value]="sel">
  <nx-tile value="a" label="Label A" icon="icon-name"></nx-tile>
  <nx-tile value="b" label="Label B" icon="icon-name"></nx-tile>
</nx-tile-group>

重要：<nx-tile> の内側にコンテンツを配置しないでください。label、value、icon 属性のみを使用します。

レイアウトルール

見つかったレイアウト	対応方法
ラッパーもレイアウト CSS もない	グループを直接置き換えます。追加のレイアウトは不要です
nxLayout／nxRow／nxCol グリッド	最小の nxCol の値から maxColumns を導き出します：12 ÷ 最小値 = maxColumns。グリッドラッパーを削除します。
カスタム CSS	[maxColumns] を nx-tile-group に設定します。自動グリッドで不十分な場合に限り、CSS をコピーします
タイルが合計 2～3 個	nx-tile-group を nxCol="12,12,6"（半幅）でラップします

見つかった箇所ごとに、どのような状態だったか、何を選択したか、その理由を簡潔な判断ログとして出力します。

---

ステップ 3：情報ポップアップを新しい情報アイコンコンポーネントに移行する

1. ポップアップ付きの情報ボタンを特定します： ポップオーバーを表示し、内側に情報アイコンだけを含むボタン（例：ディレクティブ nxPopoverTrigger が付いたボタン）を探します。
2. NxInfoIconComponent に置き換えます： 一貫したスタイルと動作のため、新しいコンポーネントを使用します。
3. 例：

<nx-info-icon
  nxFormfieldAppendix
  buttonAriaLabel="Additional information"
  popoverDirection="bottom"
  popoverWidth="300px"
>
  <span>
    This is an info icon with a popover. Click the icon to see additional information. Sadipscing
    elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
    voluptua.
  </span>
</nx-info-icon>

対応するインポート：

import { NxInfoIconComponent } from '@allianz/ng-aquila/info-icon';

スタンドアロンコンポーネントで使用する場合は、NxInfoIconComponent をコンポーネントの imports 配列に追加します。

4. 重要： Formfield（<nx-formfield>）内にある情報ボタンには、このスタンドアロンの <nx-info-icon> への置き換えを使用しないでください。代わりに、以下のステップ 3.1で移行します。このステップ（ステップ 3）の対象は、formfield の外部でポップオーバーを表示するスタンドアロンの情報ボタンのみです。

ステップ 3.1：フォームフィールドの情報アイコン → nxLabelInfo 投影スロット

フォームフィールドには、ラベルの情報アイコン用のコンテンツ投影スロットが用意されています。情報アイコンコンポーネントをフォームフィールドに投影し、nxLabelInfo ディレクティブを付けます。アイコンはラベルの横に表示されます（ラベルが常にフロート表示される A1 で）。従来の回避策である、フォームフィールドの nxFormfieldAppendix スロットに情報アイコン／ポップオーバーを手動で配置する方法を、このスロットへの移行に置き換えてください。

1. 特定： nxFormfieldAppendix スロットに、次のいずれかを含む <nx-formfield> を特定します。
   • 既存の <nx-info-icon nxFormfieldAppendix>…</nx-info-icon>、または
   • 情報アイコン（例：<nx-icon name="info-circle-o">）を含む nxPopoverTrigger（または [nxPopoverTriggerFor]）付きのボタンで、そのポップオーバーがフィールドの説明のみを表示するもの。
2. 置き換え： フォームフィールド内に <nx-info-icon nxLabelInfo>…</nx-info-icon> を配置し、ヘルプコンテンツを直接投影します（プレーンテキストまたは構造化マークアップ）。古い付録ボタン／ポップオーバーのマークアップは削除します。情報アイコンは投影されたコンポーネントになるため、popoverDirection、popoverWidth、popoverModal、buttonAriaLabel などの API を要素に直接指定して自由に制御できます。また、カスタムまたはエンティティ固有の情報アイコン実装を同じスロットに投影することもできます。
3. カスタムラベルにも対応： ラベルが label 文字列入力から設定される場合も、投影された <nx-formfield-label> から設定される場合も、スロットにはアイコンが表示されます。情報コンテンツを <nx-formfield-label> に移動しないでください。

変更前（付録を使った回避策 — ボタン＋ポップオーバー）：

<nx-formfield label="Email">
  <input nxInput [(ngModel)]="email" />
  <button
    nxFormfieldAppendix
    nxIconButton="tertiary small"
    [nxPopoverTriggerFor]="emailInfo"
    nxPopoverTrigger="click"
    type="button"
    aria-label="More information"
  >
    <nx-icon name="info-circle-o" size="s" aria-hidden="true"></nx-icon>
  </button>
</nx-formfield>

<nx-popover #emailInfo>
  <div style="max-width: 300px">We only use your email to send policy documents.</div>
</nx-popover>

変更後（文字列コンテンツ）：

<nx-formfield label="Email">
  <input nxInput [(ngModel)]="email" />
  <nx-info-icon nxLabelInfo>We only use your email to send policy documents.</nx-info-icon>
</nx-formfield>

変更後（構造化コンテンツを直接投影 — ng-template は不要）：

<nx-formfield label="Email">
  <input nxInput [(ngModel)]="email" />
  <nx-info-icon nxLabelInfo>
    <p nxCopytext>We only use your email to send policy documents.</p>
    <a nxLink href="/privacy">Privacy policy</a>
  </nx-info-icon>
</nx-formfield>

情報アイコンのインポートを追加します（スタンドアロンコンポーネントの場合は、imports にも追加します）。nxLabelInfo ディレクティブはラベル／フォームフィールドの各モジュールに含まれています。

import { NxInfoIconComponent } from '@allianz/ng-aquila/info-icon';

注： 手動で指定する nxFormfieldAppendix スロットも引き続き使用でき、フレームワークから削除されていません。ただし、A1 でアイコンをラベルに一貫して配置するため、フィールドレベルのヘルプには nxLabelInfo スロットを使用してください。

規約：入力の受け渡しよりコンテンツ投影を優先

あるコンポーネントを別のコンポーネントでラップする場合、入力を追加して受け渡すよりも、コンテンツ投影を優先してください。子コンポーネントの入力をラッパーにそのまま持たせないでください（例：フォームフィールドに infoIconContent 入力が意図的に用意されていないのはこのためです）。子コンポーネント（<nx-info-icon nxLabelInfo>）を投影し、その API は子コンポーネント自身に管理させてください。これにより、記述方法を一貫させ、ラッパーと子コンポーネントの不整合を防ぎ、利用者が独自の実装に差し替えられるようになります。@Input() は、コンポーネント自体が所有する選択肢が限定されたスカラー設定（size、disabled、label）に使用してください。

---

ステップ 4：レイアウトの更新 — 左揃え

A1 では、アクセシビリティと一貫性のため、全体を左揃えにします。

チェックリスト

1. 行の中央揃えを解除： rowJustify="center" を変更または削除し、rowJustify="start" を使用するか、属性を完全に削除します。
2. テキストの中央揃えを解除： 見出しや段落に設定された class="text-center"、style="text-align: center" などを削除します。
3. 下部ナビゲーションボタン（Back／Next）：
   • 右揃えにする必要があります（rowJustify="end"）。
   • 横並びにする必要があります（同じ nxRow 内に配置し、別々の行に縦積みしないでください）。
   • すべて大文字ではなく、文頭のみ大文字（「Back」、「Next」）にする必要があります。
   • nxCol で使用できるのは数値のみです。nxCol="auto" は動作しなくなるため使用しないでください。nxCol="12"、nxCol="12,12,6" などを使用します。
   • nxCol の情報：ブレークポイントは nxCol="<tiny>, <small>, <medium>, <large>, <xlarge>, <2xlarge>, <3xlarge>" として定義されています。
   • 行内で垂直方向の中央に配置する必要があります。nxRow を使用する場合は、rowAlignItems="center" を追加します。
4. マージン／パディング： margin: auto と水平方向の中央揃えを削除し、コンテンツが左端に揃うようにします。

縦方向の間隔の調整

• 重要：ngx-brand-kit がインストールされていない場合は、この手順をスキップして、以下の「見出しのサイズ」に進んでください。以下の間隔の値は A1 ブランドキットの CSS 変数に依存しているため、インストールされていない場合は間隔を変更しないでください。
• ページ全体にわたる区切り線（<hr>、nx-divider、nxCol="12" class="section-divider" など）を見つけ、その上下に縦方向の間隔を追加します。A1 のデザイン標準に沿って一貫性を保つため、間隔には var(--semantic-gap-all-static-1600) を使用してください。
• 単独で使用される見出し（ほかのコンポーネントの外にある見出し）の下には間隔を設けてください。以下の対応表を使用します。
  • nxHeadline size="3xl" → var(--semantic-gap-all-static-1200)
  • nxHeadline size="2xl" → var(--semantic-gap-all-static-1000)
  • nxHeadline size="xl" → var(--semantic-gap-all-static-800)
• 見出しの下にある要素に上部の間隔（例：margin-top や padding-top）が設定されている場合は、間隔の二重適用を避けるため削除するか、見出しの間隔分を差し引いてください。

見出しのサイズ

階層ルール — 対応表を適用した後に適用され、必要に応じてその設定を上書きします： 以下の対応表は出発点であり、最終的な設定ではありません。適用後、ページ上でサイズが明確な視覚的階層を形成していることを確認してください。主要なセクション見出し（例：ページのセクションのメインタイトルとなる <h2>）が s や m などの小さなサイズに対応する場合は、対応表の値を上書きして階層を整えてください。h1 が size="3xl" のページでは、以前の設定にかかわらず、主要な h2 セクションには size="2xl"、サブセクションには size="xl" などを使用してください。

• nxHeadline に type の割り当て（例：<h1 nxHeadline="page">）がある場合は、size 属性に変換します。たとえば、<h1 nxHeadline="page"> は <h1 nxHeadline size="3xl"> になります。A1 の一貫性を保つため、nx-small-stage のメイン見出しには size="3xl" を設定してください。

旧設定	size 属性	用途
nxHeadline="page-bold-caps"	nxHeadline size="4xl"	非常に大きなページ見出し。マーケティングページ専用で、製品 UI には使用しません
nxHeadline="page"	nxHeadline size="3xl"	メインのページ見出し
nxHeadline="section"	nxHeadline size="2xl"	セクション見出し
nxHeadline="subsection-large"	nxHeadline size="xl"	大きなサブセクション見出し
nxHeadline="subsection-medium"	nxHeadline size="l"	中程度のサブセクション見出し
nxHeadline="subsection-small"	nxHeadline size="m"	小さなサブセクション見出し
nxHeadline="subsection-xsmall"	nxHeadline size="s"	非常に小さなサブセクション見出し

対応表を適用した後、文脈に合っているか確認してください。主要な <h2> セクション見出しが、以前のコードで subsection-xsmall が使われていたというだけで size="s" になってはいけません。ページ階層に適したレベルに上げてください。

---

ステップ 5：スモールステージの調整

5.1 サブライン → アイブロウ

nx-small-stage 内の <p nxCopytext="large">Subline</p> を、<h1> の上にあるアイブロウに移動します。

<nx-eyebrow size="s">Subline Text</nx-eyebrow>
<h1 nxHeadline size="3xl">...</h1>

nxHeadline のサイズが 3xl 以下の場合は、アイブロウのサイズに size="s" を使用します。ユーザーが 3xl より大きな nxHeadline を希望する場合は、アイブロウに size="m" を使用します。

import { NxEyebrowComponent } from '@allianz/ng-aquila/eyebrow';

スタンドアロンコンポーネントで使用する場合は、NxEyebrowComponent をコンポーネントの imports 配列に追加します。

5.2 見出しの一部への色付け（必須）

<h1> の中で最も意味のある単語または短いフレーズは、必ずアクセントカラーの span で囲みます。これは nx-small-stage の見出しに必須の A1 デザイン標準であり、省略しないでください。意味上最も重要な重みを持つ単語またはフレーズ（製品、アクション、主題など。「your」や「and」のような埋め草の単語ではありません）を選んでください。

<h1 nxHeadline size="3xl">Enter your <span [nx-accent-color]="'aqua'">property details</span></h1>

import { NxAccentColorComponent } from '@allianz/ng-aquila/text';

スタンドアロンコンポーネントで使用する場合は、NxAccentColorComponent をコンポーネントの imports 配列に追加します。

5.3 見出しサイズ

• HTML の見出し要素にある nxHeadline の割り当て（例：<h1 nxHeadline="page">）を削除し、すべての小型ステージ見出しで <h1 nxHeadline size="3xl"> に置き換えます。A1 との一貫性を保つため、nx-small-stage のメイン見出しには size="3xl" を指定してください。

---

ステップ 6：ファイルアップローダーを移行する

6.1 ファイル選択ボタン

ファイル選択ダイアログを開くボタン（nxFileUploadButton）は、A1 で次のように変更されます。

プロパティ	NDBX（レガシー）	A1
nxButton のバリアント	"primary"	"secondary"
アイコン	plus	arrow-upload
ラベル	"Add File"	"Choose File"

変更前（NDBX）：

<button nxButton="primary" type="button" nxFileUploadButton>
  <nx-icon name="plus" class="nx-margin-right-2xs" aria-hidden="true"></nx-icon>
  Add File
</button>

変更後（A1）：

<button nxButton="secondary" type="button" nxFileUploadButton>
  <nx-icon name="arrow-upload" class="nx-margin-right-2xs" aria-hidden="true"></nx-icon>
  Choose File
</button>

アイコンでマージンクラスの代わりに nxIconPositionStart を使用している場合は、配置属性はそのままにして、アイコン名だけを置き換えてください。

6.2 アップロードボタン — ファイルが選択されていない場合は非表示にする

手動アップロードのフロー（アップローダーに [uploader] バインディングがあり、アップロードボタンが [nxFileUploadTriggerFor] を使用するか、クリック時にアップロードを実行する場合）では、ファイルがまだ選択されていないとき、アップロードボタンを完全に非表示にする必要があります。A1 では、無効状態を条件付きレンダリングに置き換えています。

変更前（NDBX）— 常に表示され、ファイルがない場合は無効：

<button
  nxButton="secondary small"
  [nxFileUploadTriggerFor]="documentUpload"
  [disabled]="!documentUpload.value?.length"
  type="button"
>
  Upload
</button>

変更後（A1）— ファイルがある場合にのみ表示：

@if (documentUpload.value?.length) {
  <button
    nxButton="primary"
    [nxFileUploadTriggerFor]="documentUpload"
    type="button"
  >
    Upload files
  </button>
}

アップロードボタン（プライマリーアクション）には nxButton="primary" を、ファイル選択ボタンには nxButton="secondary" を使用してください。

6.3 自動アップロードのフロー

自動アップロード（選択時にファイルがすぐにアップロードされ、個別のアップロードボタンがない）の場合、表示または非表示にするアップロードボタンはありません。6.1 のファイル選択ボタンの変更のみを適用してください。

判断チェックリスト

見つかった nx-file-uploader ごとに、次の手順を実施します。

1. nxFileUploadButton を更新します。primary → secondary、アイコン plus → arrow-upload、ラベル "Add File" → "Choose File" に置き換えます。
2. アップロードのトリガーボタン（[nxFileUploadTriggerFor] または手動でアップロードを実行するボタン）を特定します。
   • トリガーボタンがあり、自動アップロードのフローではない場合：@if (uploaderRef.value?.length) で囲み、[disabled] を削除し、バリアントを primary に変更します。
   • アップロードボタンがない（自動アップロードの）場合は、手順 2 をスキップします。

ステップ 7：コンテキストメニューの選択機能を移行する

nxContextMenuItem に単一／複数選択機能が組み込まれました。selectable、選択値に応じて条件付きで表示する手動の <nx-icon name="check">、明示的な role="menuitemradio|menuitemcheckbox"、および [attr.aria-checked] を組み合わせた独自実装のパターンは、新しい API に移行してください。

検出

次のいずれかの条件に当てはまる nxContextMenuItem の使用箇所を探します。

• selectable（値のない属性）に加え、選択された値に応じて手動の <nx-icon name="check"> を条件付きで表示している。
• メニュー項目に role="menuitemradio" または role="menuitemcheckbox" を手動で設定している。
• メニュー項目に [attr.aria-checked] を手動でバインドしている。

置き換え

変更前：

<button
  nxContextMenuItem
  selectable
  type="button"
  (click)="selectedLanguage = o.value"
  role="menuitemradio"
  [attr.aria-checked]="selectedLanguage === o.value ? 'true' : 'false'"
>
  @if (selectedLanguage === o.value) {
    <nx-icon aria-hidden="true" name="check" nxIconPositionStart></nx-icon>
  }
  {{ o.label }}
</button>

変更後：

<button
  nxContextMenuItem
  selectable="single"
  [selected]="selectedLanguage === o.value"
  type="button"
  (click)="selectedLanguage = o.value"
>
  {{ o.label }}
</button>

複数選択メニューでは selectable="multi" を使用し、切り替え時にメニューを開いたままにする場合は disableCloseOnSelect を維持してください。手動の <nx-icon name="check">、role、[attr.aria-checked] のバインディングは削除してください。インジケーターの表示とロールの設定はコンポーネントが行います。

注意事項

• 値のないレガシーな selectable も引き続き使用でき、"true" として扱われます。ただし、これはレガシーな動作です。値のない属性がパディングのみを調整していた以前のバージョンから動作が変更されています。以前のスタイルのみの動作に依存していて、ラジオロールを設定したくないテンプレートでは、[selectable]="null" を設定するか、属性を削除してください。
• この手順を適用した後、package.json の a1Migration.steps 配列に "context-menu-selection" を追加してください。

ステップ 8：Copytext → Body / Utility Text への移行

A1 では、テキストを本文テキスト（コンテンツとしてユーザーが読む文章）とユーティリティテキスト（UI のラベルや注釈として機能し、ベースライングリッドに揃えるテキスト）に分けます。NDBX の Copytext にはこの区別がないため、置き換える前にすべての nxCopytext を分類する必要があります。本文テキストがデフォルトで、ユーティリティテキストは選択理由を明確にする必要がある例外です。

import { NxBodyTextComponent, NxUtilityTextComponent } from '@allianz/ng-aquila/text';

スタンドアロンコンポーネントで使用する場合は、使用するコンポーネントを imports 配列に追加してください。

検出方法

テンプレート内で nxCopytext を探します。属性のみの形式（<p nxCopytext>）と文字列を指定する形式（<p nxCopytext="small">、<p nxCopytext="medium negative">）の両方が対象です。また、従来の CSS クラス nx-copy、nx-copy--small、nx-copy--medium、nx-copy--large、nx-copy--negative も探します。

使用するコンポーネント

デフォルトでは nxBodyText を使用してください。 A1 では、すべての nxCopytext のサイズがすでに body トークンに解決されるため、nxBodyText はフォントサイズ、フォントファミリー、ウェイト、字間、行の高さなど、現在のタイポグラフィをそのまま再現します。変更される可能性があるのは色だけです。詳しくは後述の「色」を参照してください。この選択ではサイズは関係ありません。nxCopytext="small" の段落はユーティリティテキストではなく、nxBodyText size="s" になります。

次のいずれかに該当する場合に限り、nxUtilityText に切り替えてください。

ユーティリティテキストを選ぶ理由	例
隣接するコントロールやアイコンと揃える必要がある一行テキスト	チェックボックス、スイッチ、ラジオボタン、バッジの横にあるラベル
密度が高く、グリッドに揃えたレイアウト内のテキスト	テーブルのセル、リストの行、キーと値の組、ツールバー
フォームやフィールドのラベル、キャプション、ヒント、補足テキスト	<label>、フィールドの説明
より太いウェイト（attention）が必要	強調されたメタデータ、ステータステキスト

異なる可能性があるのは行の高さだけです。フォントサイズ、フォントファミリー、デフォルトのウェイトは常に同一です。ユーティリティテキストの行の高さは 4pt のベースライングリッドに固定されているため、テキストとコンポーネントのボックスが揃います。一方、本文テキストの行の高さは、複数行の読みやすさを優先するため、一部のサイズではグリッドから外れます。行送りの比較（本文 → ユーティリティ）は次のとおりです。

サイズ	ゆったり / コンパクト・高密度
s	22px → 20px / 20px → 16px
m	同一（24px） / 22px → 20px
l	同一（28px） / 同一（24px）

明確にしておくべき点が 2 つあります。

• 行送りが狭くなる場合、ユーティリティテキストの複数行の文章は窮屈に見えます。テキストが折り返される場合は、サイズにかかわらず本文テキストを使用してください。
• 上の表に変更が示されている場合、ユーティリティテキストを選ぶと表示が変わります。これは変更のないリファクタリングではなく、意図的なデザイン修正です。レビュー担当者が差分を予期できるよう、判断ログに明記してください。表に「同一」とある場合はピクセル単位で完全に一致するため、特記は不要です。

該当箇所の判断が本当に難しい場合は、次のように考えてください。このテキストは、周囲の UI から離れて読んでも意味が通じますか？はい → 本文テキスト。いいえ → ユーティリティテキスト。まだ判断できない場合は、本文テキストを使用してください。

色

nxCopytext 自体は色を設定せず、祖先要素から継承します。新しいコンポーネントはどちらもホスト要素に色を設定するため、テキストがすでにデフォルトのテキスト色を継承している場合に限り、色を変えずに移行できます。

該当箇所が現在どの色で表示されているか確認します。

状況	対応
祖先要素やローカルルールで color が設定されていない	対応不要です。トークンの色は継承される色と一致します
祖先要素に暗い背景または反転した背景と、独自の明るい color が設定されている	inverse を追加します
ローカルルールまたは祖先要素のルールに意図的なカスタム color が設定されている	そのルールを維持するか、色が薄いグレーだった場合は type="secondary" を選択します。視覚的な変更として明記してください

ピクセル単位で完全に一致するのは最初の行だけです。残る 2 つは表示が変わるため、ログに記録してください。

サイズのマッピング

old assignment	size
nxCopytext="small" / .nx-copy--small	size="s"
nxCopytext="medium" / nxCopytext (default) / .nx-copy--medium	size="m"
nxCopytext="large" / .nx-copy--large	size="l"

nxCopytext="normal" は以前のデフォルトであり、size="m" にもマッピングされます。

その他の属性

old	new
negative（例：nxCopytext="small negative"）	inverse
要素に CSS で手動設定された font-weight: 600 / 700	attention（ユーティリティテキストのみ）
.nx-copy のレガシークラス	削除します。コンポーネントが独自のクラスを設定します

例

変更前：

<p nxCopytext="medium">
  On the insurance side, Allianz is the market leader in the German market.
</p>
<p nxCopytext="small">
  Your policy covers damage caused by fire, storm and tap water, including any
  follow-up costs incurred while the damage is being repaired.
</p>
<p nxCopytext="small negative">All prices include VAT.</p>
<td nxCopytext="small">12.05.2026</td>
<label nxCopytext="small" for="iban">IBAN</label>

変更後：

<p nxBodyText size="m">
  On the insurance side, Allianz is the market leader in the German market.
</p>

<p nxBodyText size="s">
  Your policy covers damage caused by fire, storm and tap water, including any
  follow-up costs incurred while the damage is being repaired.
</p>
<p nxBodyText size="s" inverse>All prices include VAT.</p>

<td nxUtilityText size="s">12.05.2026</td>

<label nxUtilityText size="s" for="iban">IBAN</label>

注意事項

• どちらのコンポーネントも属性セレクターなので、意味的な要素（<p>、<span>、<dd> など）はそのまま使用してください。
• nxCopytext は引き続き動作し、削除されていません。段階的に移行し、ファイル内の最後の出現箇所がなくなったら NxCopytextModule / NxCopytextComponent のインポートを削除してください。
• どちらのコンポーネントも A1 専用です。Step 1 が完了していないアプリには、この手順を適用しないでください。
• 出現箇所ごとに、テキストの内容、本文テキストかユーティリティテキストか、その理由を記した簡潔な判断ログを出力してください。先頭部分が実際に変わる場合は、ユーティリティテキストの選択を視覚的な変更としてマークし、レビューを受けてください。該当するのは、どの密度でも size="s" の場合、またはコンパクト／高密度で size="m" の場合です。また、色の判断が必要だった出現箇所も、視覚的な変更としてマークしてください（「色」を参照）。密度は package.json の a1Migration.theme、または angular.json のビルド styles 配列にある allianz-one*.css のエントリーから確認してください（allianz-one.css = ゆったり）。いずれもない場合は、ユーザーに確認してください。
• この手順を適用した後、package.json の a1Migration.steps 配列に "text" を追加してください。

---

移行の追跡

各手順の完了後、移行を記録し、GitHub 検索を通じてチーム間での導入状況を追跡できるようにします。

package.json のプロジェクトレベルのメタデータ

Step 1（テーマの適用）後、package.json に a1Migration キーを追加してください。その後、各手順が完了するたびに、手順名を steps 配列に追加してください。

"a1Migration": {
  "skillVersion": "0.1.5",
  "appliedAt": "YYYY-MM-DD",
  "theme": "<spacious|compact|dense>",
  "steps": ["theme"]
}

手順名は完了時に追加します："theme"、"tiles"、"info-icons"、"layout"、"small-stage"、"context-menu-selection"、"file-uploader"。

完全に移行済みのプロジェクトは次のようになります。

"a1Migration": {
  "skillVersion": "0.1.5",
  "appliedAt": "YYYY-MM-DD",
  "theme": "<spacious|compact|dense>",
  "steps": ["theme", "tiles", "info-icons", "layout", "small-stage", "file-uploader"]
}

追加の移行実行の追跡

package.json にすでに a1Migration キーがある場合は、現在のセッションで実行した手順を配列に追加してください。