TOP  >  フォーム

Tag : フォーム

2018年02月09日

フローティングラベルを取り入れたフォームサンプルまとめ「9 Floating Form Label jQuery & JavaScript Plugins」

webサイトからのお問い合わせなどにフォームを設置しますが、スマートフォンライクの時代となった今、従来のデザインをそのまま取り入れるとタテに長くなってしまう傾向が。そんな状況を解消できる、フローティングラベルを取り入れたフォームサンプルまとめ「9 Floating Form Label jQuery & JavaScript Plugins」を今回は紹介します。

floating5
GitHub – Baedda/floating-form-labels: jQuery plugin that makes inline form labels usable again.

プレースホルダの文字が、入力するとタイトルとして浮き出すので、フォーム上に常に配置する必要がなく、長さを軽減することができるサンプルがピックアップされています。

詳しくは以下

(続きを読む…)

続きを読む
posted 02:45  |  
Category: plugin   
このエントリーをはてなブックマークに追加
2017年11月09日

支払いフォームデザインのインスピレーション集「30 Amazing Payment Form Designs for Your Inspiration」

わざわざ出かけなくても、自宅でショピングができてしまう時代。インターネット利用者の約9割が、ネットショッピングを経験しているとも言われており、もはや日常生活において欠かせない存在といっても過言ではないかもしれません。そんな中今回は、ECサイトに欠かせない、支払いフォームデザインのインスピレーション集「30 Amazing Payment Form Designs for Your Inspiration」の紹介です。

PaymentForm01
Credit Card Checkout by Patryk Zabielski – Dribbble

払いフォームと言ってもレイアウトやUIデザインは様々。今回はいくつか気になるものをピックアップしてみました。

詳しくは以下

(続きを読む…)

続きを読む
posted 09:00  |  
Category: WebDesign   
このエントリーをはてなブックマークに追加
2015年11月23日

デザイン性・使いやすさが考慮されたフォームデザインサンプル「20 Awesome Form Designs Visitors Want To Fill Out」

サイトのコンテンツとして必要な場合が多いコンタクトフォームなどの送信ページ。シンプルに構成されていることが多いですが、時にはデザイン性を重視したり、より使いやすさが求められる場合もあるのではないでしょうか?今回はそんな時に参考にしたいフォームデザインサンプル「20 Awesome Form Designs Visitors Want To Fill Out」を紹介したいと思います。

form1123_1
Dobidos, sanitari salvaspazio con bidet incorportato | Contatti.

デザイン性・使いやすさが考慮された、いろいろなタイプのフォームデザインがまとめられています。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:00  |  
Category: Design   
このエントリーをはてなブックマークに追加
2015年08月22日

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

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

form0821_1
React signup form example

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

詳しくは以下

(続きを読む…)

続きを読む
posted 10:00  |  
Category: Design   
このエントリーをはてなブックマークに追加
2014年11月13日

デザイン性を求めるサイトにおすすめ フリーフォームデザインまとめ「14 Free Creative Form Designs」

名前やメールアドレスなどのユーザー情報を入力する際に利用するフォーム。基本シンプルなデザインのものが多い印象ですが、今回紹介するのはクリエイティブなデザインが特徴のフリーフォームデザインまとめ「14 Free Creative Form Designs」です。

form1112_2
Contact Form – Rock Background – Form Templates

デザイン性を求めるサイトにおすすめな、14種のフォームデザインテンプレートが紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:00  |  
Category: Design   
このエントリーをはてなブックマークに追加

過去の記事からランダムで表示

2009年04月15日

アナログ感を演出する手書き風素材集「17 Sets of Excellent Hand Drawn Design Elements」

デザインの一つの要素として様々な印象を与えてくれるアナログ的な要素。デザインする上で皆さんも取り入れた事もあるかと思います。今日紹介する「17 Sets of Excellent Hand Drawn Design Elements」はアナログ感を演出してくれる手書き風の素材を集めたエントリーです。

hand_drawn_01
School Dayz Sketches Brushes

ラクガキのようなものから、手書きの植物、タイポグラフィまで様々な素材が紹介されています。今日はその中からいくつか気になったものをピックアップして紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 11:14  |  
Category: Design , Photoshop   
2015年03月06日

最新のフリーwordpressテーマを集めた「22 Fresh and Free WordPress Themes for March 2015」

非常に便利に活用できるwordpressテーマ。フリーで使用できるものも多数配布されており、デザイン性の高いものも数多く存在しています。今回はそんな最新のフリーwordpressテーマを集めた「22 Fresh and Free WordPress Themes for March 2015」を紹介したいと思います。

wordpress0306_1
Zifer Child – Free Portfolio Gallery WordPress Theme

デザイン性もあり、なおかつトレンドもしっかりと抑えたwordpressテーマが紹介されています。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:00  |  
Category: WordPress   
2012年03月29日

ポートフォリオサイトに利用しやすいWordPressテーマまとめ「35+ Free and Premium WordPress Portfolio Themes」

ハイクオリティなWEBページを簡単に構築できるWordPressを利用し、ポートフォリオサイトを公開されているそこで今回紹介するのが、ポートフォリオサイトに利用しやすいWordPressテーマをまとめた「35+ Free and Premium WordPress Portfolio Themes」です。


