デジタル庁デザインシステムβ版を読んでみた！

こんにちは、プロクラスの渡辺です！
みなさんは「デジタル庁デザインシステムβ版」というものはご存じでしょうか？
出てきはじめたことはSNSでWEB業界の方がよく取り上げていたかなと思うんですが自分でも読んでみると結構面白かったので紹介します！
あと基本デザインのカラーアクセシビリティについてもちょっとだけ触れたいと思います 😉

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

上記のサイトを開くとまずデザインシステムについての説明があります。

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

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

出典：デジタル庁デザインシステムウェブサイト https://design.digital.go.jp/

当たりまえですけど、ちゃんとしてる～！
アクセシビリティについても触れられているので、アクセシビリティを考慮したサイトをデザインする方はこのデザインシステムを読んでおくとよさそうです。

サイトの目次としては

はじめに（利用方法とか大切な事色々書いてあるよ）
ガイダンス（まず読んでおく）
基本デザイン
コンポーネント
リソース

という感じでした。

結構面白かったって何が？

最初に「結構面白かった！」と書いたのですが、めちゃくちゃ大切なことが書いてあるサイトなので何が面白いんだ…って感じなんで面白いところつらつら書きます。
デザインをすでにしている人にとっては知識のアップデートに繋がりますし、これからWEBデザイン勉強したいという人にとっては分かりやすい教材のひとつになるな～と思います。

基本デザイン項目の中に「余白」があるの最高

WEBデザインにおいての基本的な知識も分かるようになっています。
それと同時に、例えば「内部リンクと外部リンクって？」ということも説明があるので、正直感覚で会得した私は言語化されていて感動しました 😆
「分かってる・知っている」んだけど「それをちゃんと文字にして説明する」のは自信がない場面が多いので、新しい発見も多く楽しいです！

あと、最初にあるようにアクセシビリティについても途中途中でしっかり話があるので、読んでいくとなるほどな～と納得できて本当にいい教材です…
「もっと詳しく見る」使いがち～ 😳

基本デザインの中に「余白」があるの推せます。
デザイナーになってまず躓くであろう「余白」！余白に困ってるデザイナーみんな読んで！！！

コンポーネントは9割準備中

それだけ大変ってことです、コンポーネントを用意するっていうのは。
ただ、随時更新されているので時々見に来ようと思います。

あくまでもデジタル庁が提案するデザインシステムなので、この通りにしなさい！というわけではなくデザイナーは都度コンセプトやテーマにあったデザインを用意していくわけですが、「セオリー」が分かるのがとってもいい！
『本当はあんまりよくないんだ～』っていうものもあれば『アクセシビリティに対応するならこうしたらいいんだな』というのもあるので面白いです！

セオリーを掴んでないと、外れることもできないのでコンポーネントも読んでほしい内容です。
今後、このコンポーネント項目が増えていけば「こういう時はこうするよね」というセオリーがあるのでデザイナー⇔プログラマ間の情報共有にも便利そうです 🙄