calendarcodediamondfacebookfingerglobalgoogleplushatenahomepagetopplainpocketrssservicetwitterwordpresshome2searchfoldernext-arrowback-arrowfirst-arrowlast-arrow

知っておくと効率的！コーポレートサイト制作が捗るjQuery プラグインや使い方まとめ

  • 作成：2014/04/7
  • 更新：2014/11/01
  • Web制作
jQuery_technique

あの企業サイトで使われている効果やテクニックをまた探さないといけない、そもそもどういったキーワードで探したらいいのか分からない。そんなこんなで、今回は奇抜なものではなく、「企業サイトで見たことある！」というような、コーポレートサイトに使えそうな定番のプラグインや作り方をまとめました。

Sponsored Link

もくじ

スライドショー

ナビゲーション・メニュー

パネル

画像関連

テーブル

ドラッグ＆ドロップ

メールフォーム

スクロール系

ニュース・ブログ

解析

その他

スライドショー

carousel_jQuery

右から左へ写真を移動させる、よく見かけるスライダー。レスポンシブ対応で自由にカスタマイズ、カルーセルスライダー。おなじみのFLEXSLIDERはフェードとスライドを選択できます。

２．フェードアウト

fade-out_jQuery

軽量ならこれだと思います。モバイル表示での高速化を考えて、軽量であるResponsiveSlides.jsもおすすめです。スライド・フェードの早さはオプションで変更可。一応文字も同時にスライドさせることができます。

３．画像と文字をスライド

text-image_jQuery

他に軽量ならjQuery Slider²もあります。divで囲んだdiv要素ごとにスライドさせるという便利なスライダー。文字も一緒にスライドできます。

４．文字が遅れて移動する効果

effect-delayed_jQuery

色々なスライダーがある中で、見栄え重視ならjQuery Destaque Plugin。文字やアイコンに遅延効果。IE7に対応していたのが嬉しいですね。

５．異なるタイミングを設定できる

timing-different_jQuery

目をひかせたいならFractionSliderだと思います。画像だけじゃなくて、複数の要素をタイミングをずらしながら見せることができます。背景も適用OKです。

ナビゲーション・メニュー

６．多階層 ドロップダウンメニュー

multi-level-drop-down_jQuery

レスポンシブでクロスブラウザー（IEは7以降）対応のドロップダウンメニューはFLEXNAVが良い感じでした。スマホにしたときの入れ子構造がとても分かりやすいです。

７．多階層 効果つき

multi-level-effect_jQuery

デモの一番最後Fold Outは株式会社LIGさんのサイトっぽくナビを作れそうです。

drop-down-smartphone_jQuery

レスポンシブ対応のドロップダウン対応メニュー。入れ子もOKです。Responsive NavはIE６にも対応してます。

９．スマホではセレクトメニューに

select-smartphone_jQuery

PCでは普通のナビ、スマホではセレクト（ドロップダウンナビ）にしてくれるjQueryプラグイン（TinyNav.js）を使います。軽量な上、スマホ表示の際、スペースを確保できるので重宝します。

１０．Amazon風 メガドロップダウンメニュー

amazon-style-mega_jQuery

遅延のないAmazon風 メガドロップダウンメニュー。マウスホバーでサブカテゴリを横展開できます。

１１．横スライド

next-slide_jQuery

スマホサイトでよく見かけるサイドバーを表示したり隠したりするメニュースライダー。

１２．アニメーションで下線が付いてくる

underline-animation_jQuery

コーポレートサイトでたまにみかけるので。メニューに下線が遅れてついてくるような効果。

パネル

１３．アコーディオンパネル

accordion-panel_jQuery

短いコードでアコーディオン・タブメニューを実装するslideToggleを使った実装方法。短い記述とシンプルなのが嬉しいですね。

１４．タブパネル

tab-panel_jQuery

情報量が多いポータルサイトなんかで必ず出てくるタブ切り替えのサンプル集。フェードインやスクロール等のアニメーション付き。

amazon-style-carousel_jQuery

バナーやちょっとしたコンテンツを並べたパネルを横にスライドさせる見え方を実現。amazonのレコメンドで使われていました。

画像関連

modal-window_jQuery

クリックすることにより、子ウィンドウを生成し制御します。こちらはレスポンシブ対応のモーダルウィンドウスクリプト。

１７．ソート

sort-img_jQuery

画像などをアニメーション効果をつけて、並べ替えをしてくれるプラグインMixItUp。制作実績のページで、カテゴリ別にソートさせたいときに使えます。

１８．ライトボックス

light-box_jQuery

