【代替テキスト】アクセシビリティファーストで推進する 「デジタル庁デザインシステム」の現在地

(映像：カメラに向かって話す森田 雄プロダクトデザイナー)

森田 雄プロダクトデザイナー：
デジタル庁デザインシステムは
アクセシビリティが最優先事項として位置付けられています。

(映像：カメラに向かって話す平瀬 亜由美プロダクトデザイナー)

平瀬 亜由美プロダクトデザイナー：
行政サービスは基本的に替えがききません。
つまり、行政手続きを提供するサイトでは、
必ずそこでその手続きを完遂する必要があります。

テロップ「デジタル庁ニュース」
アクセシビリティファーストで推進する
デジタル庁デザインシステムの現在地

（映像：デジタル庁デザインシステムベータ版の
トップページが下から上にスクロールされる）

ナレーション：
2024年5月、デジタル庁はウェブサイトで
「デジタル庁デザインシステムベータ版」を公開しました。

これは、行政機関や公共機関のウェブサイト、
オンラインサービスを作る上でのガイドラインで、
誰でも無料で利用できます。

（映像：カメラに向かって話す外山 雅暁企画官）

テロップ：
デジタル庁 企画官
外山 雅暁（とやま　まさとき）

外山 雅暁企画官：
デジタル庁のミッションは、
「誰一人取り残されない人に優しいデジタル化を」です。

その実現のために必要なのが、あらゆる人が
ウェブ上の情報にアクセスできる
ウェブアクセシビリティの取り組みです。

ウェブアクセシビリティを実現したウェブサイトをつくるには
大変高度な専門知識が必要になるんですけれども、

デジタル庁がアクセシビリティに配慮したデザインパーツなどを
無償で提供することで、誰もが簡単に
ウェブサイト開発に
アクセシビリティを導入できるようにする。

それが、デジタル庁デザインシステムが
目指しているところです。

このアクセシビリティに配慮したデザインシステムは、
世界各国からも高く評価されています。

01:23〜02:00_右上
「デジタル庁デザインシステム」とは？

（映像：カメラに向かって話す森田 雄プロダクトデザイナー）

テロップ：
デジタル庁
サービスデザインユニット　プロダクトデザイナー
森田 雄

森田 雄プロダクトデザイナー：
一般的にデザインシステムは、デザインデータや
コードサンプル、テンプレートなどの設計から、
デザイン、開発といった

（映像：左からデザインデータ、コードサンプル、テンプレートのイメージイラスト）

各段階の作業を支援するための
アセットを含んだデザインガイドラインのことで、
これによりブランドやコミュニケーションの
ガバナンスを強化するというものになります。

（映像：ウェブサイトデザインに必要なパーツや素材のイメージイラスト）
ナレーション：
アセットとはウェブサイトなどをデザインするための
パーツや素材のことで、ガバナンスの強化とは
統一感をもたらすことを意味します。

（映像：カメラに向かって話す森田 雄プロダクトデザイナー）

森田 雄プロダクトデザイナー：
それに加えて、
行政機関や公共機関での利用を念頭に置いて開発しているので
アクセシビリティが最優先事項として位置づけられています。

ナレーション：
デジタル庁デザインシステムは、
どのように使うものなのでしょうか。

テロップ：
デジタル庁デザインシステムとは？

02:07〜03:23_右上
「デジタル庁デザインシステム」とは？

（映像：カメラに向かって話す森田 雄プロダクトデザイナー）

森田 雄プロダクトデザイナー：
ちょっと専門的な説明になるんですけれども、
作業面では情報設計とデザインを接続するものとして使われます。

ウェブサイトやウェブアプリケーションの開発にあたって、
必ず必要となる工程に情報設計というものがあります。

情報設計というのは、一定のルールに従って
情報を整理する作業というのをするのですが、

（映像：情報設計されたコンテンツのイメージ画像が右から左にスクロールされる）

デジタル庁デザインシステムは一定のルールに従って情報を
部品化しているため、コンテンツをそれに適用していくことで
情報設計の下書きができます。

