見出し画像

「デジタル庁・デザインシステム」から学ぶ|UIデザインの基礎をやり直し - 4

やること

食べて行けてはいるが、UIデザイナーとして自信・責任を持って仕事に取り組めていない。という課題に取り組むシリーズ。

今回はデジタル庁が公開しているデザインシステムを読み、UIデザインの”お約束”について再学習する。


ガイダンス


使い方

デザインシステムstorybookともに、ロールに応じた使い方が明記されている。自社ではこれが不足しており、感の良い人だけが使いこなせている状態。これは見習いたい。


スタイルガイド

企業型デザインシステム:固有の組織に依拠したブランド概念やコミュニケーション方針・世界観におけるトーンアンドマナーを含む
(デジタル庁のデザインシステムは、そうじゃないよという説明)

企業型デザインシステムの場合、基本的にそのままスタイルガイドとして使用できる。ただし個々のプロダクトで、デザインシステムのプリミティブな定義だけでは足りない場合、デザインシステムで提供される枠組みの中で、スタイルガイドに独自の規定を追記して使用する。

Webのデザインシステムが、アプリでそのまま使えないので、アプリ専用のスタイルガイドを作った。みたいなことが起きるってことか。



カラーのコントラスト比問題(レベルAA)


コントラスト比 3:1

対象:
- 24 CSS px以上のテキスト
- 18 CSS px以上の太字テキスト
- 文字画像
- フォーカスインジケーターなどの非テキスト要素

対象外:
- disabled状態
- 純粋な装飾・意味的に視認できる必要のない文字(写真の中とか)
- ロゴ・ブランド

背景が白での場合、担保できる一番薄い色 #949494


コントラスト比 4.5:1

対象:上記に記載しなかった、テキスト・文字画像
背景が白での場合、担保できる一番薄い色 #767676



色覚多様性への配慮

1型色覚・2型色覚:おおまかに赤近辺の色と緑近辺の色の識別が困難で、色合いによってはまったく見分けがつかない。



レイアウトとZ軸

めちゃくちゃ分かりやすい。忘れたらすぐこれを読もう。

グリッドシステム

エレベーション

Material Designガイドラインは以下


今回は以上…ッ!




メモ:これは手元になかったので読んでないが、デジタル庁資料で代替する。



いいなと思ったら応援しよう!