ファーストビューの優れたサイト例 12選

ファーストビューの優れたサイト例 12選

ファーストビューの優れているサイトのメモ。 サイトは変更する可能性があるので、画像も載せておく。

jQuery 系

大体のサイトは、jQuery を使っていますが、特に jQuery 色の強いものをチョイス。

ボンカレー

ボンカレー公式サイト

jQueryのスライダーを使用している。

使用ツール：jQuery

ビーナスベット

ベッド専門店ビーナスベッド｜TOPページ

使用ツール：jQuery, WordPress, Modernizr

動画系

ファーストビューに動画を載せているサイト。

Project Skin

Vancouver Cosmetic and Laser Skin Care Centre

使用ツール：jQuery, jQuery UI, WordPress, Typekit, Modernizr

万国學生藝術展覧祭2015

アートイベント 万国學生藝術展覧祭 | 學展 学展

ナビが下部に固定されています。

使用ツール：jQuery, WordPress, GoogleFontAPI, Modernizr, Twitter plugins

CINRA

CINRA, Inc.

CINRAが何であるかファーストビューで書かれています(WEB制作会社)。

使用ツール：jQuery, Modenizer, Google Plus1, Underscore.js

RE:CREATION

株式会社リ・クリエーション | オフィシャルサイト

個人的には成果物を、ディスプレイにはめ込んでいるのがおもしろいです。

使用ツール：jQuery, Google Font API, Google Map API, PHP, Modernizr

劇場系

動画を使用していて、シアターっぽいもの。

NISSIN

日清食品グループ

サイトにいくと、3分の動画とカウントダウンが始まるという面白い仕様です。

使用ツール：

HITACHI

日立製作所

背景を動画にして、その上にコンテンツを表示させている。

使用ツール：jQuery, SWFObject

パララックス

パララックスを使用しているもの。

スカイツリー

東京スカイツリー TOKYO SKYTREE

スクロールするとグロナビが上部に固定されます。

使用ツール：jQuery, Google Loader

ニコン

Nikon 1 AW1 - Present Campaign | NikonDirect - ニコンダイレクト

スクロールでカメラが落下して水面に落ちる表現があり、水耐性などを説明していて面白いです。

使用ツール：jQuery, SWFObject

BREWING

Tatamagouche Brewing Company

背景を固定したパララックス。

使用ツール：jQuery, Typekit, UnderScore.js

劇場系＋パララックス

パララックスを使用しているもの。

ベンツ

NEXT A-Class｜メルセデス・ベンツ日本公式サイト

6分のyoutube動画。また、スクロールすると、メニューが左に固定されるパララックス。

使用ツール：jQuery, Twitter plugins, Google Plus 1, SWFObject

参考リンク

• Webデザイン実践 デザインの命ファーストビュー制作~サイト例~ 田中 晶子 先生 - 無料動画学習｜schoo（スクー）