（映像：カメラに向かって話す森田 雄プロダクトデザイナー）

また、コンポーネントは見た目としてのデザインを
含んでいるため、情報設計の下書きをするとデザインの
下書きも同時に行えるということになります。

（映像：デジタル庁デザインシステムでの定義と

開発チーム・企画者・マネジメント担当の図解）

そして、共通言語としての役割もあります。
デジタル庁デザインシステムでの各種の定義が、
そのまま組織内での共通言語となります。

直接の開発チームだけでなく、企画者やマネジメント担当など、
全関係者のコミュニケーション効率が高まることになります。

（映像：カメラに向かって話す森田 雄プロダクトデザイナー）

これにより、コンテンツの扱いなどにおける
情報伝達に齟齬が起きにくくなり、チェックや
手戻りの数を減らすことが期待できます。

工数を軽減できれば、コンテンツそのものの
ブラッシュアップやユーザビリティテストといった工程を
手厚くできるということです。

ナレーション：
つまり、デジタル庁デザインシステムの活用が
ウェブ開発に効率化をもたらすことでユーザーに
より良い体験や情報を提供することに繋がります。

テロップ：
デジタル庁デザインシステムの活用
↓
ウェブ開発を効率化
↓
ユーザーにより良い体験や情報を提供

そんなデジタル庁デザインシステムには3つの特長があります。
1つ目が「アクセシビリティファースト」です。

テロップ：
特長①アクセシビリティファースト

03:45〜04:04 / 04:20〜05:19_右上

特長①アクセシビリティファースト

（映像：カメラに向かって話す平瀬 亜由美プロダクトデザイナー）

テロップ：
デジタル庁
サービスデザインユニット　プロダクトデザイナー
平瀬 亜由美

平瀬 亜由美プロダクトデザイナー：
選択肢がある民間サービスとは違って、行政サービスは基本的に替えがききません。

つまり、行政手続きを提供するサイトでは、
必ずそこでその手続きを完遂する必要があります。

そのため、行政機関のウェブサイトやアプリケーションは
アクセシビリティが最優先の事項となります。

（映像：コントラスト比を考慮したカラーパレットの画像が下から上にスクロールされる）

ナレーション：
例えば、JIS規格に沿ったコントラスト比を考慮した
カラーパレットを提供しています。

これにより、ウェブサイトをデザインするときに
コントラスト比を確保したカラー定義がしやすくなります。

（映像：明るさの差を表した青色のカラーパレット）

コントラスト比とは隣り合った色の明るさの差です。
デジタル庁デザインシステムでは、例えばテキストは、
背景色に対して少なくとも4.5:1以上のコントラスト比が
必要だと定義しています。

（映像：カメラに向かって話す平瀬 亜由美プロダクトデザイナー）

平瀬 亜由美プロダクトデザイナー：
また、色覚多様性に配慮して
コンポーネントの細かい色味を調整しています。

テロップ：
JIS規格（JIS X 8341-3:2016）

デジタル庁デザインシステムでは、JIS規格では
カバーできない事柄も積極的に取り入れています。

ナレーション：
タイポグラフィの定義においても、
アクセシビリティを考慮しています。

（映像：文字のサイズや太さを変えてレイアウトされたウェブサイトのイメージ図）

タイポグラフィとは、文字や文章を読みやすく、
見やすくレイアウトするための技術です。

平瀬 亜由美プロダクトデザイナー：
たとえば、原則として16ピクセルよりも小さい文字サイズを
許容しない作りをしているほか、

（映像：カメラに向かって話す平瀬 亜由美プロダクトデザイナー）

行ボックスの高さやブロック幅についても
学習障害や読字障害にも考慮して設計しています。

障害の有無に関わらず、誰もが公平に情報を
取得できるように取り組んでいます。

ナレーション：
2つ目の特長は、行政機関がウェブサイトを作成する際に
高い汎用性と利便性を保つことを意識して作られている点です。

