こんばんは、最近ホルモン焼きにハマっているishidaです。 WEBサイト制作時、formは必ずといってもいいぐらい存在します。 お問い合わせフォームや会員登録フォームなどがすぐに思いつきますよね。 デザインをがっつりフォーム部分で作り込んでも、CSSのみでは、 実現できなかったりすることもよくあります。 そんなクセのあるformを、よりリッチに！かつ操作性を向上！できるjQueryプラグインの数々をご紹介します。 デザイナーの方は、フォームのデザインの参考に。 コーダーの方は、ページ作成時間の短縮に手助けになればと思います。 jQuery plugin: Validation フォームの入力チェック（バリデーション）が簡単にできるプラグイン。 エラーメッセージはlocalizationディレクトリ内に18言語用意されています。 日本語用は別途作成し、使用することが可能です。 jQuery

『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day

フォームにおいて、ある入力コントロール同士が、同時に存在していると入力内容の矛盾または操作ミスを発生させる関係にある場合、もしくは、ある入力項目をオプション扱いにして使用するかどうかをユーザーに選ばせる場合、不要なコントロールをディスエーブルにする。 理由：入力方法や、指定する条件の種類に関して、選択肢をユーザーに与えると同時に、コントロール同士の依存関係およびどのコントロールが使用不可となっているかを視覚的に表現するため。 効能 現在、どのコントロールが使用可能で、どれが使用不可能か、視覚的に分かる。 ある操作に応じて、コントロールのイネーブル／ディスエーブルが変化する様子を見ることで、コントロール同士の依存関係（コントロールAを使うならばコントロールBは使えない）を把握できる。 同時に入力しても意味がないコントロールはディスエーブルになるので、バリデーションが単純になり、入力エラーも減

ひとまとまりのコントロールが配置された領域を、ユーザーが任意に開閉して、一度に見えるコントロールの量を調節できるようにする。 理由：スペースを節約して画面をシンプルに保ちながらも、隠されたコントロールにユーザーがすぐアクセスできるようにするため。 効能 提示するコントロールが多く、すべてを一度に見せると画面が複雑になり面積も大きくなりすぎるような場合に、ユーザーが任意に表示を調節して不要なものを隠しておくことができる。 ほとんどのユーザーには必要のないコントロールをデフォルトで隠しておき、操作をシンプルに見せることができる。また簡単な操作で残りのコントロールを表示させることができ、必要がなくなればまたすぐに隠すことができる。 用法 一連のコントロールが配置されたブロックの表示／非表示を切り替えられるようにする。例えば多くの項目を含んだメニューリストやプロパティシートなどにおいて、カテゴリー

ユーザーの選択操作に応じて、フォーム内に提示するコントロールを一部だけ切り替える。 理由：ユーザーの選択操作を条件分岐としてそれに続く操作対象を変化させるため。その変化のバリエーションが複数ある場合、ひとつの領域を使って切り替えることで画面面積を節約するため。 効能 一連の入力作業において、途中の項目選択に応じて次に提示するコントロールを条件分岐させたい場合、次画面に遷移しなくてもその場で入力を継続できる。 ある作業のために複数の手段があり、一度にひとつしか行えない場合、ユーザーが任意に手段を選択できる。 条件分岐のきっかけと、条件分岐の結果どのように要素が変化するかを、その場でユーザーが確認できる。 用法 切り替えのきっかけ（トリガー）となる選択肢をラジオボタンまたはドロップダウンメニューで提示し、ユーザーがそれを操作すると同時に必要な部分を切り替える。 切り替えバリエーションのうち最も

『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day

GT Nitro: Car Game Drag Raceは、典型的なカーゲームではありません。これはスピード、パワー、スキル全開のカーレースゲームです。ブレーキは忘れて、これはドラッグレース、ベイビー！古典的なクラシックから未来的なビーストまで、最もクールで速い車とカーレースできます。スティックシフトをマスターし、ニトロを賢く使って競争を打ち破る必要があります。このカーレースゲームはそのリアルな物理学と素晴らしいグラフィックスであなたの心を爆発させます。これまでプレイしたことのないようなものです。 GT Nitroは、リフレックスとタイミングを試すカーレースゲームです。正しい瞬間にギアをシフトし、ガスを思い切り踏む必要があります。また、大物たちと競いつつ、車のチューニングとアップグレードも行わなければなりません。世界中で最高のドライバーと車とカーレースに挑むことになり、ドラッグレースの王冠

第0回 その気になった客を逃さないフォーム設計術 現実の店舗や窓口では、目の前にいるお客が困っていればすぐにわかるし、同じトラブルが重なれば問題が起きないように施策をとる。しかし、ウェブサイトを作っているときにはお客は目の前にいないし、公開後にお客の対応をするのはウェブサーバーやスクリプトという機械だ。そのため、現実の商売では当然のように行っている接客ができない、いや忘れてしまってはいないだろうか？ 今木 智隆（株式会社ビービット） ウェブサイトの「ユーザビリティー」という言葉は、当たり前のように耳にする機会が増えてきた。しかし、その知名度の広まりとは裏腹に、「何をどうすれば成果に結びつくのか」「実践に落とし込むにはどうしたらよいのか」について具体的に取り上げられることは少ないようだ。 この連載では、主に「会員登録による顧客獲得を行う企業サイト」をモデルとして、想定される次のようなユーザー

(1) 住所入力部分住所入力、特に郵便番号の入力はフォームの中でもユーザーが手間取る箇所である。サンプルフォームでは、入力のパターンが例示されていないため、「全角入力なのか、半角入力なのか」「ハイフンは入れるべきなのか」といった点がわからず、エラーを起こす確率が大きく跳ね上がる。 現実の世界では、役所や定期券売り場には、必ずと言っていいほど入力サンプルが置いてあるのを思い出してほしい。入力エラーによってユーザーが脱落するのを防ぐためには、「例：952-0012」のように記入例を明記するといい（もちろん、さまざまな入力パターンにシステムで対応することが最も理想的な解決案ではある）。 ただし、入力している部分から離れたところに入力例が書かれていては意味がない。ユーザーは入力に集中しているため、入力フィールドから離れた位置にこれらの情報を提示しても気づかないことが多い。記入例や注意点は、入力フォ

これは便利そう。 『validate.js』ではフォームのさまざまな入力をチェックしてくれます。URLやメールアドレスなどのよくあるチェックに加え、ISBNかどうかといったマニアックなチェックもできます。 マニュアルに載っている命令をご参考までに。 hasValidChars isSimpleIP isAlphaLatin isNotEmpty isIntegerInRange isNum isEMailAddr isZipCode isDate isMD5 isURL isGuid isISBN isSSN isDecimal isplatform addRules Apply サイトでは動作チェックのデモもあります。コードも見れますよ。 ↑ こんな感じでさまざまなチェックができます。 詳細＆ダウンロードはこちらからどうぞ。 » Mutationevent :: Validate.js