ネットで見かけたWebテク（Webテクニック・Webテクノロジー）記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2011年3月21日～2011年3月27日の間に見つけた記事のベスト5です。

1. 10 Essential Community Sites for Designers ? Angel Ceballoshttp://angelceballos.com/post/4127051710/10-essential-community-sites-for-designers

デザイナーのための各種コミュニティサイトを紹介した記事です。

海外のものばかりですが、多くのデザイナーが作品を登録しており、デザインのインスピレーションを得るのに役立つと思います。

最初に紹介されている「Dribbble」は日本でも結構有名なサイトです。iPhone、iPadで閲覧するためのアプリも複数登場しているようです。

2. Useful Google Chrome Extensions for Web Designershttp://www.hongkiat.com/blog/google-chrome-extensions-designers/

Webデザイナーに役立つ、Google Chrome拡張機能を紹介しています。

• 色に関するもの
• タイポグラフィ関連
• デベロッパー向けツール
• 生産性向上のためのもの
• その他

に分けて、便利な拡張機能が大量に掲載されています。

デベロッパー向けツールとして紹介されているものが特に興味深いですね。定番の「Web Developer」「⁠Firebug Lite」のほかにも、試してみたい拡張機能がいろいろありました。

3. CSS Typography: Examples and Toolshttp://sixrevisions.com/css/css-typography-03/

CSSによるタイポグラフィの実例とツールをまとめた記事です。基本的に英語向けのものばかりですが、タイポグラフィ関連のツールが多数紹介されています。

「CSS Typography」と題した三部作の最後の記事です。パート1は基礎編、パート2はテクニックについての内容でした。

4. 10 Fresh & Inspirational HTML5 One-Page Portfolios | Inspired Magazinehttp://www.inspiredm.com/best-html5-portfolios/

HTML5でコーディングされた、1ページ完結ポートフォリオページのデザインギャラリーです。

HTML5を使っているだけあって、最近のトレンドを踏まえたデザインのページが多いようです。テクスチャーをうまく使っていたり、レトロなテイストが入っているものが目につきますね。

5. Transparency in Web Design, Inspiration Showcase - DesignModohttp://designmodo.com/transparency-in-web-design-inspiration-showcase/

透明度のあるオブジェクトをうまく使ったWebデザインのショーケースです。

透明度を使っている部分をトリミングして紹介しているので、実際のサイトで全体像も確認するといいでしょう。その際に、透明度の指定をどうやっているのか、画像やソースコードのチェックもしてみたくなりますね。

そのほか、先週の記事の中から、Facebook関連の記事を3つ紹介します。

• Facebookコメント欄をブログに設置する５つのメリット | Facebook使い方実践講座
  Facebookコメント欄をブログに設置して、大いにその可能性を感じたという記事。
• Facebookの新しいQuestionsにはあなたのソーシャルグラフが答をくれる
  FacebookにYahoo!知恵袋のような機能が付くと告知されていましたが、友達相手に限定したものとして登場するようです。
• ハンドルネーム（ペンネーム）でFacebookを使う方法 | nanapi[ナナピ]
  Facebookページ名をアカウントのようにしてFacebookを使う場合に、できることとできないことがまとめてあります。

先週の気になるWebサービス

Ceaser - CSS Easing Animation Tool - Matthew Leinhttp://matthewlein.com/ceaser/

「Ceaser」は、CSSによるアニメーションのイージングを設定するためのWebサービスです。

たとえばモノが移動するアニメーションでも、一定速度で移動するのではなく、加速したり減速したりすると表現力が増します。そういった加速・減速をコントロールするのがイージングです。

CSSの「CSS Transitions」では、イージング関数「cubic-bezier()」で加速・減速を設定することができます。この「cubic-bezier()」を簡単に設定するためのツールが「Ceaser」です。あらかじめ用意されたパターンを使うほか、ベジェ曲線をいじってイージングを設定することが可能です。

移動、変形、透明度の中から選んで、イージングの度合いをすぐに確認できるので便利です。