デザインシェアこんにちは。デザイナーのハルエです。最近涼しくなってきましたね。私は自分があまり風邪をひかないせいか、「健康」に対して軽視しているところがあります。いつまでたっても自分は風の子元気な子だと信じきっています。そのせいかは分かりませんが、今は鼻水が止まらずのど飴を過剰に摂取しながら書かせていただいています。WEBデザイナーのみなさん、フォームのデザインって悩みませんか?登録フォームやお問い合わせフォームなど用途は様々ですが、最近はブラウザ標準のフォームを使用せず、CSS3やらプラグインやらを使っておしゃれに工夫されたフォームのまぁ多いこと。きれいで使い勝手のいいフォームデザインがしたい。コーディングに時間が・・ってことありますよね。私はちょっと苦手意識があったりします。サイトの窓口ともなるフォームは、WEBサイトを運営するにおいてとても重要な役割を持っています。サイトに適した仕様・デザインをする必要があるのです。ことで、今日はWEBサイトのフォームデザインを割と簡単に、且つ効果的に作成するツールやチュートリアルを紹介させていただきます。ジェネレーター/プラグインオシャレでかっこいいフォームを簡単に実装してくれるジェネレーターやプラグインを紹介いたします。BuilderCSSで美しいフォームを自動生成してくれる素敵なジェネレーターです。BuilderiCheckチェックボックスやラジオボタンをカスタマイズできるjQueryプラグインです。フラットなデザインで使い勝手がいいです。plugin.customSelect()有名ですね。セレクトボックスをカスタマイズできるjQueryプラグインです。使っている方も多いのではないでしょうか。jQuery.customSelect()jq-idealformsjQueryを使ってレスポンシブなフォームを作成するフレームワークです。GitHubテンプレート/チュートリアルHTML5とCSS3で作成された美しいフォームを紹介いたします。transitionsCSS3のトランジションを使ったアニメーションがとってもかわいいです!お問い合わせフォームでこういった遊び心を演出するのも素敵ですね。チュートリアルが掲載されていて、テンプレートをダウンロードすることができます。CSS3チュートリアルが掲載されていて、テンプレートをダウンロードすることができます。elementsチュートリアルはありませんが、テンプレートをダウンロードすることができます。here」をクリックして画面が切り替わる時の動きを見てください。チュートリアルが掲載されていて、テンプレートをダウンロードすることができます。Formテンプレートはありませんが、チュートリアルが詳細に掲載されていてとても分かりやすいです。Formチュートリアルはありませんが、テンプレートをダウンロードすることができます。CSS3テンプレートはありませんが、チュートリアルが掲載されています。Setフォーカスやナビゲーションのデザインがとても美しいです。チュートリアルが掲載されていて、テンプレートをダウンロードすることができます。Transformsチュートリアルが掲載されていて、テンプレートをダウンロードすることができます。Formテンプレートはありませんが、とても分かりやすいチュートリアルが掲載されています。stylesチュートリアルが掲載されていて、テンプレートをダウンロードすることができます。Forms検索フォームのチュートリアルです。テンプレートはありませんが、とても分かりやすいチュートリアルが掲載されています。CSSまとめ洗練された美しいフォームは入力するのも気持ちがいいですよね。WEBサイトを制作する際フォームをどうデザインしようか悩みがちですが、今は本当に幅広いフォームのデザインが可能になっているので迷ったときの参考にしてみてください。POSTLIGへの自由なメッセージお待ちしています頂いたご意見への回答は行っておりません。