【UIデザイン編】ベーシックなhoverデザインを10個まとめたよ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

こんにちは。デザイナーのトミーです。 「WEBデザインをはじめよう」今回のテーマはUIデザインです。 Webサイトを構成するさまざなUIパーツについて、デザインを始める前に頭に入れておきたい基本的なポイントをご紹介していきます。今回のテーマは「ホバー(hover)」です。 3〜4年前のサイトでは、現在のコンバージョンボタンのように、グラデーションでhoverして反転するような表現が多かったと思います。しかし、インタラクションを多く含む要素が多くなってきたことや、デザイン性、操作性を考え、様々な表現を見かけるようになりました。css3以降、コードで表現できる幅が広がりサイトにも動きが出てきています。今回は、ベーシックなものをおさらいしてみます。 参考サイトでは、上手に表現しているサイトをご紹介します。 1. Reverse LIGのpagetopなんかもこれですね。最もbasicなスタイルで