本ウェブサイトのコンテンツ

• はじめに

  本ウェブサイトの概要と、デザインシステムの一般的な概念について知ることができます

• ガイダンス

  デジタル庁デザインシステムの特徴を把握し、デザインプロジェクトにどのように導入できるかを知りましょう

• 基本デザイン

  デザイン全体を形作るために必要な基本デザインの紹介とそのガイドラインです

• コンポーネント

  ボタンやリスト等、画面を構成する情報は、様々なUIコンポーネントの形で利用者に情報の意味と操作方法を伝えます

• リソース

  デジタル庁デザインシステムに付随する資料やデータ等です

お知らせ

ドキュメント

• 2025年6月25日

  コンポーネント：テーブル／データテーブル

  • 「アクセシビリティ」ページを追加
  • コンポーネント要素の名称である「テールアイコン」を「ソートアイコン」に変更
  • 「サイズ」を加筆修正

    テーブルの用途に応じてDefaultまたはDenseを選択してください。 一覧性が重要な用途や、画面領域を有効に活用したい場合にはDenseを選択できます。 DefaultまたはDenseが用意されています。 扱うデータの量が多く、画面内にできるだけ多くの情報を表示したい場合にはDenseを選択できます。

  • 「セルの結合」を加筆修正

    • セルの結合は最小限にしてください。 セルが複雑に結合されると、データの再利用が難しくなります。
    • セルの結合は最小限にしてください。
    • データテーブルの場合は、セルの結合は原則として行いません。 セルが結合されると、データの再利用が難しくなります。

  • 「テキストの配置」を追加
  • 「ストライプ表示」を加筆修正

    • 必要に応じて、行および列をストライプ表示にできます。 大きなテーブルやデータ密度の高いテーブルの視認性が向上します。
    • 必要に応じて、行および／または列をストライプ表示にできます。 大きなテーブルやデータ密度の高いテーブルの視認性が向上します。
    • データセルが結合されている場合、ストライプ表示ができない場合があります。
      • 行方向の結合（縦方向のセル結合）がある場合、行はストライプ表示できません。
      • 列方向の結合（横方向のセル結合）がある場合、列はストライプ表示できません。
    • テーブルがストライプ表示を含む場合、背景色の有無に関わらずボーダーと背景色とのコントラスト比が3:1を下回らないよう留意してください。

  • 「テキスト」を追加
  • 「リンク」を加筆修正

    • セルのリンクが1つの場合は、セル全体をリンク領域にしてください。 ターゲットサイズが広がり使い勝手を高めます。
    • セルのリンクが1つの場合は、セル全体をリンク領域にできます。

  • 「シンプルに作る」を削除（内容は「アクセシビリティ」ページに移譲）
  • 「ホバーハイライト」を加筆修正

    • マウスカーソルが乗った行または列をHoverハイライトで表示できます。
    • マウスカーソルが乗った行および／または列をホバーハイライトで表示できます。
    • テーブルがホバーハイライトを含む場合、背景色の有無に関わらずボーダーと背景色とのコントラスト比が3:1を下回らないよう留意してください。

  • 「行の選択」を加筆修正

    • 行の先頭にあるチェックボックスで行の選択ができます。 選択された行はSelectedハイライトで表示してください。
    • 行の先頭にあるチェックボックスで行の選択ができます。 選択された行はハイライト表示になります。
    • テーブルが行の選択を含む場合、ボーダーと背景色の有無に関わらず背景色とのコントラスト比が3:1を下回らないよう留意してください。

  • 「すべての行を選択する」を加筆修正

    テーブルヘッダーの先頭に「全て選択」、すべての行を選択するためのチェックボックスを追加できます。

    テーブル内で選択されたアイテムと選択されていないアイテムが混在している場合、「全て選択」チェックボックスはindeterminateプロパティを利用したチェックボックス表示になります。この状態で「全て選択」チェックボックスを選択した場合、全て選択が実行されます。 テーブル内で選択済みの行と未選択の行が混在している場合、このチェックボックスはindeterminateプロパティを利用したマイナス記号表示になります。この状態でテーブルヘッダーのチェックボックスを選択した場合、すべての行が選択されます。

  • 「ソート（並べ替え）」を加筆修正

    • 上向き矢印アイコン（昇順）または下向き矢印アイコン（降順）を使って並び順を表示します。
    • ソートが可能であることを示すためにソートアイコンを表示します。
    • ソートアイコンは昇順を表す上向き矢印を強調したもの、降順を表す下向き矢印を強調したもの、およびどちらの矢印も強調されていないものがあり、ソートの状態に応じたソートアイコンを表示します。

デザインデータ

• 2025年6月25日

  デザインデータ（Figma）v2.5.0を公開しました。

  v2.5.0の更新内容

  コンポーネント

  • テーブル／データテーブル
    • ソートアイコンの形状を変更し、ソート可能な列のヘッダーセルに常に表示する
    • ヘッダーセルの背景色をGray-50からGray-100に変更
    • ヘッダーセルの罫線色をGray-420からGray-500に変更
    • ストライプ表示、ホバーハイライト、行の選択を含むテーブルの罫線色をGray-420からGray-500に変更
    • ストライプ表示の背景色をGray-50に設定
    • セル内のテキストおよびアイコンの位置を上寄せに変更
    • インデント付き行を含む作例を追加
  • 「検索ボックス」コンポーネントを新規追加

  「v2.5.0の更新内容」の先頭に戻る

コードスニペット

• 2025年6月25日

  Tableコンポーネント

  • v2.5.0 Figma デザインデータの更新を反映

  NotificationBannerコンポーネント

  • 強制カラーモード時のアイコンの色を調整

  その他の修正

  • イントロダクションの文章を一部修正

その他

• 2025年6月25日

  コンポーネントの各種リソース情報を「概要」ページ下部に追加しました。