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

1. HTML KickStart - Ultra?Lean HTML Building Blocks for Rapid Website Production - KickStart your Website Production - 99Lime.comhttp://www.99lime.com/

迅速にWebサイトを作成するためのラピッドプロトタイピング用のフレームワークです。

Webサイトを制作する際に、まずはPhotoshopなどでデザインしていくのではなく、最初からブラウザ上で動くプロトタイプをHTMLで作るという動きが広まっています。迅速に試作するということで、ラピッドプロトタイピング（Rapid Prototyping）と呼ばれています。

ラピッドプロトタイピングに使えるフレームワークはFoundation（レスポンシブWebデザイン対応⁠）⁠、Bootstrap（Twitterが提供）など各種登場しており、このHTML KickStartもそのうちの一つというわけです。

HTML KickStartは、グリッドやタブ、ボタンなど、この手のフレームワークに必要なものは押さえられており、ドロップダウンのメニューバーや、スライドショーも簡単に実装できるように用意されています。

もちろん本番のサイトにも、このフレームワークを利用することができます。フレームワークを使って素早くプロトタイプを作り、CSSなどを調整してデザインをブラッシュアップしてから本公開といった作業の流れが想定されています。

2. 10 Essential Sites for Designershttp://angelceballos.com/2012/01/10-essential-sites-for-designers/#.Tx0mdWO2_et

デザイナーのためのコミュニティサイトを10個紹介しています。Dribbbleのような作品ポートフォリオのサイトなど、インスピレーションのヒントになりそうなサイトが多数紹介されています。

Designmooはデザイン素材の投稿サイトで、アイコンやパターン、UIエレメントなどのフリー素材を探すことができます。

Dribbble、Designmooなどの作品をまとめて見られる「Visual Heap」というサイトもありました。

3. Building Websites and Browser Apps with jQuery Mobile: A Beginner’s Guidehttp://www.hongkiat.com/blog/build-websites-apps-jquery-mobile/

jQuery Mobileで、Webサイトやブラウザアプリを作るための初心者向けガイドです。

ヘッダやフッタのナビゲーションボタンや、サムネイルの付いたリストの作り方などが解説されています。

4. Dreamweaverのデザインビューを使い倒すために覚えてきたいこと | Webデザインのタネhttp://oshare.jugem.cc/?eid=767

Dreamweaverでデザインビューを使って作業するときのテクニックを紹介しています。デザインビューとコードビューをうまく使い分けて効率的に作業しましょうという内容です。

これからDreamweaverを始めるという新人さん用のテキストとしても、使えそうな記事ですね。

5. 16 Minimal Designed Websites That Will Boost Your Inspirationhttp://neatdesigns.net/16-minimal-designed-websites-that-will-boost-your-inspiration/

ミニマルデザインのWebサイトのギャラリーです。ミニマルといっても、凝った仕掛けのあるサイトばかりです。

スクロールに合わせてコンテンツが変化するなど、最近流行のスクロールを使った仕掛けが使われているサイトは、やはり印象に残りますね。

そのほか、先週の記事の中から、Web制作に役立つ素材を配布しているサイトの紹介記事です。

• 23 Glyph, Symbols & Simple Icon Sets - UI
  シンプルなアイコンセットを紹介しています。
• UI Toolkit
  UI制作に役立つ素材などを紹介しいています。

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

Gridpak - The Responsive grid generatorhttp://gridpak.com/

レスポンシブWebデザイン用のグリッドジェネレーターです。

カラム数とパディング、カラム間の空白の幅を指定できます。ブレイクポイントを設定することができるので、閲覧サイズに合わせてカラム数やパディング、空白の幅を指定できます。

グリッドが完成したあと、CSSなどのファイル類をダウンロードできます。グラフィックソフトでデザインする際に便利な画像ファイルと、JavaScriptやLessファイルなども同時に作られます。