さて、今回の記事は僕自身本当に楽しみにしていた記事のひとつです。

今日は僕が毎日色々な所から集める厳選したWEB制作ネタを投稿し続けている、FacebookやTwitter、そして周囲のWEB屋のオススメ、RSSで毎日読んでいる情報等、僕がWEB制作に携わる上で見てきた情報を、ゼーンブ集めてFacebookのLike数やTwitterのRTなどを参考にしつつ、ランキング形式でご紹介させて頂きます！

それでは、前置きなんかどうでもいいので、さっさと下記からバンクーバーのうぇぶ屋がまとめた、2011年最も注目されたWEB屋情報ランキングとしてご紹介させて頂こうと思います！

※このランキングはあくまでバンクーバーのうぇぶ屋が運営するサイトやSNSを元にして集計した物になり、その他団体、企業に属するものではありません。

※2011年リリースされたサイトや記事だけではありません、2010年とかに公開されたサイト／記事でも、2011年に注目した物もありますのでご了承ください。

 

第20位

29 Creative And Unusual Websites | SpyreStudios

29個のクリエイティブで普通じゃ無いWEBサイトが紹介されています！普通じゃ無いっていうと変な言い方ですが、とにかく見たことないWEBデザインが沢山紹介されていて、見ていて飽きることがありません！

 

第19位

Photoshop a Paper Texture from Scratch then Create a Grungy Web Design with it! | Psdtuts+

こちら、以前「ここまで教えてくれていいの？！WEB屋のテンションと底力を上げる厳選チュートリアル色々！」でもご紹介させて頂いた厳選チュートリアルの内の一つ！

紙のテクスチャをゼロから作るというだけでも嬉しいチュートリアルなのに、それに加えて汚れた感じのWEBデザインに落としこむまでの過程が全部掲載されています！充実過ぎる内容に圧巻！是非、一度お試しアレ！

 

第18位

50 Impressive Website Using HTML5 Markup | AcrisDesign

こちらの記事では、HTML5で作られた素晴らしく印象的なWEBサイトが50サイト紹介されています！量はもちろん、その紹介されているサイトの一つ一つのクオリティの高さには舌を巻く思いです！

 

第17位

Free Icon Set For Web Designers: Aroma (250+ PNG Icons) – Smashing Magazine

やっぱりアイコンのネタは注目されていますね！こちらはSmashing Magazine様よりWEBデザイナーの為のフリーアイコンセットがご紹介されていました！

 

第16位

20 High Quality, Extraordinary & Free Web PSD Templates

このクオリティのデザインをフリーで、しかもPSDのテンプレートとして配布しちゃってて、いいんでしょうか？！20個のめっちゃハイクオリティで、しかもフリーなPSDテンプレートが紹介されております！これらのPSDから学べることは本当に多い！表現力やレイヤースタイルのテクニックのみ成らず、色々な物を自分のスキルへと昇華しちゃってください！

 

第15位

Creative CSS3 Animation Menus | Codrops

こちらも何度かご紹介させて頂きました！CSS3を使ったアニメーションメニュー！今まで見てきた中ではとてもスムーズで、しかもチュートリアルになっているので、非常に分かり易い！来年はCSS3アニメーションに関しても提案材料に入れられるようにするのは僕の一つの目標でもあるので、僕自身とても嬉しい記事でした！

 

第14位

The Guide To CSS Animation: Principles and Examples – Smashing Coding

またしてもCSSアニメーションについての記事！こちらはCSSアニメーションの考え方や仕組みをサンプルを使って解説しています！英語分からないと完全理解は難しいとおもいますが、コードを追うだけでもかなり勉強になるのではないでしょうか？！

 

第13位

Mobile UI Patterns | Recently Added

こちらはMobile UI Patternsという名前の通り、モバイルUIのショーケースサイトですね！スマフォアプリやサイト対応が盛んだった2011年は非常に参考にさせて頂きました！

 

第12位

Free Vector Art – Download Free Vector Art Graphics at Vecteezy!

フリーのベクターデータのダウンロードできるサイトってなかなか無いのに、この量とクオリティは嬉しいの一言ですね！

 

第11位

dochub | Instant Documentation Search

CSS、HTML、Javascript、DOM、jQueryのプロパティやらストリングやらがパパっと検索できて、しかもサンプルまで紹介してくれてるサイト！作業時にサブモニタで常時待機しといても良いと思いました！

 

第10位

The 50 Best Websites of 2011 – TIME

