お問い合わせやユーザー登録、ログインから商品の注文まで、ウェブでとっても重要なフォーム要素。

このフォームの使い勝手や見栄えはそのサイトの売上や登録に大きく影響するといっても過言ではありません。

フォームの入力項目が多すぎたり、わかりづらかったりすると、せっかく購入やユーザー登録する気になってくれているユーザーの方々も逃げてしまいますよね…。

今回は、フォームのデザインや使い勝手を強化してくれるjQueryのプラグインをいろいろとまとめてみました。

Perfect signin dropdown box likes Twitter with jQuery

Twitterのサインインボックスのようなドロップダウンボックスを再現してくれています。

Lightbox_me – Stupidly Simple Lightboxing

ライトボックスでログイン表示させることができます。

Pretty checkboxes with jQuery

チェックボックスの見た目を変えて、可愛らしくフォーマット。

Turn any webform into a powerful wizard with jQuery (FormToWizard plugin)

長いフォームをステップに分けて表示させることができます。

How to create Skype-like buttons using jQuery

Skypeっぽいマウスオーバーしたときにぴょこんとハネるボタンを作ることができます。

iPhone Style Radio and Checkbox Switches using JQuery and CSS

iPhoneスタイルのチェックボックスとラジオボタンを作ることができます。

jQuery checkbox

スイッチみたいにスライドさせることができるラジオボタンです。

Niceforms

jQueryを使って、フォームのデザインをスタイリッシュに変更してくれます。

Uniform Sexy forms with jQuery

こちらもフォームのデザインを変更できます。テーマもいくつか用意されていますね。

jQuery plugin : jqTransform

ボックスを角丸に、チェックボックスやラジオボタンも変更できるプラグイン

FancyForm – Javascript checkbox replacement

チェックボックスとラジオボタンをスタイリッシュに変更できます。

prettyCheckboxes

こちらも同様にチェックボックスとラジオボタンを変更できます。

jQuery Highlight Demo

選択している要素の背景をハイライトさせることができます。

jQuery magicpreview plug-in

フォームの右側にプレビューを表示させることができるプラグインです。

jQuery Menu: Dropdown, iPod Drilldown, and Flyout styles with ARIA Support and ThemeRoller Ready

iPod風なドロップダウンメニューが実装出来ます。

jquery.combobox

階層化したセレクトボックスが作れます。

A jQuery inline form validation, because validation is a mess

必須項目などにメッセージを表示させることができるプラグインです。

Ketchup Plugin

こちらもエラー表示させることができるプラグイン。動きもあって可愛らしいです。

jQuery plugin: Validation

こちらも同様に、バリデーションプラグイン。

jTip – The Jquery Tool Tip

ツールチップを表示させることができます。

Date Picker – jQuery plugin

カレンダーを表示させて、日にちを先手くさせることができるプラグイン。

jQuery.timepickr.js

ちょっぴりユニークな、時間を設定させるプラグイン。

jQuery UI Slider from a Select Element – now with ARIA Support

スライダーで期間を設定させることができるプラグインです。

AJAX Upload

複数のファイルをページを遷移させることなくアップロードできるプラグイン。

JQuery File Upload Plugin Script – JQuery File Upload Script – Uploadify

こちらも複数ファイルをアップロードさせることがきます。

Styling an input type=file

フォームのファイルボタンを画像に変更させることができます。

Using form labels as text field values

ラベル要素をフォームのテキストボックス内に表示させておいて、ボックスをクリックすると消えます。

In-Field Labels jQuery Plugin

こちらもラベル要素をボックス内に表示させて、クリックするとフェードアウトして薄く表示させることができます。

JQUERY PLUGIN: CLEARFIELD

こちらも同様、ラベル要素をフォームのテキストボックス内に表示させておいて、ボックスをクリックすると消えます。

Justify elements using jQuery and CSS

テーブルを使わずにフォームの要素を整列させるプラグイン。文字の長さを見て、整列させてくれます。

Masked Input Plugin

ボックス内のテキストをフォーマットさせることができます。

meioMask – a jQuery mask plugin

クレジットカードや時間など、ボックス内のテキストをフォーマットさせることができます。

