お知らせ （ ドキュメント ）
-
- コンポーネント：水平メニュー （Rev 001）
- グローバルメニューを水平メニューに名称変更
- コンポーネント：ヘッダーコンテナ （Rev 002）
- グローバルメニューを水平メニューに名称変更
-
- コンポーネント：見出し （Rev 001）
- 初版公開
-
- コンポーネント：箇条書きリスト （Rev 001）
- 初版公開
- コンポーネント：イメージスライダー （Rev 001）
- 初版公開
- コンポーネント：ディスクロージャー （Rev 001）
- 初版公開
- コンポーネント：カルーセル （Rev 002）
- 打ち出しタイプおよびコンテナタイプについて追記
- 打ち出しタイプにシングルを追加
- アコーディオン （Rev 001）
- 初版公開
-
- コンポーネント：ファイルアップロード／ドロップエリア （Rev 002）
- 削除ボタンのラベルを「解除」に変更
- ファイル選択サマリーを追加
-
- コンポーネント：ファイルアップロード／ドロップエリア （Rev 001）
- 初版公開
- コンポーネント：カルーセル （Rev 001）
- 初版公開
- コンポーネント：テキストエリア （Rev 002）
- エラーテキストと文字数カウンターのレイアウトを変更
-
- ウェブアクセシビリティ （Rev 003）
- 2025年11月のウェブアクセシビリティ検証結果を公開
-
- ガイダンス：アクセシビリティ （Rev 003）
- 「JIS X 8341-3:2016、WCAG、WAI-ARIA等の各ガイドライン」の項におけるリストから、WCAG 2.0勧告およびWCAG 2.1勧告のリンクを削除（このふたつの内容はWCAG 2.2勧告に包含されるため、最新であるWCAG 2.2勧告のみのリンクとした。ただし、WCAG 2.0はJIS X 8341-3:2016と直接互換する勧告、WCAG 2.1は達成基準4.1.1を含む最新の勧告という観点から、参照先ガイドラインとしてはリンク無しでリスト内に存続）
- 基本デザイン：リンクテキスト （Rev 003）
- リンクテキストのActiveカラーをOrange-700からOrange-800へ修正。テキストのコントラスト要件を満たしていなかったため
- 基本デザイン：エレベーション （Rev 002）
- ドロップシャドウではコントラスト比を確保できないことを加筆
- 強制カラーモードを考慮し、オーバーレイシェード上の要素にボーダーをつけることを加筆
- コンポーネント：日付ピッカー／カレンダー （Rev 003）
- デスクリプションを修正
日付ピッカーは、日付を選択するためのフォームコントロールを提供します。カレンダーは、日付の選択を補助するコンポーネントです。日付ピッカーに加えて任意でカレンダーを表示できます。日付ピッカーは、日付を選択するためのフォームコントロールとして、入力フィールドおよびカレンダーによって構成されるコンポーネントです。 - 日付ピッカーは入力フィールドおよびカレンダーの組み合わせであることを明確にし、各ページに反映
- 「コンポーネント要素」の入力フィールドの説明からエラー時を別項目に分割
- デスクリプションを修正
-
- コンポーネント：ラジオボタン （Rev 002）
- 設計の原則を加筆
- コンポーネント：チェックボックス （Rev 002）
- 設計の原則を加筆修正
複数の選択肢からひとつの項目しか選択できない場合は、必ずラジオボタンを使用してください。
- 設計の原則を加筆修正
-
- ウェブアクセシビリティ （Rev 002）
- 2024年5月の試験に関する注釈を追加
本JIS試験には、2025年7月30日のアップデートで、当該ドメイン配下となった以下のリソースは含まれません。
- URLが https{/**/}://design.digital.go.jp/dads/html/ で始まるページ
- URLが https{/**/}://design.digital.go.jp/dads/react/ で始まるページ
- 2024年5月の試験に関する注釈を追加
- コンポーネント：インプットテキスト （Rev 002）
- v1のガイドラインだったものを、v2のガイドラインとして大幅改定
- Readonlyステートを追加し、デザイン、コードスニペット、ガイドラインを更新
-
- 基本デザイン：アイコン （Rev 001）
- 初版公開
-
- コンポーネント：カード （Rev 002）
- 「詳しく見る」というラベルを持つ作例から、タイトルのリンクを削除
- 一部の作例で見られたスクリーンショットと説明文の内容の不一致を修正
-
- コンポーネント：テーブル／データテーブル （Rev 002）
- 「アクセシビリティ」ページを追加
- コンポーネント要素の名称である「テールアイコン」を「ソートアイコン」に変更
- 「サイズ」を加筆修正
テーブルの用途に応じてDefaultまたはDenseを選択してください。 一覧性が重要な用途や、画面領域を有効に活用したい場合にはDenseを選択できます。DefaultまたはDenseが用意されています。 扱うデータの量が多く、画面内にできるだけ多くの情報を表示したい場合にはDenseを選択できます。 - 「セルの結合」を加筆修正
セルの結合は最小限にしてください。 セルが複雑に結合されると、データの再利用が難しくなります。- セルの結合は最小限にしてください。
- データテーブルの場合は、セルの結合は原則として行いません。 セルが結合されると、データの再利用が難しくなります。
- 「テキストの配置」を追加
- 「ストライプ表示」を加筆修正
必要に応じて、行および列をストライプ表示にできます。 大きなテーブルやデータ密度の高いテーブルの視認性が向上します。- 必要に応じて、行および／または列をストライプ表示にできます。 大きなテーブルやデータ密度の高いテーブルの視認性が向上します。
- データセルが結合されている場合、ストライプ表示ができない場合があります。
- 行方向の結合（縦方向のセル結合）がある場合、行はストライプ表示できません。
- 列方向の結合（横方向のセル結合）がある場合、列はストライプ表示できません。
- テーブルがストライプ表示を含む場合、背景色の有無に関わらずボーダーと背景色とのコントラスト比が3:1を下回らないよう留意してください。
- 「テキスト」を追加
- 「リンク」を加筆修正
セルのリンクが1つの場合は、セル全体をリンク領域にしてください。 ターゲットサイズが広がり使い勝手を高めます。- セルのリンクが1つの場合は、セル全体をリンク領域にできます。
- 「シンプルに作る」を削除（内容は「アクセシビリティ」ページに移譲）
- 「ホバーハイライト」を加筆修正
マウスカーソルが乗った行または列をHoverハイライトで表示できます。- マウスカーソルが乗った行および／または列をホバーハイライトで表示できます。
- テーブルがホバーハイライトを含む場合、背景色の有無に関わらずボーダーと背景色とのコントラスト比が3:1を下回らないよう留意してください。
- 「行の選択」を加筆修正
行の先頭にあるチェックボックスで行の選択ができます。 選択された行はSelectedハイライトで表示してください。- 行の先頭にあるチェックボックスで行の選択ができます。 選択された行はハイライト表示になります。
- テーブルが行の選択を含む場合、ボーダーと背景色の有無に関わらず背景色とのコントラスト比が3:1を下回らないよう留意してください。
- 「すべての行を選択する」を加筆修正
テーブルヘッダーの先頭に
「全て選択」、すべての行を選択するためのチェックボックスを追加できます。テーブル内で選択されたアイテムと選択されていないアイテムが混在している場合、「全て選択」チェックボックスはテーブル内で選択済みの行と未選択の行が混在している場合、このチェックボックスはindeterminateプロパティを利用したチェックボックス表示になります。この状態で「全て選択」チェックボックスを選択した場合、全て選択が実行されます。indeterminateプロパティを利用したマイナス記号表示になります。この状態でテーブルヘッダーのチェックボックスを選択した場合、すべての行が選択されます。 - 「ソート（並べ替え）」を加筆修正
上向き矢印アイコン（昇順）または下向き矢印アイコン（降順）を使って並び順を表示します。- ソートが可能であることを示すためにソートアイコンを表示します。
- ソートアイコンは昇順を表す上向き矢印を強調したもの、降順を表す下向き矢印を強調したもの、およびどちらの矢印も強調されていないものがあり、ソートの状態に応じたソートアイコンを表示します。
-
- 基本デザイン：カラー （Rev 003）
- 「コントラスト要件」を加筆修正
JIS X 8341-3:2016およびWCAG 2.1, 2.2において求められるコントラスト要件は以下の通りです。ただし、デジタル庁デザインシステムでは、「サイズの大きなテキスト（24 CSS px以上のテキストまたは18 CSS px以上の太字テキスト）および文字画像」の規定は除外し、サイズの大きさに関わらず、テキストおよび文字画像は背景色に対して4.5:1以上のコントラスト比を確保しています。
- 「コントラスト要件」を加筆修正
-
- コンポーネント：日付ピッカー／カレンダー （Rev 002）
- 「文脈に応じて
autocompleteを使用する」を加筆修正年月日の各フィールドに適切なフォームの入力操作は、操作そのものの煩雑さだけでなく入力内容の検討もあり、ユーザーに一定の負担がかかるものとなります。ブラウザの自動入力機能（オートフィル）を用いることで負担の軽減が期待できるため、対応するautocomplete属性を指定することで、ブラウザの自動入力機能に対応できます。日付に関連するautocompleteの値は以下のとおりです。autocomplete属性を指定するようにしましょう。日付ピッカーに関連するautocompleteの値は以下のとおりです。 - 「文脈に応じて
autocompleteを使用する」に参考情報を追加
- 「文脈に応じて
-
- 基本デザイン：タイポグラフィ （Rev 007）
- Displayテキストスタイルに太さレベルBを追加
- コンポーネント：日付ピッカー／カレンダー （Rev 001）
- 初版公開
-
- コンポーネント：カード （Rev 001）
- 初版公開
-
- リソース （Rev 002）
- デジタル庁デザインシステムの特定バージョン取得に関する説明と問い合わせフォームへのリンクを追加
- コンポーネント：テーブル／データテーブル （Rev 001）
- 初版公開
-
- コンポーネント：緊急時バナー （Rev 002）
- バナータイトルの先頭に「【緊急】」の文字列を追加
- クリッカブルエリアをバナー全体ではなくアクションボタンのみに変更
- アクションボタンの最小幅を利用可能な表示幅の50%に変更
-
- コンポーネント：ドロワー （Rev 002）
- 仕様の内容を、モーダル展開に限定した文章として再構成
-
- ガイダンス：アクセシビリティ （Rev 002）
- 参照ガイドラインのリンク集を加筆および構成を調整
- コンポーネント：ユーティリティリンク （Rev 001）
- 初版公開
- コンポーネント：セレクトボックス （Rev 001）
- 初版公開
- コンポーネント：ラジオボタン （Rev 001）
- 初版公開
- コンポーネント：ノティフィケーションバナー （Rev 001）
- 初版公開
- コンポーネント：モバイルメニュー （Rev 001）
- 初版公開
- コンポーネント：メニューリストボックス （Rev 001）
- 初版公開
- コンポーネント：メニューリスト （Rev 001）
- 初版公開
- コンポーネント：ランゲージセレクター （Rev 001）
- 初版公開
- コンポーネント：インプットテキスト （Rev 001）
- 初版公開
- コンポーネント：ヘッダーコンテナ （Rev 001）
- 初版公開
- コンポーネント：ハンバーガーメニューボタン （Rev 001）
- 初版公開
- コンポーネント：緊急時バナー （Rev 001）
- 初版公開
- コンポーネント：ドロワー （Rev 001）
- 初版公開
- コンポーネント：ディバイダー （Rev 001）
- 初版公開
- コンポーネント：チェックボックス （Rev 001）
- 初版公開
- コンポーネント：パンくずリスト （Rev 001）
- 初版公開
- コンポーネント：テキストエリア （Rev 001）
- 初版公開
-
- 基本デザイン：タイポグラフィ （Rev 006）
- テキストスタイルの追加漏れを修正
-
- 基本デザイン：タイポグラフィ （Rev 005）
- 太さレベルにv2系統では使用していないMediumが含まれていたのを削除
- 行ボックスの高さ（行高）の定義に175%を追加
- テキストスタイル名の構成において行高を%表記の値のまま記述するように変更
- 行高175%のStandardテキストスタイルを追加
- Standardテキストスタイルの文字間隔をフォントサイズの大小に応じて調整するように変更
- 基本デザイン：カラー （Rev 002）
- グレーのカラー定義名を「Grey」から「Gray」に変更
-
- コンポーネント：ボタン （Rev 004）
- 「無効ボタン（disabled）はタブフォーカスでアクセスできない」を加筆修正
HTMLのdisabledコンテンツ属性が指定されたボタンやフォームコントロールは、スクリーンリーダーで「無効」「使用不能」などと読み上げられるものの、キーボード操作のタブフォーカスではアクセスできません。そのため、ロービジョンのユーザーがスクリーンリーダーとキーボード操作を併用している際など、無効ボタンの位置を正確に把握することができない場合があるという、アクセシビリティ上の問題があります。また無効ボタンには、ユーザーからは見えているのになぜ押せないのかが分からないというように、ユーザビリティ上の問題もあります。
- 「無効ボタン（disabled）はタブフォーカスでアクセスできない」を加筆修正
-
- 基本デザイン：タイポグラフィ （Rev 004）
- テキストブロックのグリフ幅について、考え方を加筆修正
-
- 基本デザイン：レイアウト （Rev 002）
- カラムおよびガターについての説明を加筆修正
-
- 基本デザイン：リンクテキスト （Rev 002）
- リンクテキストの下線の位置と範囲を調整
-
- コンポーネント：ボタン （Rev 003）
- 「ボタン配置の考え方」を加筆し、概要を再構成
-
- 基本デザイン：タイポグラフィ （Rev 003）
- Denseテキストスタイルにおける太さレベルの説明の誤りを修正
-
- コンポーネント：ボタン （Rev 002）
- 参考情報のリンク先を変更
-
- 基本デザイン：タイポグラフィ （Rev 002）
- Windows環境での閲覧を考慮し、CSSの記述例からsystem-uiを削除
-
- ウェブアクセシビリティ （Rev 001）
- ウェブアクセシビリティ方針を策定し公開。また公開時点でのウェブアクセシビリティ検証結果を公開
- リソース （Rev 001）
- 初版公開
- はじめに：利用上の注意事項 （Rev 001）
- 初版公開
- はじめに：はじめて本ウェブサイトを見る方へ （Rev 001）
- 初版公開
- ガイダンス：スタイルガイド （Rev 001）
- 初版公開
- ガイダンス：使い方 （Rev 001）
- 初版公開
- ガイダンス：デザインシステムとは （Rev 001）
- 初版公開
- ガイダンス：アクセシビリティ （Rev 001）
- 初版公開
- 基本デザイン：タイポグラフィ （Rev 001）
- 初版公開
- 基本デザイン：余白 （Rev 001）
- 初版公開
- 基本デザイン：リンクテキスト （Rev 001）
- 初版公開
- 基本デザイン：レイアウト （Rev 001）
- 初版公開
- 基本デザイン：エレベーション （Rev 001）
- 初版公開
- 基本デザイン：角の形状 （Rev 001）
- 初版公開
- 基本デザイン：カラー （Rev 001）
- 初版公開
- コンポーネント：ボタン （Rev 001）
- 初版公開