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

1. 40 Inspiring Responsive Websites | Onextrapixel - Showcasing Web Treats Without A Hitchhttp://www.onextrapixel.com/2011/09/30/40-inspiring-responsive-websites/

レスポンシブWebデザインのショーケースです。

画面サイズに合わせて段組が変わるもの、段組は変わらず画像も含め縮小／拡大するものなど、興味深い可変デザインのサイトが多数紹介されています。

最後にまとめ的なことが書いてあるのですが、IE6対策などブラウザの互換性を調整するために使われていた時間を、これからはデバイスの違いに合わせて調整する時間にあてるべき時代が来ているという言葉が印象的でした。

「17 Free Responsive WordPress Themes」という、レスポンシブWebデザインのWordPressテーマを集めた記事も参考になりそうです。

2. インストールせずに、好きなWeb Fontsを使おう ─ ＠IThttp://www.atmarkit.co.jp/fwcr/design/tool/webfonts01/01.html

Web Fontsの概要と、実際の使い方を解説しています。

記事本文にもありますが、フォントワークス、モトヤ、白舟書体が使えるWebフォントサービス「フォントプラス」が始まり、モリサワも同様のサービスを発表しています。今後は日本語でもWeb Fontsを使うケースが増えていくことが期待できそうです。

3. 19 CSS3 and jQuery Tutorials for Perfect UI Design | SpyreStudioshttp://spyrestudios.com/19-css3-and-jquery-tutorials-for-perfect-ui-design/

UIデザインに関連したCSS3とjQueryのチュートリアルを集めて紹介した記事です。

JavaScriptとCSS3をうまく組み合わせることで、従来よりも簡単に高度なことが実現できるようになっています。

4. 20+ Enhancing CSS3 tools and generators | Webdesigner Depothttp://www.webdesignerdepot.com/2011/09/20-enhancing-css3-tools-and-generators/

CSS3の設定を手助けするツールやジェネレーターを紹介しています。

角丸やグラデーションなど手書きでは面倒なコーディングをしてくれるツールのほか、メニューやボタンを生成するためのツールもあります。

5. 12 Best iPad Applications for Designershttp://www.1stwebdesigner.com/design/twelve-ipad-applications-designers/

デザイナーのためのiPad用アプリケーションを紹介しています。

ドロー／ベクターのペイントツールや、アクセス解析、モックアップ作成ツールなどが掲載されていました。

そのほか、先週の記事の中から、気になるニュース記事を紹介します。

• Google Analyticsでリアルタイム分析が可能に - ITmedia ニュース
  管理者権限のあるユーザーでないとリアルタイム分析を見られないようです。
• Google＋が友達の友達を簡単に追加できるサークル共有機能を公開 | Chrome Life
  現時点のサークルを共有できるだけで、以降の変更がシンクされるわけではないそうです。
• ビューン、新たに「Web Designing」「⁠Mac Fan」などのコンテンツを追加 | iPhone | iPad iPhone Wire
  ビューンなので全ページが見られるわけではないと思うのですが、気になりますね。

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

Ripple Emulator Communityhttp://ripple.tinyhippos.com/

Rippleはモバイル環境のエミュレーターです。HTML5で作られたモバイルアプリの開発支援のためのツールで、Chromeの拡張機能として動作します。

PhoneGapやWebWorks、WACなどのモバイル用プラットフォームをエミュレートすることが可能です。位置情報やコンパスの向きなどもテストすることができるようです。

また、単純に画面サイズのエミュレーションをするためにも使えそうです。

iPhoneやiPad、Xperiaなどの端末名があらかじめ登録されており、選択するだけでその端末の画面解像度でページを表示できます。縦画面／横画面を切り替えることも可能です。レスポンシブWebデザインの表示チェックに役立つでしょう。

なお、画面サイズのエミュレーションに使う場合、プラットフォームは「Mobile Web」を選べばいいようです。