大胆不敵で力強い!スーパーマンな制作会社のWebデザイン!
Mobile Dashboards for Marketers | Captain Dash
Webデザイン3つの良いとこ : 3 Good Point!
- ヒーローにふさわしく力強く伝えるWebデザイン!
- ビデオを効果的に用いて情報を伝える
- ページの区切り方が大胆不敵
私はWebデザインのココを見た!
なにこれカッコ良すぎでしょ!溢れるヒーローパワー!伝える力!そして力強く区切っちゃう!スーパーマンな制作会社のWebデザイン!!
ヒーローらしく力強く伝えるWebデザイン!ビデオ−!
サイトトップページがこれですよ。びっくりです。ページ構成としたはヘッダーにロゴとグローバルメニュー。メインコンテンツにビデオが配置されているだけ。もう、シンプル。「まずはこれを見ろ!」と言っているかのようですよね。
よくビデオをスクリーンショットやスライドの代わりに配置しているサイトがありますが、確かに結局は観ないでどんどん下にスクロールしちゃうことって正直言ってあります。それをまずは「私達の想いはこれに詰まってる」かのように、トップページに(!)コンテンツをこれだけしか置かない勇気のある構成にしているのが大胆不敵!取捨選択感がすごい。私じゃなかなか決断できないと思う。
他のページでもビデオが使われていますよ。「動き」があるサイトですね。
大胆不敵なページ内区切りと、見事なスクロールに対応したメニュー。
サイトは全ての要素ごとに白枠で囲まれています。実はサイト自体も白全体枠で囲まれているんですよ。大胆な区切り方ですよねー。それを統一することによって不安定さが全くなくなっています。
また、この白ボーダーがスクロールで生きてきます。「COMPANY」ページではスクロールするとサブメニューがついてきますが、その際にこの白枠が大きな効果を出します。黒要素となっているサブメニューですので、その存在感は大きい。ですが、周りを白で囲まれているため「違うもの」という認識を知らず知らずに与えることができています。
また、このスクロール自体が素晴らしい。パララックスという「視差」というわけではないのですが、スクロールするごとに現在観ているコンテンツに対応したメニューがオレンジでフォーカスされます。それにより、「内容が大胆に区切られてはいるけど、何見てるかわかんない」という状況を打破しています。
このスクロールで今観ているコンテンツと同じメニューにフォーカスする演出。横に小さく表示されるタイプのものはパララックスサイトによく観られますが、ここまで大きくメニューで表現している例は初めて観ました。いいですね!
ここでは紹介していませんが、「POWERS」のページでは、利用するとどうなるか・・・?をBefore,Afterでうまく表現していますよ。そこら辺も注目です。
大胆不敵で力強いWebデザイン!勉強になりました。
今日参考にさせて頂いたサイト
Twitter/FacebookではWebデザインにまつわることから、Web制作に関することを日々配信しています。ぜひフォローしてください!
@webhoonetさんをフォロー