Web無料相談会2018冬
Web無料相談会2018冬
2016.11.10
#25
WEBデザインをはじめよう

【UIデザイン編】ベーシックなhoverデザインを10個まとめたよ

トミー

こんにちは。デザイナーのトミーです。

「WEBデザインをはじめよう」今回のテーマはUIデザインです。

Webサイトを構成するさまざなUIパーツについて、デザインを始める前に頭に入れておきたい基本的なポイントをご紹介していきます。今回のテーマは「ホバー(hover)」です。

3〜4年前のサイトでは、現在のコンバージョンボタンのように、グラデーションでhoverして反転するような表現が多かったと思います。しかし、インタラクションを多く含む要素が多くなってきたことや、デザイン性、操作性を考え、様々な表現を見かけるようになりました。css3以降、コードで表現できる幅が広がりサイトにも動きが出てきています。今回は、ベーシックなものをおさらいしてみます。

参考サイトでは、上手に表現しているサイトをご紹介します。

1. Reverse

hover-1

LIGのpagetopなんかもこれですね。最もbasicなスタイルです。

2. Opacity

hover-2
onlystudio

透過表現も良く利用されていますよね。大きなオブジェクトをhoverする時や、目のストレスを与えない優しい印象を与えたい時。デザインの印象を大きく変えたくない時などに向いています。

3. Background

hover-3
takaya ohta

非hover時のデザインをシンプルにしたい場合に用いる手法です。少し応用編ですが、参考サイトでは、別のオブジェクトがhoverで変化します。hoverで詳細まで伝えることができており参考になります。

4. Line

hover-4
GREE SECONDARY PROJECT

line系も最近トレンド。hoverでスタイルを出したい時や、テキストリンクなどに使うことで、スタイルを出すことができます。

5. Appearance

hover-5
Inside Abbey Road

こちらは非hover時に、小さく要素を配置したい時に使います。複雑なインタラクションや、複数ボタンが必要な場合などに用いることが多いです。

6. Scale

hover-6
NURO DEVILMAN

参考サイトでは、hover時に一気に大きくなった後、丸いオブジェクトが少しスケールするのですが、めちゃくちゃイージングが気持ち良いです。今度どこかで僕も使いたいっス。サイトもかっこいい!

7. Diffusion

hover-7
uzuz

参考サイトでは、右上のメニューhover時に拡散するのですが、その後の広がるアクションも連動しており参考になります。

8. Move

hover-8
Equator

参考サイトでは、移動+スケールとなっていますが、選択している感覚がわかり易いです。コンテンツとも調和している点がとても参考になります。

9. Pusle

hover-9
rhizomatiks

点滅はデザインによって調和しそうなhoberの手法です。アートやデジタル系コンテンツとの相性が良さそうですね。

10. Roll

hover-10
https://liginc.co.jp/member

回転もデザインに寄ったhover手法ですね。LIGのメンバーページもこれっす。

まとめ

いろんなhoverを見てみましたが、トレンドとしては、0->100の変化ではなく、(参考サイトでもあるように)その間にもう1アクション挟むような細やかな演出を入れているものが多いので、次回はもう少し深堀りしたいと思います。

2014年の参考記事だけどこれ、Hover Effect Ideas良く見ちゃいますね。

きょうはここまで。お疲れっす〜/”

キャリアアップ
「Studio上野でWebクリエイターを目指す!」