NTTドコモ様_dカーシェア
NTTドコモ様_dカーシェア
2013.09.19

苦手を克服!効果的なフォームが簡単に作れてしまうツールやテンプレートまとめ

ハルエ

こんにちは。デザイナーのハルエです。

最近涼しくなってきましたね。私は自分があまり風邪をひかないせいか、「健康」に対して軽視しているところがあります。いつまでたっても自分は風の子元気な子だと信じきっています。そのせいかは分かりませんが、今は鼻水が止まらずのど飴を過剰に摂取しながら書かせていただいています。
ほんと健康って大事。

さてWEBデザイナーのみなさん、フォームのデザインって悩みませんか?

登録フォームやお問い合わせフォームなど用途は様々ですが、最近はブラウザ標準のフォームを使用せず、CSS3やらプラグインやらを使っておしゃれに工夫されたフォームのまぁ多いこと。きれいで使い勝手のいいフォームデザインがしたい。でもコーディングに時間が・・ってことありますよね。私はちょっと苦手意識があったりします。

でも、サイトの窓口ともなるフォームは、WEBサイトを運営するにおいてとても重要な役割を持っています。だからこそサイトに適した仕様・デザインをする必要があるのです。

ってことで、今日はWEBサイトのフォームデザインを割と簡単に、且つ効果的に作成するツールやチュートリアルを紹介させていただきます。

ジェネレーター/プラグイン

オシャレでかっこいいフォームを簡単に実装してくれるジェネレーターやプラグインを紹介いたします。

Form Builder

Form builder

CSSで美しいフォームを自動生成してくれる素敵なジェネレーターです。

iCheck

iCheck

チェックボックスやラジオボタンをカスタマイズできるjQueryプラグインです。
フラットなデザインで使い勝手がいいです。

.customSelect()

jQuery.customSelect()

有名ですね。セレクトボックスをカスタマイズできるjQueryプラグインです。使っている方も多いのではないでしょうか。

jq-idealforms

jq-idealforms (responsive forms)

jQueryを使ってレスポンシブなフォームを作成するフレームワークです。

ダウンロード先

テンプレート/チュートリアル

HTML5とCSS3で作成された美しいフォームを紹介いたします。
詳細なチュートリアルやテンプレートのダウンロードができるので、フォームを作る際にきっと役に立ちますよ!

Unique contact form with css3 transitions

Unique contact form with css3 transitions
CSS3のトランジションを使ったアニメーションがとってもかわいいです!
お問い合わせフォームでこういった遊び心を演出するのも素敵ですね。
チュートリアルが掲載されていて、テンプレートをダウンロードすることができます。

ダウンロード先

Login and Registration Form with HTML5 and CSS3

Login and Registration Form with HTML5 and CSS3

チュートリアルが掲載されていて、テンプレートをダウンロードすることができます。

ダウンロード先

Sexy form elements

Slick Contact Form

チュートリアルはありませんが、テンプレートをダウンロードすることができます。

ダウンロード先

Simple animated form switching

Simple animated form switching

こちらもアニメーションがかっこいいです!
「Forgot your password?」か「You don’t have an account yet? Register here」をクリックして画面が切り替わる時の動きを見てください。チュートリアルが掲載されていて、テンプレートをダウンロードすることができます。

ダウンロード先

Handwritten Letter Style Contact Form

Handwritten Letter Style Contact Form

テンプレートはありませんが、チュートリアルが詳細に掲載されていてとても分かりやすいです。

チュートリアル先

Slick Contact Form

PremiumFreebies · Slick Contact Form

チュートリアルはありませんが、テンプレートをダウンロードすることができます。

ダウンロード先

Create a Clean and Stylish Login Form With HTML5 and CSS3

Create a Clean and Stylish Login Form With HTML5 and CSS3

テンプレートはありませんが、チュートリアルが掲載されています。

チュートリアル先

Code an Awesome Registration Form with the Exotico UI Set

Code an Awesome Registration Form with the Exotico UI Set

フォーカスやナビゲーションのデザインがとても美しいです。
チュートリアルが掲載されていて、テンプレートをダウンロードすることができます。

ダウンロード先

Apple-like Login Form with CSS 3D Transforms

Apple-like Login Form with CSS 3D Transforms

チュートリアルが掲載されていて、テンプレートをダウンロードすることができます。

ダウンロード先

Slick CSS3 Login Form

Slick CSS3 Login Form

テンプレートはありませんが、とても分かりやすいチュートリアルが掲載されています。

ダウンロード先

Amazing CSS3 Login Form

Amazing CSS3 Login Form

ダウンロード先

5 uniquely designed and coded web form styles

5 uniquely designed and coded web form styles

チュートリアルが掲載されていて、テンプレートをダウンロードすることができます。

ダウンロード先

Pretty Search Forms

Pretty Search Forms

検索フォームのチュートリアルです。
テンプレートはありませんが、とても分かりやすいチュートリアルが掲載されています。

チュートリアル先

まとめ

洗練された美しいフォームは入力するのも気持ちがいいですよね。
WEBサイトを制作する際フォームをどうデザインしようか悩みがちですが、今は本当に幅広いフォームのデザインが可能になっているので迷ったときの参考にしてみてください。