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

1. The Four Key Components of a Great Web Design | Web Design Ledgerhttp://webdesignledger.com/tips/the-four-key-components-of-a-great-web-design

すばらしいWebデザインのための4つの重要な要素の解説です。

その4つとは以下の通り。

1. しっかりしたレイアウト
2. 効果的な文字の扱い
3. 正しい色彩設計
4. 適切なデザイン要素

言われてみれば当たり前のものばかりですね。

ワイヤーフレームからきちんと設計する、ホワイトスペースを存分に使う、文字は読みやすいように、動作に一貫性を持たせる、細部に注意を払う、など細かい解説も当たり前ながら重要なことばかりです。

2. High Performance Web Design ~デザインから考えるハイパフォーマンスWebサイト~ | warikiruhttp://warikiru.blogspot.com/2009/11/high-performance-web-design.html

読み込みの速い（＝パフォーマンスのよい）Webサイトにするために、デザイン段階から考えようという記事です。

なぜ読み込みが遅いとダメなのか、読み込み速度をどうやって計測・評価するのか、読み込みを速くするために有効と言われている方法にはどんなものがあるのかが、まず紹介されています。

この記事のメインディッシュはその後で、むずかしいテクニックを使わなくてもデザイン・設計の段階から意識すればパフォーマンスのよいサイトが作れるはずだとし、そのヒントを与えてくれます。

なんでも画像にしない、リッチインタラクションが本当に必要か考える、1ページに詰め込みすぎないといったことを考えてみることが第一歩のようですね。

3. How to avoid these common mistakes in blog design | DesignBumphttp://designbump.com/originals/how-avoid-these-common-mistakes-blog-design

ブログデザインでやりがちなミスを回避する方法を紹介しています。

• 検索ボックスを用意しない
• 広告を貼りすぎる
• サイトのナビゲーションが見つけにくい
• その記事の作者情報が見当たらない
• 自信作の記事を前面に出さない
• 作者への連絡方法が分からない
• 記事をソーシャルサイトに共有する方法が用意されていない
• SEOを無視する
• 構造と秩序に欠ける
• リピーターになるための道筋を用意してない

といった例に対し、解決法を案内しています。

4. ASCII.jp：Googleも採用！CSS3実践テクニックhttp://ascii.jp/elem/000/000/474/474810/

CSS3のグラデーション、ドロップシャドウ、アニメーション機能を使い、ナビゲーションメニューを作るチュートリアル記事です。

この例では、作成したナビゲーションが100%意図通りに動くのはSafari 4.0だけなのが残念ですが、これからのWebデザインはこういう方向に行くんだろうというのはよく分かりますね。

CSS3のそれぞれの機能に非対応のブラウザでも操作上の問題はないので、すぐにでも実用できるとは思います。ただ、日本語の場合はメニューの文字がテキストのままというのは厳しいんじゃないでしょうか。Mac OS X上では、アンチエイリアスも効いたヒラギノの太い書体で表示できるのでいいんですけどね。

5. InspirationTime - a Showcase of Beautiful Web Designhttp://inspirationti.me/

Webデザインのギャラリーサイトです。

「Clean , Colorful , Dark」といったスタイル、「⁠Slideshows , Tabs , Illustration」といったエレメントなどを切り口にサイトを探していくことができます。シンプルながらデザイン性も高くステキなサイトだと思います。

そのほか先週の記事から、興味深いチュートリアル記事を紹介します。

• Bubble Effect with CSS | AEXT.NET
  ロールオーバーで画像が大きくなる効果を実現するチュートリアル記事です。
• An Awesome CSS3 Lightbox Gallery With jQuery ― Tutorialzine
  CSS3、jQuery、PHPを使った写真ギャラリーのチュートリアル記事です。
• 【CSS】IE6では実現できない点線（1px borderのdotted）を画像を使って表現する | バシャログ。
  1ピクセルの点線によるラインと囲みを作る方法のレクチャーです。

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

… hello | Hot Gloo - The Online Wireframe App …http://hello.hotgloo.com/

最近オンライン作図ツールが次々と登場しているようですが、今回紹介する「Hot Gloo」はワイヤーフレーム作成のためのWebサービスです。

2009年11月第3週号のこのコーナーで紹介したMockingbirdと競合するサービスですね。

あらかじめ用意されたUI要素をドラッグ＆ドロップで配置し、移動やリサイズでレイアウトできるのはMockingbirdと同様のようです。複数ページの管理も可能です。

コラボレーション機能を重視しているようで、複数のユーザーを作って権限を与えることができます。作ったワイヤーフレーム上に注釈メモを付けることによってやりとりできるそうです。

「オンラインでワイヤーフレームが描画できる「HotGloo」がかなり便利:phpspot開発日誌」で紹介されていました。