Portfolio graficzne oparte o WordPress przy użyciu Custom Fields | Vivee – wordpress, webmastering, grafika i fotografia

画像領域の演出が多彩なテーマが豊富に紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
2013年03月20日

ドット柄パターンの定番として使いやすい「Simple Dots」

パターン素材の中でも、定番の種類として幅広く利用されているドット素材。自身でも制作することはできますが、もっと簡単にバリエーションがあると嬉しいものです。そんな中今回は、ドット柄パターンの定番として使いやすい「Simple Dots」を紹介したいと思います。

可愛らしい配色・印象をドット柄Photoshopパターンが50種収録されています。

詳しくは以下

(続きを読む…)

続きを読む
posted 06:09  |  
Category: Design , Photoshop   
2011年01月25日

サインアップ画面デザインのまとめ「Showcase of 40 Pricing Tables and Signup Pages」

オンラインの有料サービス登録時に出現するサインアップ画面。普段何気なく使用していますが、内容や値段等の分かりやすさがとても重要になってきます。そこで今回紹介するのは、サインアップのwebページデザインまとめ「Showcase of 40 Pricing Tables and Signup Pages」です。


Eleven2 – Sign Up

プライスやプラン、その内容などをデザイン性を保ちながら明確に表現した例が多数収録されています。下記にいくつかピックアップしましたので、ご覧下さい。

(続きを読む…)

続きを読む
posted 11:51  |  
Category: Design   
2011年12月23日

【商用可】シンプルなピクトグラムをフォントとして使える「Erler Dingbats」

WEBでもグラフィックでもメニューの内容や機能などを端的に表現する時に便利なピクトグラム。シンプルながらもデザインを機能的にブラッシュアップしてくれる効果的なものですが、今日紹介するのはシンプルなピクトグラムをフォントとして使える「Erler Dingbats」です。

こちらはDingbatsフォントの一種で様々なピクトグラムがフォントセットとしてまとめられています。収録されているフォントの種類は以下からご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 03:58  |  
Category: Design , Font   
2008年07月22日

ローカルHDDの様に使える1GBオンラインストレージ「OpenDrive」

いままでいくつかのオンラインストレージを紹介してきましたが、今回紹介する「OpenDrive」は少し変わっていて、まるでローカルで管理しているハードディスクのように扱えるオンラインストレージです。

上記のようにエクスプローラの上にドライブが追加され、Windowsのエクスプローラからオンラインストレージが利用できるというものです。もちろん容量の確認したり、URLのパスなんかもデスクトップ上で確認できます。 XPとビスタで使用しているスクリーンキャストがyoutube上にアップされていましたので、下記からご覧ください。

動画は以下から

(続きを読む…)

続きを読む
posted 04:46  |  
Category: WebService   
2016年02月14日

2015年に紹介されたベストフリーフォントが集結「Best of 2015: 100 Free Fonts for Designers」

2016年に入り、すでにいろいろな種類の素材が公開され配布されていますが、今回は2015年に紹介されたベストフリーフォントが集結したまとめ「Best of 2015: 100 Free Fonts for Designers」を紹介したいと思います。

font0213_0
Stellar Typeface | Sans Serif Fonts on TheHungryJPEG.com | 577

非常にたくさんの種類、そしてどれもデザイン性のあるハイクオリティなフォントばかりが揃っています。中でも特に気に入ったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:00  |  
Category: Font   
2011年09月08日

最近公開された新しいフリーアイコンセット集「30 Fresh and Free Icon Sets for Designers and Developers」

さまざまなデザイン制作の場で使用されるアイコン。デザインテイストに合わせたアイコンが揃っていれば、クオリティを格段にアップさせることができるのではないでしょうか?そこで今回紹介するのが、公開されたばかりの新しいフリーアイコンセットを集めた「30 Fresh and Free Icon Sets for Designers and Developers」です。


Mini Clouds Set ‹ 365psd

ラフなテイストのアイコンから、立体的なデザインのアイコンまで、さまざまなアイコンが紹介されています。中でも気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 12:21  |  
Category: Design   
2010年02月19日

HTML/CSSのテンプレートがダウンロードできるWEBサイトのまとめ「25 Best Websites For Downloading Free Html/CSS Templates」

WEBを制作する際、HTMLとCSSを利用して作ると言う方が多いかと思いますが、今日紹介するのはフリーで利用できるHTML/CSSのテンプレートがダウンロードできるWEBサイトをまとめたエントリー「25 Best Websites For Downloading Free Html/CSS Templates」です。

free-css-tamplete01
Free-Css-Templates

様々なテンプレートサイトが集められていますが、今日はその中からいくつか気になったものを紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:11  |  
Category: WebDesign   
tag: CSS webdesign

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

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

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

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

関連サイト

Designdevelopの姉妹ブログ、毎日のインスピレーションに!をコンセプトに、グラフィックデザインからプロダクトデザインまでクリエイティブをテーマに取り上げていくブログ「DesignWorks」を運営中。
VR・ウェアラブル・センシングなど様々な技術が一般化され、手に届く範囲で製品化が進んでいます。VR MEDIAは拡張する現実から未来を探るBLOGです。
Template deisgn by iDEACLOUD inc.
トップに戻る