ボタンやフォームなどのデザインが変わりました

今回のリリース内容

弊サービスも作り始めてから7年以上の月日が経過し、細かなアップデートが必要な場所が出てきており、日々対応しています。
その一環として、今回はボタンやフォーム等のデザインパーツのデザインの微調整を行いました。

image.png (281.8 kB)

大きなポイントとしては、下記のような感じです。

  • ボタンの端っこは丸くなりました
  • ボタンの微妙な立体感をなくし、平坦になりました
  • スケルトン（線のみ）のボタンが増えました
  • 四角いモジュールの角丸半径が従来よりも大きく丸みをおびるようになりました
  • フォームの input や テキストエリア等の色味が少し変わっています（従来よりも少しやわらかな感じになっています）
  • 上記のデザイン変更に合わせて、要素間、要素内のmargin や padding を微調整してます
    • 一般的に角丸半径が大きくなると、そのぶん空間が多くとった方が整って見えるので、そのへんの調整を行っています

最近のデザイントレンドとして、角丸の半径が大きいものや、空間を大きく取っているものが多くなっていることや、より繊細な影を使った質感表現などを取り入れてみたいと思いました。
また、丸いパーツのほうが(\( ⁰⊖⁰)/)の雰囲気にも合っていると感じています。

ちなみに esa のボタンやフォームのパーツは Bootstrap 3.x 系 をカスタマイズして作っており、パーツの角丸サイズや基本的なpaddingサイズ、色などは Bootstrap の Sass にもともと用意された変数で管理できているため、ほぼ変数を書き換えるだけで、割と楽に上記のような変更を行うことができました（部分的にはCSS自体の上書きも必要です）。
Bootstrap 3系自体かなり古いものなので色んな面で不都合もあり、esaも徐々に依存を外していますが、部分的にはまだまだ便利に使うことができたりもします。

所感

これからも色々とアップデートしたい箇所をたくさん予定しているので、日々やっていきたいと思います。
基本方針としては、画面や使用感がガッツリ変わってしまうような大きなリニューアルはなるべく避けて、過去の資産も活かしつつ、日々少しずつの変化の積み重ねでだんだんと良くなっていけるといいなあと思っております。
これはこれで、どんな手順で変えていけばいいのか…とか、ここを変えるにはまずこっちを直さないと…などなど悩ましいことや外から見えない地味な作業も結構出てくるのですが、まあ楽しくやっています。
何かありましたら、引き続きフィードバックお待ちしております :esa2:

[ProTip] Webhookでdocs.esa.ioの更新通知を受け取れるようになりました!

Enjoy "(\( ⁰⊖⁰)/)"
https://esa.io

END

  • Close