さあ、今年もそんな時期かと思った記事！今年もTIME誌よりベストウェブサイト50の発表がありました！今年はSNS部門にはGoogle+！News部門にInstapaperが入っていたり、僕らにとっても馴染み深いサイトが幾つかありましたね！

 

第9位

650+ Free Photoshop Patterns – DesignM.ag

もう何も言うことはありません！フリーのPhotoshopパターンが650個以上紹介されています！選ぶのだけでも一苦労ですね！

 

第8位

20 Things I Learned About Browsers and the Web

Googleが作ったブラウザを使う上での豆知識が紙芝居形式でコンテンツになっています！何より感動したのはそのUIの洗礼さが半端ない！さすがGoogle様としか言いようがありません！分かりやすさだけではなく、操作性も抜群！WEB屋として感動したコンテンツでした！

 

第7位

jQuery effects, 150+ best for web developers and designers

WEBデベロッパー、デザイナーのための150個以上のjQueryエフェクトが紹介されていました！透過エフェクト、アニメーション、テキストエフェクト等のカテゴリにわかれているのも非常にありがたい！是非ご一読あれ！

 

第6位

25+ Useful Infographics for Web Designers | Webdesigner Depot

インフォグラフィックスも忘れては行けません！こちらWebdesigner Depot様よりご紹介されていたWEBデザイナーにとってめっちゃ便利なインフォグラフィックスのまとめはWEB屋なら一読の価値あり！

 

第5位

Paper Textures : 50+ Awesome Free Paper Textures Collection

やはり紙系のテクスチャは探す機会が多いんでしょうね！こちら50個以上にわたるフリーの紙テクスチャが紹介されていました！

 

第4位

Mind Blowing Parallax Scrolling Sites

パララックス スクローリング！もう噛まずに言えるようになりましたか？僕は今でもカタカナ発音だと噛みまくります。しかし、元はビデオゲームから着ているこのパララックススクローリング。この表現手法に今年はびっくりさせられっぱなしの1年でした！こちらのサイトでは、パララックススクローリングで作られているサイトが幾つか紹介されていますので、是非参考に見てみてください！

 

第3位

QBrushes – Quality Brushes for Photoshop

堂々たるベスト3はこちら！先輩デザイナーの迷言（？）に、「ブラシを制する者は、なんか色々制する！」という迷言がありましたが、まさにそんなブラシLoveな人にぴったりのサイトですね！

 

第2位

60 Useful Web Developer Cheat Sheet Collection – tripwire magazine

今年は僕自身、作業効率をどうにか向上しようと、チートシートを何十枚も見てきたつもりでしたが、こちらのサイトではWEBデベロッパーに向けた便利なチートシートの数々が60個程紹介されていました！あと半年以上早くこの記事を見ていたら、僕の時間もだいぶ削減できていたのに！！！！といわけで、堂々の第2位でした！

 

ぶっちぎりの第1位！

HTML5 Resources Round-Up – WebsitesMadeRight.com

あぁー、やっぱりみんなHTML5大好きなのねー。と思いました！こちらの記事はFacebookで情報を投稿してからわずか1時間以内で数十Likeが付いたほど注目度の高い記事で、HTML5のリソースに関する超Round Up（まとめ）記事！イントロから実践まで、本当に初めて見た時はこのページで見つからないHTML5ネタは無いんじゃないかと思ったほどでした！

 

 

以上いかがでしたでしょうか！HTML5、CSS3、パララックススクローリング、チートシートなどなど、沢山の有益な情報があったことかなと思いますが、何か皆さんの制作に役立つ情報が一つでもあれば、この記事だけじゃなく、僕が2011年毎日飽きずに情報収集してきた甲斐があったってものございます！

最近は、周りにギークと言われようがなんと言われようが毎日毎日沢山のサイトを見ては、どんな情報がチームメンバーのためになるかとか、どんな情報がプロジェクトの手助けになるかとか、どんな情報がこのブログを見てくれている人にとって有益だろうとか。そんなことを考えながらサイトを巡回する癖がついたものだから、実際に見てくれた人たちの反応を見ること自体がとても楽しく、嬉しい今日この頃です！

この記事が出来たのは、一概に皆さんが僕の見たWEB制作ネタに対して、何かしら反応を見せて頂いたおかげです！ありがとうございました！

今後も主にFacebook Pageの方でWeb制作に関する情報はほぼ毎日投稿させて頂いていますので、是非皆さんも何か役に立ったと思う情報がありましたらLikeやらシェアやらコメントやら残していただけると、僕自身とても嬉しいです！

• ONE PERCENT DESIGN – Facebook Page