2016年10月に気になった・参考にしたいWebサイト6選

毎月、筆者が「ここ参考にしたい!」と思ったサイトを掲載していきます。

今月は試験的に、サイトで使っているライブラリを出来る限り羅列して一行で紹介しています。(来月続くかは不明です)
(jQueryについては、バージョンのわかるものだけバージョンを記載しています。)
(リンクのないライブラリ・プラグインは、前述されたものになります。)

The History of Worlds

The History of Worlds

LoL世界大会のヒストリーが見れるサイトです。
トロフィーを中心にした立体的なカルーセルUIが特徴です。トロフィー部分をドラッグするとグルーっと回ります。
各優勝者の記事で左右から定位置にフェードインで入ってくるアニメーションが空に浮遊しているようなふわっとしたアニメーションでいい感じです。またスクロールにももっさり感がありません。

使っているライブラリ

  • Three.js
    3Dでの表現をする時に用いられるライブラリ。有名ですね。
  • Backbone.js
    MVCの骨組みの部分だけを提供するJSフレームワークのようです。↓のUnderscore.jsが内部で用いられています。初見。
  • Underscore.js
    ユーティリティ系のライブラリです。配列の一括操作やテンプレートへの流し込みなどでよく使います。
    拡張版としてLodash.jsがあります。
  • howler.js
    音声操作系のライブラリです。スプライト再生などを簡単に実装できます。
  • Modenizr
    ブラウザ別対応をする時に便利なPolyfillやhtml5shivやclass付与などをするためのライブラリです。
  • device.js
    閲覧しているブラウザの情報を取得するためのライブラリです。
  • RequireJS
    require()を使うためのライブラリ、という認識です。別ファイルとして読み込まれているので、単体で使われているようです。初見。
  • jQuery
    あまりにも有名なので、説明を省きます。

reconstruqt – fusz

reconstruqt – fusz

モノクロベースに女の子のイラストとデジタルの線が現代的です。
こういう感じのテーマをもったアーティストいた気がするけど誰だっただろうか…。

使っているライブラリ

  • Processing.js
    Processingとほとんど同じ記述方法でJavaScriptのコーディングをできるライブラリです。
  • jQuery: 2.1.1

Syfy | Hunters

Syfy | Hunters

ロード後のパーティクルでの3Dモデルの描写と、それの表面にカーソルを合わせて表示させるツイートコンテンツもいいかんじです。
ドラッグしながら動かすとパーティクルがいい感じに散らばり、元の形に収束します。

最初のローディングのCUIアニメーションがギークっぽさあります。

使っているライブラリ

  • Three.js
  • Modenizr.js
  • jQuery
  • CreateJS
    こちらはcanvasで2Dアニメーションなどを実装する時に用いられるのが多い印象です。
  • Hammer.js
    スマホでのタップやスワイプのイベントを貼ってくれるjQueryプラグインです。
  • soundmanager2
    音声再生の基本的な機能を提供するライブラリのようです。初見。
  • textillate.js
    テキストにエフェクトを加えるライブラリです。
    ローディング中のテキストがカタカタ出てくる部分に使われています。
  • HashbangJS
    ハッシュの変更によるイベントの発火、取得などに用いられているようです。
  • dat.gui
    デバッグで用いられるGUIライブラリです。

FINAL FANTASY XV TRAIN GALLERY

FINAL FANTASY XV TRAIN GALLERY

FF XVの制作での取り組みなどを紹介するギャラリーサイトです。

電車の縦長い構造と、マウススクロールでの奥行き操作の相性がとても直感的にわかりやすいと感じました。
近未来感あるマトリックスのような線のエフェクトもかっこいいです。

モーダルを閉じるボタンがどこにあるかわからなかったのは自分だけでしょうか…。

使っているライブラリ

  • Three.js
  • howler.js
  • jQuery: 2.1.4
  • Swiper.js
    スマホのスワイプにも対応したスライダー。
  • Masonry
  • Lazy Load
    LazyLoad(遅延読み込み)を実装するためのjQueryプラグインです。
  • imagesLoaded
    画像の読み込みが終わったかどうかを取得するためのプラグインです。jQuery/Vanillaで利用可能です。
    背景画像の読み込みにも対応しています。
  • TweenMax
    アニメーション用のライブラリです。初見。
    GreenSockのショーケースサイトもイケてるものが多いです。
    Examples & Showcases

BIGSOUND BUZZ – by Bolster.

BIGSOUND BUZZ – by Bolster.

SNSのバズワードをTOP10から表示するサイトです。円グラフをアナログレコードとして利用しているのが面白いです。

シャドウもフローコンテンツも全部フラットでおしゃれです。
どれがボタンなのかわからないのはフラットデザインの宿命のような気もしますね…

使っているライブラリ

  • jQuery: 2.2.4
  • jquery.duotone.js
    画像をデュオトーン(ミドルトーンとハイライトカラーの2色を中心としたハーフトーンで描画する手法)にするjQueryプラグインです。初見。

スーパーマリオ3Dワールド

スーパーマリオ3Dワールド

3年前に発売した『スーパーマリオ3Dワールド』の公式サイトです。flashで作られています。
ユーザーエージェントに3DSやWiiUとかが入っててさすが任天堂…!と思いました。
アニメーションやパララックスの演出などは昨今のウェブサイト制作でも参考になるくらい丁寧に作られています。

使っているライブラリ

Flashメインのサイトなので、flash対策のプラグインが多いです。

  • jQuery hashchange event
    前述したHashBangJSと同種の、hashchangeイベントを取得するためのjQueryプラグインです。
  • jQuery: 1.10.2
  • swfobject.js
    Flashでディープリンクを操作するためのライブラリのようです。初見。
  • swfaddress.js
    Flshをサイトに読み込むためのライブラリです。初見。
  • SWFMacMouseWheel
    FlashでMacのマウスホイールのようなスクロールを実装するためのライブラリのようです。初見。

最後に

プラグインを調べてみて感じたことは、

  • jQueryはまだまだ現役で利用されている
  • 3D描写=Three.jsがスタンダードになっている
  • 2D描写は手法によって様々だが、CreateJSが多め
  • 音声操作系のライブラリも豊富に存在しており、特徴がかなり別れる

といったところでしょうか。
ざっくりとした調査しかしていないので、一概には言えないかもしれないですが…

まだまだ知らない便利なものや面白いものがあると思うので、引き続き継続できたらと思います。

  • BLOG
  • >
  • web
  • >
  • 2016年10月に気になった・参考にしたいWebサイト6選