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

1. Ultimate Guide To Grid-Based Web Design: Techniques and Tools - Noupehttp://www.noupe.com/design/ultimate-guide-to-grid-based-web-design.html

グリッドベースのWebデザインのまとめ記事です。

以下の章に分けて紹介されています。

• グリッドデザインの基礎
• チュートリアルと情報源
• ツール，フレームワーク，テンプレート
• すばらしいグリッドデザインのギャラリー

グリッドを生成するWebサービスはたくさんあるんですね。ギャラリーにはステキなサイトが多く，見ごたえがあります。

2. Designing “Coming Soon” Pages - Smashing Magazinehttp://www.smashingmagazine.com/2009/11/10/designing-coming-soon-pages/

あまり作る機会はないかもしれませんが，サイト立ち上げ前の「Coming Soon」ページに関するまとめ記事です。

事例を見ると，オープン時に知らせるためにメールアドレスを登録させたり，事前登録をさせるページが多いですね。

「Coming Soon」ページなんかなくてもいいとも思いえますが，ブランドを認知させるほか，SEO効果も期待できるようです。

3. グランジをウェブデザインに上手に取り入れる5つのポイント | コリスhttp://coliss.com/articles/build-websites/operation/design/grunge-web-design.html

最近海外サイトで流行の，汚した感じの質感を与えた「グランジ（Grunge⁠）⁠」デザインの実例とその使い方についての記事です。

「Grunge In Web Design: Samples And Best Practices | Spyre Studios」という記事からポイントをピックアップして翻訳しています。

穴の開いたジーンズなどが思い浮かぶロックな感じのグランジファッションとはちょっと違い，ざらついたアナログ感のあるもの全般をグランジというカテゴリーでまとめているようです。

背景に薄くグランジのテクスチャーを取り入れたり，ちょっとしたアクセントとしてグランジっぽいパーツを使うのは，日本でも受け入れられそうです。

グランジをさっそく取り入れようという人は，「⁠商用可！グランジを表現できるフリーphotoshopブラシ「10 Free Grunge Photoshop Brushes⁠」⁠ | DesignDevelop」で紹介されている，Photoshop用ブラシも役に立つでしょう。

4. Horizontally Scrolling Websites Showcase & Tutorialshttp://line25.com/articles/horizontally-scrolling-websites-showcase-and-tutorials

水平方向にスクロールするWebサイトが多数紹介されています。

画像が中心のポートフォリオ的なサイトに向いているようですね。高さを固定しなくてはいけないので，文章量の多いコンテンツを扱うのは難しいと思います。

作成するためのチュートリアル記事もいくつか取り上げています。

5. Six of our Favorite Design Galleries ≪ Design Snack Bloghttp://designsnack.com/blog/favorites/six-of-our-favorite-design-galleries/

Webデザインのギャラリーサイトはたくさんありますが，オススメのもの6つに絞って紹介した記事です。

そのほか先週の記事から，気になるオンラインツールを紹介します。

• 時系列で写真を管理する写真共有サービス「1DAY1SHOT」ベータ版～Twitterとも連携:ベンチャー - CNET Japan
  PCとモバイルに対応した画像共有サービスの紹介記事です。
• あの人とあの人がTwitter上でどんな会話をしたかがよくわかる『bettween⁠』⁠ - 100SHIKI ～ 世界のアイデアを日替わりで
  Twitterユーザー同士の会話を過去にさかのぼって見ることができるサービスの紹介です。
• YouTube HTML5 Viewer - NeoSmart Technologies
  Flashを使わずにHTML5でYouTubeのビデオを再生できます。

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

Mockingbirdhttp://gomockingbird.com/

WebサイトやWebアプリケーションのワイヤーフレーム／モックアップを作るためのWebサービスです。

あらかじめ用意されたUI要素をドラッグ＆ドロップで配置し，移動やリサイズするという簡単操作でレイアウトしていきます。操作感が快適で，サクサク作っていけそうです。

UI要素のグラフやプログレスバーは，ただの絵かと思ったら数値を入力してカスタマイズできたりと，細かいところも気が利いています。

複数ページを管理でき，リンクを張ることも可能です。もちろん完成したワイヤーフレームはWeb上で閲覧でき，共有して他の人に見せることができます。

「モックアップはきれいに作りすぎてはいけない，という話 - 7korobi8oki.com」というエントリーで，このMockingbirdを知りました。このブログ記事もためになることが書かれているので，ぜひご一読を。

オンラインの作図ツールとして，「⁠Cacoo - Web上で図の作成とリアルタイムコラボレーション」という日本のWebサービスもスタートしています。