2011年を振り返り、WEB屋として腐らんばかりの「ありがとう！」を伝えたい記事、サイトの数々【Part 1】

December 12, 2011 便利サイト

ちょっと気が早いかもしれませんが、一年の終わりはやはり感謝で終えたいものですよね。

僕にとっての2011年は本当に色々なプロジェクトにかかわらせて頂き、またディレクターという職業柄沢山のデザイナー、デベロッパー、プログラマー、ライター、カメラマン、CG屋さんから美容師、不動産屋さんまで…ありとあらゆる人と仕事をさせて頂きました。そしてこのブログの公開、加えてやっとカナダに移民することが決まったという、個人的には超記念年になってくれたように思います。

そんな僕をいつもいつも、本当にいつも支えてくれているのは、沢山の情報提供をしてくれているブロガーの皆さんだったり、製作者のためのサービスを作ってくれている人たちだったり。何度助け舟を出して頂いたか分かりません。

そこで今日は、そんな僕がこの一年を通して、とにかく沢山のことを学んだ記事。何千、何万回“ありがとう！”と伝えても足りないくらい感謝の気持ちで一杯な記事やサイトを、敬意を表してご紹介！是非、僕なりの感謝の気持ちを伝えることができれば本当に嬉しく思います！

ちなみに今回の記事は、技術／デザイン／WEBサービス、本当にお世話になったと思える全部をまとめたら、ありえない数になってしまいましたので、Part 1とPart 2（公開済）の二度に分けてご紹介させて頂くことにしました！

※今回の記事も、ちょっと今までに無いくらい長くなってしまってかなり恐縮なんですが、どうかご了承くださいませ！

僕のデザインの提案力を上げてくれた／仲間内デザイナーのスキルを上げてくれた全てに感謝！
HTML5、CSS3に没頭した2011年、手助けやキッカケになってくれた全てに感謝！
今年も多くのフォントに触れてきた一年。沢山のフリーフォントを教えてくれた記事に感謝！
2011年もWordPressと共に生きた！去年に引き続き多大な感謝！
スマフォ対応？レスポンシブデザイン？デバイスに左右されまくった2011年を助けてくれた全てに感謝！

僕のデザインの提案力を上げてくれた／仲間内デザイナーのスキルを上げてくれた全てに感謝！

僕の2011年はフロントエンドに力を入れまくった一年でした。デザイン面での提案に関しては、まだまだ穴の多かった僕の欠点を埋める助けになってくれた参考記事は本当に山のようにあるのですが、その中でも得に感謝の思いを伝えたいと思っている記事、サイトをまずはご紹介させて頂きます。

365psd | Download a free PSD every day.

僕は元々、Photoshopは触り程度しか使ったことが無い人間でした。ただ、カナダで活動する上で、ディレクターだとしても、ある程度のデザインスキルが必要とされる環境に置かれ、Photoshopに関するスキルやテクニックを学ぶ上で、この上なく参考にさせてもらったサイトが、おそらくこの365PSDというサイトです。

こちらのサイト、最近は有料のPSD素材も増えてきましたが、無料の物でも十分、実戦で使えるレイヤースタイルのテクニックや表現方法を多く学ばせてもらいました。

僕にPhotoshopのテクニックや表現力等、あれこれを教えてくれてありがとう！と伝えたいサイトです。

House of Buttons

デザインを作ったり、提案したりする中で、最も僕が苦戦する要素はいつも「ボタン」でした。

ユーザーに押してもらえるボタン、スタイリッシュでサイトのデザインを阻害しないボタン、クールなボタン、ボタンらしさとは何か、ボタンに対するエフェクトの意味は何か…本当にたくさんのことをボタン一つをデザインするために時間を費やして来たと思います。

そんな時、僕がとにかく参考になると思うのはいろいろなサイトのボタンやレイアウト、使い方を見ること。こちらのHouse of Buttonというサイトは、まさにそんな『ボタンのための参考サイト』として僕のボタン苦手意識を大分解消してくれる手助けをして頂きました。ありがとうございました！

Dribbble – What are you working on?

以前、WEB屋が行き詰まった時、参考にすると何かが舞い降りるかもしれないサイト色々（主にデザイン系）
でも紹介させて頂きましたが、この一年も本当にデザイン面では沢山参考にさせて頂く機会がありました。

多くのトップデザイナーによって投稿されるデザインのほとんどからは何かしら学ぶことがあり、その多くは僕自身のスキルへと大きく影響してくれたことは確かです。いづれは僕もこのコミュニティに参入し、一人のデザインをする人間としても何かしら皆さんとデザインについて語り合える日がくることを強く望んでいます。

