TOP  >  webdesign

Tag : webdesign

2013年12月15日

2014年に消えていくであろうWebトレンド「Web Design Trends That Will Disappear in 2014」

リッチからフラットへとデザインのトレンドが変わってきているように、Webにおいても時代のトレンドや利便性の向上を目指して、新たなトレンドが生まれると共に古いトレンドが消えていく、そういった進化の道を歩んでいます。今回紹介するのは2014年のWebでは見なくなるであろう古いトレンドたち「Web Design Trends That Will Disappear in 2014」です。

wdttwdi_0

昔はよく見たけれど最近はあまり見かけなくなってきた、そんなトレンドたちが紹介されています。中でも気になったものをピックアップしましたので、下記よりご覧ください。

(続きを読む…)

続きを読む
このエントリーをはてなブックマークに追加
2013年11月24日

最近リリースされたjQueryプラグイン集「10 fresh and fantastic jQuery plugins」

スライドするメニューやスムーズなスクロールなど、Webサイトに変わった動きを取り入れたいけれどJavaScriptを一から書くのは時間がかかりすぎたり敷居が高かったりいった方は多いと思います。今回はそんな方達に向けてユニークな動きを簡単にプラスできるjQueryプラグインをまとめたエントリー「10 fresh and fantastic jQuery plugins」を紹介したいと思います。

10fafjp_0
any list scroller – jQuery scrolling plugin by musings.it to scroll any list with any content – musings.it web design and development

汎用性の高いスライドメニューや、スクロールバーを変化させるものなど、様々なプラグインが紹介されています。今回はその中でも気になったものをピックアップしましたので、下記よりご覧ください。

(続きを読む…)

続きを読む
posted 08:03  |  
Category: javascript , WebDesign   
このエントリーをはてなブックマークに追加
2013年11月21日

HTML5で構築されたレスポンシブなWebサイトテンプレート集「15 Free Responsive HTML5 Website Templates」

HTMLの新規格として話題を呼んでいるHTML5。2012年12月に仕様策定が完了し、ブラウザへの実装も着々と進んできていますが、日本ではブラウザの問題もありまだまだ一般とはいえない状態ですが、今日紹介するのはフリーで利用できるHTML5で作られたレスポンシブなWebサイトテンプレート集「15 Free Responsive HTML5 Website Templates」です。

15frhwt_0
Aqueous | HTML5 Templates

さまざまに創意工夫の凝らされたクリエイティブなテンプレートがいくつも用意されています。今回はその中でも気になったものをピックアップして紹介したいと思います。

(続きを読む…)

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

クリエイティブなリンクエフェクトを可能にするjavascript「CREATIVE LINK EFFECTS」

WEBの重要な要素の一つリンク。ユーザーが最も利用する機能であり、見せたいものを見せる、次のページに誘導したりそのクリエイティブには気を使わなければいけない部分でもあります。今日紹介するのはマウスオーバー時にクリエイティブなリンクエフェクトを可能にするjavascript「CREATIVE LINK EFFECTS」です。

CreativeLinkEffects1

いくつかのリンクエフェクトが準備されており、フォーカスがあたったり、下線がアニメーションとともについたり、反転したりなどなど面白い動きを簡単に実現してくれます。

詳しくは以下

(続きを読む…)

続きを読む
posted 07:47  |  
Category: javascript , WebDesign   
このエントリーをはてなブックマークに追加
2013年05月05日

価格表のデザインをまとめたデザイン集「21 Examples of Pricing Pages in Web Design」

WEBサービスでよく見かける、サービスの形態ごとの価格表、そのプランで何ができるのか?いくら位の差があるのかというのを一瞬で見分けられるように整理されており便利でスタンダードなデザインですが、これがいざ作るとなるとなかなか難しく苦労したというデザイナーの方も多いのではないでしょうか?今日紹介するのは価格表のデザインをまとめたデザイン集「21 Examples of Pricing Pages in Web Design」です。


Spotify

