スタイリッシュなフォームを作るときに見るべきエントリまとめ

インスピレーション

まずは、スタイリッシュなフォーム。
これらは、webデザイン全体がフォームデザインとなっているまとめです。


まさにバインダー。
webの入力フォームを街頭アンケート用紙のように仕上げたデザイン。かっこいい。



くしゃくしゃっとしたような紙の一部にフォームが設置されている。
こちらもメモに名前を書くかのごとく。



深海に光がさす感じのイメージ。
シンプルイズベストなレイアウト設計がなされている。



１，２，３，という感じで左から順に入力するフォーム。
一般的には、既に統計が取られているので、縦にフォームを設置したほうが入力されやすいと言うのが、この業界の基本ですが、３つくらいなら横の方が入力しやすいかもしれませんね。



高級感が漂う入力フォーム。
シンプルであり、質感が伝わる。



入力カテゴリを島ごとにわけ、フォーム入力部を大きく見せている。
こちらもなかなか良い感じですね。



ちょっと失敗するとUI設計的には「わかりにくい」という事になりかねないですが、地図の上の紙に書くというイメージ。個人的にはすごく好き。


もっと見たいと言う人は以下。
Superb Examples of Form Design


さて、古いエントリですが、もう１エントリおかわりいっときましょう。


3Dのフォーム。FLASHですが、かなり素敵。
音が出るので注意。



入力フォームと背景が一体化したフォーム。



古本の一部と化したフォーム。
ぱっと見わからないｗ
あと、このサイトのFLASH（2009年6月現在）のりんごが、スクロールバーを動かしたときに、ものすごく飛び出したような錯覚に陥る。ちょっと見て見ると良いかも。
こちらも音が出るのでご注意を。



もう完全にフォームかどうかすらわからない状態になっている。
地味にFLASHだったりする。


これらの紹介は以下から。
Web Form Design: Modern Solutions and Creative Ideas
ただ、2008年4月のエントリなので、紹介先のデザインが変わっているところもあります。

フォームをデザインする

さてさて、上で参考になるものがあったら、今度はフォームをいじり倒してみよう。
基礎となるのはCSSですが、もっとも参考になるエントリが以下。

Clean and pure CSS FORM design


これは結構色々なところで紹介されていて、非常にわかり易く、使い易いCSSです。
基本から始めたいと言う方にお勧めですね。

続いてボタンの変更
Rediscovering the Button Element

ソースコード付きでわかり易い。


テキストフォームの編集
Textfield Background Design

検索フォームのカスタマイズ。


RedLine Magazine : CSSで検索フォームの見た目を変更

こちらは国産ブログで、日本語で解説されている。非常にわかり易い記事。



設置例
Emblematiq :: Niceforms

少し腕に自信が有るならコレ。
フォームのカスタマイズを自分でソースコードを覗いて確認できる人向け。



Tutorial - CSS Overlapping Arrow Buttons at pixels and digital bits

フォームから次のフォームへ以降していくタイプの入力フォーム時に、現在どの処理をしているのかをあらわすやつ。

JavaScriptでフォームをデザイン

さて、CSSを適応せずとも例えばjQueryのプラグインを導入すれば、いとも簡単にページのフォームデザインをかえる事が出来ます。

とりあえず色々と見るのが面倒な人はjQueryのプラグインであるjqTransformをぶっこんでしまおう。
これだけで相当スタイリッシュでリッチなフォームが出来上がるはずです。
Opensource - AJAX - Jqtransform - jQuery form plugin




フォームをデザインする鉄板記事をご紹介。
こちらはCSSとJavaScriptを駆使してフォームをデザインする方法がまとめてあります。

フォームをデザインしよう




Introducing iPhone-style Checkboxes

こちらはjQueryプラグインでさくっとラジオボタンをかっこよくする奴。



セレクトボックスに新しいオプションを追加していけるスクリプト
これかなりユニーク。ユーザビリティの観点からは間違いなくアウトなんだけど、投票に、『その他』なんて入れて使う事が出来る。jQuery産です。



お次はjQueryを使ったフォームデザインのまとめ。
使えるform関連jQueryプラグインの数々
jQueryをつかった各種フォーム周りのプラグインがまとめてあります。

• フォームの入力チェックが簡単にできるプラグイン
• 1行テキストやテキストエリアにデフォルトで文言を表示することができるプラグイン
• 画面遷移なしでフォーム送信を可能にするプラグイン
• select要素での複数選択をわかりやすく表示するプラグイン
• select要素を★（スターレーティング）で表示できるプラグイン
• select要素にオートフィル機能を追加できるプラグイン
• フォームで使用する要素すべてをグラフィカルに表示することができるプラグイン
• select要素の値をスライダーとして表示するプラグイン
• 入力項目のヒントをレイヤーで表示するプラグイン
• パスワードの長さによる強度を表示するプラグイン

そうそう、忘れてはならないのがアップロードフォームのユーザビリティ。
これは以下のjQueryプラグインがおすすめ。
JQuery File Upload Plugin Script - What is Uploadify - Uploadify

サンプルデモはこちら。



お次はTumbler風味のタグ作成機能。
BIGREDSWITCH - Autobox2

サンプルデモはこちら。
テキスト入力フォームに文字を入力してエンターキーを押すと、それらがタグになります。



続いて複数選択をコンパクトにするjQueryプラグイン。
jQuery Dropdown Check List

これまでhtmlでは出来なかったドロップダウン式の複数チェックフォーム。何をいってるんだ？という人は一度デモを触ってみてくださいませ。



Justify elements using jQuery and CSS

実にシンプルなインデント方法。jQueryと簡単なCSSで、綺麗にフォームを仕上げてくれるという代物です。

フォームユーザビリティの改善

いじれるからといっていじりまくってたらユーザーがわかりにくくなって、結局デザインは良いけど失敗するフォームというものになっちゃいます。

そうならない為に、今一度フォーム周りのUIを勉強してみましょう。
「進むボタン」と「戻るボタン」のちょっとした法則

この記事では、入力フォームのユーザビリティの改善が学べます。



アイトラッキングから検証した、使いやすいフォームの10のポイント
アイトラッキング検証の結果。
コリスさんがわかり易く翻訳されている。



フォームの入力文字数をチェックするJavaScript「Maxlength Plugin」｜skuare.net

jQueryを利用したJavaScript。
文字数をリアルタイムで監視している。大量に書いた後、送信ボタンを押して「文字数オーバーです」なんていわれたら、クライアントは帰ってしまうこと間違いなしなので、チェックしておきたい機能の一つ。


以上！フォームデザインまとめでした。

それでは。また。