Password Strength Indicator and Generator

パスワードのセキュリティレベルをわかりやすく絵で表示させることができます。

jQuery Password Strength Meter

こちらも同様、パスワードのセキュリティを表示。

jQuery showPassword Plugin

チェックボックスでパスワードを伏字から表示させることができます。

jQuery plugin: autoResize

文字を増やしていくと自動的にテキストエリアが下に大きくなっていきます。

tableRowCheckboxToggle

テーブルを行ごとクリックできるようにして、チェックできます。

jQuery UI Multiselect

複雑な複数選択を可能にしてくれるプラグイン

Simple Image Submit Button Rollovers with jQuery

Submitボタンをロールオーバーにできます。

Jeditable – Edit In Place Plugin For jQuery

テキストをクリックしてフォームが出現。修正しなおすとテキストに戻ります。

スペックやデータ、料金表などを表示するためには、テーブルコーディングは欠かせませんね。

テーブルにjQueryのプラグインを実装すると、ソートやページングなどなど、様々な機能を追加する事ができます。

今回は、テーブルに実装できるjQueryプラグインいろいろとまとめてみました。

Flexigrid – Web 2.0 Javscript Grid for jQuery

カラムのリサイズやソート、ページングなどなど、たった数行のコードを追加するだけで、とってもフレキシブルなテーブルが完成します！

Expand table rows with jQuery – jExpand plugin

折りたたみができるプラグインです。いろいろと使い道がありそうですね。

jQuery Visualize Plugin: Accessible Charts & Graphs from Table Elements using HTML 5 Canvas

jQueryとHTML5をつかって、テーブルに入力された数値をグラフにビジュアライズしてくれます。テーブル内の数値はブラウザ上で変更する事も可能で、グラフも同時に変更されます。

jquery.csv2table.js

CSVファイルをテーブル表示してくれるjQueryのプラグイン。エクセルは使えるけど、HTMLはちょっと…。といったクライアントの方に重宝しそうなプラグインですね。

jqGrid

ソートやページングなど様々な機能が実装できます。

Ingrid, the jQuery Datagrid.

こちらも同様に、ソートやページングなどのテーブル

jQuery plugin: Tablesorter 2.0

すっきりとしたデザインで見やすいソート機能

jQuery treeTable 2.0

ツリー表示が実装できます。

HeatColor, a jQuery plugin

とってもきれいなヒートカラーをテーブルに実装

tableRowCheckboxToggle

テーブルの列ごとチェックボックスに反応させることができます。

DataTables

こちらもソートやページングが実装できるjQueryプラグインです。

TableEditor

編集可能なテーブルを作ることができます。

TinyTable JavaScript Table Sorter – 2.5KB

わずか2.5KBでソートやページング機能が実装できるプラグイン

tableFilter

カラムの上部に配置されているボックスに文字を入力して、絞り込むことができます。

jQuery Column Filters

こちらも、データを絞り込む事ができるフィルター機能

Allan Jardine | Reflections | KeyTable

タブキーでセルの選択を移動させることができます。

Drag and drop table content with JavaScript

ドラッグ アンド ドロップが可能になります。

Table Drag and Drop JQuery plugin

こちらもドラッグ アンド ドロップ可能になるjQueryプラグインです。

jQueryを使えば、WordPressがブログとは思えないほどに見違えます。

特に海外のブログなどを見ていると、jQueryなどを上手く使いこなして、クールに仕上がっているブログがたくさんありますね。

今回は、jQueryを使ってワンランク上のブログに仕上げるプラグインとチュートリアルをいくつかまとめてみました。

Snazzy Archives

アーカイブページをクールにカスタマイズ。カレンダーっぽく配置すると、とっても見やすくなりますね。

Implement a Nice & Clean jQuery Sliding Panel in WordPress 2.7+

ページの上部から、タブをクリックするとコンテンツがスライドする、スライディングパネル。

Sliding Panel: WordPress Plugin

プラグインで簡単に実装できるスライディングパネル。

Infinite scroll

ページの下部までユーザーがスクロールすると、次のコンテンツを先読みしてくれるプラグインです。ページングする必要が無いので便利ですね。

