実践して結果を出す、コピーライティングの技法 | Webコンサルティング
免責事項：本サイトに含まれる情報は、一般的な情報提供のみを目的としています。情報はスペシャルベストによって提供され、当社は情報を最新かつ正確に保つよう努力しますが、いかなる目的においても、ウェブサイトまたはウェブサイトに含まれる情報、製品、サービス、関連グラフィックスに関する完全性、正確性、信頼性、適合性、利用可能性について、明示または黙示を問わずいかなる表明または保証も行いません。従って、これらの情報に依拠することは、あくまでもお客様ご自身の責任において行われるものとします。 当社は、当ウェブサイトのご利用に起因するいかなる損害についても責任を負いません。 本ウェブサイトから、スペシャルベストの管理下にない他のウェブサイトへリンクすることができます。当社は、それらのサイトの性質、内容および利用可能性を管理することはできません。リンクは必ずしも推奨するものではありませんし、リンク先で述べら
【スマートフォン】 図解！今すぐ直せる、WEBフォーム 6つの課題 (ユーザビリティ実践メモ)
スマートフォン端末の普及で、問い合わせ・申込みなどのWEBフォームがスマートフォンで使われる機会は今後も増えていくでしょう。その際、PC向けに用意していた既存のWEBフォームをそのままにすると、どんな問題が発生するでしょうか？ 今回は、弊社コンサルタントの自主調査から、スマートフォン端末（特にiPhone）でのWEBフォーム利用時の6つの頻出課題をご紹介します。 多くのWEBフォームでは、項目名が入力ボックスの横に配置してあります。 PCでは全く問題のないレイアウトですが、iPhone端末では入力ボックスをタップしてズームインするとラベルが見えなくなり、非常に入力しにくいものになってしまいます。 【改善案】＜推奨＞入力例を入力ボックスの上または下に配置する項目名（ラベル）を入力ボックスの上部に配置する ※項目名の位置が変わるとPCで見にくくなるケースも想定されるため、ご注意ください 課題2
スマートフォンサイトにてフォームボタンのコーディング時に覚えておきたいCSSプロパティ | バシャログ。
禁煙してから３ヶ月、着実に体重が増加しているishidaです。 先週土曜日にCSS Nite LP13に参加してきました。 ちょうどスマートフォンのデザインとコーディングのお仕事が進行中でしたので、とても参考になりました。現在セミナー内容を振り返り学習中です。 それとCSS Nite関連ですと、何やら CSS Nite LP14 にて弊社メンバーが登壇するとかしないとか。 スマートフォンコーディングでは、CSS3で角丸やらグラデーションが使えるので画像の使用頻度は少なくなります。ボタンまわりについてもCSSのみで実装する機会が多いです。 フォームのsubmitボタンをCSSのみで表現する際には、ちょっとクセがありましたので 解決方法をご紹介します。 検索するsubmitボタンを、以下のようなデザインをCSSのみで実装することにします。 まずは簡単に横幅と背景色・角丸をCSSで設定してみます
jQueryによるフォームデータ取得方法のまとめ
jQueryによるフォームデータ取得方法のまとめです。 フォームデータの取得で分かりにくいのは、セレクトボックス・ラジオボタン・チェックボックスの3種類ではないかと思われます。本エントリーではこの3種類にターゲットを絞り、動作サンプルを用いて解説します。「$」は「jQuery」で記述しています。 2012.06.19追記：テキストフィールド・テキストエリアの取得方法も追加しました。 2014.05.11追記：チェックボックスの取得方法をattr()からprop()に変更しました。 ネットで検索したところ、まとまった記事がなかったので自作しました。なお、本エントリーに掲載している方法以外にも色々なやり方があると思いますので、一例として参照して頂ければ幸いです。 １．セレクトボックスの値を変更したときに取得 セレクトボックスの値を変更したときに取得するには、changeイベントとval()を組
色んなサイトのログイン画面を見てデザインを学ぶよ。
こんにちは、霙です。 以前アメブロの方でまとめていた記事をこちらに持ってきて書きなおしました。 古い記事を参考にしてるのでもう皆さんご存知でしょうから、自分が参考にしたいなーと思うデザインを自分が忘れないためだけにメモしておこうという趣向で書いていますｗ 参考サイト ググるとすぐ出てきますのでご存知の方のほうが多いでしょうけれど、 私はログインデザインを大量に眺めたい時、おもに以下の2サイトを舐め回すように見ています。 何百種類もあるのでとっても参考になりますね。 100 Outstanding Login Forms | Design Reviver 100個ものログインフォームが掲載されている記事。（2009年モノです） 海外のデザインって自由な感じで羨ましい。。 Login Forms Design Showcase | Elements of Design こちらも膨大な量のログイ
ログインフォーム製作時に個人的に参考にしたいデザインのメモ。
シンプルで柔らかい色合いのログインフォーム。なんと商用利用可能なPSDファイルだそうです。 （＊利用する際は必ずライセンスの確認をご自身でされてください） 参照元： Free PSD: Elegant Login Form Design | Premium Pixels 2:PSDfreemium 横長タイプのログインフォーム。サインインボタンの位置が右揃えではなく少しはみ出ています。反対側に配置してある「Lost Password?」も少しはみ出ているからバランス良く見えるのかな。 こちらも商用利用可能なPSDファイル。 （＊利用する際は必ずライセンスの確認をご自身でされてください） 参照元： Minimalist Login Form | PSDfreemium 3:wakoopa
入力するのが楽しくなる、アニメーション機能を伴ったフォームを作成するチュートリアル | コリス
jQueryとCSS3を使って、複数のステップをアニメーションで次々に表示するフォームを実装するチュートリアルを紹介します。 How to Create A Multi-Step Signup Form With CSS3 and jQuery デモページ フォームの下部にある「プログレスバー」の存在もユーザビリティ的に見逃せない存在です。 [ad#ad-2] フォームのデモ フォームは全部で4つのステップで構成されており、さまざまなスパイスが含まれています。 2枚目のフォーム フォームの進捗状況は、下部のプログレスバーに表示されます。 ※個人的には%でなく、2/4が分かりやすいと思います。 フォームの実装 HTML：基本構造 フォームの基本構造は、4つのステップをそれぞれdiv要素に格納します。 <div id="container"> <form action="#" method="
超カッコいい確認ダイアログをjQueryで実装するチュートリアル:phpspot開発日誌
How to Create a jQuery Confirm Dialog Replacement | Tutorialzine 超カッコいい確認ダイアログをjQueryで実装するチュートリアル 普通、ダイアログというと javascript の confirm とか、その他 jquery プラグインを使って実装されるものが多いですが、これまで見たなかでもかなりのカッコよさのダイアログ実装チュートリアルです。 サンプルのダウンロードも可能。 一見全て画像のようにも見えますが、CSS3を使って綺麗にデザインされています。 ここら辺もこだわりたいという方は参考にしてみるとよさそう。 関連エントリ 効果音付きでアニメーションするクールなダイアログ実装jQueryプラグイン「Float Dialog」 その場でポップアップするクールな確認ダイアログ実装用jQueryプラグイン「jConfirmAc
既存のフォームをユーザーに使いやすくする10のポイント
10 Tips for Optimizing Web Form Submission Usability [ad#ad-2] 下記は各ポイントを意訳したものです。 1. 必須入力欄は強調する 2. エラーメッセージは分かりやすく 3. クライアントサイドのバリデーション 4. 入力している欄を明示 5. 進捗を明示 6. データの保存やキャッシュ 7. 送信ボタンの文言 8. キャンセルボタン 9. 入力例の記載 10. 垂直に配置 1. 必須入力欄は強調する ユーザーはフォームに入力した後に入力ミス・エラー表示があると、不安を感じたりイライラを募らせるでしょう。まずは、入力欄に「必須」「任意」などを記載して、入力欄が必須なのか任意なのかを明示的にユーザーに伝えるのは安全な方法となります。 2. エラーメッセージは分かりやすく フォームのエラーメッセージは、「あなたが下に必要とさせるフィー
[JS]フォームの入力欄を次々にアニメーションで表示するスクリプト
フォームの項目を入力すると、次の入力欄がアニメーションで表示されるコンテンツを実装するチュートリアルを紹介します。 Gravity Registration Form with Jquery デモページ [ad#ad-2] フォームの出来ぐあいは、ウェブアプリケーションとしての成功率を左右する要因となります。 一つのアプローチとして、ユーザーに入力欄の数を少なく感じられるように、入力する項目を一つずつ表示するスクリプトを紹介します。 フォームの実装 フォームの各項目は、リスト要素で実装しています。 HTML <form method="post" > <ul> <li class="email"><label>Email: </label><br/> <input type="text" username="email" id="email" AUTOCOMPLETE=OFF/><span
CSS3とjQueryでフォームを美しく装飾する方法
2014年8月22日 CSS, jQuery どんなWebサイトでも設置されているフォーム。なんの装飾もなく味気ないフォームより、デザインされたもののほうが連絡してみたくなるはずです！そんなフォームも少し手を加えるだけで素敵なデザインに変身させることができます。今回はCSS3とjQueryを使ってより美しいフォームを作成する方法を紹介します。 ↑私が10年以上利用している会計ソフト！ フォームの仕様 今回チャレンジするフォームの主な仕様です！ グラデーション・ボックスシャドウを使って立体感を表現 角丸で丸みをつける（モダンブラウザ） 対応ブラウザ: IE7△, IE8△, IE9, Firefox, Chrome, Safari フォーム制作の流れ CSS3ってなんだ？という人もひとつひとつ記述していけば意外と簡単に作れるはずです！リンクをクリックで各項目にジャンプします。 テキストボック
フォームのラベルと入力欄を縦一列に配置するとより速く書きこめる三つのポイント
フォームのラベルと入力欄を縦一列に配置すると、横一行に比べてユーザーがより速く書きこめる三つのポイントを紹介します。 Why Users Fill Out Forms Faster With Top Aligned Labels 下記は各ポイントを意訳したものです。 visual fixation visual direction vertical space まとめ visual fixation 「visual fixation」は一点（面）をみつめる固視のことで、上記の五つ入力項目があるフォームでは、横一行：10箇所、縦一列：5箇所になります。 縦一列は一つの入力項目に対して、半分の固視ですみます。 visual direction 「visual direction」は視方向です。横一行は水平・垂直方向の二つを必要とし、縦一列は水平方向の一つのみです。 vertical space
[JS]フォームの入力欄にテキストを表示するスクリプト -Textbox Hinter
設置も簡単、カスタマイズも容易、フォームのテキストボックスとテキストエリアにテキストを表示するスクリプトを紹介します。 表示するテキストにはclassを付与できます（Demo 3参照）。 jQuery Textbox Hinter Plugin デモページ 主な特長 シンプルで軽量 スクリプトの知識は不要 表示するテキストにclassを付与できる textareaにもテキスト表示が可 クロスブラウザ対応 カスタマイズが簡単 デモと実装方法 実装は簡単で、フォームの各パーツに任意のclassを与え、テキストはJavaScriptに記述します。
[JS]フォームに入力したパスワードを可視化するスクリプト -Show Password
jQuery Show Password Plugin デモページ 実装は既存のフォームにも簡単に組み込めます。 HTML デモのHTMLはシンプルです。 可視化は、パスワードのclass名を参照しています。 <textarea name="code" class="html" cols="60" rows="5"> <form action="#"> <ol class="forms"> <li> <label for="username">Username</label> <input type="text" id="username" /> </li> <li> <label for="password">Password</label> <input type="password" id="password" class="password" /> </li> <li class=
どんなフォームにも使えるjQueryのフォームバリデーション exValidation :: 5509
jquery.validation.jsというフォームバリデーションプラグインを公開していますが、使える場面が割と限定されてしまうような作りだったので、より幅広く使えるようにexValidationという名前で新しいjQueryプラグインとして作り直しました。伴って仕様や使い方が異なる部分も多いので、ドキュメントとして書いておきます。ただし前半のバリデーションルール周りは同じエンジンを使ってるので、ほぼ同じです。ちなみにすごい長いです。。 ルールを割り当てる際のclass名がhogeからchkhogeに代わりました。アップデートして使う場合は注意してください。 サンプル1: エラーを右上に表示 サンプル2: エラーを下に表示 トピックス ダウンロード 使い方 1. JSファイルを読み込む 2. 基本バリデーションルール 3. select, checkbox、radio、複数項目の場合 4
[JS]超軽量・超高性能のコンテンツスライダーのスクリプト -Sudo Slider
クロスブラウザ対応、各パネルのブックマークやスクリプトのオフ時も配慮されたアクセシブルで超軽量・超高性能のコンテンツスライダーのスクリプトを紹介します。 Sudo Slider jQuery Plugin デモページ Sudo Sliderの主な特長 リスト要素で簡単にスライダーを実装。 AJAXで画像やHTMLをロード。 スクリプトのオフ時でもコンテンツが可能。 マルチプルなスライダーにも対応。 標準的なスライドからフェードまで多彩な表示を用意。 各パネルへの直接リンクが可能（ブックマーク可）、ブラウザの「前へ」「次へ」をサポート。 パネル内は画像、テキスト、動画、フォームなどさまざまなHTMLコンテンツを表示可能。 自動再生でスライドショーも可能。 ループ再生も可能。 セットアップは簡単で、カスタマイズも簡単。 IE6+, Fx, Chrome, Safari, Opなど主要ブラウザの
[JS]フォームの入力欄にラベルをくっきりうっすら表示するスクリプト
フォームの入力欄にラベルを通常時にくっきり、フォーカス時にうっすらとアニメーションで表示するスクリプトを紹介します。 jQuery FormLabels Plugin デモページ スクリプトの特徴 クロスブラウザ対応。 ラベルをアニメーションで表示。 多数のオプションと旧式ブラウザへの配慮。 フォームのマークアップを変更しないシンプルさ。 フォームのラベルはinput要素と同じスタイルが可能。 パスワードのラベルはアスタリスク（*）ではなく、テキストで表示。 スクリプトのデモ デモページではいくつかのデモがありますが、デフォルト版のものをキャプチャで紹介します。 デモページ 入力時には入力したテキストが反映されます。 スクリプトの仕様 以下のフォームの要素に対応しています。 input[type='text'] input[type='email'] input[type='passwor
今日から現場で使えるjQueryのフォーム関連プラグイン15選
Webサイト制作で欠かせないのがフォーム。 これらは購入時や、お問い合わせ、ログインと言ったパーツで良く使われます。 今回はそんなフォームにスポットを当てて、なるべく使いやすく、導入しやすいものをご紹介いたします。 ただし、あくまでもjQueryプラグインのご紹介なので、よくわからないと言う方は華麗にスルーしてください。細かい導入方法までは説明しません。 機能性重視プラグイン In-Field Labels jQuery Plugin フォームの中に入っている文字がオンクリックでうっすらと消えていくプラグイン。 なかなかいい感じ。 Create a Progress Bar With Javascript | Nettuts+ demo シームレスにフォームの内容を変え、さらにどれくらい進んでいるかが％で確認できる。 overset - jVal - jQuery Form Field V
あなたのWebを入力しやすくするjQueryプラグイン10選
あなたのWebを入力しやすくするjQueryプラグイン10選：CSSの書き方も分かるjQueryプラグイン実践活用法（終）（1/5 ページ） jQueryと、そのプラグインの使い方を、UI効果（エフェクト）のテーマごとに紹介する連載。jQuery/JavaScript/HTMLコードだけではなく、CSSの書き方も解説することで、より実践的にjQueryプラグインを使うための参考ドキュメントになることを目指しています。 前回の「画像や動画を綺麗に回転/拡大するjQueryプラグイン」では、イメージを回転させたりズームインする「jCarousel」「Zoombox」プラグインの使い方を解説しました。今回は、フォームを使いやすくするための各種プラグインを、以下のようにチェックボックス／ラジオボタン、ドロップダウンリスト、テキストボックス／テキストエリア、フォームのカテゴリ別に分類して紹介します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フォームのテキストエリアをより使いやすくするテクニック集