デジタル庁デザインシステムはマークアップ視点を入れてほしい
デジタル庁デザインシステムが話題ですね。
ウェブアクセシビリティ導入ガイドブックと合わせて、とても素晴らしい取り組みと思っています。
デザインシステム自体はFigmaで公開されていますが、実装は行われていないということで、個人的にreactでUIコンポーネント化する取り組みを行っています。
実装を進める中でデザインシステムの問題点が見えてきたので、そのうちのいくつかをピックアップしました。
問題点
- マークアップの視点がない
大きなくくりだとこの1つにまとまります。
デザイナーが大きくかかわっていることはfigmaから感じ取ることができますが、どうもマークアップ側の意見が取り入れられていない気配がします。
以下マークアップ視点がないことによる問題点一覧
- focus状態がわからないコンポーネント
- 選択状態かつdisabledのスタイルがない
- radio、checkboxのターゲット領域がlabel必須
- リンクのhover,focus時の色変化が弱い（underlineの変化もない）
- 文字が小さい
- font-weightのRegularとMediumの使い分け
- PCのみが想定されたテキストサイズ
- コンポーネント一覧に存在しないコンポーネント
- tableセルの高さ指定
- 使い方がわからない角丸
重箱の隅もあればデザインシステムとして難しいところもあると思います。
Form系
focusスタイルがわからないコンポーネント
問題点：
ボタンやテキストインプットにはfocusスタイルが存在しているが、radio、checkboxには存在しない。
改善案：
入力を受け付けるコンポーネントはfocusスタイルを用意する。
alert時のfocus状態もわかるとベストですね。
選択状態かつdisabledのスタイルがない
問題点：
インプット要素はdisabledでも選択済み、非選択の状態がありますが、デザインシステム上、選択状態かつdisabledのスタイルがない。
改善案：
disabledスタイルを非選択のみではなく、選択状態のスタイルを用意する。
radio、checkboxのターゲット領域がlabel必須
問題点：
radioとcheckboxにおいて、ターゲットエリアの指定があり、その範囲が<label>で囲むことを前提としたものになっています。
labelが必須になる場合の問題として、右側のテキストラベル部分で補足説明などがある場合、すべて一つのテキストになってしまうため、内容によってはスクリーンリーダーなどで理解が難しくなる可能性があります。
またlabel内では利用できるhtml要素が限定されるため、コンテンツが制限される可能性もあります。
改善案：
inputとlabelを分離しターゲット領域もそれに合わせたものにできると、実装面で今後の展開の幅が広がります。
テキスト系
リンクのhover,focus時の色変化
問題点：
リンクのhoverの色変化が弱い、またunderlineの変化もない。
リンクのfocus時、色変化がなくアウトラインのみになっている。
改善案：
この程度の変化なら変化なしのほうがシンプルで好みです。
分かりやすさでいえば、色変化を大きくする、もしくはunderlineを表示非表示を切り替えるなどの対応がしたいところです。
またfocus時に色変化がないところも少し気になります。hoverとfocusは分けなくてもよいのでは。
文字が小さい
問題点：
最近のwebの文字サイズは16pxがベースで、デザインシステムで利用されている文字サイズが全体的に小さい印象です。
本文は16pxですが、ラベルは14pxなど、目立つべきものが小さくなっているのは謎。そして相対的に見出しは大きめ。
改善案：
16pxをベースにする。目立つべきものは小さくしない。
※こちらについては個人的な好みも大きい。
※「補足M」は10pxになっていてこれはwebで表示できる最小値です。
「デジタル庁」や「各省庁」での利用を想定したデザインシステムで、この文字サイズを定義するのは本当に必要でしょうか。
font-weightのRegularとMediumの使い分け
問題点：
font-weightが文字サイズやデバイス（画面幅）によりRegularとMediumで切り替わる。
フォントはNotoSansJPが定義されているので、RegularとMediumを利用することはできますが、使い分けする必要性がわかりませんでした。
画面幅により文字サイズが変わることはよくありますが、weightまで変えるのは珍しい。というより個人的には初めての経験でした。
この実装を行う場合、cssも複雑になってしまいます。
改善案：
RegularとBoldの2種類にする。
PCのみが想定されたテキストサイズ
問題点：
文字サイズの定義でXXL、XLにモバイルの指定がない。
XXLが指定されたテキストはモバイル時に小さくならないのでしょうか？もしくはPCのみで表示されるとき限定なのか。
改善案：
モバイル用文字サイズも定義する。
アクセシビリティの点からみてPCで表示されているものはモバイルでも表示されている必要があるのでモバイル用の文字サイズ指定が欲しいところです。
その他
コンポーネント一覧に存在しないコンポーネント
問題点：
デザインシステムのFigmaには「スタイル」「コンポーネント」「テンプレート」がありますが、「テンプレート」内に「コンポーネント」で定義されていないコンポーネントが多数存在する。
改善案：
ガイドラインの中で利用しているパーツはコンポーネントとして定義する。
運用する中で独自コンポーネントが増えていくことは普通ですが、ガイドラインライン資料の中で利用するコンポーネントは「コンポーネント」として定義されていると混乱せず無駄なく実装が行えます。
tableセルの高さ指定
問題点：
テーブルコンポーネントのそれぞれのセルの高さが80px指定になっており、CSSではテーブルセルにmin-heightが設定できないためこのテーブルコンポーネントは作ることができない。
（各セルのpaddingは8pxが設定されている）
各セルの上下paddingを24px程度にすることによりテキストが1行の時のみデザインを再現することはできますがそれは想定していないはず。
改善案：
高さの最低値は定義しない。セルのY方向のpaddingの定義とどめる。
使い方がわからない角丸
問題点：
短辺によりR値が変わる仕様をどのようにwebに取り入れればよいのかわからない。
改善案：
具体的な例があれば実装に取り込めるかもしれません。
結論
あれこれと問題点を記載しましたが初めに書いたように「マークアップの視点がない」ために起こっている問題が多いなという印象です。
デザイン的によくまとまっていると思いますが、どうしてもFigma上だけでデザインを考えたものになっていて、実際のwebでどうなるのか、htmlでどのように実装できるのかという視点が抜けている。
今後このデザインシステムをさらに活用し、他の省庁にも波及させていくのであれば、マークアップ領域とデザイン領域で意見を交わしよりよいデザインシステムになるといいなと思います。
Discussion