フリーのUIキット関連

記事紹介になりますが、下記で紹介させて頂いく記事は、仲間内デザイナーのスキルを向上させる大きな手助けになってくれた記事ばかりです。社内の人間含め、WEB制作をしている多くのデザイナーに伝えてきたことではありますが、WEBデザイナーとして、これらのUIキットから学べることは本当に沢山あると思っています。

是非こういったフリーで提供されているPSD素材を解析、分析、そして自分自身のスキルへと昇華させることを意識付けて欲しいと、僕はディレクターとしてデザイナーに常に求めていて、そんな僕自身、こういった記事に助けられることは本当に多い一年でした。

100 Best Portfolio Designs Of 2011

僕たちWEB屋は、基本的に色々な人のWEBサイトを作ったり、サービスを提供したりして、沢山の企業や団体のブランディングの一端を担うわけですが、自分自身のブランディングって、誰もしてくれないんですよね。

会社にいたとしても、上司や同僚が自分のスキルや存在をどれだけ認めてくれているのかは計り知るのが難しいもの、だからこそ僕はフリーランスの人よりもどちらかと言えば会社勤めの人こそ、ポートフォリオサイトを持つべきだと思うんですよね。

なーんてことを実はつい先日お話していた時に、ちょうどこの記事を見て友人に紹介させて頂きました。ポートフォリオサイトと言っても人によってコンテンツや掲載する情報には違いがあるもの。是非この記事からたくさんのポートフォリオに触れ、表現の仕方やアピール方法の参考にしていただければと思いました。

Top 15 Best Looking Websites Of 2011

WEBサイトのデザインに必要とされるものは本当に毎年毎年大きく変わっていきます。最近はミニマルデザインだぜひゃっはー！という人が増えたかと思えば（僕も若干その傾向にありますが…）、パララックススクローリングで新たな表現をー！となったり、一概にデザインと言っても提案方法は本当に星の数ほどあるんじゃないかと思える今日この頃です。

なので、業界の傾向として必要とされるであろう（されるかもしれない）サイトやWEBデザインを紹介してくれている記事は、個人的に本当に助かっています。こちらのTriphp様では、毎年そういったBest LookingなWEBサイトを紹介してくれておりますので、是非参考にしてみてください。

HTML5、CSS3に没頭した2011年、手助けやキッカケになってくれた全てに感謝！

いやー、今年は僕自身HTML5やCSS3に関しては本当に多くを学ばせてもらいました。去年は概要だけ知ってれば良いと思っていたのですが、実際にもう作れるレベルまで知っておかなければ、コーダーさんとは話出来ないし、提案内容にもだいぶ支障がでるレベルまで来ていたので、本当に参考にさせて頂いた記事は数えきれない程です。

10 Highly Useful HTML5 Tutorials

まずはリソース元としてどれだけ助けられたか分からぬResources様から記事のご紹介！こちらに紹介されているチュートリアルはHTML5に関する物ばかり！ほぼ全部一通り見させて頂きましたが、やはり基礎や応用を学ぶ前に、ひと通りチュートリアルになりそうな物を見ることができると、理解も早いと次第であります！ありがとうございました！

55 Excellent Examples of Websites Using HTML5 | Inspiration

ある程度HTML5やCSS3について分かるようになってきたら、やはり次に気になるのはフレームワークですね。いかに効率良く作業を勧めることが出来るかは、やはり常に考えたい物。こちらで紹介されていたHTML5、CSS3を使った便利なフレームワークの紹介記事は、本当に多くのフレームワークを知るキッカケになりました。

ちなみに結果的に僕が愛用するようになったのはHTML5 Frameworkという本当にベーシックなフレームワーク、そしてWordpressではBoneというテーマを愛用するようになりました。

When can I use… Support tables for HTML5, CSS3, etc

HTML5、CSS3のブラウザ対応表…これは本当に色々探しましたよ。プロジェクトメンバー全員で共有できる物を見つけたかったから、見やすい、使いやすい、誰に見せても分かる物じゃないとダメ。チートシートは使う人は使うけど、使わない人は使わないので、個人的に却下。

ということで、最終的にたどり着いたチェック表はこちらのサイト。モダンブラウザのみならずiOSやOpera Mini等の対応も載ってて、何より検索が楽だったのが超高印象でした！

Free HTML5 Templates | Bringing modern web standards to everyone