全部で21もの価格表がまとめられたています。今日はその中から気になったものをいくつかピックアップして紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 06:43  |  
Category: WebDesign   
このエントリーをはてなブックマークに追加
2012年11月24日

CSS3で実現するクリエイティブなローディングセット「CREATIVE CSS LOADING ANIMATIONS」

かなり様々な動きができるようになったCSS3。まだ対応していないブラウザは依然として市場に多いのですが、クリエイティブに特化したWEBなどでは非常に使い勝手が良いです。今日紹介するのは、CSS3で実現するクリエイティブなローディングセット「CREATIVE CSS LOADING ANIMATIONS」です。

いままでのCSSではgifアニメに頼らなくてはいけなかった部分が全てCSSのみで制作されています。

詳しくは以下

公開されているローディングは全部で4つ、どれもアニメーションが効いていて気持ちのいい動きをしてくれます。基本的には画像ファイルなどは一切利用しておらず。純粋にHTMLとCSSで書かれています。原文では、HTML側と、CSS側のソースが合わせて開示されており、コピーして利用することができます。

HTMLとCSSなのでノンプログラマーでも比較的カスタマイズしやすいのではないでしょうか?ローディング処理を探していた方は是非どうぞ。

Creative CSS Loading Animations | Codrops

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

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

2014年07月11日

細身のラインが特徴のフォントまとめ「21 Light & Ultra-Thin Fonts for Your New Designs」

フォントを使用する場所やデザイン感によって、ウェイトやフォント自体の太さを使い分けることで強弱をつけることができます。そんな中今回紹介するのは、細身のラインが特徴のフォントまとめ「21 Light & Ultra-Thin Fonts for Your New Designs」です。

font140711_3
Party at Gatsby's font by tysmagic – FontSpace

繊細なラインで構成されたデザイン性の高いフォントが多数まとめられています。

詳しくは以下

(続きを読む…)

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

web・スマートフォンアプリ設計に役立つ ワイヤーフレームUIキット「18 Free UI and Wireframe Kits」

デザイン制作を行う際にはまず、全体の設計を行うためにワイヤーフレームを使って構成を考えることが多いと思いますが、本物のイメージにより近づけるため、また提案としてクライアントに提出するために、より現物に近いものをできれば作っておきたいもの。そんな時に役立つワイヤーフレームUIキット「18 Free UI and Wireframe Kits」を今回は紹介したいと思います。

ui140508_0

webやスマートフォンアプリの設計をスムーズに進めることができそうな、制度の高いワイヤーフレームが揃っています。

詳しくは以下

(続きを読む…)

続きを読む
posted 12:22  |  
Category: Design   
2010年06月29日

WEBのユーザー動向を確認できるヒートマップが作成できるサービス色々「7 Incredibly Useful Tools for Evaluating a Web Design」

アクセス解析によって、様々なデータを見ることができ、解析していくと、様々な傾向をしることができるのですが、ユーザーがどの部分を見ていて、どんな動向をしているのかというところまで読み取るには時間がかかります。今日紹介するのはユーザーのクリックの位置をヒートマップで見せてくれるサービスをまとめたエントリー「7 Incredibly Useful Tools for Evaluating a Web Design」。

07_clicktale_example
ClickTale

ASPサービスから、オープンソースまで、幅広く紹介されていますが、今日は紹介されているヒートマップツールのなかからいくつか紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
2011年03月21日

クリエイティブなjQueryプラグイン28選「28 Fresh jQuery Tutorials」

先日、jQueryのプラグインを「新しくて、素晴らしいjQueryプラグイン「30 Fantastic New jQuery Plugins」」という記事で紹介したばかりですが、今回はクリエイティブなjQueryプラグインを集めたエントリー「28 Fresh jQuery Tutorials」を紹介いたします。


Fullscreen Gallery with Thumbnail Flip

このエントリーでは、スライダー、ギャラリーなどを中心に演出に凝った、見せるためのjQueryプラグインが多数まとめられていました。今日はその中からいくつか気になったものをピックアップして紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 04:15  |  
Category: WebDesign   
2008年12月12日

テクスチャパック2008年度の決定版「29 Most Useful Texture Packs of 2008」

