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

1. Creating A Pattern Library With Evernote And Fireworks - Smashing Magazine | Smashing Magazinehttp://fireworks.smashingmagazine.com/2012/09/13/create-pattern-library-with-evernote-fireworks/

EvernoteとFireworksを使って、UIデザインのパターンライブラリを作る方法を解説した記事です。

Evernoteでパターンライブラリを管理しようという発想だけでも「なるほど」と思いましたが、ポイントはFireworksと組み合わせているところです。FireworksのPNGファイルをEvernoteに貼り付けておけば、必要なときにドラッグ＆ドロップでEvernoteからFireworksのドキュメントに使いたいパーツを配置することができるのです。

もちろん、そのパーツはFireworks上で再編集できるというのが便利なところです。Fireworksで描いた図形なら、ベクターデータのまま拡大・縮小できます。EvernoteにFireworks PNGを貼るなんて発想はなかった…。ともかく、記事の最後の方にあるムービーを見てください。2分20秒くらいのところで、EvernoteからFireworksへのドラッグ＆ドロップが行われています。

2. 10 Free Pure CSS UI Kits - Speckyboy Design Magazinehttp://speckyboy.com/2012/09/09/10-free-pure-css-ui-kits/

CSSで作られたUIキットを紹介しています。CSS3を使ってキレイにデザインされた、ボタンやフォームのパーツなどがまとまったセットです。Windows 8のメトロスタイル（この名称はもう使えないようですが）のUIキットもありますね。

3. 15 Special Parallax Scrolling Examples that are "Object-Oriented"http://medleyweb.com/inspiration/special-parallax-scrolling-examples/

視差スクロールを使い、スクロールによって全体のコンテンツを見せていくタイプのサイトのショーケースです。

ちょっと前に、日産NOTEのキャンペーンサイトが話題になりましたが、あの手のサイトがいろいろ紹介されていて楽しめます。

4. 25 Beautiful Responsive Web Design Examples for Inspirationhttp://sixrevisions.com/design-showcase-inspiration/responsive-webdesign-examples/

レスポンシブWebデザインを使ったサイトのショーケースです。

8番目に紹介されている「These Are Things」は、3位で取り上げた視差スクロールのショーケースにもあったサイトです。ウィンドウ幅を狭くすると背景の一部が見えなくなりますが、必要なところは最初からスマートフォンの幅を考えてデザインされてたわけですね。

5. 10 Extremely Minimal Web Designs | Pixel Cloudshttp://pixelclouds.com/2012/09/08/10-extremely-minimal-web-designs/

非常にシンプルなWebデザインのショーケースです。

ミニマルデザインのショーケースはよく取り上げていますが、今回のこれは「超」が付くほどシンプルなサイトばかりです。TOPページは文字だけのサイトばかりですね。

そのほか、最近の記事の中から、役に立ちそうなチュートリアルとWebサービスを紹介します。

• 25 Adobe Illustrator CS6 Tutorials For Designers | Tutorial Lounge
  Illustrator CS6のチュートリアルを各種紹介しています
• 自分のブラウザ情報についての共有リンクが作成できる『About My Browser⁠』⁠ - K'conf
  クライアントの環境を教えてもらうのにも役立ちそうです
• BootstrapのUIがドラッグアンドドロップだけで組める！最速でウェブのユーザーインターフェースが構築できるエディタ「Jetstrap⁠」⁠ | Chrome Life
  Bootstrapのインターフェイスをプレビューしながら作成できるツールの紹介です。

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

dbinboxhttp://dbinbox.com/

dbinboxは、自分のDropboxにファイルを送ってもらうためのWebページを作ることができるサービスです。

そのページにアクセスした人がファイルをアップロードすれば、自分のDropboxに自動的に保存されるという仕組みです。

メール以外でファイルを受け取る必要がある場合、相手もDropboxを使っていれば共有フォルダを作ったり、共有用のリンクを作ってもらえば大丈夫です。しかし、相手がその手のサービスを使っていない場合、自分のDropboxにアップロードしてもらうこの方法は、なかなか便利そうです。