TOP  >  Design  >  クリエイティブな入力フォームサンプルまとめ「Creative Form & Input Field Design Examples」
2014年05月12日

クリエイティブな入力フォームサンプルまとめ「Creative Form & Input Field Design Examples」

webサイトに文字や情報などを入力する際に使用する入力フォーム。一般的には文字を打ち込むとカーソルが右側に動いていくシンプルなものが主流ですが、今回紹介するのは、クリエイティブな入力フォームサンプルまとめ「Creative Form & Input Field Design Examples」です。

form1
Natural Language Form

入力フォームに独自な動きや、フォーム自体にデザインが施された、他のサイトとちょっと差を付けたい時に活用できる例がまとめられています。

詳しくは以下

form2
Minimal Form Interface | Codrops
文字を入力すると、入力を要求される数の分だけメーターが伸びていくというフォーム。質問回答などの情報を入力させる際などに利用できそうですね。
 
 
 
 
 
form3
Dribbble – [GIF] Newsletter idea by Daniil Vnoutchkov
入力が完了すると、フォーム内がサインアップボタンのカラーで埋め尽くされ、メッセージが表示されます。ユーザーに対する気遣いを重視したい時などに。
 
 
 
 
 
form4
Dribbble – Newsletter subscription by Bart Nederveen
「Sent」表示に特徴を持ったフォーム。独特な動きがあるので、フォームにまでとことんこだわりたい時などにおすすめ。
 
 
あまりフォーム自体にデザイン性を求めるシーンは意外に少ないと思いますので、他のサイトを差を付けたいときなどに参考にしてみてはいかがでしょうか。

15+ Form – Input Field Designs to WOW your Visitors

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

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

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

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

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

関連サイト

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

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