ロールオーバー、スクロール、多くが参考になるベタ塗りWebデザイン

Webデザイン３つの良いとこ : 3 Good Point!

今話題のベタ塗りWebデザインが秀逸なサイトをご紹介。カラフルな配色も素晴らしいですが、ロゴとコンテンツとの配置関係が良いなーと思いました。ロールオーバーやスクロールなど多くの参考になる要素が詰まったWebデザインです。

ミニマルに魅せるベタ塗りWebデザインがふんだんに利用されたWebデザインですが、その配色もさることながら配置関係とホバーが良い味出しています。

まずはそのホバーから。

こちらを利用しています。

画像のマウスホバーによるロールオーバーはCSSでも可能ですが、JavaScriptを利用してfadeIn,fadeOutっぽく表現しています。画像を2つ用意して、末尾の名前を変えるだけっていう簡単なjsによるロールオーバー。これは簡単に使えるのでとてもおすすめ。汎用性がとても高い！

ロゴが緑色の箇所にありますが、縦長で長さでいえばヘッダーメニューとコンテンツを一つ内包する高さです。

たとえばもしこのロゴが、メニューと同じ高さだったり、右コンテンツと同じ長さだったならば、強調性が薄くなっていたでしょう。

ベタ塗りといえば一つの要素を大きく魅せることが可能であり、それこそがうまい魅せ方ですが、その特性を最大限利用していますよね。パッと目に付くけれども、他のコンテンツとの兼ね合いを見事に保ったこの配置はWebデザインの構成などを考える際、参考になるのではないでしょうか。

スクロールをしていて、ぬるっとした動きがあることに気が付きましたか？余韻を残すスクロールとしてjQueryを利用しています。

という2つのプラグインを利用して実装しています。

こちらがとても参考になりました。

ベタ塗りWebデザインを、一つの要素要素を大きく魅せることで、とても見事に表現しているWebデザインでした。jQueryやJavaScript等も汎用性が高いものが利用されていたのも注目ですね。勉強になりました。

今日参考にさせて頂いたサイト

Twitter/FacebookではWebデザインにまつわることから、Web制作に関することを日々配信しています。ぜひフォローしてください！