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

1. Using Responsive CSS Frameworks for Faster Development | Couchable.cohttp://couchable.co/blog/post/using-responsive-css-frameworks-for-faster-development

レスポンシブWebデザインに対応したCSSフレームワークを使うメリットなどの紹介と、実際のCSSフレームワーク、関連する情報やツールを紹介しています。

フレームワークを使う利点と欠点がまとめられているので、以下に意訳してまとめてみました。

利点

• 早く作れる
• 簡単に作れる
• 無料で使える
• 標準的なきまりごとが既に用意されている
• バグやブラウザーの問題の多くを解決してある
• テストが少なく済む

欠点

• デザインの高度なカスタマイズが難しい
• 技術を学んでいくことができない
• バージョンアップするごとに問題が起きることがある
• CMSによっては一緒に使うことが難しい
• 余計、不要なマークアップがある
• 追加ファイルの読み込み時間がかかる
• そのフレームワークを知らない別の制作者に仕事を引き継ぐのが難しい

2. 10 Best Wireframe Tools for Creating Web Designhttp://smashinghub.com/best-wireframe-tools.htm

Webデザインのワイヤーフレームを作成するツールを10個紹介した記事です。

オンラインツールだけでなく、デスクトップアプリケーションも紹介されています。

パワーポイントのアドオン「PowerMockup」や、Microsoft Expression Studioに含まれるSketchFlowなど、普段この手の話題であまり紹介されないツールも取り上げられています。

Balsamiq Mockupsは、Google ドライブにいちはやく対応したことで話題になったツールです。保存先として、Google ドライブを選ぶことができます。

3. 「LESS＆専用エディター」でCSSをシンプルに書こう - ＠IThttp://www.atmarkit.co.jp/fwcr/design/tool/html5app03/01.html

CSS拡張メタ言語、LESSの入門的な内容の記事です。変数、ミックスイン、入れ子ルール、関数と演算といったプログラム的な部分を中心に解説されています。

LESS専用エディターのCrunchというAIRアプリケーションも紹介されています。

4. Logo TUtorial in Illustrator and Photoshop | Designerhttp://www.ddesignerr.com/15-high-quality-logo-tutorial/

Illustrator／Phosothopを使ってのロゴデザイン作成のチュートリアル記事を15個紹介しています。

最近のはやりで、レトロやグランジのイメージのものが結構ありますね。

5. 35 Interesting Info graphics for Web Designers and Developershttp://www.webdesigndispatch.com/35-interesting-info-graphics-for-web-designers-and-developers/

Webデザイナーやデベロッパーが興味を持ちそうなインフォグラフィックスを、多数紹介した記事です。TwitterやFacebookがらみのネタが多いですね。

表現されている内容も興味深いですが、インフォグラフィックのデザインそのものにも興味が行ってしまいますよね。

そのほか、先週の記事の中から、Webサービス関連の話題を紹介します。

• cssarrowplease
  CSSでフキダシを作るジェネレーターです
• CSSベースのかっこいいボタンがぱっと簡単に作成できるオンラインサービス -Twitter Bootstrap Button Generator | コリス
  Bootstrap用のボタンを簡単に作成できるサービスの紹介です
• impress.jsを使ったユニークなプレゼンをオンラインで生成出来るWSIWYGライクなWebツール・Impressionist - かちびと.net
  動きのあるプレゼンテーションを作成できるサービスの紹介です

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

Stylohttp://styloapp.com/

Styloは、描いた図形のCSSコードを取得できるサービスです。

まだ開発中のもので、Webkit系のブラウザで動作します。

肝心の、図形を選んでコピーするとCSSコードがコピーされる機能は、最新バージョンのChromeでしか動作しないようです。

なお、わたしがMacのChromeで試してみたところ、右クリックで出てくるメニューからのコピーではうまくいかず、コマンド+Cではうまくいけました。テキストエディターなどにCSSコードとしてペーストできます。

Fireworks CS5では「Fireworks CSS3 Mobile Pack」という拡張機能を使うと、描いた図形のCSSコードを取得することができました。また、Fireworks CS6では、標準機能として描いた図形のCSSコードを取得できるようになっています。

そう考えると、Fireworksを使えばいいやという気もします。しかし、お手軽に使えるWebサービスで、角丸シャドウ付きの図形なんかをさっと描いてCSSコードを取得できるのは、使い勝手がよさそうです。

作者による解説は「Open-sourcing Stylo by Alex MacCaw」で読むことができます。