僕の場合、新しいことを学ぶ時、まず理屈を学ぶ前に実際に参考となるサンプルを見ることから始まることがあります。そこから、自分の「分からない」を明確にしていき、初めて理屈を学びだすこともしばしば。

そんな時とにかく僕にとって便利なのは、実際にHTML5で作られたテンプレート集。ここ、Free HTML5 Templatesというサイトで見られるテンプレートは一時期本当に毎日のように参考にさせて頂きました！

CSS3 Please! The Cross-Browser CSS3 Rule Generator

最初、このサイトが何のためにあるサイトか分からなくって、ちょっと途方にくれたような覚えがありますが、理解してからの第一声は「オモシロ！」って絶対言ってたと思います。

こちら、僕が説明をしても仕方ないので、実際にサイト上の「toggle rule off」になっている部分をクリックしたり、書き換えたりして遊んでみてください。僕はこのサイトでCSS3のいろいろなプロパティを初めて理解していったように思います。

CSS3 Generator

続いて、CSS3のプロパティが何なのかをなんとなく理解した後は、こちらのGeneratorで更に理解を深めていきました。「なるほど、こういうことが出来るのか！」と知っておくことは、コーダー以外の人であっても重要なことだと思いますので、是非一度色々なプロパティを試してジェネレートしてみてください！きっと様々な発見が有ると思います！

40 Beautiful Free HTML5 & CSS3 Templates

こちらのNoupeさんの記事はつい先日リリースされた記事ですが、速攻で仲間内と共有しました。非常にクオリティの高いHTML5とCSS3のテンプレートの数々で、きっと何かしら参考になるテクニックやスキルを身につけることが出来ると思います！

今年も多くのフォントに触れてきた一年。沢山のフリーフォントを教えてくれた記事に感謝！

この2011年も、僕は相変わらずフォントが大好きな人間でした。以前、様々な有名フォントを紹介させて頂いた記事もそうですが、沢山のフォントに触れておくと表現力や想像力がどんどん豊かになります！フォントから伝えられる事は、文字としての情報だけでは無く、沢山の物を同時に伝えることができるということを、更に実感させられたように思いました！

というわけで、下記は2011年僕が知ったフリーフォントや、沢山の刺激をもらったサイトをご紹介！…

…しようと思ったけど！既に多くのサイトで2011年のベストフリーフォント的なまとめ記事が多く上がっていて、そちらに僕が知ってるような物は全部ご紹介されておりましたので、そちらのまとめ記事をご紹介する路線に変更します！

50 Fresh and Beautiful Free Fonts from 2011 – DesignModo

まずは記憶の新しいものからご紹介！Designmodoさんからつい先週くらいにリリースされた2011年のフリーフォントのご紹介記事です！

Best Free Fonts of 2011 | Freebies

先月くらいの記事！こちらの2011年を振り返ったベストフリーフォントをまとめてらっしゃいます！

42 High Quality Free Fonts For Graphic Designers – You The Designer

こちらは数ヶ月前の記事！グラフィックデザイナーのためのハイクオリティなフリーフォントが42個まとめられています！

2011年もWordpressと共に生きた！去年に引き続き多大な感謝！

いやー、今年もWordpress様様な一年でした。2011年新しく見つけたWordpressテーマや、プラグイン、その他紹介記事等も、沢山のありがとうを伝えたい気持ちでいっぱい過ぎて吐きそうです！

30+ Best WordPress eCommerce Themes – tripwire magazine

まずは本当につい先日の記事！Wordpressを使ったeCommerceのテーマをまとめている記事です！2011年というより、つい先日感謝したばかりの記事ですが、未だに僕はフルWordpressでeCommerceを作ったことは無いので、ちょっと先人の知恵拝借で今から備えておきたいと思いました！

15 Best & Free WordPress Portfolio Themes | gonzoblog.nl

こちらは春先くらいの記事！ポートフォリオサイトのWordpressテーマが紹介されている記事です！今年も僕はポートフォリオサイトを持つことの重要性について、いろいろな人と話しをしてきましたが、このサイトはその度に色んな場面で話題に挙げさせてもらったなと思います。

WPSNIPP – 550+ WordPress code snippets for your blog

WordPressコードスニペーットと言えばこのサイト！RSSで購読していますが、たまに面白いスニペット、タグの紹介がされていてとても役立ちました！

8 Excellent WordPress SEO Plugins

とあるプロジェクトでWordpressに関するSEOのプラグインを調査する必要が春先くらいにあったのですが、その時鶴の一声のようにRSSで見かけたのがこちらの記事！マジでこの記事を見た時は涙出る寸前でした！