今年は様々なテクスチャ素材をdesigndevelopでは紹介してきましたが、今回紹介するのは海外で2008年度に発表され配布されているテクスチャの中から、役に立つテクスチャーを集めたまとめエントリー「29 Most Useful Texture Packs of 2008」です。

エントリーでは「Grunge Textures(グランジ)」、「Vintage Textures(テクスチャ)」、「Fabric Textures(ファブリック)」「Paper and Cardboard Textures(紙とボール紙)」と4つのジャンルに分け、まとめられていました。今日は紹介されている中から特に気になったテクスチャパックを紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 11:33  |  
Category: Design , Photoshop   
2010年07月05日

モバイル用のHTML5フレームワーク「Sencha Touch」

開発者の間では次世代の規格として注目を集めているHTML5。様々な可能性を示してくれていますが、今日紹介するのはPCようでは無く、モバイル用のモバイル用のHTML5フレームワーク「Sencha Touch」です。

このフレームワークはWEBアプリに、iphoneアプリやアンドロイドアプリ並みのデザインと、操作感を可能にするフレームワークで、HTML5とCSS3を使って構築されています。

詳しくは以下

(続きを読む…)

続きを読む
posted 11:52  |  
Category: WebDesign , WebService   
2013年05月28日

豊富なデザインバリエーションが嬉しい タグデザインpsd素材「22 Free and Attractive Price,Sale,Discount Tag PSD Files」

販売されている衣服などに付いているプライス表示用のタグは、デザインの世界でもパーツ素材として広く愛用されています。ベースがシンプルゆえ、バリエーションが豊富なのも、愛用され続ける要素の一つではないでしょうか?そんな中今回紹介するのは、22種類のタグデザインpsd素材をまとめた「22 Free and Attractive Price,Sale,Discount Tag PSD Files」です。


Free Price Tags PSD

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

詳しくは以下

(続きを読む…)

続きを読む
posted 03:12  |  
Category: Design   
2011年07月03日

デザイン性の高いWEBサイトphotoshopチュートリアル「25 Excellent Photoshop Web Design Layout Tutorials」

WEBサイトデザインをする方法は様々でクリエイターによって利用しているソフトウェアも異なると思いますが、今回紹介するのはphotoshopを利用して制作するデザイン性の高いWEBサイトphotoshopチュートリアル「25 Excellent Photoshop Web Design Layout Tutorials」です。


25 Excellent Photoshop Web Design Layout Tutorials

洗練されたものからPOPなものまで幅広いデザインのWEBデザインのphotoshopチュートリアルがまとめられています。今日はその中からいくつか気になったチュートリアルをピックアップして紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
2012年10月20日

商用化!デザインに活用できるテクスチャセット「6 Exclusive and Free High Quality Photoshop Textures」

デザインに応用できるテクスチャ素材は、できるだけたくさん所持しておきたいもの。中でも活用範囲の広い、商用利用可能な素材はとても重宝します。そんな中今回紹介するのは、商用化+デザインに活用できるテクスチャセット「6 Exclusive and Free High Quality Photoshop Textures」です。

壁や砂を素材とした、種類の違う6パターンのテクスチャがセットになっています。

詳しくは以下

(続きを読む…)

続きを読む
posted 07:47  |  
Category: WebService   
2014年09月19日

フラットテイストなフリーUIキットが多数揃った「30 Free and Flat UI Kits」

webサイトやスマートフォン・タブレットサイトなどを制作するのに便利に利用できるUIキット。いろいろな種類がダウンロードできるようになっており、活用されている方も多いのではないでしょうか?そんな中今回は、フラットテイストなフリーUIキットが多数揃った「30 Free and Flat UI Kits」を紹介したいと思います。

ui0919_1
Al Khabar – Free UI Kit For News [free psd]

主流のフラットデザインを取り入れたUIキットの、さまざまな種類がまとめられています。

詳しくは以下

(続きを読む…)

続きを読む
posted 12:18  |  
Category: Design   

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

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

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

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

関連サイト

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