テーマ可能な空ステータス画像の操作

  • リリースバージョン: Australia
  • 更新日 2026年03月12日
  • 所要時間：12分

    • テーマ可能な空ステータスの画像を追加して、空ステータスをカスタマイズし、ユーザーエクスペリエンスを向上させます。空の状況には、ユーザーがコンテンツを追加または作成するためのガイダンスまたはアクションが含まれます。

    ネクストエクスペリエンス Web ページのコンポーネントまたは一部にデータが含まれていない場合は、空のステート画像が表示されます。空ステータスの画像はテーマ設定可能であり、インスタンスのテーマの色に合わせて調整されます。

    図 : 1. 空ステータスの画像
    利用可能なデータがありません 空のステート画像。

    空ステータスの画像タイプは 12 種類あり、それぞれ小、中、大のバージョンがあります。テーマビルダーを使用してテーマを作成すると、UX スタイル画像レコードが作成されますが、レコードは空です。この場合、テーマはデフォルトでベースシステムの空ステータスのテーマ可能な画像を使用します。これらのイメージを上書きする場合は、「 テーマに合わせてテーマ可能な空ステータスの画像をカスタマイズ」を参照してください。

    UI ビルダー のイラストコンポーネントを使用して、空ステータスの画像をカスタムエクスペリエンスに挿入できます。Illustration コンポーネントには、利用可能なすべての空ステータスの画像が表示されます。Illustration コンポーネントの詳細については、「 Horizon Design System Empty State」を参照してください。

    UI ビルダー のカスタムイラストレーションコンポーネントを使用して、カスタム画像を追加することもできます。

    テーマフック付きのテーマ可能な空ステータスの画像

    次の画像は、検索結果なしの空ステータスの画像と、各バリエーションに必要なテーマフックを表しています。

    図 : 2. 検索結果がありません (アクセントソリッド)
    検索結果が空のステータス画像がありません。アクセントはソリッドのバリエーションです。テキストの説明については、以下のテーマフック情報を参照してください。

    このバリエーションに必要なテーマフックは $now-color_interactive-1 です。

    図 : 3. 検索結果がありません (アクセントアウトライン)
    検索結果が空のステータス画像がありません。アクセントアウトラインのバリエーション。テキストの説明については、以下のテーマフック情報を参照してください。

    このバリエーションに必要なテーマフックは $now-color_interactive-3 です。

    図 : 4. 検索結果がありません (微妙なアウトライン)
    検索結果が空のステート画像がありません。輪郭の微妙なバリエーションがあります。テキストの説明については、以下のテーマフック情報を参照してください。

    このバリエーションに必要なテーマフックは $now-color_border-secondary です。

    図 : 5. 検索結果がありません (サブジェクトの詳細が暗い)
    検索結果が空のステータスの画像がありません。被写体の詳細のバリエーションは暗いです。テキストの説明については、以下のテーマフック情報を参照してください。

    このバリエーションに必要なテーマフックは $now-color_border-tertiary です。

    図 : 6. 検索結果がありません (被写体光の詳細)
    検索結果が空のステート画像がありません。被写体光の詳細のバリエーション。テキストの説明については、以下のテーマフック情報を参照してください。

    このバリエーションに必要なテーマフックは $now-color_background-secondary です。

    図 : 7. 検索結果がありません (件名入力)
    検索結果が空のステータス画像がありません。件名入力バリエーション。テキストの説明については、以下のテーマフック情報を参照してください。

    このバリエーションに必要なテーマフックは、 $now-color_background-primary です。

    図 : 8. 検索結果がありません (件名の概要)
    検索結果が空のステータスの画像がありません。件名の概要がバリエーションです。テキストの説明については、以下のテーマフック情報を参照してください。

    このバリエーションに必要なテーマフックは $now-color_border-secondary です。

    図 : 9. 検索結果がありません (サブジェクトシャドウ)
    検索結果が空のステータスの画像がありません。被写体シャドウのバリエーションがあります。テキストの説明については、以下のテーマフック情報を参照してください。

    このバリエーションに必要なテーマフックは $now-color_border-secondary です。

    空ステータスのライトモードトークン

    図 : 10. メインオブジェクトの空ステートの画像
    メインオブジェクトの空ステータスの画像。テキストの説明については、以下のテーマフック情報を参照してください。
    メインオブジェクトの空ステータス画像を上書きするために使用されるテーマフック。
    • now-illustration--empty-state--main-object--outline
    • now-illustration--empty-state--main-object--fill
    図 : 11. プライマリオブジェクトの空ステータスの画像
    プライマリオブジェクトの空ステータスの画像。テキストの説明については、以下のテーマフック情報を参照してください。
    プライマリオブジェクトの空ステータス画像を上書きするために使用されるテーマフック。
    • now-illustration--empty-state--primary-object--outline
    • now-illustration--empty-state--primary-object--primary-fill
    • now-illustration--empty-state--primary-object--tertiary-fill
    • now-illustration--empty-state--primary-object--main-detail
    • now-illustration--empty-state--primary-object--detail
    • now-illustration--empty-state--primary-object--shadow
    図 : 12. ターシャリオブジェクトの空ステートの画像
    ターシャリオブジェクトの空ステートの画像。テキストの説明については、以下のテーマフック情報を参照してください。
    第 3 オブジェクトの空ステータス画像を上書きするために使用されるテーマフック。
    • now-illustration--empty-state--tertiary-object--outline
    • now-illustration--empty-state--tertiary-object--primary-fill
    • now-illustration--empty-state--tertiary-object--tertiary-fill
    • now-illustration--empty-state--tertiary-object--main-detail
    • now-illustration--empty-state--tertiary-object--detail
    • now-illustration--empty-state--tertiary-object--shadow
    図 : 13. 背景が空の状態の画像
    背景が空の状態の画像。テキストの説明については、以下のテーマフック情報を参照してください。
    背景の空ステータスの画像を上書きするために使用されるテーマフック。
    • now-illustration--empty-state--background--lines
    • now-illustration--empty-state--background--tertiary-lines
    • now-illustration--empty-state--background--object-outline
    • now-illustration--empty-state--background--object-detail
    • now-illustration--empty-state--background--object-shadow
    • now-illustration--empty-state--background--object-fill

    空ステータスのライトモードのフォールバック

    表 : 1. 空ステータスのライトモードフォールバックスタイル宣言
    オブジェクト スタイル宣言
    メインオブジェクト 
    
 .main-object--outline {
  fill:rgb(var(--empty-state--main-object--outline),
      var(--main-object--outline), var(--now-color--interactive-3), 51,53,123);
}
    		 
    
 .main-object--fill {
  fill:rgb(var(--empty-state--main-object--fill),
      var(--main-object--fill), var(--now-color--interactive-1), 144,146,213);
}
    プライマリオブジェクト 
    
 .primary-object--outline {
  fill:rgb(var(--empty-state--primary-object--outline),
      var(--primary-object--outline), var(--now-color--border--secondary),
    176,181,191);
}
    		 
    
 .primary-object--primary-fill {

      fill:rgb(var(--empty-state--primary-object--primary-fill),
      var(--primary-object--primary-fill), var(--now-color--background--primary),
      255,255,255);
}
    		 
    
 .primary-object--tertiary-fill {

      fill:rgb(var(--empty-state--primary-object--tertiary-fill),
      var(--primary-object--tertiary-fill), var(--now-color--background--secondary),
      246,246,248);
}
    		 
    
 .primary-object--main-detail {

      fill:rgb(var(--empty-state--primary-object--main-detail), var(--primary-object--main-detail),
      var(--now-color--border--secondary), 176,181,191);
}
    		 
    
 .primary-object--detail {
  fill:rgb(var(--empty-state--primary-object--detail ),
      var(--primary-object--detail ), var(--now-color--border--tertiary),
    211,214,220);
}
    		 
    
 .primary-object--shadow {
  fill:rgb(var(--empty-state--primary-object--shadow),
      var(--primary-object--shadow), var(--now-color--background--tertiary),
    228,230,234);
}
    ターシャリオブジェクト 
    
 .tertiary-object--outline {
  fill:rgb(var(--empty-state--tertiary-object--outline),
      var(--tertiary-object--outline), var(--now-color--border--secondary), 176,181,191);
}
      
    
 .tertiary-object--primary-fill {

      fill:rgb(var(--empty-state--tertiary-object--primary-fill),
      var(--tertiary-object--primary-fill), var(--now-color--background--primary),
      255,255,255);
}
    		 
    
 .tertiary-object--tertiary-fill {

      fill:rgb(var(--empty-state--tertiary-object--tertiary-fill),
      var(--tertiary-object--tertiary-fill), var(--now-color--background--secondary),
      246,246,248);
}
    		 
    
 .tertiary-object--main-detail {

      fill:rgb(var(--empty-state--tertiary-object--main-detail),
      var(--tertiary-object--main-detail), var(--now-color--border--secondary),
      176,181,191);
}
    		 
    
 .tertiary-object--detail {
  fill:rgb(var(--empty-state--primary-object--detail ),
      var(--primary-object--detail ), var(--now-color--border--tertiary),
    211,214,220);
}
    		 
    
 .tertiary-object--shadow {
  fill:rgb(var(--empty-state--tertiary-object--shadow),
      var(--tertiary-object--shadow), var(--now-color--background--tertiary),
    228,230,234);
}
    背景オブジェクト 
    
 .background--lines {
  fill:rgb(var(--empty-state--background--lines),
      var(--background--lines), var(--now-color--border--tertiary), 211,214,220);
}
    		 
    
 .background--tertiary-lines {

      fill:rgb(var(--empty-state--background--tertiary-lines), var(--background--tertiary-lines),
      var(--now-color--border--tertiary), 211,214,220);
}
    		 
    
 .background--object-outline {

      fill:rgb(var(--empty-state--background--object-outline), var(--background--object-outline),
      var(--now-color--border--tertiary), 211,214,220);
}
    		 
    
 .background--object-detail {
  fill:rgb(var(--empty-state--background--object-detail),
      var(--background--object-detail), var(--now-color--border--tertiary),
    211,214,220);
}
    		 
    
 .background--object-shadow {
  fill:rgb(var(--empty-state--background--object-shadow),
      var(--background--object-shadow), var(--now-color--background--tertiary),
      228,230,234);
}
    		 
    
 .background--object-fill {
  fill:rgb(var(--empty-state--background--object-fill),
      var(--background--object-fill), var(--now-color--background--primary),
    255,255,255);
}