いまさらながらデジタル庁のWebサイトのヤバさを鑑賞する👀 【今週の”発見”】
お久しぶりです、poypoyのIT部門担当のoyaizです。
先日リリースしたゲームアプリ『poypoy』の開発に没頭しており、なかなかブログ記事を書けておりませんでした……
今回は、2021年に発足したデジタル庁のWebサイトについて、ヤバいポイントを一緒に鑑賞しつつ、現代のWebサイト構築について学んでいこうと思います。
気合を入れて記事を書いたので、よければ最後までお読みください！私が喜びます。
デジタル庁は実はヤバい（いい意味で）
デジタル庁のWebサイトはヤバいんです。私個人だけ意見ではありません。 IT界隈で割と言われています。
一般の方々にヤバさがほとんど認知されていないのがなんとも由々しい。
何がヤバいのかを解説する前に、とにもかくにもまずはサイトを実際にご覧いただきましょう。
パッと見、手抜きデザイン？
白と黒の2色で構成されている上に、見出しやリンク等に装飾が一切ありません。
ここだけ注目すると、一見手を抜いたデザインのように感じます。
以下のスクリーンショットは、それが特に顕著なページです。
リンクが青色なのが、「CSSを設定していない昔ながらのWebサイト感」満載ですよね。
ですが、実は手の込んだデザインをちゃんとした結果が、この見た目となっています。
すなわち「デザインし尽くされている」と言っても過言ではない！
これを強調したい。
デジタル庁が構築した独自のデザインシステム
デジタル庁のWebサイトが「デザインし尽くされている」と言えるのは、独自のデザインシステムを採用しているからです。
デザインシステム（デジタル庁）：https://www.digital.go.jp/policies/servicedesign/designsystem
デジタル庁の説明を要約するとデザインシステムとはアクセシビリティ等が高く一貫性のあるデザインや操作性を提供するための仕組みのことです。
このシステムは、官民問わずすべての人が自由に使えるように一般公開されています。この時点ですでにヤバいですよね。
それはさておき、
このシステムをデジタル庁のサイトにも適用しています。
つまり、一見手抜きデザインのように感じたサイトは、実は、誰もが使いやすくアクセシビリティの高いデザインにした結果だったのです。
見栄えを凝り過ぎると、かえってアクセシビリティを低下させるため、あえてシンプルなデザインになっているのです！
実際にデジタル庁のサイトを閲覧してみてどう感じましたか？
他の官公庁のサイトや企業のサイトよりも、シンプルでわかりやすいですよね。
デザインシステムのヤバいポイント
ここからは、デザインシステムのヤバいポイントを順番に鑑賞していきます。
1. カラー
カラー（デジタル庁）：https://design.digital.go.jp/dads/foundations/color/
配色のあり方について詳しく記述されています。
キーカラー、共通カラー、機能カラー、アクセントカラー、セマンティックカラーの５種類に分け、それぞれの役割や配色決定の指針などが書かれています。
コントラス比の要件や色覚多様性への配慮といったアクセシビリティの留意点はもちろん、カラーパレットや配色の例も掲載されています。
民間の企業はおろか他の官公庁ですら、ここまで配色に気を配ることは稀でしょう。
デジタル庁恐るべし。
2. タイポグラフィ
タイポグラフィ（デジタル庁）：https://design.digital.go.jp/dads/foundations/typography/
そもそもタイポグラフィとはなんでしょうか。
デジタル庁の説明を意訳すると、可読性やユーザ体験を考慮した文字のあり方のことです。
フォントや行間、スタイルや文字装飾といった、タイポグラフィーの基本のキについて、詳しく・わかりやすく記載されています。
ごくありふれた内容ですが、ひとつのページにすべてがまとまっているのは非常にありがたいです。
これだけ聞くと特にヤバさは感じないでしょう。
そうなんです、ヤバいのはそこじゃないんです。
私がヤバいと感じる一文を引用しましょう。
デジタル庁デザインシステムでは、書体（Typeface）には可読性や視認性が高いサンセリフを選定しています。 フォントはオープンソース（SIL Open Font License 1.1）で、かつWebフォントとしても利用可能な「Noto Sans JP」と等幅フォントの「Noto Sans Mono」を採用します。
いや〜、これはなかなかヤバいですね。
（さて、私みたいにこのヤバさを実感できる人はいったいどれだけいるのでしょうか……笑）
何がヤバいのかというと、官公庁がNoto Sans JPを採用しているところが異常事態なんです！
Noto Sans JPとはAdobeとGoogleが共同開発したオープンソースのフォントで、可読性の高いフォントとして日本では広く採用されています。
民間企業や個人のサイトでは一般的に採用されていますが、官公庁が採用しているところを見たことがありませんでした（もしかしたら、採用しているところもあるかもしれません）。
古臭いイメージのある官公庁が極めてモダンなフォントファミリーであるNoto Sans JPを採用したという事実が、ヤバいというわけです。
3. レイアウト
レイアウト（デジタル庁）：https://design.digital.go.jp/dads/foundations/layout/
デザインシステムでは、グリッドシステムと呼ばれる方式を採用しています。
グリッドを基準としたレイアウトで、目新しいものではありません。
グリッドシステム自体は普通ですが、その徹底さがヤバいポイントです。
私はまったく気づけなかったのですが、デジタル庁のサイトでもデザインシステムに従って12カラムグリッドで徹底的に統一されたレイアウトになっているのです！
（詳しくは、この記事の最後に載せたmu_tomoya氏のQiitaの記事を読んでください）
これによって、すべてのページのレイアウトに統一感が生まれてユーザ体験が向上するほか、デバイスの横幅によってレイアウトが崩れることも避けられます。
ここまで徹底したサイトは、官民問わず初めて見ました……
4. 余白
余白（デジタル庁）：https://design.digital.go.jp/dads/foundations/spacing/
「デザインは余白が9割」と、あちこちで耳にします。
まさにその通りで、余白を適切に使わなければ、ユーザ体験は低下してしまいます。
デジタル庁のデザインシステムでは、余白の取り扱いについてこれでもかと思うほど詳細に記述されています。
中でもヤバいのが、エンジニアを刺しにいく見出しです。
引用して見せましょう。
空白や両端揃えを使ってレイアウトを調整しない
CSSを触ったことがない人には何のこっちゃと思うでしょうが、一度でも手を抜いたことのあるフロントエンジニアにはグサりと刺さります。
簡単に説明しましょう。
レイアウトを整える作業で手こずった際に、姑息（一時しのぎ）な手段として空白や両端揃えを用いることがあります。しかしそれをすると、目の不自由な方が使うスクリーンリーダー（文章読み上げ）に支障をきたしたり、単語間に不自然なスペースが意図せず生まれて認知しづらくなったりするのです。
だから、絶対に空白や両端揃えでレイアウト調整するな！とデジタル庁は警告しているわけです。
私自身、手を抜いて空白を使ってレイアウト調整したことがあるので、反省です。
にしても、ここまで配慮するとはデジタル庁のヤバさが知れますね。
5. デザインシステムの公開方法と内容物
リソース（デジタル庁）：https://design.digital.go.jp/dads/resources/
記事のはじめの方で、「システムは官民問わずすべての人が自由に使えるように一般公開されてる」と書きました。
ここで気になるのが、何をどのように公開しているのか。です。
リソースのページを見てみると、
- デザインデータ（Figma）
- コードスニペット（HTML版） GitHubリポジトリ
- コードスニペット（HTML版） Storybook
- コードスニペット（React版） GitHubリポジトリ
- コードスニペット（React版） Storybook
となっています。
なんと、Figma、GitHub、Storybookで公開しているんです！ヤバくないですか？
官公庁がこれらのプラットフォームを使うなんて、誰が想像できたでしょうか。
やはり、デジタル庁は民間の人材を引っ張ってきただけあって、IT業界がどのプラットフォームを使っているのかよくわかっていますね。
加えて、コードスニペットのReact版を提供していることも、かなりヤバいポイントです。
官公庁といったらHTMLかjQueryかWordPressしか使ってこなかったため、React.jsというモダンなサイト構築に対応しているのははっきり言ってヤバいです。
ヤバいポイントはこれだけじゃありません。
デジタル庁はデザインデータとコードスニペットでは飽き足らず、なんとイラストとアイコンの素材集も公開しています！
イラストレーション・アイコン素材（デジタル庁）：https://www.digital.go.jp/policies/servicedesign/designsystem/Illustration_Icons
2025年11月時点で、約360種のpngアイコン・約120種のsvgアイコン・約80種のpngイラストを自由にダウンロードさせてくれます。
行政文脈のアイコン・イラストが中心とはなりますが、これだけのデザインを独自に作成し、しかも無料で自由に使わせてもらえると考えると、デジタル庁のヤバさがお分かりいただけるでしょう。
デザインシステム以外のヤバいポイント
デザインシステムだけでもデジタル庁のヤバさが十分伝わったかと思いますが、Webサイトの作り込みもなかなかのヤバさがあります。
1. すべての画像に詳しい代替テキストが付与されている
ブラウザの開発者ツールを開いて画像要素にフォーカスしていただくとわかりますが、なんとサイト内のすべての画像に代替テキストが丁寧に付与されています。
上のスクリーンショットの例だと、トピックスのサムネイルに付与されている代替テキストは
デジタル庁「法令」×「デジタル」 ハッカソン 2025年12月9日（火）から2026年3月10日（火）。画像の右側には2人の人物が座っており、1人がPCを操作し、もう1人がペンをもって机に向かうイラストが描かれている。
となっています。
「官公庁のサイトなんだから代替テキストつけるのは当たり前じゃない？」と思うかもしれませんが、それは大間違いです！
他の官公庁のサイトでもせいぜい一文の代替テキストしかありませんし、内閣府に関してはもはや代替テキストの意味をなしていません！
上のスクリーンショットをご覧いただくとわかりますが、内閣府の記事内画像の代替テキストは「写真1」としか書かれていません。 ちゃんと書いている方の経済産業省でも「ふくしまの今 震災情報等はこちらをご覧ください」と最低限の説明しか付与されていません。
（普通は経産省のように最低限の情報だけで十分です。デジタル庁がすごすぎるだけです。）
デジタル庁ほど丁寧に代替テキストを付与しているWebサイトは他にあるでしょうか。
そう感じるほど、デジタル庁のアクセシビリティ観点への配慮は徹底されています。
2. Next.jsで作られている
これまた、mu_tomoya氏のQiita記事で知ったことなのですが、デジタル庁のサイトはなんとNext.jsで作られているそうです！
（※何を言っているかわからない方は読み飛ばしてください）
React版のコードスニペットを公開していることからもわかるとおり、現代的な技術がふんだんに用いられていて、他の官公庁とは一線を画すWebサイトの作りとなっています。
フロントエンジニアならこのヤバさがきっとわかることでしょう。
デジタル庁のサイトのヤバさをお分かりいただけただろうか
ここまで読んでくださった方なら、デジタル庁のサイトのヤバさが十分伝わったことでしょう。
誰ですか？「パッと見、手抜きデザイン」なんて言ったのは？（私です）
デジタル庁のWebサイトは、この上ないアクセシビリティへの配慮の象徴であり、そしてモダンな技術を取り入れたという官公庁の革新の象徴でもあるのです。
いち官公庁がここまでのサイトとデザインシステムを構築するという偉業を成し遂げたデジタル庁には、「ヤバい」が一番の褒め言葉ではないでしょうか。
ここまでデジタル庁のサイトのヤバさを鑑賞してきましたが、この洗練されたデザインとサイト構築は、フロントエンジニアの手本のような存在です。
私もデジタル庁のデザインシステムをひと通り読んで、アクセシビリティの高いサイトづくり、アプリづくりを目指したいと思った次第です。
エンジニアに限らず、ぜひデジタル庁のこのヤバさを周りの人にも教えてあげてください！
参考記事
こちらもとても興味深いので、よろしければお読みください。
デジタル庁「やさしいサービスをすばやく届ける、デザインシステムの取り組み」『note』：https://digital-gov.note.jp/n/ne45bcdd43299
mu_tomoya氏「デジタル庁のサイトやばすぎるwww」『Qiita』：https://qiita.com/mu_tomoya/items/f78f1fad3a8b57ac7dc3