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

1. Stronger, Better, Faster Design with CSS3 - Smashing Magazine
http://www.smashingmagazine.com/2009/12/16/stronger-better-faster-design-with-css3/

CSS3を使うことで，より素晴らしく，より短時間にデザインされた実践的テクニックの紹介記事です。

次の3つのテクニックが紹介されています。

1. フォームのラベルをフィールド内に薄く表示
2. ドロップインして表示されるモーダルウィンドウ
3. 段組と画像のマスクを使った新聞風レイアウト

1，2ではJavaScriptも使われていますが，jQueryなどのライブラリを使えば十数行くらいで書ける単純なものです。JavaScriptは最小限に使い，フェードインやドロップインのような見た目の効果はCSSを使うというのがCSS3時代の主流の考え方になっていくのでしょう。

フェードインやドロップインには，-webkit-transformや-webkit-transitionといったプロパティを使うので，現状ではSafari，Chromeしか対応していないのが残念です。

2. 24 Clever Website Designs That Combine jQuery and Illustration | Webdesigner Depothttp://www.webdesignerdepot.com/2009/12/24-clever-website-designs-that-combine-jquery-and-illustration/

jQueryとイラストが使われた，リッチで動きのあるWebサイトを多数紹介しています。

なぜ「jQuery＆イラスト」というくくりなんだろうと思ったのですが，ひと昔前ならFlashで作られていたようなサイトを集めたということからのようです。

コンテンツがスライドしたり，小窓が開いたり，ページ遷移なしに表示がダイナミックに変わったりといった，まさに昔ならFlashの独壇場だったようなコンテンツばかりです。

3. Webデザインにおける"Wow"ファクター | CREAMUhttp://blog.creamu.com/mt/2009/12/webwow.html

おっ！と驚くような要素のあるWebサイトから，仕掛けの部分を紹介した記事です。

サムネイルにカーソルをあわせるとタイトルがスライドして現れるといったような，見せ方の工夫の事例が解説されています。

Webサイトを覚えてもらうための差別化ポイントとしては，内容とデザインのほかに"Wow"と声に出してしまうような要素があるとのことで，この要素のことを"Wow"ファクターと呼んでいるようです。

細部にこだわる姿勢と遊び心が合わさったところから生まれるのが"Wow"ファクターなのかなと感じました。

4. Light Fonts Use in Web Design: Examples and Resourceshttp://desizntech.info/2009/12/light-fonts-use-in-web-design-examples-and-resources/

線の細いフォント（Light Font）を使ったWebデザインについての記事です。

細いフォントがタイトル，ナビゲーション，ボタンなどに使われたWebサイトの事例が紹介されています。おすすめの細いフォントのリストも掲載されています。

5. 今風のウェブを作る際に使えるCSS/HTML/JSのテンプレ『Easy Front-End Framework』 - 100SHIKI ? 世界のアイデアを日替わりでhttp://www.100shiki.com/archives/2009/12/efef.html

「Easy Front-End Framework」というCSS/HTML/JavaScriptフレームワークの紹介記事です。

CSSで見出しや表組み，フォームなどがスタイリッシュにデザインされているのに加え，JavaScriptによるツールチップやポップアップなどが簡単に使えるように用意されています。

本文エリアを二段，三段，四段と簡単に段組できるようになっているところもいいですね。

ざっくりとモックアップをHTMLで作るとき用のベースとなるテンプレートを自分で用意している人も多いと思いますが，そういったテンプレートの土台として使えそうです。

そのほか先週の記事から，いろいろなサイトギャラリーの記事を紹介します。

• 30 Examples Of Well Designed Ecommerce Websites | Spyre Studios
  デザインのいいECサイトのギャラリーです。
• Cup Full Of Inspiration: 25 Simply Beautiful Portfolios ≪ FrancescoMugnai.com
  シンプルで美しいポートフォリオサイトのギャラリーです。
• 35 CSS-based Layouts that Look Awesome - Nettuts+
  すばらしいレイアウトのWebサイトのギャラリーです。

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

Browser Sizehttp://browsersize.googlelabs.com/

Googleの実験的なプロジェクトを公開しているGoogle Labsで，Webデザイナーのための「Browser Size」というサービスが公開されました。

画面解像度やブラウザサイズの違いにより，Webページの見える範囲はユーザーによって違うということは，Webデザイナーなら誰もが意識していることでしょう。じゃあ，ページ上のどこまでだったらどのくらいのユーザーが見られるのかを視覚的に確認しましょうというのが，このBrowser Sizeです。

やっていることは単純で，ここまでが何パーセントという区切りの線を入れた画像を，Webページの上に重ねて表示しているだけです。

このパーセンテージは，google.comにアクセスしたユーザーのブラウザサイズから計算しているようです。なので，日本での状況とは違っていると思われますが，十分参考にはなるでしょう。

そういったデータを持っているところがGoogleの強みなんでしょうね。今後もアップデートされていくことを期待したいです。