Insights

管理画面から、FlickrやYoutube、WikipediaにGoogleMapsなどを検索して、そのまま貼り付けることが出来る便利なツール。

WordPress Multi-Level Drop Down menu using jQuery

多段階のドロップダウンメニューをWordPressに実装することが出来ます。

WordPress Sidebar Turned Apple-Flashy Using jQuery UI

サイドバーがスライドして、コンテンツを切り替えます。

Tabbed Content using jQuery and WP_Query

タブ切り替えでコンテンツをスライドさせることが出来ます。

HOW TO: Create a jQuery Carousel with WordPress Posts

jQuery CarouselをWordPressに実装すれば、コンテンツ自体をスライドさせるクールなブログに仕上がります。

WordPress jQuery Lightbox Plugin

画像をたくさん掲載するブログには便利なLightboxのプラグイン

WP-Slimbox2

こちらもシンプルなLightboxです。

J Post Slider wordpress plugin – jQuery post animation show

スライドショーを簡単に

SimpleModal Contact Form (SMCF)

とってもシンプルなモーダルでお問い合せフォームをつけることが出来るプラグイン。

WordPress & jQuery Contact Form without a Plugin

プラグインなしでjQueryを使ったコンタクトフォームの実装方法が紹介されています。

Adding Form Validation to WordPress Comments using jQuery

必須入力項目の抜けなどのアラートを表示する事ができるようになります。

jQuery Comment Preview WordPress Plugin

コメントにプレビュー機能を加えることが出来るプラグインです。

Firefoxでは、たくさんのアドオンが無料で公開されているので、好きなアドオンを追加して自分好みに利用されている方も多いのではないでしょうか。

今回は、Safariユーザーの方々でも無料で使えるプラグインをいろいろとまとめてみました。

これまでちょっと不便だった操作がとっても簡単にできるプラグインから単純に使って楽しいプラグインまでいろいろです。

Inquisitor

検索ボックスにサジェスト機能を追加できるプラグインです。

Glims

GoogleやYahoo!の検索結果にサムネイルを追加したり、全画面表示機能を追加したり、サジェスト機能を追加できたりします。

Xyle scope

HTMLやCSSを階層表示して、CSSを編集したりできるプラグインです。

Safari-Stretch

アイコンをツールバーにドラッグするだけで、全画面表示ボタンが追加できます。

Keywurl

アドレスバーからいろいろな検索サイトで検索できるようになります。

SafariSource

Safariからソースを見たときに、色付けしてコードを見やすくしてくれます。

Drosera

SafariのJavaScriptデバッガツールです。

Xmarks

ブックマークを同期してくれるプラグイン。複数のMacやPCでSafariを利用している方には便利なプラグインですね。

Safari Tidy plugin

Safariの右下にページのエラーなどを表示してくれます。

DeliciousSafari

SafariからDeliciousへのブックマークが簡単になります。ブックマークしたページへも簡単にリンクできます。Safari＋Deliciousユーザーにはうれしいプラグインですね。

safari140

SafariからTwitterへ投稿できるプラグインです。

ForgetMeNot

Safariを閉じる前に開いていたウインドウやタブのリンクを復元してくれるプラグイン

SafariStand

ブックマークや履歴などをサイドに表示してくれるプラグイン。

Cooliris

Googleイメージ検索やYouTube、Flickrなどギャラリーを3Dで格好良く見せてくれるプラグイン。

ビットマップの編集・加工にGIMPを利用されている方々も多いのではないでしょうか？

GIMPはオープンソースとは思えなほど、よくできているソフトですね。さらに、多くのユーザーがユニークなプラグインを公開しているので、プラグイン次第でさらにパワーアップさせることが出来ます。

今回は、GIMPをさらにパワーアップさせるプラグインをいくつかご紹介します。

Separate+

RGBをCMYKにコンバートするなど、CMYKファイルを扱うことが出来ます。日本語も対応しています。

Layer Effects

ドロップシャドウやベベルとエンボスなどのレイヤースタイルが利用できます。

PSPI

Photoshop用に公開されている、プラグインファイルをGIMPでも利用可能にするプラグインです。

