[JS]Twitterのように残りの文字数をカウント表示するスクリプト -charCount
TwitterのUIのように、入力できるテキストの残りの文字数をカウントして表示するスクリプトをcss globeから紹介します。 Simplest Twitter-like dynamic character count for textareas and input fields デモページ 上記デモページではデフォルト版とカスタム版の二種類があり、デフォルト版は残りの文字数をカウントして表示し、カスタム版は設定した残りの文字数を超えると表示が強調されるようになっています。 スクリプトのオプションでは入力可能な文字数、強調表示する文字数の設定と、カウンターを配置する要素やクラス名やテキストデータを設定できます。 charCountはjQueryのプラグインのため、実装にはjquery.jsが必要です。
入力フォームの「必須」「任意」のラベルは両方付けないとコンバージョン率が下がる
[レベル: 初〜中級] 入力フォームのフィールドには、入力が「必須」なのかまたは「任意」なのかのラベルを両方付けることが推奨されます。 どちらか片方だけだと入力途中の離脱の原因になります。 ECサイトのユーザービリティ調査と最適化を専門に扱っているBaymard Instituteが詳しく解説しています。 15の大手ECサイトのユーザビリティ調査と18の主要なモバイルサイトのユーザビリティ調査、そして自社による最新の大規模なアイトラッキングテストによって実証することができました。 この記事では、その解説の要点をまとめて紹介します。 片方だけの「必須」「任意」ラベルの問題点 入力が「必須」か「任意」かをどちらか片方のラベルだけで示すことにはさまざまな問題点があります。 必須か任意かを示さないのはいちばんよくない そのフィールドの入力が必須か任意かを示さないのはいちばんよくないスタイルです。
第2回 アクションを起こしてもらえるフォームのポイントは？ | gihyo.jp
使いやすいフォームをデザインする6つのポイント みなさんは、どのようにフォームをデザインしているでしょうか？ CSSでスタイリングされていない素のHTMLフォームは、当然ですがデザイン性にとぼしいものです。また、入力エリアが狭いため、ユーザビリティも高いとは言えません。 フォームにはお問い合わせフォーム、申し込みフォーム、予約フォームなどいろいろありますが、共通するのは「ユーザーにアクションを起こしてもらう重要な要素である」ということです。しかし、フォームへの入力は、ユーザーにとって面倒な作業です。そのため、極力簡単に入力できるようにして、ユーザーの負荷を軽減する必要があります。 それでは、どうすればユーザーの負荷を軽減させることができるでしょうか？ そのためのポイントが以下の6つです。 要素を整列させる 適度な余白をつくる ディテールを作り込む デザインされたボタンを使う 住所を自動入力
フォームの「ガッカリ離脱」を防いでコンバージョン率UP！ 送信後エラー・ゼロ作戦／15か条の7 | 勝手にEFO分析-エントリーフォーム改善
フォームの送信ボタンをクリックしたとき、エラーが表示されたらガッカリしてしまいますよね。そうしたことが原因の「ガッカリ離脱」を防ぐために、エラーがない状態になるようにユーザーを導き、確認画面、完了画面に進んでもらうことが、完了率アップには極めて重要です。今回は、入力項目ごとに、ユーザーが入力した内容がフォームの求める形式になっているようにするための改善ポイントをご紹介します。 この記事では、入力フォームを改善して入力完了率を上げる！エントリーフォーム最適化15か条の【第7条】「入力エラーをリアルタイムで伝えるべし」をご紹介します。リンクをクリックするとこの記事下のまとめに飛びます。 「ガッカリ離脱」を未然に防いで、入力完了率アップをしようエントリーフォームにひと通り入力を終えて「確認／完了ページ」へ進もうとしたのに、エラーメッセージがでてガッカリした経験はありませんか？ ガッカリしたユーザ
入力箇所も手書き風にしたコンタクトフォームを制作するチュートリアル
メモ状のデザインのフォームに、ユーザーが入力した箇所のフォントをブラウザのデフォルトから変更し、手書き風にしたコンタクトフォームを制作するチュートリアルを紹介します。 デモページ：日本語は設定されてないため、ブラウザのデフォルトフォント 実装 フォームの制作はHTML+CSSだけでなく、メモ状のUIを作るPhotoshopのチュートリアルも掲載されています。 ここでは、デザイン部分は省略して、以下フォームの実装を紹介します。 HTML: 基本構造 まずは、HTML5を使ってフォームを配置する前の基本構造から。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Pen & Paper Form</title> <link href="style.css" rel="stylesheet" /> </head>
入力完了率を上げる！ フォームに入れるべき3つの入力支援機能／15か条の5 | 勝手にEFO分析-エントリーフォーム改善
全ての入力項目を終えた後に、エラーメッセージが出て、もう一度入力をユーザーに強いるのは、不快感を与えるだけでなく、離脱の原因になりかねません。今回は、それらを解決する方法として、入力をリアルタイムに支援する工夫を行っている実際のフォームを例に挙げ、入力完了率を上げる3つのポイントを解説します。 この記事では、入力フォームを改善して入力完了率を上げる！エントリーフォーム最適化15か条の【第5条】「入力に達成感を感じてもらうべし」をご紹介します。リンクをクリックすると第5条のまとめに飛びます。 入力完了率がアップする、入力を助ける3つ機能エントリーフォームに来て、入力を開始したユーザーは、特にフォーム側で工夫がなければ、項目への入力を行った際、「フォームで求められている入力形式や内容を満たしているかどうか」＝「入力完了」かどうかを自分で判断します。 この各項目の入力が完了したかどうかの判断を自
入力フォームのプレースホルダーを使ってはいけない
入力フォームのプレースホルダーテキストは、入力欄にどんな情報を入れたのかをユーザーが思い出すことや、エラーのチェック・修正を難しくしてしまう。また、視覚や認知機能に障害のあるユーザーにはさらなる負担となる。 Placeholders in Form Fields Are Harmful by Katie Sherwin on May 11, 2014 日本語版2014年6月17日公開 コンテクストに沿った説明やヒントは、入力フォームのそれぞれに何が入るかを明確にするのに役立つ。その結果、入力が促進され、コンバージョンレートは向上する。ヒントの提供方法はいろいろとある。実装として一般的なのは、入力フォーム内に説明を入れるやり方だ。しかし、残念ながら、入力フォーム内のプレースホルダーはユーザビリティに役立つよりも損なうことのほうが多いことがユーザビリティテストでは繰り返し示されている。 ラベル
ABテストでCVR改善に成功した海外事例まとめ15選！ | LISKUL
「海外ではABテストが盛ん」という言葉を耳にし、その内容が気にはなるものの、実際にそのノウハウや事例を外国語で仕入れるのは一手間だと、先送りにしてしまう人も多いのではないでしょうか。（かくいう私も「先送り」の日本代表です。） そんな皆様の一手間を解消すべく、海外のABテストの事例とその要点を日本語でまとめてみました。 普段から気になっている海外の事例を、どうぞサクッと日本語で仕入れちゃってください。 ※本記事は2014年5月19日に公開された記事をLISKUL編集部にて再編集したものです。 グローバルナビゲーションの削除とフォームの変形でCVR336％http://unbounce.com/a-b-testing/how-a-single-a-b-test-increased-conversions/ ・オリジナルページの特徴は、上部に分厚いグローバルナビが配置されていることと、右カラムに
見ているだけで楽しめる、オシャレで創造性にあふれたメールフォーム32選
通販での会員登録の際などに名前やメールアドレスといった個人情報を入力することになる「メールフォーム」ですが、ウェブサイトのデザインに比べてあまり凝っていないような気がしている人も多いのではないでしょうか。 ここでは、見ているだけで楽しめるような、オシャレで創造性にあふれたメールフォームを32種類集めています。どのサイトもデザイン性に優れているので、これなら面倒になりがちなメールフォームの入力作業も退屈せずに済みそうです。 メールフォーム32選は以下から。01：ArtFlavours 02：VISMAAd 03：Christian Sparrow 04：Justdot 05：The Spray Studio 06：Ryan Scherf 07：Sandalias XTR 08：SVN2FTP 09：Wing Cheng 10：Denise Chandler 11:Needle 12：fabr
見栄えがよくなった！Web制作するなら知っておきたいjQueryプラグインまとめ
作成：2014/05/7 更新：2014/11/01 Web制作 > ギャラリーサイトやECサイトなどで、最近よく見かけるデザインやエフェクトなど、制作前に知っておくと助かる、「どっかで見たことあるけど何だっけ？」といった感じのjQueryプラグインや最近のトレンドなるものをまとめました。ページにちょっとした工夫を凝らしたいとき、動きのある仕掛けでキャンペーンサイトを作りたいときに。 エンジニア速報は Twitter の@commteで配信しています。 もくじ メニュー １．フィーチャーリスト ２．スティッキーヘッダー 画像エフェクト ３．マウスオーバーで画像にキャプション ４．イメージビューア ５．ズームインエフェクト ６．ブラーエフェクト スクロール ７．Infinite Scroll(無限スクロール) ８．画像シーケンス ９．横スクロール １０．フリック機能 レイアウト １１．画面全
jQuery：チェックされたら or 入力されたら送信可能にするボタンを実装する方法 - NxWorld
割と頻繁に使うので備忘録。 jQueryを使用して「チェックボックスにチェックされたら送信可能にするボタン」と「文字が入力されたら送信可能にするボタン」をそれぞれ実装する方法です。 特にチェックボックスの方は利用規約などに同意してもらったかの部分で用いたりと使う場面が多いのではないかと思います。 チェックボックスにチェックされたら送信可能にするボタン ページが表示された際はイメージ左のようにボタンにはdisabledが指定されて送信できない状態になっています。 それを「利用規約に同意します」というテキスト横にあるチェックボックスにチェックが入ったら、ボタンに指定してあるdisabledを解除して送信可能にするというものです。 実装にはjQueryを使用するので予め読み込ませおき、それぞれ下記のように記述をします。 <input type="checkbox" id="check" /><l
[JS]HTML5の「プレースホルダーテキスト」をスクリプトで実装する旧式と今時の方法
HTML5のウェブフォームの機能「プレースホルダーテキスト」をHTML5に対応していないブラウザにも実装する旧式の方法、ModernizrとjQueryを使った今時の方法、の二つを紹介します。 HTML5対応ブラウザでは、「placeholder」の値がテキストフィールドに表示されます。 <form class="form"> <p><input type="text" placeholder="Your name please"></p> <p><input type="text" placeholder="Enter your email"></p> <p><input type="search" placeholder="Search"></p> <p><textarea placeholder="Write your comments here"></textarea></p> <
良いフォームの条件と、入力フォーム最適化（EFO）に関する 4つの基本＋2つの本質 | 初代編集長ブログ―安田英久
今日は、「良いフォームとはどんなものか」を考え、コンバージョン率をアップさせる入力フォーム最適化（EFO）の基本を紹介します。問い合わせフォームや申し込みフォームなどを改善するヒントにしてください。 良いフォームとはどんなものかEFOを考える前に、まず「良いフォーム」というのは、どういうものかを考えてみましょう。企業側から見ると、良いフォームとは次のようなものではないでしょうか。 申し込み数（フォーム入力完了数）が多いターゲットに合った顧客層の申し込み数が多いターゲットでない顧客層の申し込み数が少ない問い合わせ（「どうすればいいんですか？」などのサポート的なもの）が少ないまぁ、フォームの話題なので上記の「数が多い」というのは「率が高い」ということなのですが（訪問者数を増やせば、数は増やせるので）、ここは、わかりやすさのために「数が多い」としています。 入力フォーム最適化（EFO）の4つの基
味気ないデザインを一新！使いやすい検索ボックスを作る6つの方法
2017年6月29日 Webデザイン, ユーザビリティ ついついデザインはあとまわしになりがちな検索ボックス。少し手を加えるだけで素敵なデザインに！またユーザビリティについてもちょっとした工夫でもっと使いやすくなります。ユーザビリティ向上のためのコツとデザインの素敵な検索ボックスを紹介します！ ↑私が10年以上利用している会計ソフト！ 検索ボックスをもっと使いやすくする 1. 誰が見てもすぐ見つかる場所に ヘッダーやサイドバーの一番上など、ページを開いたときにすぐ見つかる場所に設置すると見つけやすいです。特に意図のない場合はコンテンツに混ぜたりフッターに設置するのは避けた方がよさそうです。 2. テキストボックスの背景色 デフォルトのテキストボックスの色が白のため、背景色はつけず白にしておいたほうがユーザーにとっては見つけやすいです。背景が白の場合はボーダーに線を入れたり、目立ように違う背
CSS3の可能性を見いだし、且つIE8でもレンダリングされる、使いやすくてかっこいいフォームを実装するチュートリアル
Custom Login Form Styling 下記は各ポイントを意訳したものです。 「使いやすい」フォームをつくるポイント 「使いやすい」と「かっこいい」を両立したフォームの実装 「使いやすい」フォームをつくるポイント ログイン、コメント、コンタクト、フィードバックなど、フォームの入力には多くの時間がかかります。もしフォームが使いにくいものであれば、それはあなたがユーザーを混乱させていると言ってもよいでしょう。 フォームをより使いやすく、ユーザフレンドリーにするポイントがいくつかあります。 ラベル ここで言う「ラベル」はlabel要素のことではなく、フォーム上に表示されるラベルです。ラベルは明確にしておく必要があり、この情報によってユーザーはそこに何を入力するべきか知ることができます。 ラベルにはアイコンなどを使って、ビジュアル的に理解を深めるようにしてもよいでしょう。 フィールド
Modern UI（旧：Metro）デザインのボタンやフォームを簡単に実装できるライブラリ -CSS3 Microsoft Modern Buttons
週末に発売予定のWindows8で採用されているModern UIの大きな特徴であるボタンやフォームを超軽量の外部スタイルシートファイルと簡単なclass指定で実装できるCSS3のライブラリを紹介します。 Modern Buttons CSS3 Microsoft Modern Buttons -GitHub ※キャプチャはWindows8のModern UI Modern Buttonsの特徴 Modern Buttonsのデモ：ボタン Modern Buttonsのデモ：フォーム Modern Buttonsの特徴 Modern Buttonsは、ボタンやフォームをCSS3で美しくスタイルした軽量（5.5KB gzipped）で使いやすいCSS/JavaScriptのライブラリです。 Modern Buttons クロスブラウザ対応 IE8をはじめ、最新のChrome, Firefox
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
いろいろなサイトのフォームのログインを集めた -Login Forms Design Showcase
[CSS]フォームの新規開発と既存カスタマイズ用のフレームワーク -Formee
ウェブUIの設計時に使える、ワイヤーフレーム用の無料のPSD素材
セキュリティ診断・検査のGMOサイバーセキュリティ byイエラエ
