デジタル庁のデザインシステムを学んでみた
こんにちは！ゆかっしゅ（@kaname_shimizu）です。
今回はデジタル庁のデザインシステムを学んでいきたいと思います！
自己紹介
氏名：ゆかっしゅ
年齢：29歳
最終学歴：管理栄養士の専門学校卒（4年制）
職歴：2017年4月 新卒で医療業界の人事部配属（1年半）
2018年11月 ITベンチャーに転職しバックオフィスを担当（3年）
（WEBデザイナーのウの字もない。。。。）
2022年1月からWEBデザイナーデビュー
2023年1月-2023年11月 産休育休
2023年12月 職場復帰
最近のゆかっしゅ：MリーグU-NEXT Pirates優勝おめでとう！
デジタル庁のサイト、ここがすごい
仕事の時上司が「そういえば、デジタル庁すごいんですよ」と教えてくれたことがきっかけでこの記事を書きます。
パッと見はシンプルな見た目で「？？これ凄いんか？？」って感じですが、このサイトの「ここがすごい！！」点をまとめてみました。
デザインシステムが構築され、公開されている
なんと、デジタル庁サイトで使用されているデザインシステムを公開しています。そもそもデザインシステムとは何かというと、
デザインシステムとは「あるべきデザインを一貫性を持ってユーザーに提供するための仕組み」。
Figmaを見てみるとわかるのですが、サイトに使用されている色、フォント、余白やコンポーネントを細かく定義して「なぜそれを採用しているのか？」などの理由もしっかり記載されています。
また、アクセシビリティにも力を入れておりウェブアクセシビリティ導入ガイドも載っています。
もはや教科書レベル….すごく勉強になります….
デザイナーの方は是非ご一読ください！
12カラムグリッドデザイン
試作版では12カラムグリッドデザインを採用されていたそうですが、現在はflexboxとmarginを使っているみたいです。デザインシステムにはグリッドレイアウトに関して記載があります。
最近12カラムグリッドレイアウトのサイトを見るのですが、余白が綺麗で整理整頓されていてとても綺麗だと思います。
12カラムグリッドレイアウトのメリットはレスポンシブデザインにおけるレイアウト調整がしやすい点で、デメリットはデザインの融通があまり利かないことだと思います。
阿部寛のサイト並みに速度が速い
阿部寛のサイトは速いで有名ですが、同じくらいデジタル庁サイトも速いです。使用されているのはDrupalというCMSです。
まとめ
デジタル庁のデザインシステムは本当に勉強になることが多かったです。
大規模な案件ではこのようなデザインシステムを構築するとスムーズに開発が進むのではないかと思いました。
割とフォントサイズや余白はなあなあになっているので、次回自分がデザインをするときはこちらのデザインシステムを参考にしっかりデザインしていきたいと思いました。
この記事が気に入ったらサポートをしてみませんか？