ページをコンテンツごとにうまく分割。シンプルだけど技がいっぱいWebデザイン – Snowbird

ぬぁおーーー！すごく要素が綺麗にまとまったサイト！一目惚れです！冬はスキー場、夏は登山などが楽しめる山岳地帯の紹介サイト。

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

シンプルでいて機能がつまってる。全然動かなそうだけど、バリバリ動く。個人的に一目惚れしたWebデザイン。沢山の技が詰まってます！！

そうか。こんな分割方法があったか・・・。と関心してしまった手法。

左右２カラムなのですが、左右カラムともに同じheightでコンテンツが切れています。左カラムは写真が切れ、右カラムは黒背景がちょっとグレー背景になっていますよね。

ボーダーを強く使っているわけじゃないのに、すごく上手い区分けの仕方。感心してしまいました！

けっこう衝撃的なjQueryの演出

Snowbird-Webデザイン_003

天気が・・・、天気情報が、、、マウスホバーでカラカラっと出てきます。すごい！これ使いたい！また出てくる情報もcssで表現しており画像を使用していないので、負荷をなくしています。んー！

この円グラフのCSSは以前紹介したBuilt by Buffaloでも使用されていましたね。こういう点は積極的にCSSを利用したいです。

ヘッダー上部とメニューのこだわり

ヘッダー上部のロゴ色を使ったボーダーもとてもサイトに調和しています。このアクセントカラーがあるのとないのとでは全然印象が変わりますね！要素を検証して非表示にしてみると、なんというか、明るさがサイトからなくなります。

また、メニューの:hoverにも素敵な演出がされていますね。メニューへのマウスホバーで山並みが下に浮かび上がります。サイトの内容ととっても合っている演出。

あと、実はページ読み込み中にロゴマークが回転します・・・。作りこまれてるー！とても勉強になるWebデザインでした。

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

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