テロップ：
特長②
高い汎用性と利便性

05:32〜06:23_右上

特長②高い汎用性と利便性

（映像：カメラに向かって話す岡藤 佳祐デザインエンジニア）

テロップ：
デジタル庁
サービスデザインユニット　デザインエンジニア
岡藤 佳祐

岡藤 佳祐デザインエンジニア：
行政機関にとって高い汎用性と利便性を持つとは、
行政手続きにおいて共通する要素や
個別の行政手続き特有の要素などを
直接置き換えることができる
コンポーネントを多数取り揃えることです。

（映像：行政手続きを想起しやすいデジタル庁デザインシステムのテンプレートの図）

行政機関の方がデジタル庁デザインシステムの
コンポーネントやテンプレートを見たときに、

それぞれの行政手続きを想起しやすいものにすることが
行政機関にとっての
高い汎用性と利便性の提供の体現となります。

（映像：カメラに向かって話す岡藤 佳祐デザインエンジニア）

情報設計やデザイン、実装といった各工程は、
専門的な業務で個別に熟練した専門家が必要です。

行政手続きのオンライン化にあたって、使用可能な
アクセシビリティ対応済みのコンポーネントやテンプレートを
専門家が作っておくというのが狙いのひとつです。

（映像：パソコンのキーボードを打っている様子のイメージ画像）

ナレーション：
デジタル庁デザインシステムのアクセシビリティ対応済みの
コンポーネントやテンプレートがあれば、調達事業者への
業務依頼や検収に係る効率や品質を高めることができます。

３つ目の特長は「継続的な改善と研究開発」です。
これは、デジタル庁デザインシステム自体を
維持していくための仕組みづくりを含んでいます。

テロップ：
特長③
継続的な改善と研究開発

06:53〜_07:34 右上
特長③継続的な改善と研究開発

（映像：カメラに向かって話す須藤 雅人デザインプログラム・マネージャー）

テロップ：
デジタル庁
サービスデザインユニット　デザインプログラム・マネージャー
須藤 雅人

須藤 雅人デザインプログラム・マネージャー：
デザインシステムは、
コンポーネントを1度作れば終わりというものではありません。

デザインのガバナンスを提供するものですから、
組織の運営に伴走して永続しなければなりません。

（映像：須藤 雅人デザインプログラム・マネージャー、森田 雄プロダクトデザイナー、

平瀬 亜由美プロダクトデザイナーの３人が会議を行う様子）

ナレーション：
デザインシステムは維持、更新し続ける必要があります。
なぜなら、インターネットを取り巻くテクノロジーや環境は
常に変化し続けているからです。

（映像：バージョンアップ、アップデートのイメージイラスト２画面）

須藤 雅人デザインプログラム・マネージャー：
ブラウザやデバイスもバージョンアップされますし、
HTMLなどの要素技術も日々アップデートされています。

デザインシステムのアクセシビリティを確保し続けるためには、
こうした状況の変化をキャッチアップして
更新し続ける必要があります。

（映像：カメラに向かって話す須藤 雅人デザインプログラム・マネージャー）

07:34〜08:04_右上
デジタル庁デザインシステムβ版の現在

現在、デジタル庁デザインシステムはβ版という位置づけです。
今後、更なるコンポーネントの拡充が大いに必要なのと、
ドキュメントの整備やサンプル実装、作例の充実などが
現状まだまだ足りていない状況です。

ウェブ開発の視点で言えば、デジタル庁デザインシステムのように
本当にアクセシビリティファーストを追求している現場というものは
非常にチャレンジングだと思います。

ナレーション：
今後もデジタル庁は行政のデザインや
アクセシビリティ向上のために取り組んでいきます。

デジタル庁デザインシステムβ版のウェブサイトをぜひご覧ください。

（映像：カメラに向かって話す須藤 雅人デザインプログラム・マネージャー）

テロップ：
デジタル庁デザインシステムβ版
https://design.digital.go.jp/

テロップ：
「デジタル庁」