知っておくと効率的！コーポレートサイト制作が捗るjQuery プラグインや使い方まとめ
あの企業サイトで使われている効果やテクニックをまた探さないといけない、そもそもどういったキーワードで探したらいいのか分からない。そんなこんなで、今回は奇抜なものではなく、「企業サイトで見たことある！」というような、コーポレートサイトに使えそうな定番のプラグインや作り方をまとめました。
Sponsored Link
もくじ
スライドショー
ナビゲーション・メニュー
- ６．多階層 ドロップダウンメニュー
- ７．多階層 効果つき
- ８．スマホではドロップダウン
- ９．スマホではセレクトメニューに
- １０．Amazon風 メガドロップダウンメニュー
- １１．横スライド
- １２．アニメーションで下線が付いてくる
パネル
画像関連
テーブル
ドラッグ＆ドロップ
メールフォーム
スクロール系
ニュース・ブログ
解析
その他
スライドショー
１．カルーセル（横）
右から左へ写真を移動させる、よく見かけるスライダー。レスポンシブ対応で自由にカスタマイズ、カルーセルスライダー。おなじみのFLEXSLIDERはフェードとスライドを選択できます。
- カルーセル・スライダーになる万能jQueryプラグイン「carouFredSel」 | スターフィールド株式会社
- レスポンシブなコンテンツスライダーのjQueryプラグイン-FLEXSLIDER | memocarilog
２．フェードアウト
軽量ならこれだと思います。モバイル表示での高速化を考えて、軽量であるResponsiveSlides.jsもおすすめです。スライド・フェードの早さはオプションで変更可。一応文字も同時にスライドさせることができます。
３．画像と文字をスライド
他に軽量ならjQuery Slider²もあります。divで囲んだdiv要素ごとにスライドさせるという便利なスライダー。文字も一緒にスライドできます。
４．文字が遅れて移動する効果
色々なスライダーがある中で、見栄え重視ならjQuery Destaque Plugin。文字やアイコンに遅延効果。IE7に対応していたのが嬉しいですね。
５．異なるタイミングを設定できる
目をひかせたいならFractionSliderだと思います。画像だけじゃなくて、複数の要素をタイミングをずらしながら見せることができます。背景も適用OKです。
ナビゲーション・メニュー
６．多階層 ドロップダウンメニュー
レスポンシブでクロスブラウザー（IEは7以降）対応のドロップダウンメニューはFLEXNAVが良い感じでした。スマホにしたときの入れ子構造がとても分かりやすいです。
７．多階層 効果つき
デモの一番最後Fold Outは株式会社LIGさんのサイトっぽくナビを作れそうです。
８．スマホではドロップダウン
レスポンシブ対応のドロップダウン対応メニュー。入れ子もOKです。Responsive NavはIE６にも対応してます。
- 簡単に設置できるレスポンシブ対応のナビゲーションメニューjQueryプラグイン – Naver | STUDIO BENKEI
- Responsive Nav — Responsive Navigation Plugin
９．スマホではセレクトメニューに
PCでは普通のナビ、スマホではセレクト（ドロップダウンナビ）にしてくれるjQueryプラグイン（TinyNav.js）を使います。軽量な上、スマホ表示の際、スペースを確保できるので重宝します。
１０．Amazon風 メガドロップダウンメニュー
遅延のないAmazon風 メガドロップダウンメニュー。マウスホバーでサブカテゴリを横展開できます。
１１．横スライド
スマホサイトでよく見かけるサイドバーを表示したり隠したりするメニュースライダー。
１２．アニメーションで下線が付いてくる
コーポレートサイトでたまにみかけるので。メニューに下線が遅れてついてくるような効果。
パネル
１３．アコーディオンパネル
短いコードでアコーディオン・タブメニューを実装するslideToggleを使った実装方法。短い記述とシンプルなのが嬉しいですね。
１４．タブパネル
情報量が多いポータルサイトなんかで必ず出てくるタブ切り替えのサンプル集。フェードインやスクロール等のアニメーション付き。
１５．amazon風 カルーセル
バナーやちょっとしたコンテンツを並べたパネルを横にスライドさせる見え方を実現。amazonのレコメンドで使われていました。
画像関連
１６．モーダルウィンドウ
クリックすることにより、子ウィンドウを生成し制御します。こちらはレスポンシブ対応のモーダルウィンドウスクリプト。
１７．ソート
画像などをアニメーション効果をつけて、並べ替えをしてくれるプラグインMixItUp。制作実績のページで、カテゴリ別にソートさせたいときに使えます。
１８．ライトボックス
自作で作るライトボックス。画面クリックで閉じるタイプです。もう一つはRWD対応と非対応別のまとめ。
１９．写真にぼかし
コーポレートというよりは、サービス系サイトで使えそうなVague.js。写真にぼかしを入れるプラグイン。ブラウザによっては非対応もありますが、ぼかしを調節できます。
２０．画像のサイズを揃える
高さや横幅がバラバラな写真を、指定サイズに揃え、トリミングもしてくれるというもの。クライアントさんがアップロードした写真を自動で揃えることができそうです。
２１．フルスクリーン（画面幅にピッタリ）
背景に画像をいっぱいいっぱいに使ったページのつくりかた。Webサービス系のサイトに多く見られました。こちらはjQueryやCSSを使ってダイナミックに画像を表示する方法。
テーブル
２２．ストライプテーブル
サービスやプランの料金表など、テーブルが必要なページを作るときが必ず出てくると思います。こちらは要素毎に奇数、偶数を数える方法も記載。
２３．ソート テーブル
テーブルの行をソートできるようにするプラグインの使い方。指定した列と並び順でソートしたり、指定した列のソートを無効にする方法も。
ドラッグ＆ドロップ
２４．フローティングウィンドウ
子ウィンドウをドラッグ＆ドロップで移動させる方法。情報を追加して表示したいけど、レイアウトを崩したくないときに。
２５．並べ替え＋DBに保存
管理画面を作るなら知っておきたいなと。ドラッグ＆ドロップで並べ替えを行えるようにします。並べ替えた順番を保存・再現する方法と並び順をデータベースに保存も合わせてチェック。
メールフォーム
２６．郵便番号検索
入力時のハイフンの有無は関係なく都道府県と住所を分けて、テキストボックスに情報を表示してくれます。
- ajaxzip3
- ajaxzip3 - 郵便番号検索API, JSONP対応 これで郵便番号のメンテナンス作業から解放されます。 - Google Project Hosting
- 郵便番号から住所を補完するjQueryプラグインを作ってみた - けんごのお屋敷
２７．チェックされたら送信可能に
チェックボックスをクリックしないと、送信ボタンをクリックできない状態にできます。
２８．バリデーション
フォームに数値を入力したときに、ユーザー側で入力ミスを確認させる方法の一つ。ユーザビリティを高めるために。
スクロール系
２９．トップへ戻る
webOpixelさんの以下の記事の一番最初に書いてあるトップへ戻るボタンをフェードして表示する方法が一番使いやすかったなぁと思いました。
３０．グローバルナビなどをスクロール時にトップに固定
最初から上部にあるものを固定する方法はよく見ますが、こちらはページ途中にあるナビゲーションメニューをスクロールで上部に固定する方法。
ニュース・ブログ
３１．ソーシャルボタン
ソーシャルボタン（はてブ・ツイッター・フェイスブック）をまとめて設置できるプラグイン。
- ソーシャルボタンを簡単にまとめて設置「jquery.socialbutton」 | リスティング広告の運用代行ならカルテットコミュニケーションズ
- レスポンシブかつフラットなソーシャルボタンを実装できる「rrssb」:phpspot開発日誌
３２．ニュースティッカー
新着情報をティッカーで表示している企業サイトもあったのでご紹介です。最近のお知らせのタイトルなどをティッカーで表示したり。
- [作り方] jQueryを利用した簡単なニュースティッカー
- クールなニュースティッカーを実装できるjQueryプラグイン「Advanced News Ticker」:phpspot開発日誌
- 縦方向にスクロールするクールなティッカーを実装できるjQueryプラグイン「vTicker」:phpspot開発日誌
３３．ツールチップ
ツールチップ系のまとめ。Tooltipsterはリンクにホバーすると、リンク先の情報をツールチップで表示。
解析
３４．スクロール計測
LPでも使えると思うので。ユーザーがどれくらいスクロールしているのか、表示される時間はどれくらいかかるのかGAで解析できるScroll Depth。25%・50%・75%・100%で解析表示。
３５．外部リンクのクリック数をカウント
リンクにコードを埋め込み、アナリティクスのイベントトラッキングで外部サイトへのクリック数を確認する方法。
その他
３６．スキルグラフ
弊社スタッフのある１日のスケジュール、スキルなど円グラフを使って情報を視覚的に見せたいときに使えそうなChart.jsの使い方。
３７．IE アラート
IE6/7/8等でアクセスすると、IEバージョンアップや他のモダンブラウザのインストールを促すIE Alert js。
３８．動画
背景に動画を入れ、Packのような動画フルスクリーンサイトにする方法。サイトの雰囲気やオフィスの光景などを入れたいときに。ドット画像などを埋め込み、荒れた画質をオシャレに見せる方法など。
スポンサード リンク
-
投稿者：commte
株式会社コムテ代表取締役。2015/8：弊社にてWeb制作スクールを開始。 WebDesign + Web制作 (最新情報 配信)。おっとりした話し方をするおっさん。
この後によく読まれている記事
Comments
このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。
Leave a Comment