TOP  >  Design  >  フォームにクリエイティブなデザイン性を「9 Creative CSS Form Designs From Codepen」
2015年08月22日

フォームにクリエイティブなデザイン性を「9 Creative CSS Form Designs From Codepen」

webサイトからのお問い合わせや登録等を行う際に使用するフォーム。通常はあまり凝ったデザインが重視される場所ではありませんが、そこまでこだわりを見せることにより、サイト全体のクオリティも高めることができるのではないでしょうか?そこで今回紹介するのは、フォームにクリエイティブなデザイン性を+できる「9 Creative CSS Form Designs From Codepen」です。

form0821_1
React signup form example

見た目はもちろん、動きにも魅力をもたせたフォームサンプルが紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

form0821_2
Sign-Up/Login Form
上部タブで切り替えができるフォーム。種類をわけて入力させたい時に、すっきりと分かりやすく誘導することができそうですね。
 
 
 
 
form0821_3
Flipping login form
パスワードを忘れた場合のボタンを押すと、フォーム自体が回転して裏側に入力画面が出現。動きを重視したいときに。
 
 
 
 
form0821_4
Form Design
背景に写真を配置したシンプルなフォーム。上部にロゴ等を設置するなど、ブランドイメージを踏襲したいときなどに。
 
 
テーマはさまざまなですが、デザイン性のあるフォームばかりなので、実際にデザインする際の参考としても活用できるのではないでしょうか?この機会にぜひ取り入れてみてください。

9 Creative CSS Form Designs From Codepen | SmashingApps.com

※当サイトのに掲載されている一部画像、スクリ-ンショットに文章に置いては第三十二条で定められる引用の範囲で使用していますが、万が一問題があればこちらからご連絡ください。即刻削除いたします。
posted 10:00  |  
Category: Design   

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

デザインを開発するという視点からデザイン、WEBデザインに役立つ情報をお伝えします。

ご意見、ご感想、連絡事項があればFacebookページよりお願いたします。

※当サイトのに掲載されている一部画像、スクリ-ンショットに文章に置いては第三十二条で定められる引用の範囲で使用していますが、万が一問題があればFacebookページからご連絡ください。即刻削除いたします。
※本ブログの「プライバシーポリシー」です。

関連サイト

Designdevelopの姉妹ブログ、毎日のインスピレーションに!をコンセプトに、グラフィックデザインからプロダクトデザインまでクリエイティブをテーマに取り上げていくブログ「DesignWorks」を運営中。

【ご注意】「Designworks」の旧ホームページドメインを利用したWEBサイトにご注意ください
Template deisgn by iDEACLOUD inc.
トップに戻る