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

1. Designing Style Guidelines For Brands And Websites - Smashing Magazinehttp://www.smashingmagazine.com/2010/07/21/designing-style-guidelines-for-brands-and-websites/

デザインに関するガイドライン（スタイルガイド）についてまとめた記事です。

Webサイトの制作と同時にロゴも作ったり、新たに配色やフォントのルールを決めることも少なくないと思います。そういうときにガイドラインをしっかり作りたいという人には、とても参考になると思います。

この記事からリンクされている、Zopa、BBCのPDF版スタイルガイドは特に興味深いですね。ロゴや配色のルールのほか、Webサイトでのカラムやマージンの数値なども細かく決められていることが分かります。

Skypeのガイドラインは電子ブックのような形式で公開されていて、ステキです。当然と言えば当然ですが、スタイルガイドは美しいデザインで作られているものばかりで、とても刺激になりますね。

2. A Guide on Layout Types in Web Designhttp://sixrevisions.com/web_design/a-guide-on-layout-types-in-web-design/

Fixed（横幅固定、横幅をピクセルで指定⁠）⁠、Liquid（横幅可変、横幅を%で指定⁠）⁠、Elastic（横幅伸縮、横幅をemで指定）の3つは昔からよく話題に上る代表的なレイアウトの手法です。この記事では新たな手法も加えた10種類ものWebデザインのレイアウト形式が紹介されています。

• iPhoneなどに対応した、縦画面か横画面かでレイアウトを変える「Scaled Layout」
• CSSの新たな機能「calc」を使って、「⁠width: calc(50% - 200px)」のような感じで指定する「Equated Layout」
• min-width／max-widthやmin-height／max-heightを使って指定する「Fluid-Min/Max Layout」
• ユーザーの環境によってCSSを切り替える「Conditional Layout」

などのレイアウト手法が簡単に解説されています。

iPhone／iPadといった新たなデバイスおよびCSS3の登場により、CSSレイアウトの手法として覚えておくべきことが増えているように感じます。

3. 20+ Free CSS3 Code Generators | Design Shackhttp://designshack.co.uk/articles/css/20-free-css3-code-generators

無料で使えるCSS3のコードジェネレーターを多数紹介しています。

CSS3の新機能である角丸、ドロップシャドウ、グラデーション、段組などを、ブラウザ上で簡単に設定できるツールが揃っています。

4. jQueryの日本語の解説サイトと国産のプラグイン集 | コリスhttp://coliss.com/articles/build-websites/operation/javascript/jquery-for-japanese.html

jQueryの日本語によるリファレンス、日本発のプラグイン、日本の作者による書籍を紹介した記事です。

5. 30+ Inspiring Website Navigation Menus | Naldz Graphicshttp://naldzgraphics.net/inspirations/30-inspiring-website-navigation-menus/

優れたデザインのナビゲーションメニューを多数紹介しています。アイコンを入れる、数字を入れる、小さく補足の文字を入れるといったパターンが多いようですね。

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

• Google、画像検索のUI変更と画像広告「Image Search Ads」を発表 - ITmedia エンタープライズ
  Google画像検索のインターフェイスが変わるそうです。NAVERの画像検索と似たような感じになるようです。
• なんと、iPadの四半期販売台数はMacとほぼ同じ。しかもMacの台数は史上最高
  iPadは四半期（たぶん4～6月）で327万台売れたそうです。

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

Browser Cover βeta 2http://www.browsercover.me/

写真などにブラウザの枠を付けて、ブラウザ上で開いているような画像が作れるWebサービスです。

設定できるのは、枠に使うブラウザの種類、横幅、アドレスバーに表示される文字列、タイトル部分に表示される文字列です。影をつけるかどうかと、ステータスバーの表示／非表示のオプションがあります。

なんてことはない単純なサービスですが、写真にブラウザの枠が付くだけで、ちょっと違ったイメージになるのが面白いです。

プロトタイプデザインのテンプレート用のブラウザ枠を生成したり、一枚絵で作ったページデザインにブラウザ枠を付けるのに便利かもしれません。