クリーンでフラットなビデオを効果的に利用したポートフォリオWebデザイン
BKWLD
Webデザイン3つの良いとこ : 3 Good Point!
- スクリーンショットの代わりにビデオを利用
- クリーンでフラットなWebデザイン、タイポグラフィ
- 音で魅せるプロフィール!
私はWebデザインのココを見た!
クリーンでフラットな軽いベタ塗りがかった、企業のポートフォリオWebデザイン。トップページにアクセスして突如動き出す映像がとても印象に残ります。
画像ではなく映像で訪問者にメッセージを与える
たいていこのビデオがある箇所には、大きなスクリーンショットか、スライドショーがくるところ。どうせ画像がきて、なおかつ動くなら映像でも確かに良いですよね。業務の風景を撮影している動画は、企業の一面を訪問者に簡単に知らせることが出来ますし、メッセージを効果的に自然に与えることが出来ます。
また、ビデオについては激しく動かずゆっくり撮影された動画を利用すると、videoタグで埋め込む場合は良いのかなと思いました。
クリーンでフラットなWebデザインとタイポグラフィ
クリーンなイメージとフラットなベタ塗りが非常にマッチしています。色彩を抑えた背景に、伝えたいことをシンプルに的確に伝えるデザインが施されています。
ホバー時の演出も一工夫。画像は各所丸く切り抜き表示されていますが、マウスが乗ったら、その周りの白背景を使用カラーである淡いエメラルドグリーンに変色しています。
なるほど、周りを切り替えることで強調する方法はとても良い。
また、タイポグラフィが秀逸です。
に指定されているh1のフォントファミリーには、
font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif
が設定されています。
proxima-nova、Helvetica Nuue、良いですね−!!とてもクリーンでフラットなWebデザインの演出に貢献している要素です。
音で引き寄せる
また、プロフィールページでは、ページ上部のみサウンドが流れます。
そのフェードアウトとフェードインが絶妙で、下にスクロールするほど音が小さくなるのです。
また、動画もクリエイティブ精神あふれるとっても見ていてなんか不思議なキブンになっちゃうような構成になっています。プロフィールページはぜひ一度ご覧ください!
ビデオタグ、フラットなWebデザイン、とても勉強になるWebサイトでした。
今日参考にさせて頂いたサイト
Twitter/FacebookではWebデザインにまつわることから、Web制作に関することを日々配信しています。ぜひフォローしてください!
@webhoonetさんをフォロー