デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
実用的な利用
  • 実用的な例(1)
  • 実用的な例(2)
  • 実用的な例(3)
  • 実用的な例(4)
  • 実用的な例(5)
演出的な小技
  • 演出的な小技(1)
  • 演出的な小技(2)
  • 演出的な小技(3)
  • 演出的な小技(4)
  • 演出的な小技(5)
スペシャルサイト
  • スペシャルサイト(1)
  • スペシャルサイト(2)
  • スペシャルサイト(3)
  • スペシャルサイト(4)
  • スペシャルサイト(5)

使用例

企業コンテンツを中心にjQueryを利用しているサイトを紹介します。

スマートフォンやタブレット機の普及でflashが避けられるようになり、代わりに企業サイトではjQueryを利用したコンテンツが増えてきました。ここでは、私が気になったサイトを紹介していく予定です(数が増えてきたら左メニューのようにカテゴライズしていきます)。

実用的にjQueryが利用されているサイトを教えて下さい
これまでFlashで作成されていたスペシャルサイトも最近では次々にjQueryに置き換えられています。これはこれで制作者としては良いのですが(ギャラが良いので)、個人的にはもっと実用的なコンテンツとして利用されて欲しいと思っています。ですが私が知らないだけで実は結構あるのかもしれないと思い、ここで募集させて頂くことにしました。

実用的なコンテンツといっても漠然としていますが、本サイトのサンプル:製品抽出系コンテンツや、下で紹介しているホンダ「タイプ早わかり表」のようなに「製品の選択を助けてくれるもの」などです。
他にも何か実用っぽそうなコンテンツがありましたら教えて下さい。

もし企業サイトで実用的なコンテンツ作成にjQueryを利用しているものがあれば以下のアドレスにメール頂けたら幸いです。教えて頂いたサイトはこのページで紹介させて頂きます。
→メールアドレス:info@jquerystudy.info

新着

唇にしっとり美発色/ちふれ
LIXIL|住まいの省エネ・
節水シミュレーター
2014.1/16

クッキーを活用してページ間のデータを受け渡ししているようです。印刷画面ではphpも活用しているみたい。
株式会社 トンボ鉛筆
LIXIL|
住宅デザインシミュレーション
2014.1/16

左と同じ会社でも、こちらはURLのハッシュデータを利用しているようです(印刷ページを生成の部分)。
トヨタドッグサークル
あなたにおすすめの髭剃りアイテム診断| Schick
2014.1/16

利用中のカミソリが壊れてしまったので、他社のを検討中に見つけたサイト。結果はハイドロ5パワーセレクト。
唇にしっとり美発色/ちふれ
唇にしっとり美発色/ちふれ
2013.12/29

ボタンにマウスオーバーすると「ぶるるん」と震える演出がすてき。背景の多重スクロールも良い感じです。
株式会社 トンボ鉛筆
株式会社 トンボ鉛筆
2013.12/29

メインメニューにマウスオーバーすると簡易コンテンツが表示され、そのにタブやカルーセルが設置してあります。デザインもシンプルで素敵。
トヨタドッグサークル
トヨタ ドッグサークル
2013.12/29

jQuery的には見る部分は無いのですが、車メーカーがここまでペットのコンテンツを作るなんてステキ。
MdN Christmas Cruise
MdN Christmas Cruise
2013.12/20

Live for Weblife*2で作成されたサンプルサイト。デモンストレーションなので、様々な要素が詰め込まれています。
マッシュホールディングス
マッシュホールディングス
2013.12/20

Flashでも映像を背景に利用することが流行った自機がありましたが、いまではjQueryでも可能なのですね。
SORA Corporation
SORA Corporation
2013.12/20

ユーザーの操作なしに、見ているだけで話が進むサイトは個人的に好きなのです。
さぬき山郷の響き
さぬき山郷の響き
2013.12/14

演出にサウンドや3Dを利用したサイト。サウンドはヘッドホンで聞くととてもリアル。
株式会社リクサス
株式会社リクサス
2013.12/14

スクロールに合わせてトラックが移動する演出が素敵。個人的にはメニューの横にある目的のコンテンツまでの距離表示(単位はkpx)がすき。
DIVERSE SYSTEM
DIVERSE SYSTEM
2013.12/14

transform3Dやcanvasが利用されたサイト。とくにオープニングの部屋の中に入っていく演出が素敵。
新しい住まいの考え方 AIR誕生
新しい住まいの考え方 AIR誕生
2013.11/25

