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

1. 27 Must-Have Starter Kits For Web Designers | Graphicshttp://www.hongkiat.com/blog/27-must-have-starter-kits-for-web-designers/

Webデザイナーのためのスターターキットが紹介されています。デザインを始めるときに、テンプレートや素材集があると効率アップにつながりますが、そういったものをここではスターターキットと呼んでいます。

ブラウザで表示されるフォームやボタンのエレメント、アイコン、カーソルなど、Webページのモックアップやワイヤーフレームを作るときに役立ちそうなパーツが盛りだくさんです。

ブラウザとディスプレイサイズごとのセーフエリアのテンプレートや、各ブラウザのツールバーが画像として入っているテンプレートも便利そうですね。

iPhoneのインターフェイスのパーツもあれば、本、紙袋、Tシャツの素材なんかもあります。

2. The Ultimate List Of Online Color Tools For Web Developershttp://www.webdesignbooth.com/the-ultimate-list-of-online-color-tools-for-web-developers/

色を選ぶツールや配色を決める手助けとなるページなど、オンラインのカラー関連ツールの膨大なリンク集です。

• カラーホイール
• カラースキーム
• カラーパレット
• いろいろなカラーツール

といったツールが多数紹介されています。

3. Module Tabs in Web Design: Best Practices and Solutions | Design Showcase | Smashing Magazinehttp://www.smashingmagazine.com/2009/06/24/module-tabs-in-web-design-best-practices-and-solutions/

Webデザインにおけるタブインターフェイスについてのまとめ記事です。タブのモジュールの各パーツの名称の紹介から始まり、使い方の注意点、実例、作るためのチュートリアルやスクリプトの紹介まで網羅されています。

タブは素早く切り替わらなくてはいけない、コンテンツのエリア（Pane）はスクロールしてはならないなど、タブモジュールのルールがまとまっていて参考になります。スクリーンリーダーでもちゃんと読めるように、キーボードでもナビゲーションできるように、といった高度な要求もありますね。

タブを実現するフレームワークにどれを使うかを検討するときにも、これらのルールは参考になりそうです。

4. 30 Best Photoshop Web Layout Design Tutorials to Design Decent Websites | Dzine Bloghttp://dzineblog.com/2009/06/best-photoshop-web-layout-design-tutorials.html

Adobe PhotoshopでWebページのレイアウトデザインを行うチュートリアルが多数紹介されています。凝ったデザインのものが目立ちますが、シンプルで上質なものも多いです。Webレイアウトの参考にもなるでしょう。

編集可能なPSDファイルをダウンロードできるチュートリアルもありますね。

5. CSS3 Unleashed -- Tips, Tricks and Techniques | W3Avenuehttp://www.w3avenue.com/2009/06/22/css3-unleashed-tips-tricks-and-techniques/

CSS3に関するTipsやテクニックなどのリンク集です。

CSS3でのセレクタや背景とボーダー、マルチカラムなどの機能の紹介のほか、CSS3の機能をJavaScriptを使って実現する方法なども紹介されています。

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

そのほか先週の記事から、デザインのインスピレーションになりそうなギャラリーページを紹介します。

• 50 Inspiring Examples of Minimalism in Web Design
  ミニマルなWebデザインのショーケースです。
• 23 Colorful And Inspiring Web Designs Where Textures Are In Full Action @ SmashingApps
  テクスチャが効果的に使われたWebサイトのデザインギャラリー。
• 74 Fresh Examples Of Beautiful Single Page Website Designs | Showcases | instantShift
  シングルページ完結のWebサイトのショーケースです。
• 25+ Useful Infographics for Web Designers | Webdesigner Depot
  Webデザイナーに役立ちそうなインフォグラフィックいろいろ。

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

The 1KB CSS Grid by Tyler Tate :: A simple, lightweight approachhttp://www.1kbgrid.com/

グリッドシステムのCSSフレームワークを作ることができるジェネレーターです。

カラム数、カラムの幅、カラムの間隔を指定すると、指定したサイズのHTMLとCSSのセットがダウンロードできます。

プレビューなどの機能がないので、実際にダウンロードするまでどういったものが生成されるのか分からないのが残念ですが、シンプルながらよくできたツールだと思います。