Liquid Rescale GIMP plugin

写真の重要な部分を歪めることなく、写真をリサイズすることができます。詳しくは、以下の動画を見てもらうのが一番わかりやすいです…。

exposure-blend

HDRっぽい画像をつくることができるプラグインです。

Texturize

一枚の画像をシームレスなタイル画像に変換してくれるプラグインです。サイトの背景をつくるときに便利。

Pandora

複数の画像を一枚のパノラマ画像に変換してくれるプラグイン。

virtualPhotographer

これ一つで50種類以上のきれいなエフェクトが入っています。

MathMap

画像を歪めて変形させる事のできるプラグインです。このプラグインを使いこなせば、とってもきれいなGifアニメーションをつくる事もできそうです。

GIMP Plugin Registry

GIMPのプラグインがまとめて紹介されているサイトです。

Download free GIMP plugins (40+ plugins)

Webデザイン用や画像処理用などカテゴリに分けて、４０種類のプラグインがまとめられています。

本日は、WordPressの便利でよく使うプラグインを30個まとめてみました。

こうやって見てみると、プラグイン次第でブログがどんどん進化していく感じで楽しいですね。

みなさんも、おすすめのプラグインがあったら、是非教えてくださいね！

All in One SEO Pack

メタタグが細かく設定できます。

Google (XML) Sitemaps Generator for WordPress

sitemap.xmlを生成してくれます。

WordPress – FeedBurner

FeedをFeedBurnerにリダイレクトしてくれます。

WordPress Database Backup

データベースをバックアップ。

Maintenance Mode

バージョンアップなどの際にメンテナンスモードにできます。

WP Super Cache

スタティックのhtmlファイルを生成してくれます。

Contact Form 7

コンタクトフォームならこちら。

cforms II

こちらのコンタクトフォームもよくできています。

Google Analytics for WordPress

Google AnalyticsをWordPressに。

The Real Time Visitors Tracking & Statistics Tool

リアルタイムのアクセス解析ツール。WordPressの管理画面から見ることができるので便利。

the_excerpt()で漢字も対応させるplugin

日本語にも対応してくれるので便利です。

My Category Order

カテゴリーの並び順を任意の順番に。

WP-PageNavi

ページングのナビゲーションをつけることが出来ます。

WPtouch: WordPress On iPhone

iPhoneでアクセスしてきたユーザーには、iPhone用のテンプレートで表示してくれます。

iWPhone WordPress Plugin and Theme

こちらも同様、iPhone用テーマプラグインです。

Ktai Style (携帯対応プラグイン)

こちらは、日本の携帯用プラグイン。携帯でアクセスすると、携帯用のテンプレートで表示。

Post-Thumb Revisited

記事の一番最初の画像をリサイズして表示してくれます。アーカイブページなどに表示するといい感じ。

Popular Posts

人気記事リストが表示できます。サムネイル表示にも対応しています。

Similar Posts

関連記事が表示で着ます。こちらもサムネイル表示に対応。

Breadcrumb NavXT

パンくずリストを生成してくれます。

WP-PostRatings

記事に対する評価をつけることが出来ます。

WordPress e-Commerce Plugin

WordPressでショッピングサイトするなら。

Audio Player WordPress plugin

オーディオファイルを使いたい人は。

WP-Cumulus

タグクラウドをフラッシュでダイナミックに表示してくれます。

WP-Polls

投票機能を使いたいなら。

WP-reCAPTCHA

reCAPTCHAをwordpressで使えます。

Page Flip Image Gallery

複数の画像をページをめくるように表示するギャラリープラグイン

Lightbox 2 WordPress Plugin

LightboxがWordPressで簡単に使えるプラグイン

Twitter for WordPress

自分のTwitterと連動。

TweetBacks

その記事のパーマリンクが含まれているTwitterの投稿を表示してくれます。

前回は、『Scriptを使わないCSSエフェクト、Tipsいろいろ』をご紹介いたしました。

今回は、逆にjQueryを使ったサンプル集です。なるべく簡単に使えそうな、プラグインを中心にまとめてみました。

