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   
このエントリーをはてなブックマークに追加

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

2008年12月22日

クリスマス気分を演出してくれるフリーフォント10選「10 Free Christmas fonts」

もうすぐクリスマス。直前となってクリスマスカードを作っているそんな方もいるかと思います。今日紹介するのはクリスマスの雰囲気を盛り上げてくれるフリーフォントを集めたエントリー「10 Free Christmas fonts」を紹介したいと思います。


Download Porcelain-so you can share it with other people and use it for free

コミカルな書体から、きれいめな書体まで様々なフォントが紹介されていますが、今回はその中から気になったものをピックアップしていくつか紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 05:58  |  
Category: Design , Font   
tag: Design Font
2016年06月03日

配色を操るためのカラーツール5選「Finding Colors: 5 Tools for Great Color Concepts」

デザインのクオリティや質を高めるためにもっとも重要な要素が配色。バランスの良いデザインでも色がチグハグでは良いデザインにはなりえません。今日紹介するのはそんな配色を便利にしてくれる、配色を操るためのカラーツール5選「Finding Colors: 5 Tools for Great Color Concepts」です。

adobe-color-cc-640x393
Adobe Color CC

今回は紹介されている5つの配色ツールの使い勝手や特徴を簡単にまとめてご紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 08:54  |  
Category: Design , WebDesign , WebService   
2013年06月30日

様々な質感のフリーテクスチャを集めたテクスチャ集「30 Free High Resolution Texture Packs」

デザインの質感をより高めてくれるテクスチャ。下に敷くテクスチャで大きくデザインの印象は変わりますが、今日紹介するのは、様々な質感のフリーテクスチャを集めたテクスチャ集「30 Free High Resolution Texture Packs」です。

textures_01
Texture Pack 04: black by =mercurycode on deviantART
(6 Textures, 4200×2800px)

高品質なテクスチャセットが全部で30紹介されていますが、今日はその中から幾つか気になったテクスチャセットをピックアップして紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 11:27  |  
Category: Design   
2015年05月20日

手軽に高品質なグラフィック表現ができるフリーPhotoshopブラシまとめ「40 High-Resolution and Free Photoshop Brush Packs」

Photoshopに搭載されている機能の中で、多くのデザイナーによく利用されているブラシツール。フリーで配布されているものを取り込むことで、さまざまな表現が可能になります。今回はそんなブラシを集めた「40 High-Resolution and Free Photoshop Brush Packs」を紹介したいと思います。

brush0519_1
Dribbble – Free Subtle Brush Set by Jack Fahnestock

手軽に高品質なグラフィック表現ができるフリーPhotoshopブラシがまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:00  |  
Category: Photoshop   
2013年07月07日

スタンプで押したような形が特徴のフリーフォントまとめ「Stylize Your Designs with these Free Stamped Fonts」

多数のフォントがフリーで展開されており、デザインに合わせてさまざまなバリエーションが選べるということもあり、日々重宝されている方も多いのではないでしょうか?そんな中今回紹介するのは、スタンプで押したような形が特徴のフリーフォントまとめ「Stylize Your Designs with these Free Stamped Fonts」です。

stamp2
Rubber Stamp font by Marta van Eck Designs – FontSpace

アナログテイストな質感を出したい時におすすめな、かすれたような雰囲気が特徴のスタンプフォントが多数まとめられています。気になったものをピックアップしてみましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 06:43  |  
Category: Font   
2011年04月05日

さまざまな種類の砂利テクスチャまとめ「34 Pebble Textures for A Cool Round Up of Design Choices」

自然に存在する石や砂利は一つとして同じものがなく、デザイン上で石や砂利を使いたいときも、イメージにぴったりな石や砂利を探し出すことは難しいのではないでしょうか?今回紹介するのは、自然に存在するさまざまな石や砂利のテクスチャまとめ「34 Pebble Textures for A Cool Round Up of Design Choices」です。


Pebbles by ~bentan220 on deviantART

大きさや石の種類など、さまざまな砂利のテクスチャ素材が34種類も紹介されています。中でも気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 03:39  |  
Category: Design   
tag: 
2016年11月05日

ラフでアナログな質感を楽しめるフリーフォント15選「15 Beautifully Imperfect Free Brush Fonts」

フリーで配布されているフォントにもいろいろありますが、中でも手描き風のフォントは、デザインに良い味をもたらしてくれます。そんな中今回紹介するのは、ラフでアナログな質感を楽しめるフリーフォント15選「15 Beautifully Imperfect Free Brush Fonts」です。

font1106_1
Sophia – Free Handlettered Brush Script Font on Behance

厳選された15種ではありますが、非常に魅力溢れる美しいフォントが揃っています。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:30  |  
Category: Font   
2019年01月09日

ベクターデータで描かれた150のアイコンセット「A free set of 150 vector icons」

Illustratorなどのソフトウェアでカスタマイズしながら利用できるため、どんな制作現場でも使い勝手がいいベクターデータ。今日紹介するのはベクターデータで描かれた150のアイコンセット「A free set of 150 vector icons」です。

150-vector-icons-580x435

天気のような汎用的なものから、斧やドライバーといった少しマニアックなものまで様々なモチーフがアイコン化されています。収録されているアイコンセットの一部は以下からご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 07:28  |  
Category: Design , vector   
2009年01月03日

WEBアプリに使えるフリーアイコンセット「21 Best Icon Sets for Designing Web Apps」

WEBアプリケーションに使えそうなフリーアイコンセットが今回紹介する「21 Best Icon Sets for Designing Web Apps」です。クオリティはまちまちですが、インターフェイス的なアイコンでシンプルなものが多く様々なシーンで使えそうなアイコンセットが多々紹介されています。


Jonas Rask Design Icons for Developers

全部で21個のアイコンセットが公開されていますが、今回はその中から気になったアイコンセットをピックアップして紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 02:38  |  
Category: Design , WebDesign   
2012年07月17日

印象的なタイポを作成できる、ストライプフォントまとめ「35 Eye-catching Designs of Striped Font」

デザイン制作をしていると一日に何度もさまざまなフォントを試したり、イメージに合わせたフォントを作成したりと、毎日何パターンものフォントと向き合っている方も多いと思います。今回はそんなフォントの中からストライプ模様のフォントばかりを集めた「35 Eye-catching Designs of Striped Font」を紹介したいと思います。


PAWLUK ZIBRA font by Pawluk Ivan – FontSpace

可愛らしい雰囲気のフォントからデジタル感のあるフォントまで、さまざまなフォントが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 11:50  |  
Category: Design , Font   

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

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

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

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

関連サイト

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