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

1. Breadcrumbs In Web Design: Examples And Best Practices | Design Showcase | Smashing Magazinehttp://www.smashingmagazine.com/2009/03/17/breadcrumbs-in-web-design-examples-and-best-practices-2/

パンくずリストとは何かというところから、パンくずリストの種類、良い例・悪い例などをまとめてある記事です。

ところで、日本では「パンくずリスト」で定着した感がありますが、この記事の文中にはbreadcrumb navigation、breadcrumb trailは出てきますが、breadcrumb listという表現はありませんでした。

パンくずリストはユーザーの利便性のほかに、直帰率を減らす効果があるとのことです。SEO対策になるとよく言われますが、この記事ではそのことには触れられていません。あ、でもコメント欄ではSEO効果について書いている人がいますね。

パンくずリストからプルダウンでメニューが出てくるのはやりすぎじゃないかと感じますが、Deliciousのインタラクティブなパンくずリストや、「⁠Tabcrumbs」と称したタブナビゲーションとの融合は、面白い試みだと思いました。

2. 8のjQueryのすごいTIPS[to-R]http://blog.webcreativepark.net/2009/03/17-161250.html

「8 awesome JQuery tips and tricks」という英文記事に、独自の補足を加えて解説しています。

jQueryといえばプラグインに頼りがちですが、こういう記事を元にコードを意識して使うと、カスタマイズがやりやすく勉強にもなりますよね。

画像のプリロード、ブロックレベル要素の高さを揃える方法、フォントのリサイズなど、使ってみたいテクニックが揃っています。

3. JSでアニメーションするならコレかもというぐらい多機能な「GX」ライブラリ:phpspot開発日誌http://phpspot.org/blog/archives/2009/03/jsgx.html

jQuery用のアニメーションフレームワーク「GX」の紹介記事です。

CSSを記述するような感じでアニメーションを設定できるので、簡単に使えそうです。CSSの全てのプロパティに対してアニメーションを適用できるそうです。

この記事、およびGX公式サイトのデモページで実際の動きのサンプルを見ることができます。

4. 45+ Best Icon Design Tutorials | Dzine Bloghttp://dzineblog.com/2009/03/45-best-icon-design-tutorials.html

アイコンデザインのチュートリアルのリンク集です。以前、50 Excellent Icon Design Tutorialsというチュートリアル集を紹介しましたが、同様のものですね。

グラデーションを多用した、イマ風というかMac OS X風のものが目立ちます。ツールはIllustratorとPhotoshopが半々くらいです。

立体的なものでも、ほとんど「3D効果」機能は使われていませんでした。3D効果をうまく使ったIllustratorのチュートリアルとして、前回紹介した40 Useful Adobe Illustrator 3D Tutorials and Techniquesもご参考に。

5. [CSS]ジャケ写をセクシーにスタイリングするスタイルシート | コリスhttp://coliss.com/articles/build-websites/operation/css/music-album-sexy-overlays.html

CDケースなどの画像を、元画像の上に重ねて表示させているだけですが、なかなか面白いアイディアです。透過PNGを使うのも一般的になってきましたし、この手のテクニックは使いどころがありそうです。透過PNG画像の作り込みがポイントですね。

透過PNGを使うには、IE6対策も必要となります。このテクニックでは、IEの独自拡張を使った対策をしています。ほかの対策方法や、IEの透過PNG対策用JavaScriptライブラリなども、検索するといろいろ見つかるはずです。

また、IE7で画像がきれいにリサイズされるように、サイズ変更時のアルゴリズム指定も行っています。このテクニックも覚えておきたいですね。

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

そのほか先週の記事を振り返ってみると、膨大な量を集めたリンク集が目立ったので以下に紹介します。

• 150 Useful Adobe Photoshp Web Design Layout Tutorials and Techniques | 2experts Design - Web Design and Graphic Design Blog
  Webページのレイアウトに役立つPhotoshopのチュートリアルとテクニックのリンク集です。
• 101 High Quality CSS And XHTML Free Templates And Layouts: Part 1 | 1stwebdesigner - Love In Design
  フリーのXHTML＆CSSテンプレートを多数紹介しています。
• 100 Great Resources for Design Inspiration
  デザインのインスピレーションになりそうなサイトのリンク集です。

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

Poken Japanhttp://poken.jp/

スイス生まれのデジタル名刺ガジェット・ポーケン（Poken）が話題です。自分のブログのアドレス、SNSやTwitterのIDなどのプロフィールを相手と交換するためのもので、ストラップ型のアイテムとWebサイトを連動して使用します。

プロフィール情報の交換はお互いのポーケンをタッチさせるだけ。あとでポーケンをパソコンのUSBに接続し、専用サイトで交換した情報の確認や管理ができるとのことです。Webサイトがあってこそということで、Webサービスがベースになっているともいえるでしょう。

相手によってプロフィールを切り替えたり、プロフィールを渡したくない相手用のモードがあったりと、なかなか考えられているようです。データは暗号化されているのでポーケンをなくしても平気なんだとか。

携帯電話の赤外線通信でもいいだろうと思う人もいるかもしれませんが、タッチさせるだけというお手軽さや、マスコット型というファッションアイテム性、そしてWebとの連動となかなか面白そうな存在です。