Lightbox, Modal Window関連

jQuery lightBox plugin

とってもシンプルなLightboxプラグイン。

Facebox

画像だけでなく、テキストも表示できます。

prettyPhoto a jQuery lightbox clone

角丸がかわいいLightboxですね。

NyroModal

画像やYouTubeの動画やフォームなど

SimpleModal

その名の通り、とってもシンプルなModalWindow

画像関連

jQZoom

虫眼鏡のように、画像をズームしてくれます。

jQuery virtual tour

不動産屋さんの物件紹介などでよく見かける、ヴァーチャルツアー

Photo Slider

サムネイルの動きがいい感じのPhoto Slider

jQuery Cycle Plugin

スライドショープラグイン

jCarousel

縦や横にスライドできるスライダー

jCarousel Lite

こちらもスライダーの軽いバージョン

jQuery Gallery Scroller

画像をクリックすると、次の画像がスライドしてきます。

Drop Shadow jQuery Plugin

画像にシャドウをつけてくれるプラグイン

メニュー関連

IconDock

MacのDock風なメニュー

LavaLamp for jQuery lovers!

マウスオーバーすると、LavaLampのように、丸い画像がついてきます。

Sliding Menu

メニューがびよ〜んと出てきます。

SuckerFish Style

プルダウンメニューが作れます。

Accordion

アコーディオンのUI

フォーム関連

jNice, styled forms

スタイリッシュなフォームを作るにはこちら

Select Box replacement

セレクトボックスをカスタマイズ

jQuery Checkbox

チェックボックスをカスタマイズ

jquery.combobox

コンボボックスをカスタマイズ

focus fields

ボックスをクリックするとハイライトされます。

ToggleFormText plug-in

ボックスにテキストが表示されていて、クリックすると非表示にします。

テーブル関連

Tablesorter

ソートができるテーブル。

Table Drag and Drop JQuery plugin

ドラッグ&ドロップできるテーブル。

HeatColor

値に応じて背景色をかえるプラグイン。テーブル以外にも使えます。

その他お役立ち

jVariations

右側のフォームに応じて、ページの表示を切り替えられます。

Jquery Wizard Plugin

何かと使えそうで便利なウィザードプラグイン

jQuery clueTip

いろいろなタイプのツールチップを表示できます。

jQuery Chart Plugin

チャートのプラグイン

jQuery color picker plug-in

カラーピッカープラグイン

Color Picker

こちらもカラーピッカープラグイン

Progress Bar Plugin

プログレスバーを表示するプラグイン

お役立ちjQueryまとめ

50+ Amazing Jquery Examples- Part1

51種類の使えるjQueryのサンプルがまとめられております。

The ultimate jQuery Plugin List

こちらにもかなり多くのPluginがリストアップされていました。

1012 + Ajax/Javascript/Dhtml examples and demos to download

こちらは、jQueryだけでなく、いろいろなFrameworkを紹介されています。

jQueryを使ったサンプル集

お気づきの方もいらっしゃるかもしれませんが、週末このブログをMovableTypeからWordPressへ移行しました。

WordPressへの移行は、前々から検討していたのですが、とにかく面倒でこれまで放ったらかしにしていたのですが…記事数も結構増えてきて、再構築に時間がかかる事や、今後デザイン変更やら、いろいろな機能の追加やらを考慮して移行しました。

今回の移行のポイントは、パーマリンクをそのまま、metaタグもそのまま、デザインもとりあえずそのまま引き継いでWordPressに移行。

移行の手順は以下のサイトで詳しく解説されているので、ご参考に。

MovableTypeからWordPressへのURL込みの移行方法

↑こちらのサイトでも解説されているように、パーマリンク設定を以下のように設定すると、MovableTypeからWordPressに引き継ぐ事が出来ました〜。

また、Metaタグの移行も以下のプラグインを有効にして、データをインポートするとそのまま引き継がれたので、結構すんなり移行が進みました。

All in One SEO Pack

とりあえず、デザインは前のままWordPress用に書き換えて、最低限必要なプラグインをインストールして、移行完了。（まだまだ、不具合もたくさんあるかもしれませんが…）以下にとりあえず有効にしているプラグインをご紹介しておきます。基本的なものばかりです。。

