はしくれエンジニアもどきのメモ

情報系技術・哲学・デザインなどの勉強メモ・備忘録です。

ファーストビューの優れたサイト例 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

Project Skinサイトの画像

万国學生藝術展覧祭2015

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

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

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

万国學生藝術展覧祭2015サイトの画像

CINRA

CINRA, Inc.

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

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

CINRAサイトの画像

RE:CREATION

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

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

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

RE:CREATIONサイトの画像

劇場系

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

NISSIN

日清食品グループ

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

使用ツール:

日清食品グループサイトの画像

HITACHI

日立製作所

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

使用ツール:jQuery, SWFObject

日立製作所サイトの画像

パララックス

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

スカイツリー

東京スカイツリー TOKYO SKYTREE

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

使用ツール:jQuery, Google Loader

東京スカイツリーサイトの画像

ニコン

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

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

使用ツール:jQuery, SWFObject

Nikon 1 AW1 - Present Campaign ニコンダイレクトサイトの画像

BREWING

Tatamagouche Brewing Company

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

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

Tatamagouche Brewing Companyサイトの画像

劇場系+パララックス

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

ベンツ

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

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

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

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