ホームページを作る人のネタ帳

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

Form Design フォームデザイン


さてさて、最近のwebの入力フォームは本当に凝ってるところが多くて、ただただ関心するばかり。

そんなわけで今回は、焦点を『フォーム』に限定し、スタイル抜群なフォームUIを勉強してみたい。

流れ的には
  • インスピレーションデザイン集
  • CSSによるフォームの変更方法
  • JavaScriptによるフォームデザイン
という感じでお送りいたします。


インスピレーション


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

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


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


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


スタイリッシュフォームサイト
1,2,3,という感じで左から順に入力するフォーム。
一般的には、既に統計が取られているので、縦にフォームを設置したほうが入力されやすいと言うのが、この業界の基本ですが、3つくらいなら横の方が入力しやすいかもしれませんね。


スタイリッシュフォームサイト
高級感が漂う入力フォーム。
シンプルであり、質感が伝わる。


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


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


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


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

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


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


本の一部と化したフォーム
古本の一部と化したフォーム。
ぱっと見わからないw
あと、このサイトの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
jQueryプラグイン



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

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



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


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

それでは。また。


@yamada_nt
Posted by@yamada_nt
スポンサードリンク

Comments 0

There are no comments yet.

Leave a reply