使いやすいフォームデザインのための新しい４つのルール
大規模なECサイトにおけるUXチームのリードであり、レンセラー工科大学でヒューマン・コンピューター・インタラクションの修士号を取得しています。Webサイト、Twitter。 私たちは日々、オンライン上でフォームを使っています。購入を完了するため、メーリングリストやソーシャルネットワークなどに登録するため、ディスカッションに参加するため、美味しそうなランチの写真を投稿するためなど、フォームを使う場面はさまざまです。オンラインで情報を入力するために、フォームは必要不可欠と言っても過言ではありません。 しかし、長きに渡ってフォームの改善はあまり見られませんでした。「使える」ものではあったものの、「使いやすい」ものには至らなかったのです。 近年では新しいテクニックを正しく使うことで、デザイナーはより早く、簡単で、生産性のあるフォームの作成が可能になっています。 フォームは短ければ良いのか 「フォー
30 Stunning Web UI Form Designs – Bashooka
Habitat Sign In by Chanpory RithInkling Pay by Paresh Khatri Sign Up Form by aaron Involvio Marketing Site by James Login Form by Ionut Zamfir Signin for Neonmob by Rogie Sumry: Login by Hayden Login Form by Christof Flachsmann Fetch Dribbble by Kaarel Metsaots Registration Form by Nick Three step form by Hrvoje Dominko Sign in by Gediminas Saulis U&Me by Anton Avilov Payment Form by Alexander Han
フォーム周りで覚えておくと便利なCSS Snippets - NxWorld
フォーム周りでCSSを使ってスタイリングしていく際に、個人的によくど忘れしてしまうものや便利だと思うプロパティやスニペットをまとめました。 全体的に普段からCSSをよく触っている人にとっては特別目新しいものはないかと思いますが、まだCSSを触り始めて間もない方やこれからCSSを触ってみようという方は覚えておくと便利だと思うのもいくつかあるので参考にしてみてください。 紹介している内容はブラウザ（特にIE9以下）によっては使用できないものや表示確認ができないものもいくつか含まれています。 各要素のデフォルトスタイルを削除 フォームで使用するinputやtextareaなどの要素はブラウザやデバイスによって見た目は異なりますが、予めボーダー・グラデーション・角丸といったスタイルが適用されています。 特にこだわりがなければこのまま使用したり、多少手を加えるだけということもありますが、異なるブラウ
[JS]入力するのが楽しくなるアニメーションを備えたフォーム -Fancy Input
フォームにテキストを入力する際、ちょっと面白いアニメーション（5種類）を与えるjQueryのプラグインを紹介します。 colissと入力、そして削除すると、こんな感じです。 Fancy Input Fancy Input -GitHub Fancy Inputのデモ Fancy Inputの使い方 Fancy Inputのデモ デモはFirefox, Chrome, Safari, Operaでご覧ください。 IEはゴメンナサイとのことで、通常通りに入力できるだけです。 デモページ デモではテキストとテキストエリアの2種類があり、エフェクトはそれぞれ5種類用意されています。 ※日本語の入力は対応していないようです、残念。 Fancy Inputの使い方 実装は非常に簡単です。 Step 1: 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。
サマーウォーズクロック ブログパーツ＆スクリーンセーバー
サマーウォーズを映画館で見た日のあの感動。 サマーウォーズへの感謝とリスペクトの想いを込めて、サマーウォーズクロックを作っちゃいました！ デザインはサマーウォーズの劇中にも登場するOZのワールドクロックを参考にさせていただきました。 以下のフォームに取得したいサイズを入力すると、ブログパーツタグが生成されます。 「貼り付けタグ」をコピーして、お使いのブログの任意の場所へペーストしてください。 「プレビュー」ボタンをクリックすると指定したサイズのブログパーツがポップアップで表示されます。
入力フォームのHTMLコードをサクッと作れるWebサービス・Accessify
ちょっと便利かも、と思ったので ご紹介。送信フォームなどを オンラインで手軽に作成できる Webサービス、Accessifyです。 パスワード（type=”password”） なんかも作れますよ。 ちょっとした入力フォームなんかをパッと作りたいときに便利かも。 なかなかお手軽なサービスでしたよ。ユーザー登録も不要で、HTMLソースを吐き出すだけの仕組みなので日本語も問題なく使えます。CMSの普及が進めば必要なくなるかもしれませんが・・・ 使い方・Step1 まず入力項目（label）を作ります。複数作る際は改行します。良ければnextを。 Step2 それぞれの項目のinput typeを選択します。必須項目はRequired field?にチェックを入れてください。 Step3 詳細を決定します。フォームのメソッド、nameやidを含めるかどうか、などなど。 完成 HTMLコードが出て
jQuery Form Framework - jFormer
If one of your requirements is to support multiple languages, you must familiarize yourself with supporting Unicode data. An in-depth discussion of Unicode support is outside the scope of this article. Besides, Joel Spolsky has already said it best. What you should know is how Unicode affects your database design (data types used), how it affects the encoding used for your Web application pages, a
見ているだけで楽しめる、オシャレで創造性にあふれたメールフォーム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
[JS]フォームのフィールドにテキストを表示する軽量スクリプト -autoclear
フォームのテキストフィールドに、入力補助になるテキストを表示し、ユーザーの入力時にそのテキストを消去するjQueryのプラグインを紹介します。 jQuery Plugin: autoclear デモ [ad#ad-2] テキストフィールドに表示されるテキストには、class名を付与し、スタイルシートでカラーなどを設定することもできます。 デモは、「color:gray;」が指定されています。 autoclearの実装 HTML 表示されるテキストは、title属性内のデータを利用します。 <form method="post"> <label for="name">Name:</label><input type="text" id="name" name="name" title="John Smith" value="<?php echo $_POST['name'];
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事