バリデータをフォームに簡単に組み込みたい。 そんなあなたにおすすめなのが、『Ketchup Plugin』。シンプルなソースで拡張性の高いバリデータです。 使い方としては、まずはjsを読み込んでfunctionを記述。 次に、フォームをプレーンにXHTMLでコーディングした後、inputタグやtextareaタグに、「class=”validate(required, username, rangelength(3,20))”」といった指定を加えることで、バリデータ機能を実装することができます。 「jquery.ketchup.messages.js」を編集してUTF-8で保存することで、日本語のメッセージを出力できますね。メッセージが一カ所にまとまっていて、とても編集しやすいです。 バリデータのオプションはclassにカンマで区切って追加できるので、使いやすそうですね。 一度見てみてくだ

lpo-consulting.com The domain is on BIN Sales and available for purchase. 您访问的域名正在一口价出售中！ 一口价出售中！ 域名Domain Name:lpo-consulting.com 售价Listing Price:CNY 888.00 立即购买>>    BUY NOW>> 通过金名网(4.cn) 中介交易 金名网(4.cn)是全球领先的域名交易服务机构，同时也是Icann认证的注册商，拥有六年的域名交易经验，年交易额达3亿元以上。我们承诺，提供简单、安全、专业的第三方服务！ 为了保证交易的安全，整个交易过程大概需要5个工作日。 具体交易流程可“点击这里”查看或咨询support@goldenname.com。 我要购买>> Process Overview: 4.cn is a world leading d

【解説】今回の商材（DVD）は商品名、値段なども購買意欲を刺激することに貢献する可能性が高いと考えます。よって、ユーザがわざわざ画像にマウスオンしなければそれらの情報が伝わらない仕様は避けるべきです。 解説詳細 「画像のみ配置し、ユーザがマウスオンすると詳細情報を表示する」といった機能は、主に以下のような意図から実装されることが多いと考えます。 ・商品サムネイル画像のサイズを出来るだけ大きくしたい ・レコメンドスペースに掲載する商品数を増やしたい ・見た目をすっきりさせることでデザイン性を高めたい 確かに、従来の方法と比べてみると上記のようなメリットが存在するかもしれません。 しかしながら、今回のケースは ・目的がユーザの購買意欲向上であること ・商材がDVDであること この2点からあまりオススメできる手法ではないと言えます。以下で詳しく説明していきましょう。 今回の商材（DVD）は、 ・

【解説】ブランドで絞込みたいユーザは、頭にある「特定のブランド」をすぐ見つけたいと考えています。プルダウンは一度に見える選択肢に限りがあるため、大量の選択肢を詰め込むと、ユーザに適量のスクロールを求める形になり、ユーザの期待に添えない機能になってしまいます。 解説詳細 まず、ブランドで絞り込みたいと考えているユーザがどんなユーザであるか、を想像することから始めましょう。 「ブランドで絞り込みたい」と考えているユーザは「特定のブランド」を頭に浮かべているはずですから、そのブランド名を頭で復唱しながら画面を見ているはずです。 では、その状況下で用意されていてほしい画面は次のうちどちらでしょうか？ 「ブランドFを探しているユーザ」になりきって考えてみましょう。 パターンAのプルダウン方式で探そうとすると、スクロールによる見落としが発生しやすい上、自分が見落としただけなのか、それとももっとスクロー

コンバージョン率向上を考えた場合、エントリーフォーム最適化（EFO）など、フォーム内の改善に意識が向きがちですが、実はフォームに入る前の段階にも改善すべき点が残されている場合があります。 今回はフォームに入る前のページでよくみられる、ユーザのつまずきやすいポイントをご説明します。 ウェブサイトを訪問しているユーザにとって、個人情報の入力などの手続き行為は主目的ではありません。商品を購入したり、申し込み後にサービスを利用することが本当の目的です。その目的に早く到達するため、手続き行為にはできるだけ手間をかけず、手早く終わらせようとする傾向が見られます。 ここで、注意が必要なのが手続きの途中に会員登録のステップがあるケースです。 ECサイトでは「購入」の手続きの途中で「既存/新規ユーザ」の振り分けが行われる場合がありますが、ユーザは手続きのステップとして「会員登録」が必要あることを必ずしも事前