スクロールで最後まで行くとnextボタンが登場。機能的にはシンプルですが、一次元的なナビゲーションが好きなので紹介。
REGAL WEEK
REGAL WEEK
2013.11/25

浮遊感のある表現、機能的なインターフェイス、でもちょっと迷いやすいかも。というか最初に「選んで楽しい」が出てくるアニメが好きなのでメモ。
WEB絵本 | KidZania
WEB絵本 | KidZania
2013.11/25

web絵本というワードにつられました。パララックスは好きではないのですが、途中にある奥に進む演出は好きなのでメモ。
動物たちのハーブガーデン SOLEILA
動物たちのハーブガーデン SOLEILA
2013.9/7

手書き風のショーケースが素敵。多重スクロールを利用して奥行きを表現しています(これもパララックスですね)。
THE PUMA STORE MAGAZINE
THE PUMA STORE MAGAZINE
2013.9/7

ショーケースの各画像が微妙にアニメしています。アニメが終わると次の画像に進むのである意味プログレスバー?。
風景結々
風景結々
2013.9/7

ダイナミックなページ遷移が素敵。ブックマーク対策に「hashchange」プラグインを利用しています。
Tango Gameworks
Tango Gameworks
2013.5/6

ウインドウ幅に合わせてレイアウトが変更されます。ソースコードにある自社ロゴのアスキーアートがキュートです。
globe global globalism
globe global globalism
2013.5/6

一筆書き風のイラストが素敵。
アマガミSS+
アマガミSS+
2013.5/6

各ページ毎にシンプルなアニメーション。演出のjavaScriptは参考のためリンク→vertical_slider.js
保田窪整形外科病院
保田窪整形外科病院
2013.4/14

トップページのロゴの演出が素敵。他のページの演出もハイレベルです。
マジョリカマジョルカ10周年
マジョリカマジョルカ10周年
2013.4/14

昔は個性的なFlashコンテンツが多かったマジョリカマジョルカ。jQuery時代にも個性的なサイトを期待してしまいます。
東急エージェンシー採用サイト
東急エージェンシー採用サイト
2013.4/14

私はパララックスな演出は好きではないのですが、この演出とデザインは好きかもしれません。
マイクロソフト新卒採用
マイクロソフト新卒採用
2013.3/17

windows8好きではない方も多いようですが私は好きです。
givery RECRUITING SITE Synapse
givery RECRUITING SITE
2013.3/17

ダイナミックなコンテンツです。フルFlashのようなjQueryサイトもこれから増えていきそうです。
TOYOTA DESIGN
TOYOTA DESIGN
2013.3/17

私はパララックスな演出は好きではないのですが、タブレットマシンで見るとパララックスも「いいかも」と感じるようになりました。
アミノバリュー
アミノバリュー
2013.2/3

左のメニューをクリックするとダイナミックにメインカラムの表示項目が切り替わります。
多田屋
多田屋
2013.2/3

メニュー部分やコンテンツのカルーセル部分にjQueryを利用。シンプルで素敵なデザイン。
ミロクの簡単シリーズ
ミロクの簡単シリーズ
2013.2/3

メニュー部分やtopのショーケース部分などにjQueryを利用。ビビッドだけれど見やすいデザイン。
TOTO 繋いで、つながって
TOTO 水から始まるストーリー
2013.1/27

素敵なイラストで水の大切さを説明しています。メニューだけでなく矢印キーでも操作可能な横スクロール系コンテンツです。
HONDA タイプ早わかり表
HONDA タイプ早わかり表
2013.1/27

地味な比較表ですが、必要ない項目を削除することができます。比較項目の多い商品には便利な機能だと思います。
Coiney
Coiney スマートフォンでクレジットカード決済
2013.1/27

パララックスを利用して商品の利用方法を説明しています。
博報堂DYメディアパートナーズ
博報堂DYメディアパートナーズ
2013.1/13

ページを開くと簡単なアニメで要素を表示、ページ下部にはカルーセルを多用しています。こういうシンプルにまとまったデザインは個人的に好きです。
WEDGWOOD公式オンラインショップ
WEDGWOOD-online shop
2013.1/13

左のアコーディオンメニューやショーケースの切替にjQueryを利用。シンプルで上品なデザインです。
Xperia Tablet | ソニー
Xperia Tablet
2013.1/13

ショーケースアニメをjQueryで実現。Flashに比べるとシンプルですが、この先増えていくのではないでしょうか?