デザイン記録_20240110

れい
·

今日も頑張ります!

【Webサイト】都湯-ZEZE-

1.銭湯を意識したアニメーション

  • 1番上に表示されている湯気のアニメーション

  • ハンバーガーメニュー等、波のアニメーション

  • 新着アイテム部分の看板猫が出てくるホバーアニメーション

  • メインビューの「キモチィー」と表示されるアニメーション

このような様々な場所にアニメーションが表示されていますが、その多くは温泉に入った際の叫びや銭湯そのものを表しており、これらのアニメーションによって銭湯「都湯-ZEZE-」の世界観が形作られているように思われます。

このようなインパクトのあるアニメーションがあれば、この銭湯に興味を持ち、訪れたいと考える方も増えるのではないでしょうか。

2.アクセントカラーが多いのにまとまっている

  • #E52229(赤)

  • #00a0e9(水色1)

  • #e6f5fb(水色2)

  • #008d22(緑)

  • #dd9454(オレンジ)

  • #FDF10E(黄色)

TOPページだけでこれほどのアクセントカラーが使われていましたが、サイト全体がカラフルながらもまとまりがあると感じました。

色のトーン(明度と彩度)が同じだからかな〜とも思いましたが、再度考えてみると要素ごとに十分な余白が確保されており、それぞれの色の印象があまり強くなかったためだと推測しています。

色のばらつきが発生すると、サイトの統一感が失われ見づらくなる可能性があると考えられます。

色のばらつきを抑えるためには、十分な余白が必要だと思います。

最後に

配色って難しいですよね...

@raynya
Webデザイナーです。