複数選択が可能でスタイリッシュなドロップダウンメニュー実装用「jQuery MultiSelect Plugin」 2010年02月04日- jQuery MultiSelect Plugin/Widget with ThemeRoller Support | Eric Hynds - Website Developer 複数選択が可能でスタイリッシュなドロップダウンメニュー実装用「jQuery MultiSelect Plugin」が公開されています。 デザインもいいのですが、こうした機能は標準のHTMLではないので、こうしたUIが必要な局面は助かりそうですね。 選択すると、何個selectしたかという表示や、クリックの際のイベントハンドラも設定できます。 すべて選択、すべて解除もついてて細かいところにも気が利いてますね。 毎度ですが、必要なJS/CSSを読み込んだら次のように実装は１行

このドメインは お名前.com から取得されました。 お名前.com は GMOインターネットグループ(株) が運営する国内シェアNo.1のドメイン登録サービスです。 ※表示価格は、全て税込です。 ※サービス品質維持のため、一時的に対象となる料金へ一定割合の「サービス維持調整費」を加算させていただきます。 ※1 「国内シェア」は、ICANN(インターネットのドメイン名などの資源を管理する非営利団体)の公表数値をもとに集計。gTLDが集計の対象。 日本のドメイン登録業者(レジストラ)（「ICANNがレジストラとして認定した企業」一覧（InterNIC提供）内に「Japan」の記載があるもの）を対象。 レジストラ「GMO Internet Group, Inc. d/b/a Onamae.com」のシェア値を集計。 2023年5月時点の調査。

Feedback UI Plugin 自由な位置にalert表示できるjQueryプラグイン「Feedback UI Plugin」のご紹介。 Feedback UI Plugin を使うと、$(element).feedback('メッセージ'); のようにするだけで、対象のエレメントの側に次のようなalertメッセージを表示することができます。 左、右のどちらかに表示するかという点も決めれる他、cssのクラス名を指定してカスタマイズすることもできます。 フォームのバリデーションに特化しているわけでなく、特定のエレメントに対して行えるので、ユーザビリティの向上に色々な部分に柔軟に使うことができそうです。

高さの上限値を設定（max:300px） 設置方法は簡単で、スクリプトを外部ファイルとして記述し、下記のようにスクリプトにセレクトボックスを指定し、オプションなどを記述するだけです。 <textarea name="code" class="js" cols="60" rows="5"> $(document).ready(function(){ $('#my-dropdown').sSelect(); }); </textarea>

フォームの入力時に、入力欄に配置されたラベルが枠外にアニメーションで移動するスクリプトをCSSKarmaから紹介します。 Form Design with Sliding Labels デモページ スライドするアニメーションもクールですが、フォームのデザインをすっきりできるのもこのスクリプトの大きな特長です。 通常のマークアップ、スタイルシートの適用、スクリプトの適用と三段階を比べてみます。

TwitterのUIのように、入力できるテキストの残りの文字数をカウントして表示するスクリプトをcss globeから紹介します。 Simplest Twitter-like dynamic character count for textareas and input fields デモページ 上記デモページではデフォルト版とカスタム版の二種類があり、デフォルト版は残りの文字数をカウントして表示し、カスタム版は設定した残りの文字数を超えると表示が強調されるようになっています。 スクリプトのオプションでは入力可能な文字数、強調表示する文字数の設定と、カウンターを配置する要素やクラス名やテキストデータを設定できます。 charCountはjQueryのプラグインのため、実装にはjquery.jsが必要です。

ブラウザが落ちてもフォーム内容が消えないようにするjQueryプラグイン「jQuery autosave」 2010年01月19日- rikrikrik.com - jQuery autosave plug-in ブラウザが落ちてもフォーム内容が消えないようにするjQueryプラグイン「jQuery autosave」。 データを編集中にフォームに書き込んでいて、ブログ記事などが消えたりするとても悲しい気持ちになりますが、このプラグインを使えばデータをブラウザのクッキーに保存してくれて、次にアクセスした時にリストアできるという素晴らしいプラグインです。 クッキー保存のため、サーバに保存する必要はないですし、手軽に使うことができそうです（ブラウザごとにクッキーに依存した文字数制限などは存在すると思います） こういうことを１からやろうとすると結構大変ですが、毎度のことながら、jQueryプラグ

