新潟の映像制作・Web制作・オンライン配信はCreative. LAB | ブログ | デジタル庁が公開しているデザインシステムとは

デジタル庁が公開しているデザインシステムとは

デザイン

2024-04-19

こんにちは、Creative.LABのスタッフY.Mです。

デジタル庁は、「誰一人取り残されない、人にやさしいデジタル社会の実現」を目指しています。障害のある人や高齢者も含め、誰もがウェブ上の情報やサービスをスムーズに利用できるように、デジタル庁はウェブアクセシビリティに取り組んでいます。

各府省庁のホームページは、これまで独自のデザインで展開され、統一性がなく、ユーザビリティや管理のしづらさが課題となっていました。
そこで、デジタル庁は統一されたデザインシステムを導入しました。これにより、政府のデジタルサービスが一貫性を持ち、利用しやすくなりました。
このデザインシステムは、府省庁や自治体だけでなく、幅広いユーザーが利用できるようFigmaで無料公開されています。
今回はデザインシステムの内容を抜粋してご紹介します！

デジタル庁デザインシステム
https://www.digital.go.jp/policies/servicedesign/designsystem

■スタイル

スタイルには、カラー、タイポグラフィ、レイアウト、余白、画像、角丸、リンクテキストなどの内容がまとめられています。
いくつか抜粋してご紹介します。

・カラー
機能的に使いやすいカラーを定義し、統一されたカラーパレットが提供されています。また、バックグラウンドやテキストの色合いなど、アクセシビリティを考慮した配色も指定されています。

・タイポグラフィ
ヘッダー、本文、リンクなど、異なるコンテンツに適したスタイルで、テキストのフォントファミリーやサイズ、行間などのタイポグラフィスタイルが定義されています。これにより、統一された見栄えと読みやすさが確保されます。
デジタル庁では「Noto Sans JP」を採用しており、本文は16pxとなっています。

・レイアウト
ウェブページやアプリのレイアウトに関するガイドラインが含まれています。これは、ヘッダー、ナビゲーション、コンテンツエリア、フッターなどの各セクションの配置やサイズ、間隔などを指定します。さまざまな画面サイズやデバイスに対応したレスポンシブデザインの原則も記載されています。