cforms II

お問い合わせフォームのプラグイン。いろいろ設定が出来るので便利です。

Google (XML) Sitemaps Generator for WordPress

sitemap.xmlを生成してくれるプラグイン

Similar Posts

過去の関連記事を表示してくれるプラグイン

WP-PageNavi

ページング・ナビゲーションを表示させるプラグイン

FeedBurner FeedSmith

フィードをFeedBurnerにリダイレクトさせてくれるプラグイン

今後、徐々にいろいろなプラグインを追加していこうと思います。デザインもそのうち変更しようかな。。

クライアントさんからのお問い合わせで、以外に多いのがニュースレター機能です。

サイトのアップデート情報や新商品の情報をメールで通知する機能は、まだまだ人気があるようです。

WordPressを使っているユーザーの方々でもニュースレター機能が欲しい方も多いのではないでしょうか？

っちゅうわけで、本日はWordPressのニュースレタープラグインをいくつかご紹介。

1. wp-ajax-newsletter

Google Codeのページにアップされていたニュースレタープラグインです。最新の記事を一覧にして登録ユーザーにメールでお知らせしてくれます。マニュアル設定、週ごと、月ごとなど設定も細かくできて便利ですね。

2. Subscribe2

こちらも同様にユーザーにメールでお知らせ。。

3. WordPress Email Notification Plugin

こちらは、記事がアップされるたびに登録ユーザーにメールで通知。更新頻度の少なめなブログにはこちらの方がいいですね。

4. WP – Newsletter (de)

ドイツ語？のプラグインですが・・よくできてます。がんばれば何とかインストールできそう。

5. ShiftThis WordPress Newsletter Plugin

こちらは有料$30ですが、完成度はかなり高そうです。是非試してみたいプラグインです。

6. WP Mailing List

こちらも有料$14.99と、$29.99のバージョンがあります。上位バージョンではテンプレートやスケジュール機能まで付いているみたいですね。

まだまだ、わたくしの中で、これがベスト！っというプラグインが見つけられていませんが…

これから、いろいろ試してみようと思います。。

他にもっと良いプラグインがあるよ～って方は是非教えてください～！！

以前、ご紹介しました『WordPressで使えるプラグインを9つ』

日本でも、WordPressユーザーの方は結構いらっしゃるのですね･･･

AJAXを使ったWordPressプラグインをご紹介されている『30+ AJAX-Powered WordPress Plugins | Mashable』という記事を発見したので、この中から、いくつか実際に試してみたので、便利そうなものをいくつかご紹介。。

1. Ajax Wp

AJAXを使ってページを高速化できるそうな。。

2. AJAX Comment Preview
コメントをプレビュー

3. Crossroads Plugin

お持ちのFlickrから、サムネイルを表示してLightbox 2.0で表示できます。。

4. FireStats

WPの管理画面からアクセス解析

5. WP-Hardened-Trackback

スパム対策にトラックバックURLを毎回生成

6. Plug‘n’Play Google Map

GoogleMapをエントリーページに貼り付け

7. WP Mailing List

$14.99と･･･有料ですが･･･あなたのWPからメーリングリスト始めませんか？

8. WP e-Commerce

WPで簡単にショッピングサイト作るなら、これですね。。

9. WP-Polls

投票システムできます。。

10. WP-Post Ratings

エントリーへの評価が付けられます。

11. AJAX Comments 2.0

ページのリロードなしにサクっとコメント受け付けるなら･･･

12. AJAX Shoutbox

スパムフィルター付きのチャットです。。

13. Currency Converter

Yahoo! FinanceのAPIを使って、通貨変換を計算できます。。

14. Google AJAX Search Plugin

GoogleのAJAXサーチがつかえます。

15. Google MapSearch Widget

Google Map検索もつけられます。。

16. Hottaimoijiruna

設定したタイムゾーンの時計が表示できます。

17. Units Converter

インチやらメートルなどの長さや、重さなどの単位変換計算ツールがつかえます。。

まだまだ、使えるプラグインはいっぱいありそうですね。。。