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

1. “Add to Cart” Button Showcase | Vandelay Design Bloghttp://vandelaydesign.com/blog/galleries/add-to-cart/

ECサイトの「カートに入れる」ボタンのショーケースです。カートに追加するということで「+」の記号を使うケースが多いようです。

「Cart」ではなく「Bag」という表記のものも結構あります。でも、紙袋（ショッピングバッグ）のアイコンよりも、あのゴロゴロ押すショッピングカートのアイコンの方がなじみがありますよね。

ショッピングカートページを集めた「35 Inspirational Shopping Cart Page Designs | Noupe」という記事もありました。こちらはカートの中身を閲覧するページのショーケースです。

これらのショーケースは、ECサイトのデザインにとても参考になりそうです。

2. The Essence Of About Us Page With 12 Captivating Showcases | Onextrapixel - Showcasing Web Treats Without Hitchhttp://www.onextrapixel.com/2009/07/31/the-essence-of-about-us-page-with-12-captivating-showcases/

「About Us」ページの内容に関する考察とショーケースです。

「About Us」ページは、サイトに訪れた人の

• あなた（たち）は誰？
• 何をしているの？
• 信用できるの？

といった疑問に答えるページと考えるとよさそうです。

記載されることが多い内容としては、

1. 組織のプロフィール
2. 連絡の取り方
3. 免責条項と規約・使用条件など法的な情報
4. 顧客と提携先
5. 人材募集
6. プレスリリースなど広報
7. 年次報告書など投資家向け情報（IR）
8. 地域社会への貢献などCR活動について
9. サイトの制作チームなどのクレジット
10. よくある質問と答え（FAQ）

といったものがあり、それぞれの実例となる「About Us」ページも紹介されています。

3. [CSS]ネガティブマージンの理解を深め、活用するテクニック集 | コリスhttp://coliss.com/articles/build-websites/operation/css/css-using-negative-margins.html

ネガティブマージンに関する解説記事です。Smashing Magazineの「The Definitive Guide to Using Negative Margins」を翻訳しています。

ネガティブマージンとはマイナスの数値を指定したマージンのことです。マージンにマイナスの値を指定するのは裏技ではなく正しいCSSの記述で、IE6以降のモダンブラウザでサポートされているそうです。

しかし、Dreamweaverのデザインビューは対応していないようで、それが原因で使うのがためらわれるという人も多そうですね。

2カラムのリキットレイアウトの片方を固定幅としたい場合、ネガティブマージンを使うことで実現できます。100%の横幅のうち200pixel分をサイドバーとする場合、メインの100％の領域にマイナス200pixelのマージンを作り、そこにサイドバーをフロートさせるといいそうです。

4. 25+ Create Amazing Image Effects with Some of the Best jQuery Plugins Available | tripwire magazinehttp://www.tripwiremagazine.com/tools/tools/25-create-amazing-image-effects-with-some-of-the-best-jquery-plugins-available.html

フォトギャラリーやスライドショーなど、画像の見せ方に関するjQueryプラグインが多数紹介されています。

5. The Ultimate Round-Up of Fireworks Tutorials and Resources | Tutorials | Smashing Magazinehttp://www.smashingmagazine.com/2009/07/27/tutorials-and-resources-for-adobe-fireworks/

Fireworksのチュートリアルやテクニックなどの情報源を集めた膨大なリンク集です。ビデオチュートリアルも豊富に紹介されていて、全部見るには相当時間がかかりそうですね。

Photoshopに比べるとFireworksはTipsやテクニックの情報が少ないので、Fireworksユーザーにはうれしい記事だと思います。「⁠Fireworksってサイトのラフを作るツールでしょ」と誤解している人もぜひこれを見て、デザインの最終段階まで使えるツールだと知ってほしいですね。

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

そのほか先週の記事から、フリーの素材集とFirefoxアドオン集を紹介します。

• 40 Free and Useful GUI Icon Sets for Web Designers | Icons
  Webページのインターフェイスに使えそうなフリーのアイコン集です。
• Top 5 Free Websites for Quality Stock Photographs
  フリーの写真配布サイトの紹介です。
• 27 Firefox Addons For Power Blogging - slodive
  ブロガーのためのFirefoxアドオン集です。

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

CSS Prism by Ryan Berghttp://cssprism.com/

サイトかCSSのURLを入力すると、 使われている色を値とともに表示します。単に色を表示するだけのサービスかと思ったのですが、色を変更して、変更内容が適用されたCSSをダウンロードする機能もありました。その色がCSS中のどこに使われているのか確認もできます。

場当たり的に使ってしまった色を、あとで全体のバランスをみて調整するというケースに使えそうです。もちろんリニューアルでサイトの色合いをがらっと変える場合にも便利でしょう。

シンプルで操作感がいいツールです。ブックマークレットで手軽に使えるところもいいですね。

※ なお、CSSをダウンロードする機能をわたしのMac環境で試してみたところ、Safariでは大丈夫なのですがFirefoxではうまくいきませんでした。