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

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

ハルエ

ハルエ

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

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

さて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サイトを制作する際フォームをどうデザインしようか悩みがちですが、今は本当に幅広いフォームのデザインが可能になっているので迷ったときの参考にしてみてください。

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

デザイナーの遥江(はるえ)です。 録り溜めたバラエティ番組を観る時間が大好きです。寝付きの良さは誰にも負けません。LINE POP / バブルの女王でもあります(自称)。よろしくお願いします。

このメンバーの記事をもっと読む
デザイン力×グローバルな開発体制でDXをトータル支援
お問い合わせ 会社概要DL