オンラインストアでの注文やフォームなどで、ユーザーの進捗を明示するプログレストラッカーの概要や特長、実装例、よくある間違いなどをSmashing Magazineから紹介します。 Progress Trackers in Web Design: Examples and Best Practices 以下はそのポイントを意訳したものです。 1. プログレストラッカーとは？ 2. プログレストラッカーとパンくずの相違点 3. プログレストラッカーの活用 4. プログレストラッカーのベストプラクティス 5. プログレストラッカーの実装 6. プログレストラッカーのよくある間違い 7. プログレストラッカーのショーケース 1. プログレストラッカーとは？ プログレストラッカーとは進捗を明示するもので、複数のステップがあるプロセスを完了するためにユーザーの手助けとなるものです。 オンラインのプロダ

最後に入力した文字がわかるより優れたiPhone風パスワードフィールド実装ライブラリ「PassShark」 2010年01月15日- QUERIDODESIGN - Blog 最後に入力した文字がわかるより優れたiPhone風パスワードフィールド実装ライブラリ「PassShark」 通常のパスワードボックスは入力した時点で●とか*に置き換えられてしまい、入力時点で間違っていても気づくことができません。 そこでiPhoneでは最後に入力中の文字はそのまま表示するというUIになっているわけですが、次のようにPCでも同じような入力フィールドを簡単に実装できます。 Mootoolベースのライブラリです。 過去にも同様のものを紹介しましたね。 関連エントリ 最後の文字だけ読めるiPhoneのパスワードフィールドそっくりな入力フィールド作成用jQueryプラグイン 何を入力したかが分かるiPhoneス

ウェブサイトにおいてユーザにいくつかの質問に答えてもらい、その結果として当該サイトが提供するサービスを紹介する「診断ツール」が存在します。旅行会社サイトで好みのツアーを診断したり、証券会社サイトで適切な投資スタイルを診断するなど、様々な場面で用いられています。 今回はこの診断ツールで、ユーザに回答してもらう質問について考えてみたいと思います。 先程述べたツアー診断など、ユーザの好みが強く表れる診断ではこの点が特に問題になることがあります。ここでは、同じくユーザの好みが強く表れる分野として、ブライダルでの例をご紹介します。 弊社が、とある結婚式場紹介サイトで行ったユーザ行動観察調査でのことです。ユーザの好みにあった結婚式プランを診断するサービスを設計するために、質問に対する選択肢として下記の2種類を用意しました。 その結果、Aに比べてBの選択肢に好印象をもったユーザが見受けられました。具体的

PHPからTwitterを簡単に操作できるPEARパッケージ「Services_Twitter」がアッ... 次の記事 ≫：PHP関数の挙動をちょっと調べたいときに助かる「PHP Functions Online」 jQuery Form Tips Plugin フォーム要素にうっすらデフォルト値を入れてヒント表示できる「jQuery Form Tips」 フォームにデフォルト値を入れておくことで利用者が何をいれていいのか、というのが直感的にわかり、かつスペースもとらないのでよく使われる手法ですが、実装も超簡単にやりたいですね。 jQuery Form Tips を使えば、フォーム要素の title 属性に値を入れておくだけでヒントを自動表示できます。 <p> <label for="i1">Field1</label><br /> <input type="text" name="i1"

お問い合わせフォームをAjaxのポップアップで表示できる面白いサービスがありますので、ご紹介したいと思います。「VisitorContact」というサービスです。 VisitorContactの実装は簡単です。VisitorContactのサイトにサインアップして必要な情報を入力すると、埋め込み用のJavaScriptコードが生成されるので、それをご自身のWebページにコピー&ペーストするだけです。これらの手続きは基本的に無料です。 このVisitorContact、ユーザビリティの観点で細かく見るといくつか問題があるため、もろ手を挙げておすすめ！というわけではありませんが、ユーザー行動の動線を少しでも短くし、ユーザーが目的を達成しやすくする試みとして、Ajaxの利点をうまく活用していると思います。 VisitorContactのフォームは、「contact」と書かれたリンクバッジをクリッ

クールなフォームのPhotoshopテンプレート集「Web Form Elements」がdeviantARTで公開されています。 次のようにフォームのレイアウトがパーツごとにレイヤーで分かれた状態で公開されています。 クールなフォーム実装をする際の参考にできそうです。 以下のエントリを参照してください。 Web Form Elements by ~sniperyu on deviantART Web Form Elements Vol.2 by ~sniperyu on deviantART 関連エントリ CSSでデザインされたテーブルレスでクールなフォームサンプル 超クールなログインフォームを作成するチュートリアル 画面遷移なしのクールなフォーム作成サンプル CSSでクールなINPUTフォームを作成するサンプル