本文へ移動

デジタル庁デザインシステムβ版 v2.5.1

メニュー

ようこそデジタル庁デザインシステムへ

デジタル庁デザインシステムは、スタイリングの考え方を提供するデザイン言語、情報の視覚表現とインタラクションを具現化するUIコンポーネント、ユーザビリティとアクセシビリティを踏まえた設計や実装のためのガイドラインから構成されるデザインアセットです。

デジタル庁のミッションである「誰一人取り残されない、人に優しいデジタル化を。」の実現に寄与することを標榜し、官公庁や地方自治体などの行政機関や公共性の高い組織等のウェブサイト/ウェブアプリケーション/オンラインサービスまたはシステム等で利用することを念頭に置いて構築されています。

デジタル庁デザインシステムの構成

デザインシステム本体
本ウェブサイトです。本デザインシステムの使い方、基本デザインやコンポーネントの仕様、ガイドライン、作例、アクセシビリティのドキュメントなどが含まれます。
デザインデータ(Figma)v2系
v2.0.0以降のFigmaファイルです。本ウェブサイトのガイドラインに対応したデザインデータです。Figma Communityから取得できます。
デザインデータ(Figma)v1系
v1.x系統のFigmaファイルは以前のバージョンです。v1.x系統のガイドラインやコンポーネントは今後、順次v2系統に置き換えられます。
コードスニペット(React)
デザイントークンやサンプルコードです。GitHubに展開します。
イラストレーション・アイコン素材
行政手続きの説明コンテンツ等での使用を念頭に置いて作られたグラフィック素材です。v1.x系統のFigmaファイル内に格納されています。

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

お知らせ

ドキュメント

  • コンポーネント:カード
    • 「詳しく見る」というラベルを持つ作例から、タイトルのリンクを削除
    • 一部の作例で見られたスクリーンショットと説明文の内容の不一致を修正

デザインデータ

  • デザインデータ(Figma)v2.5.1を公開しました。

    v2.5.1の更新内容
    コンポーネント
    • メニューリスト
      • Smallサイズの高さを36pxに統一
      • 左パディングを16px、右パディングを12pxに統一
      • インデントのバリアントを削除
      • レイヤー構造を整理
      • 作例をアップデート
    • メニューリストボックス
      • メニューリストの更新にともない、メニューリストボックスの作例をアップデート
    • ランゲージセレクター
      • メニューリストの更新にともない、ランゲージセレクターの作例をアップデート
    「v2.5.1の更新内容」の先頭に戻る

コードスニペット

  • Tableコンポーネント
    • v2.5.0 Figma デザインデータの更新を反映
    NotificationBannerコンポーネント
    • 強制カラーモード時のアイコンの色を調整
    その他の修正
    • イントロダクションの文章を一部修正

その他

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