ネットで見かけた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」です。あらかじめ用意されたパターンを使うほか，ベジェ曲線をいじってイージングを設定することが可能です。

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