Free WordPress Themes: 2011 Edition – Smashing WordPress

フリーのWordpressテーマを探す時、かなり頻繁に見た覚えがあるのがこちらの記事！Facebookの方でも何回か投稿させてもらった覚えがあるのですが、何度も投稿してしまうくらい、こちらで紹介されているフリーのWordpressテーマはクオリティも高く、非常に参考になりました！

Top 40 Free WordPress Themes for 2011

こちらも上記同様、フリーのWordpressテーマの参考にと、ブックマークしたまま何度か参考にさせてもらいました。いやー、こうして思えばいろんな記事から僕はWordpressのおすすめをしてもらったような気がします！

スマフォ対応？レスポンシブデザイン？デバイスに左右されまくった2011年を助けてくれた全てに感謝！

スマフォの対応はもう結構前から意識してたような気がするんですが、iPadや多岐に渡るデバイスの出現により、よりフレキシブルに対応する必要のあるプロジェクトが多かった年でしたね。Responsive Designに関する記事も多くなって来て、自分自身学ぶこと多いと感じ若干「うわー、マジかよー」とか思っていた2011年ですが、そんな僕の怠け心の背中を押してくれた記事も、本当に多かったです！

Responsive Design with CSS3 Media Queries

めちゃくちゃな勢いで、僕のレスポンシブデザインに関する理解を深めてくれたのがこちらの記事！実際にDemoサイトをダウンロードして見てみるとお分かりいただけるかと思いますが、CSS3 Media Queriesを使ったレスポンシブデザインをソース丸ごと見ることができます！マジでありがとうございました！

Responsive Web Design Templates and Frameworks | Resources

レスポンシブデザインに関する情報を探している中で見つけたフレームワークに関する記事！この記事自体は先月のリリースされたばかりなのですが、結構Responsive Desginのフレームワークは探した覚えがあるので、共有！

8 Tools and Scripts for Responsive Web Design | Tools

いや、ここで紹介されていたResponsive Web Design Sketch Sheetsはめっちゃ活用させてもらったアイデアでした！今では鞄の中にはこのシート（自分でカスタマイズして自分用に作った奴）がいつも入っております！それだけではなく、Respondなどのjsライブラリの存在を知ったのもこの記事からだったように思います！ありがとうございました！

A Basic Responsive Grid (Plus Handy CSS3 Media Query Reporter) | Webdesigntuts+

こちらもDemoページのダウンロードができて、CSS3 Media Queryに関する理解を深めてくれた記事の一つでした！

jQuery Mobile Tutorials

Responsiveとは違うけれども、jQuery Mobileに関する情報もいろいろ見てきた1年でしたね！先月くらいに見たこちらの記事では、jQuery Mobileを使ったノウハウがいろいろ詰まっていましたので、実はまだフォローしきれていないのですが、年末の課題とさせてもらおこうと思います（笑

iUI – Mobile web framework for high-end devices

こちらは実は僕ではなく、仲間のディレクターが使っていて感動していたのでご紹介しますが、かなり簡単にiOS対応のサイトが作れる優れものということでした。仲間の感謝は自分の感謝！というわけで、こちらもありがとうございました！

以上、いかがでしたでしょうか？

本当はまとめ記事を紹介するんじゃなくて、一個一個僕がどんな時、どんな場所で、どういう案件で、何が必要になったかとか、全部事細かに書いて、どれだけ感謝しているかを伝えたかったのですが、あまりの量にちょっと落ち気味だったため、関連情報もまとまっているまとめ記事のご紹介が多くなってしまいました…

しかし、昨今に限らず、WEB業界は本当に日進月歩な業界！今日知らないことが明日必要になるかもしれない、お先が中々見えない業界ですよね。ですが、僕は出来る限りその道のプロとして人と接する以上、「知らない、分からない」では済ませないようにしたいと常々考えています。

僕はディレクターなので、デザインも、コーディングも、プログラミングも全部、その道のプロに到底技術でかなうことはありません。しかし、「知らない、分からない」の一言、二言は、極力発することの無いよう、2011年も本当に沢山のサイトで情報収集させて頂き、それらをプロジェクトのメンバーと共有していくことで多くの人と繋がり、自分達ができること、そして提供出来る物を作ってきました。

まずはPart1ということで、僕の2011年を振り返って、僕はもちろん、周りのWEB屋を含め『この記事、サイトには本当に助けられた！』と思うことができたものをがっつりご紹介させて頂きました！次回は今回紹介しきれなかった記事やサイト（主に日本語サイトになるかも？）をご紹介させていただきますね！