フォームデザインさてさて、最近のwebの入力フォームは本当に凝ってるところが多くて、ただただ関心するばかり。そんなわけで今回は、焦点を『フォーム』に限定し、スタイル抜群なフォームUIを勉強してみたい。流れ的にはインスピレーションデザイン集CSSによるフォームの変更方法JavaScriptによるフォームデザインという感じでお送りいたします。インスピレーションまずは、スタイリッシュなフォーム。これらは、webデザイン全体がフォームデザインとなっているまとめです。webの入力フォームを街頭アンケート用紙のように仕上げたデザイン。したような紙の一部にフォームが設置されている。こちらもメモに名前を書くかのごとく。深海に光がさす感じのイメージ。シンプルイズベストなレイアウト設計がなされている。1,2,3,という感じで左から順に入力するフォーム。一般的には、既に統計が取られているので、縦にフォームを設置したほうが入力されやすいと言うのが、この業界の基本ですが、3つくらいなら横の方が入力しやすいかもしれませんね。高級感が漂う入力フォーム。シンプルであり、質感が伝わる。入力カテゴリを島ごとにわけ、フォーム入力部を大きく見せている。こちらもなかなか良い感じですね。失敗するとUI設計的には「わかりにくい」という事になりかねないですが、地図の上の紙に書くというイメージ。個人的にはすごく好き。見たいと言う人は以下。Designさて、古いエントリですが、もう1エントリおかわりいっときましょう。FLASHですが、かなり素敵。入力フォームと背景が一体化したフォーム。古本の一部と化したフォーム。見わからないwあと、このサイトのFLASH(2009年6月現在)のりんごが、スクロールバーを動かしたときに、ものすごく飛び出したような錯覚に陥る。こちらも音が出るのでご注意を。完全にフォームかどうかすらわからない状態になっている。地味にFLASHだったりする。これらの紹介は以下から。Ideasただ、2008年4月のエントリなので、紹介先のデザインが変わっているところもあります。フォームをデザインするさてさて、上で参考になるものがあったら、今度はフォームをいじり倒してみよう。基礎となるのはCSSですが、もっとも参考になるエントリが以下。designこれは結構色々なところで紹介されていて、非常にわかり易く、使い易いCSSです。基本から始めたいと言う方にお勧めですね。Elementソースコード付きでわかり易い。Design検索フォームのカスタマイズ。CSSで検索フォームの見た目を変更こちらは国産ブログで、日本語で解説されている。非常にわかり易い記事。Niceforms少し腕に自信が有るならコレ。フォームのカスタマイズを自分でソースコードを覗いて確認できる人向け。bitsフォームから次のフォームへ以降していくタイプの入力フォーム時に、現在どの処理をしているのかをあらわすやつ。JavaScriptでフォームをデザインさて、CSSを適応せずとも例えばjQueryのプラグインを導入すれば、いとも簡単にページのフォームデザインをかえる事が出来ます。見るのが面倒な人はjQueryのプラグインであるjqTransformをぶっこんでしまおう。これだけで相当スタイリッシュでリッチなフォームが出来上がるはずです。pluginフォームをデザインする鉄板記事をご紹介。こちらはCSSとJavaScriptを駆使してフォームをデザインする方法がまとめてあります。CheckboxesこちらはjQueryプラグインでさくっとラジオボタンをかっこよくする奴。セレクトボックスに新しいオプションを追加していけるスクリプトこれかなりユニーク。ユーザビリティの観点からは間違いなくアウトなんだけど、投票に、『その他』なんて入れて使う事が出来る。お次はjQueryを使ったフォームデザインのまとめ。使えるform関連jQueryプラグインの数々jQueryをつかった各種フォーム周りのプラグインがまとめてあります。フォームの入力チェックが簡単にできるプラグイン1行テキストやテキストエリアにデフォルトで文言を表示することができるプラグイン画面遷移なしでフォーム送信を可能にするプラグインselect要素での複数選択をわかりやすく表示するプラグインselect要素を★(スターレーティング)で表示できるプラグインselect要素にオートフィル機能を追加できるプラグインフォームで使用する要素すべてをグラフィカルに表示することができるプラグインselect要素の値をスライダーとして表示するプラグイン入力項目のヒントをレイヤーで表示するプラグインパスワードの長さによる強度を表示するプラグインそうそう、忘れてはならないのがアップロードフォームのユーザビリティ。これは以下のjQueryプラグインがおすすめ。Uploadifyサンプルデモはこちら。お次はTumbler風味のタグ作成機能。Autobox2サンプルデモはこちら。テキスト入力フォームに文字を入力してエンターキーを押すと、それらがタグになります。続いて複数選択をコンパクトにするjQueryプラグイン。Listこれまでhtmlでは出来なかったドロップダウン式の複数チェックフォーム。何をいってるんだ?という人は一度デモを触ってみてくださいませ。CSS実にシンプルなインデント方法。jQueryと簡単なCSSで、綺麗にフォームを仕上げてくれるという代物です。フォームユーザビリティの改善いじれるからといっていじりまくってたらユーザーがわかりにくくなって、結局デザインは良いけど失敗するフォームというものになっちゃいます。ならない為に、今一度フォーム周りのUIを勉強してみましょう。「進むボタン」と「戻るボタン」のちょっとした法則この記事では、入力フォームのユーザビリティの改善が学べます。アイトラッキングから検証した、使いやすいフォームの10のポイントアイトラッキング検証の結果。コリスさんがわかり易く翻訳されている。Plugin」|skuare.netjQueryを利用したJavaScript。文字数をリアルタイムで監視している。大量に書いた後、送信ボタンを押して「文字数オーバーです」なんていわれたら、クライアントは帰ってしまうこと間違いなしなので、チェックしておきたい機能の一つ。以上!フォームデザインまとめでした。