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

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

2012年01月12日

表現力の幅が広がるPhotoshopブラシセットまとめ「50+ New and Free Photoshop Brush Packs」

デザインワークの広がりに欠かせないPhotoshopブラシは、さまざまなテイストに合わせて利用できるようストックしておきたいもの。そこで今回紹介するのが、比較的最近発表された、表現力の幅が広がるPhotoshopブラシセットをまとめた「50+ New and Free Photoshop Brush Packs」です。


Grass and Plant SET 3 PS by *FrostBo on deviantART

自然のある風景を再現できるブラシから、特徴的なラインを表現できるブラシまで、さまざまなブラシが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。

詳しくは以下

(さらに…)

続きを読む
posted 11:36  |  
Category: Design   
2011年11月04日

血を表現できるPhotoshopブラシ集「Blood Splatter Brushes for Gruesome and Dark Designs」

ホラーテイストのデザインは、普段あまり登場する機会がない特殊なテーマ。実制作の際に、関連するフリー素材を持っているだけで、非常に作業が楽になると思います。そんなシーンに活用できるかもしれない、血を表現できるブラシ集「Blood Splatter Brushes for Gruesome and Dark Designs」を今回は紹介したいと思います。


Dried Blood Splatters Photoshop Brushes | Photoshop Brushes

飛び散る血の様子を表現できるさまざまな種類のブラシが紹介されています。中でも気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(さらに…)

続きを読む
posted 10:42  |  
Category: Photoshop   
2008年05月30日

角丸が可愛いフリーベクターアイコンセット「Milky free vector icon」

クールな感じではなくてキュートな感じのアイコンを探している方にオススメなのが今日紹介する「Milky icon」です。角丸が加わったアイコンがとてもかわいらしい印象を与えてくれます。作り自体もシンプルなのでどんなサイトにでも利用できそうです。


Milky, a free vector icon set – part 1


Milky, a free vector icon set – part 2

シリーズはパート2までありどれもブログやWEBサイトに利用しやすそうなアイコンが並んでいます。アイコンは、ベクターデータのEPSと48×48, 64×64のPNGをセットでダウンロードが可能です。

詳しくは以下

(さらに…)

続きを読む
posted 12:20  |  
Category: Design , vector   
tag: Design vector
2008年07月13日

紙を中心にしたフリーテクスチャ集「30 Great Free Paper Backgrounds and Textures」

紙という素材は、加工の仕方、紙質、古さなどで、様々な表情を見せてくれるため、個性というか味がでる、素材感が生きる素材の一つですが、今日紹介する「 30 Great Free Paper Backgrounds and Textures」はそんな紙を中心にした無料で使える背景素材、テクスチャ集です。

段ボールのような紙から、古びたノートのようなもの又は柄が入った者と幅広いジャンルの紙素材が用意されています。今回はいくつか気になったものをピックアップして紹介したいと思います。

詳しくは以下

(さらに…)

続きを読む
posted 10:38  |  
Category: Design   
tag: Design
2011年05月08日

ipadアプリデザインのためのテンプレート&ワイヤーフレーム集「GUI Stencils, Wireframing Kits and Sketching Templates for iPad App Designers」

国内でもipad2が発売されて、ipadを活用する気運も再び高まっている業界もあると思いますが、今回紹介するのは、ipadアプリをデザインするためのテンプレートやワイヤーフレームを集めたエントリー「GUI Stencils, Wireframing Kits and Sketching Templates for iPad App Designers」です。


iPad GUI Design Template Version 2 (PSD)

プレゼン用、本番用のデザイン用様々な形のテンプレート&ワイヤーフレームが集められています。今日はその中から幾つか下記になったものをピックアップして紹介したいと思います。

詳しくは以下

(さらに…)

続きを読む
posted 11:16  |  
Category: Design , Photoshop   
2014年06月24日

web・モバイルサイト制作に活躍するアイコンセットをまとめた「30 Free Web and Mobile Icon Sets from 2014」

インターネットやスマートフォン・タブレットなどの各種媒体のデザインにおいて、欠かすことのできない存在となっているアイコン。限られたスペースであっても、イラストによって手軽に意味を表現できる存在として重宝されています。そんな中今回紹介するのは、web・モバイルサイト制作に活躍するアイコンセットをまとめた「30 Free Web and Mobile Icon Sets from 2014」です。

icon140624_1
Download 100 Free Line-Style Icons | Elegant Themes Blog

たくさんの種類のアイコンが紹介されており、ストックしておくことで便利に利用することができるようになっています。

詳しくは以下

(さらに…)

続きを読む
posted 10:00  |  
Category: Design   
2016年02月20日

ラフな雰囲気を演出できる ハイクオリティなハンドクラフト素材セット「57 Handcrafted Fonts, 230 Textures & 100s of Design Extras」

いろいろなテイストの素材が配布されていますが、ラフ感のある雰囲気を演出できる素材は持っているととても便利。いろんなシーンで活躍してくれます。そんな中今回紹介するのは、ハイクオリティなハンドクラフト素材セット「57 Handcrafted Fonts, 230 Textures & 100s of Design Extras」です。

hand16_1

同テーマで、フォント、textureなど、さまざまな種類の素材をまとめてダウンロードできるようになっています。

詳しくは以下

(さらに…)

続きを読む
posted 10:00  |  
Category: Design   
2008年08月15日

13000個以上収録!フォント専門検索エンジン「Search Free Fonts」

前回「フリーフォント配布サイトのまとめ「Top 28 Free Font Directory Resource Sites」」と言う記事でも少し触れましたが、今回紹介するのはフォント専門の検索エンジン「Search Free Fonts」です。

この検索サービスでは13000個以上のフリーフォントの中からフォントを検索できると言うWEBサービスです。検索以外にもフォントはカテゴリーからも検索できるようになっており、カテゴリーは3Dフォント、スクリプトフォントなどわかりやすくカテゴリー分けなので、普通のフリーフォントサービスとしても違和感なく利用できます。

詳しくは以下

(さらに…)

続きを読む
posted 12:37  |  
Category: Design , Font   
tag: Design Font
2015年08月06日

自身で一から作り上げることができるデザインチュートリアルまとめ「38 Best Design Tutorials for Learning Sketch 3」

1つのデザインを完成させるためには、多くの素材の組み合わせが必要になってきます。フリーで配布されているものも多数ありますが、時には自分で作らなくてはいけない、オリジナル性を求められるシーンに遭遇することもあるのではないでしょうか?今回はそんな時に参考にしたい、自身で一から作り上げることができるデザインチュートリアルまとめ「38 Best Design Tutorials for Learning Sketch 3」を紹介したいと思います。

vector_tu0807_3
iOS Design using Sketch. Part one: iOS Navigation Bar – YouTube

アイコンやイラスト、UI、アニメーション、ツール類など、多彩なチュートリアルがまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(さらに…)

続きを読む
posted 10:00  |  
Category: Design   
2009年04月07日

高解像度のフリー布テクスチャ「25 Free High-Res Fabric Textures」

テクスチャのなかでも素材によって、柔らかい印象だったり、高級感を演出したりと様々なデザインの雰囲気を演出に使えるテクスチャ「布」ですが、今日はそんな布のテクスチャを集めたエントリーを「25 Free High-Res Fabric Textures part1&part2」を紹介したいと思います。

50fabric01

バリエーション豊かなテクスチャが集められていますので、どんなデザインにも役に立ちそうな気がします。

詳しくは以下

(さらに…)

続きを読む
posted 04:13  |  
Category: Design   

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

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

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

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

関連サイト

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

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