スポンサーサイト

  • --/--/--
  • このエントリーをはてなブックマークに追加

スポンサーリンク

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

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

  • 2009/06/25
  • このエントリーをはてなブックマークに追加

スポンサーリンク

Form Design フォームデザイン


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

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

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


IT/Web業界に強い転職サイトGreen

インスピレーション


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


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

それでは。また。




スポンサーリンク

トップへ戻る

Twitter版のネタ帳では毎週月曜~金曜までWeb屋さんに役立つ色んな情報や単なるネタまでをつぶやいています。

関連するエントリー

コメント

この記事にコメントする人はクリック

コメントポリシーをお読みください
管理者にだけ表示を許可する

FC2Ad

広告


IT・Web業界の求人なら転職サイトgreen(グリーン) ホームページテンプレート、WordPressテーマ、Facebookページテンプレートならクラウドテンプレート ネットマーケティングとは│ネットマーケティング検定 SEOコンサルティング&SEO対策 無料レスポンシブWebデザインテンプレート 広告主募集

あわせて読みたい
フィードメーター - ホームページを作る人のネタ帳

人気の記事一覧

あなたのブログの再訪問者を増やす50の方法

私の経験から感じた事を書き記します。全てが全てその時々で、正しいとは限りませんが、一つの指針としてお使いください。因みに全部リスト化すると230くらいありましたが、それはきっとセミナーとかでやるかなぁと。

http://e0166.blog89.fc2.com/blog-entry-824.html

あなたの生活を確実に拘束し時間を浪費させる動画50

今回は生産性を向上させる事ばかり考えて記事を書いてきたので、逆に年末にかけて忙しい皆さんの時間を出来るだけ拘束し、忙しさを倍増させるものが無いかを考えました。その結果、動画で行こうと言う事になったのが1ヶ月以上前。動画閲覧本数はおそらく600本以上。その中から、おもしろそうなものを50個ベストチョイスいたしました。

http://e0166.blog89.fc2.com/blog-entry-820.html

webデザインのセンスを磨く○○系のwebデザインまとめ

webデザインを学ぶならwebデザインから。と言うわけで、今回は海外のエントリを中心に、○○系のまとめをまとめます。

http://e0166.blog89.fc2.com/blog-entry-817.html

jQueryプラグインのベストトレンド総まとめ2010

もはやこの業界ではかなり浸透しつつあるjQuery。今回はそんなjQueryにスポットを当て、本年度紹介された中でも、ホットなトレンドプラグインをご紹介します。

http://e0166.blog89.fc2.com/blog-entry-816.html

ツイッターの日常における35の行動パターン

私が良く見かける35の行動パターンに名前をつけてみようと思う。年末の誰も見てない時に公開しようと思っていた、ただのネタだったのですが、結構時間がかかりこの時期に・・・。

http://e0166.blog89.fc2.com/blog-entry-823.html

ウェブデザイナーのためのウェブアプリ15

OSがWindowsであろうと、ubuntuであろうと、共通のサービスを受けることができるのがウェブアプリケーションです。ウェブデザイナーの中には、自宅ですでにubuntuを利用している人も多い。また、Mac、Windowsと、各自それぞれの使いやすい物を利用していると思います。

http://e0166.blog89.fc2.com/blog-entry-784.html

愛用するGoogleChromeエクステンション12個

この2年でノートPC2台購入。自他のPCはクラッシュしてリカバリー。会社のPCは新しいのがあたり、再セットアップ。そんなこんなで、会社はまぁともかくとして、とりあえず全PCが比較的3ヶ月に一度リカバリーしてもいいように、自分用にメモとして残しておきます。

http://e0166.blog89.fc2.com/blog-entry-784.html

文章や会話のプレゼンテーションを向上させる方法

文章力がないためにプレゼンに失敗した、会話がうまくできずにプレゼンに失敗した。こういう経験はなかなか無い。なぜなら多くの場合、失敗したことに気がつかないからです。

http://e0166.blog89.fc2.com/blog-entry-802.html

サイトの裏側の意識を変え売り上げをアップする方法

ネットショップ運営者が、あることをちょっとだけ始めてみただけでわずか5ヶ月で売り上げが3倍になりました。はたして、webサイト運営がどのように変わったのでしょうか。。

http://e0166.blog89.fc2.com/blog-entry-749.html

webサイトのリピーターを増やすさりげない5つのコツ

多くのビジネスサイトのアクセス数を支えている大手検索サイト、Yahoo、Googleのアルゴリズムが変わる事で、突然商売がひっくり返る事態を回避する方法。

http://e0166.blog89.fc2.com/blog-entry-746.html
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。