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

Very makeup school
Webデザイン3つの良いとこ : 3 Good Point!
- ベタ塗り配色で落ち着きおしゃれに
- ロゴとコンテンツの配置関係
- ぬるぬるっとしたスクロール - 余韻を残すスクロール
私はWebデザインのココを見た!
今話題のベタ塗りWebデザインが秀逸なサイトをご紹介。カラフルな配色も素晴らしいですが、ロゴとコンテンツとの配置関係が良いなーと思いました。ロールオーバーやスクロールなど多くの参考になる要素が詰まったWebデザインです。
ベタ塗りで敷き詰め、ホバーで魅せる
ミニマルに魅せるベタ塗りWebデザインがふんだんに利用されたWebデザインですが、その配色もさることながら配置関係とホバーが良い味出しています。
まずはそのホバーから。
こちらを利用しています。
画像のマウスホバーによるロールオーバーはCSSでも可能ですが、JavaScriptを利用してfadeIn,fadeOutっぽく表現しています。画像を2つ用意して、末尾の名前を変えるだけっていう簡単なjsによるロールオーバー。これは簡単に使えるのでとてもおすすめ。汎用性がとても高い!
ロゴとコンテンツの配置がうまい
ロゴが緑色の箇所にありますが、縦長で長さでいえばヘッダーメニューとコンテンツを一つ内包する高さです。
たとえばもしこのロゴが、メニューと同じ高さだったり、右コンテンツと同じ長さだったならば、強調性が薄くなっていたでしょう。
ベタ塗りといえば一つの要素を大きく魅せることが可能であり、それこそがうまい魅せ方ですが、その特性を最大限利用していますよね。パッと目に付くけれども、他のコンテンツとの兼ね合いを見事に保ったこの配置はWebデザインの構成などを考える際、参考になるのではないでしょうか。
ぬるぬるっと余韻を残したスクロール
スクロールをしていて、ぬるっとした動きがあることに気が付きましたか?余韻を残すスクロールとしてjQueryを利用しています。
という2つのプラグインを利用して実装しています。
jQueryでマウスホイールすると余韻が残るイージングスクロールをつくる
こちらがとても参考になりました。
ベタ塗りWebデザインを、一つの要素要素を大きく魅せることで、とても見事に表現しているWebデザインでした。jQueryやJavaScript等も汎用性が高いものが利用されていたのも注目ですね。勉強になりました。
今日参考にさせて頂いたサイト
Twitter/FacebookではWebデザインにまつわることから、Web制作に関することを日々配信しています。ぜひフォローしてください!
@webhoonetさんをフォロー