大胆不敵で力強い!スーパーマンな制作会社のWebデザイン!

スーパーマン-制作会社-力強い-ビデオ-Webデザイン_002

Mobile Dashboards for Marketers | Captain Dash

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

  1. ヒーローにふさわしく力強く伝えるWebデザイン!
  2. ビデオを効果的に用いて情報を伝える
  3. ページの区切り方が大胆不敵

私はWebデザインのココを見た!

なにこれカッコ良すぎでしょ!溢れるヒーローパワー!伝える力!そして力強く区切っちゃう!スーパーマンな制作会社のWebデザイン!!

ヒーローらしく力強く伝えるWebデザイン!ビデオ−!

スーパーマン-制作会社-力強い-ビデオ-Webデザイン_002

サイトトップページがこれですよ。びっくりです。ページ構成としたはヘッダーにロゴとグローバルメニュー。メインコンテンツにビデオが配置されているだけ。もう、シンプル。「まずはこれを見ろ!」と言っているかのようですよね。

よくビデオをスクリーンショットやスライドの代わりに配置しているサイトがありますが、確かに結局は観ないでどんどん下にスクロールしちゃうことって正直言ってあります。それをまずは「私達の想いはこれに詰まってる」かのように、トップページに(!)コンテンツをこれだけしか置かない勇気のある構成にしているのが大胆不敵!取捨選択感がすごい。私じゃなかなか決断できないと思う。

スーパーマン-制作会社-力強い-ビデオ-Webデザイン_001

他のページでもビデオが使われていますよ。「動き」があるサイトですね。

大胆不敵なページ内区切りと、見事なスクロールに対応したメニュー。

スーパーマン-制作会社-力強い-ビデオ-Webデザイン_003

サイトは全ての要素ごとに白枠で囲まれています。実はサイト自体も白全体枠で囲まれているんですよ。大胆な区切り方ですよねー。それを統一することによって不安定さが全くなくなっています。

スーパーマン-制作会社-力強い-ビデオ-Webデザイン_005

また、この白ボーダーがスクロールで生きてきます。「COMPANY」ページではスクロールするとサブメニューがついてきますが、その際にこの白枠が大きな効果を出します。黒要素となっているサブメニューですので、その存在感は大きい。ですが、周りを白で囲まれているため「違うもの」という認識を知らず知らずに与えることができています。

スーパーマン-制作会社-力強い-ビデオ-Webデザイン_004

また、このスクロール自体が素晴らしい。パララックスという「視差」というわけではないのですが、スクロールするごとに現在観ているコンテンツに対応したメニューがオレンジでフォーカスされます。それにより、「内容が大胆に区切られてはいるけど、何見てるかわかんない」という状況を打破しています。

このスクロールで今観ているコンテンツと同じメニューにフォーカスする演出。横に小さく表示されるタイプのものはパララックスサイトによく観られますが、ここまで大きくメニューで表現している例は初めて観ました。いいですね!

ここでは紹介していませんが、「POWERS」のページでは、利用するとどうなるか・・・?をBefore,Afterでうまく表現していますよ。そこら辺も注目です。

大胆不敵で力強いWebデザイン!勉強になりました。

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

Mobile Dashboards for Marketers | Captain Dash

    この素敵なWebデザイン、「いいな」と思いました?
    その気持ちをポチッと残しておきましょう!

  • このエントリーをはてなブックマークに追加

関連するWebデザイン

コメントをどうぞ。

1日1Webデザイン

あなたにとっての素晴らしいWebデザインが見つかりますように。

Webデザインレビュータグクラウド

ホバーしてね