
「デジタル庁・デザインシステム」から学ぶ|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ガイドラインは以下
今回は以上…ッ!
メモ:これは手元になかったので読んでないが、デジタル庁資料で代替する。