自作で作るライトボックス。画面クリックで閉じるタイプです。もう一つはRWD対応と非対応別のまとめ。

１９．写真にぼかし

blur-photo_jQuery

コーポレートというよりは、サービス系サイトで使えそうなVague.js。写真にぼかしを入れるプラグイン。ブラウザによっては非対応もありますが、ぼかしを調節できます。

２０．画像のサイズを揃える

size-image_jQuery

高さや横幅がバラバラな写真を、指定サイズに揃え、トリミングもしてくれるというもの。クライアントさんがアップロードした写真を自動で揃えることができそうです。

２１．フルスクリーン（画面幅にピッタリ）

full-screen-width_jQuery

背景に画像をいっぱいいっぱいに使ったページのつくりかた。Webサービス系のサイトに多く見られました。こちらはjQueryやCSSを使ってダイナミックに画像を表示する方法。

テーブル

２２．ストライプテーブル

stripe-table_jQuery

サービスやプランの料金表など、テーブルが必要なページを作るときが必ず出てくると思います。こちらは要素毎に奇数、偶数を数える方法も記載。

２３．ソート テーブル

sort-table_jQuery

テーブルの行をソートできるようにするプラグインの使い方。指定した列と並び順でソートしたり、指定した列のソートを無効にする方法も。

ドラッグ＆ドロップ

２４．フローティングウィンドウ

floating-window_jQuery

子ウィンドウをドラッグ＆ドロップで移動させる方法。情報を追加して表示したいけど、レイアウトを崩したくないときに。

２５．並べ替え＋DBに保存

sorting_jQuery

管理画面を作るなら知っておきたいなと。ドラッグ＆ドロップで並べ替えを行えるようにします。並べ替えた順番を保存・再現する方法と並び順をデータベースに保存も合わせてチェック。

メールフォーム

postal-code-search_jQuery

入力時のハイフンの有無は関係なく都道府県と住所を分けて、テキストボックスに情報を表示してくれます。

２７．チェックされたら送信可能に

transmitted-check_jQuery

チェックボックスをクリックしないと、送信ボタンをクリックできない状態にできます。

２８．バリデーション

validation_jQuery

フォームに数値を入力したときに、ユーザー側で入力ミスを確認させる方法の一つ。ユーザビリティを高めるために。

スクロール系

２９．トップへ戻る

back-top_jQuery

webOpixelさんの以下の記事の一番最初に書いてあるトップへ戻るボタンをフェードして表示する方法が一番使いやすかったなぁと思いました。

３０．グローバルナビなどをスクロール時にトップに固定

fixed-navigation_jQuery

最初から上部にあるものを固定する方法はよく見ますが、こちらはページ途中にあるナビゲーションメニューをスクロールで上部に固定する方法。

ニュース・ブログ

３１．ソーシャルボタン

social-buttons_jQuery

ソーシャルボタン（はてブ・ツイッター・フェイスブック）をまとめて設置できるプラグイン。

３２．ニュースティッカー

news-ticker_jQuery

新着情報をティッカーで表示している企業サイトもあったのでご紹介です。最近のお知らせのタイトルなどをティッカーで表示したり。

３３．ツールチップ

tooltip_jQuery

ツールチップ系のまとめ。Tooltipsterはリンクにホバーすると、リンク先の情報をツールチップで表示。

解析

３４．スクロール計測

scroll-measurement_jQuery

LPでも使えると思うので。ユーザーがどれくらいスクロールしているのか、表示される時間はどれくらいかかるのかGAで解析できるScroll Depth。25%・50%・75%・100%で解析表示。

リンクにコードを埋め込み、アナリティクスのイベントトラッキングで外部サイトへのクリック数を確認する方法。

その他

３６．スキルグラフ

skill-graph_jQuery

弊社スタッフのある１日のスケジュール、スキルなど円グラフを使って情報を視覚的に見せたいときに使えそうなChart.jsの使い方。

３７．IE アラート

iealert_jQuery

IE6/7/8等でアクセスすると、IEバージョンアップや他のモダンブラウザのインストールを促すIE Alert js。

３８．動画

animation_jQuery

背景に動画を入れ、Packのような動画フルスクリーンサイトにする方法。サイトの雰囲気やオフィスの光景などを入れたいときに。ドット画像などを埋め込み、荒れた画質をオシャレに見せる方法など。

スポンサード リンク

この記事を書いた人
投稿者：commte

株式会社コムテ代表取締役。2015/8：弊社にてWeb制作スクールを開始。 WebDesign + Web制作 (最新情報 配信)。おっとりした話し方をするおっさん。

URL：西田 鉄平
この後によく読まれている記事

Comments

Leave a Comment

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。