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

1. 20 Vital Techniques & Best Practices For Effective Web Designhttp://www.noupe.com/design/20-vital-techniques-for-effective-web-design.html

美しく洗練されたWebサイトをデザインするためのテクニックとデザイン要素を，多数の事例とともに紹介しています。挙げられている項目を以下に書き出してみました。

1. 鮮やかな色
2. グラデーションとライティング効果
3. 透明度（半透明な要素）
4. グランジ（汚した感じ）
5. 手描き風
6. 淡い色
7. 水彩画風
8. 自然物をヒントにした要素
9. 写真のようにリアルな背景画像
10. 大きな文字
11. 装飾書体
12. 派手な背景画像
13. レトロ，ヴィンテージな要素
14. 目を引くヘッダ
15. コラージュ
16. テクスチャを使った背景画像
17. タブナビゲーション
18. 白黒
19. 水平方向のスクロール
20. マンガ風な要素

これらの要素を組み合わせたりして，あなたのサイトに取り入れるといいでしょうということです。

「ウェブデザインの幅をひろげる20のキーワード | コリス」でも，この記事を元に翻訳してまとめてありました。こちらもぜひご覧ください。

2. 25 Examples of Web 2.0 and Traditional Design Rules Coming Together | Webdesigner Depothttp://www.webdesignerdepot.com/2009/09/25-examples-of-web-2-0-and-traditional-design-rules-coming-together/

伝統的なデザイン技法とWeb2.0スタイルがうまく合わさっているサイトについて解説しています。

たとえば一つ目に取り上げられているPixel Matrix Designにサイトについては，以下のように書かれていました。

伝統的な面

• グリッドシステム
• 理論に基づいた配色
• 情報の強力な階層分け

Web2.0スタイルで強化された点

• 美しいグラデーション
• 繊細な細部
• 大きく読みやすい書体の選択
• サイトに滞在し続けてもらうための多数の道筋
• 問い合わせフォームまでも角丸で実装するなど凝っている

ほかのサイトも同様に，伝統的な面とWeb2.0スタイルで強化された点とがまとめてあります。

結局のところ，伝統的なデザイン技法もWeb2.0デザインも，「⁠無秩序なものを分類・整理し，複雑なものを簡単にすることを目的としている」と，最後になかなかいいことが書いてありました。

3. Five Popular Design Portfolio Website Styleshttp://sixrevisions.com/web_design/five-popular-design-portfolio-website-styles/

デザイナーのポートフォリオサイトを，何をメインで訴えたいサイトかによって5つのスタイルに分けて紹介しています。

1. 作品集がメインのサイト
2. 作品展示の見せ方を売りにしたサイト
3. 業務内容や自己紹介をメインにしたサイト
4. ブログをメインにしたサイト
5. 1ページ完結で見せるサイト

といったカテゴリごとに，豊富な実例が掲載されています。

4. 25 Clear And Beautiful Comparison Tables | Web Design Tutorials | Creating a Website | Learn Adobe Flash, Photoshop and Dreamweaverhttp://www.webdesigndev.com/inspiration/25-clear-and-beautiful-comparison-tables

わかりやすく読みやすい比較表のデザインショーケースです。

表組部分の画面ダンプが延々と並び，その表組を含むページへとリンクしています。

ある要素だけをまとめたショーケースとしては，問い合わせフォームばかりを集めた「25 Exceptional Contact Forms to get Inspired - Geek Sucks」という記事もありました。

5. Best Sites to Download Free Patterns | Photoshop Tutorialshttp://best-photoshop-tutorials.blogspot.com/2009/08/best-sites-to-download-free-patterns.html

背景などに使える，繰り返しパターンのフリー画像を配布しているサイト集です。

それぞれのサイトに多数のパターン画像が登録されているので，合わせると膨大な数になりますね。

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

そのほか先週の記事から，Photoshop関連の記事を紹介します。

• 56 Absolutely Brilliant and Intriguing Photoshop Video Tutorials | Photoshop Tutorials
  Photoshopのビデオチュートリアル集です。
• Showcase of Stylish Photoshop Actions | scarletbits.com
  Photoshopのアクション集です。
• 45 Useful Collection of Free Photoshop PSD Files | Design Newz
  フリーのPSDファイル素材を多数紹介しています。

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

Create a font from your own handwriting - fontcapture.comhttp://www.fontcapture.com/

「fontcapture」は，自分の手書き文字をフォントにしてくれるフリーのサービスです。

有料のこの手のサービスは国内，海外でいろいろあると思いますが，フリーというのはなかったんじゃないでしょうか。

実際に作ってみたという記事が「無料かつ会員登録不要で自分の手書きフォントが作れるという『fontcapture』を試してみた件」に掲載されていました。

PDFの専用用紙をダウンロード→専用用紙に文字を書く→専用用紙をスキャン→スキャンしたファイルをアップロード，といった手順でフォントを作成できるそうです。

もちろん日本語書体は作れませんが，ひらがなだけ／カタカナだけのフォントは作れますね。記号やイラストのフォントを作っても面白いでしょう。