Design Systemの作り方シーズン3〜透過を駆使しよう〜

Design Systemをどう作っていくかは、色々試行錯誤があります。
シーズン1とシーズン2を経て、プラスこんなことも考慮すると作りやすくなっていくという小技編のご紹介です。

今回は色について。
シーズン1で触れた、色のスタイルは設定しておきましょうというお話で、小さく「透過も一緒に作っとくと良い」という一文を書いていました。

透過のカラースタイルを登録しましょう

なぜ透過があると良いのか、

例えばですが、背景色やテキストフィールドのあるダイアログ画面を作ったとしましょう。

透過ってオーバレイとかするときの背景くらいしか使わないんじゃないの？
とお思いの方々へ。
そんなことないんです。

透過を使わないUIを設計した場合、下の画像のように、背景色が変更するたびに適正なカラーに全てを置き換えていく必要があります。

黄色い枠になっているところが変更した色

では、透過でUIを作ってみるとどうなるでしょう。

下の画像はテキストフィールドの背景やボーダーなど全て透過の色で作ったものです。

黄色い枠になっているところが変更した色

パッと見た時の印象値は変わらないと思いますが、黄色く枠で囲った部分が背景色変更時に色変えを対応した箇所になります。

圧倒的に作業量が減っているのがわかるでしょうか。

これだけだとわかりづらいと思うのでもう一枚画像を用意しました。

背景色を変更したもの

上の段は、フォームやボーダーの色を透過を使わず作ったもの
下の段は、フォームやボーダーを透過のカラースタイルで作ったもの

どちらも同じように背景色のみ変更しました。

透過を使っていると背景色が変わっても、ある程度汎用性のあるデザインになっていると思います。

ただし、
どうしても背景色一つ一つに合わせて作るわけではないので、多少のデザイン性が落ちる場合はあります。

デザインクオリティを上げるため、全てを指定カラーで作るのももちろん正解ですし、ある程度のクオリティは目を瞑って汎用性の高さを優先させるのも、そのデザインを作る上での工数や時間、優先度との兼ね合いだと思います。

ダークモードの登場でカラー設定など考えることが増えた昨今、いかにメンテナンスしやすくミスも少なく運用できるかはキモになってくると思うので、参考までにこういう方法もあるということをお伝えできればと思いご紹介させていただきました。

特にボーダーなどは色変更の際見落としたり差分がわかりづらかったりするのでこういった手法で楽していいデザインを作って行けたら何よりです。