Card Designer

システム開発では、エンド顧客向けビュー以上に、管理者向けコントロールパネルと格闘している時間の方が多かったりする。
また、お金を出す人向けにもコントロールパネルの見た目も重要なはず、なのだが、あまりそこに工数をかけることはできない。
モノトーンで揃えるとまとめやすいから多用するのだけれども、階層が増えるにつれて微妙な色の差が増えて、地と図の区別がつきにくくなる。

そこで、色のバランスや背景パターンを試せるツールを作ってみた。
特にパターンの指定ができると地表現のバリエーションが増やせそうだ。CSSに埋め込めるのも気に入っている。

*懸念点
・液晶画面によってはコントラストが弱いとつぶれる画面も多そうなので、若干コントラスト強めにしたけれども、、、どうだろう。
・パターンの画像が小さい(4px四方)けど、レンダリングに負荷はかかってないだろうか、ちょっと心配。20数年前、htmlでこれぐらい小さいが画像を敷き詰めると、レンダリングしていく様子が目で追って見えたのを思い出してしまう。その時は、あえて50px四方くらいの画像にしてしのいだのだが。

◆ソース
https://github.com/umhr/CardDesigner

◆参考
Base64エンコーダー (画像を簡単に変換)
https://lab.syncer.jp/Tool/Base64-encode/

Blob
https://ja.javascript.info/blob