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

1. Search Results Design: Best Practices and Design Patterns « Smashing Magazinehttp://www.smashingmagazine.com/2009/09/28/search-results-design-best-practices-and-design-patterns/

検索結果ページのデザインと機能について，多くの事例をもとに最良なパターンを探った記事です。

以下の項目に分けて，それぞれの検索画面についてポイントを解説しています。

1. 検索エンジンでのトレンド
2. 動画共有サイトでの検索結果
3. ソーシャルメディアやミニブログでの検索結果
4. オンラインショップでの検索
5. 写真共有サイトでの検索結果
6. IT業界サイトでの検索結果
7. ニュースサイトでの検索結果

最後に，検索結果のデザインに関するアドバイスがまとめられています。見た目のデザインよりも，機能面での話が多いですね。

2. YUI CSS Framework Tutorialhttp://www.thewebsqueeze.com/web-design-tutorials/yui-css-framework-tutorial.html

米Yahooが提供するYUI CSS Frameworkのチュートリアル記事です。

YUIはYahoo! User Interface Libraryの略で，ユーザーインターフェイスを実装する手助けとなるライブラリです。YUIを使うと，ドロップダウンやスライダーなどを簡単に作ることができます。

その中の，CSSに関するフレームワークがYUI CSS Frameworkというわけです。この記事では，YUI CSS Frameworkを使って，段組みレイアウトを作る方法を紹介しています。

YUI CSS FrameworkのCSS Gridを使うと，ページ全体の段組みを簡単に作ることができ，その変更も楽になります。たとえば，divに付けたclassの値を変えるだけで，2カラムレイアウトの左右のカラムの入れ替えや幅の変更ができるんです。

記事の中で作成したHTMLとCSSのセットはダウンロードできるので，そのHTMLをいじってみると理解が早いでしょう。

この記事はYUI2をベースに書かれていますが，現在YUI3という新しいバージョンも公開されています。

3. 10 Creative Magazines With Blog & Twitter Friendly Websites | Inspired Magazinehttp://www.inspiredm.com/2009/10/01/10-creative-magazines-with-blog-twitter-friendly-websites/

ブログとTwitterの両方で情報発信している雑誌のサイトを10個紹介しています。日本の雑誌でもブログをやっているところは多いと思いますが，Twitterまでやっているところはあまりないでしょう。

雑誌サイトだけあってどれもデザインに凝っていますが，構成としてはシンプルなブログスタイルに落ち着いているものが多いようですね。

4. Styling Blog Comments: Correct Markup and Free Examples - Templaticahttp://templatica.com/post/25/styling-blog-comments-correct-markup-and-free-examples

ブログのコメント欄のマークアップの仕方と，CSSによるデザインサンプルの紹介です。

4種類のデザインのHTML（＋CSS）＆画像ファイルのセットをダウンロードすることもできます。

コメントは番号付きリストでマークアップし，投稿者の名前や日付などの情報はまとめて「入れ子」にしておくと良いそうです。たしかにこれだと，CSSが適用されなくても見やすいですね。

Twitterのタイムラインも番号付きリストでマークアップされていますし，発言が並ぶようなコンテンツの場合はこういう組み方が主流なのでしょう。

5. 30 Gorgeous Horizontal Menus for Inspiration | Quenesshttp://www.queness.com/post/744/30-gorgeous-horizontal-menus-for-inspiration

デザインの優れた水平ナビゲーションメニューのショーケースです。作り込まれた，凝ったデザインのものが多いですね。

以上，メルマガ「デイリーWebテク」で先週紹介した記事から独断と偏見で選んだベスト5でした。

そのほか先週の記事から，jQueryを使ってフォームの機能を拡張するチュートリアルを二つ紹介します。

• A Fancy AJAX Contact Form ? Tutorialzine
  フォームの見た目をかっこよくするjqTransformと，値のチェックをするformValidatorというjQueryプラグインを利用したフォームを作るチュートリアルです。
• Turn any webform into a powerful wizard with jQuery (FormToWizard plugin)
  jQueryを使って，長いフォームを複数ページに分かれたウィザード形式に変えるテクニックです。

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

User Heat : どこが読まれているか見える！無料ヒートマップ・ツールhttp://userheat.com/

User Heat（ユーザーヒート）は，訪問者がWebページのどこを読んでいるのか／どこをクリックしているのかを可視化する無料のサービスです。

1. マウスの軌跡
2. クリックが多い場所
3. 熟読エリア

の3パターンの画像を，ページ上にオーバーレイ表示することができます。

よく読まれている場所は，マウスの動きやスクロール操作，文中のキーワードから統合的に推測しているそうです。サーモグラフィ風表示が非常にそれっぽいですね。

無料アクセス解析ツール「なかのひと」で知られる株式会社ユーザーローカルが運営しています。